Licensed vs Non-Licensed Envs

Author: iamfaran

client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useState, useEffect} from "react";
 import {
   Spin,
   Typography,
@@ -9,13 +9,18 @@ import {
   Menu,
   Button,
   Tag,
+  Result,
 } from "antd";
 import {
   LinkOutlined,
   HomeOutlined,
   AppstoreOutlined,
   UsergroupAddOutlined,
   EditOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  SyncOutlined,
 } from "@ant-design/icons";
 
 import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
@@ -95,6 +100,56 @@ const EnvironmentDetail: React.FC = () => {
     );
   }
 
+  // Check if environment is not licensed and show restriction message
+  if (environment.isLicensed === false) {
+    const getLicenseIcon = () => {
+      switch (environment.licenseStatus) {
+        case 'unlicensed':
+          return <CloseCircleOutlined style={{ color: '#ff4d4f' }} />;
+        case 'error':
+          return <ExclamationCircleOutlined style={{ color: '#faad14' }} />;
+        default:
+          return <CloseCircleOutlined style={{ color: '#ff4d4f' }} />;
+      }
+    };
+
+    return (
+      <div style={{ padding: "24px", flex: 1 }}>
+        <Result
+          icon={getLicenseIcon()}
+          title="Environment Access Restricted"
+          subTitle={`This environment is not licensed. ${environment.licenseError || 'Please check the license configuration.'}`}
+          extra={[
+            <Button 
+              type="primary" 
+              key="back"
+              onClick={() => history.push("/setting/environments")}
+            >
+              Back to Environments
+            </Button>,
+            <Button 
+              key="edit"
+              onClick={handleEditClick}
+            >
+              Edit Environment
+            </Button>
+          ]}
+        />
+        
+        {/* Still allow editing the environment to fix license issues */}
+        {environment && (
+          <EditEnvironmentModal
+            visible={isEditModalVisible}
+            environment={environment}
+            onClose={handleCloseModal}
+            onSave={handleSaveEnvironment}
+            loading={isUpdating}
+          />
+        )}
+      </div>
+    );
+  }
+
   const breadcrumbItems = [
     {
       key: 'environments',
@@ -157,6 +212,22 @@ const EnvironmentDetail: React.FC = () => {
               {environment.environmentType}
             </Tag>
           </Descriptions.Item>
+          <Descriptions.Item label="License Status">
+            {(() => {
+              switch (environment.licenseStatus) {
+                case 'checking':
+                  return <Tag icon={<SyncOutlined spin />} color="blue" style={{ borderRadius: '12px' }}>Checking...</Tag>;
+                case 'licensed':
+                  return <Tag icon={<CheckCircleOutlined />} color="green" style={{ borderRadius: '12px' }}>Licensed</Tag>;
+                case 'unlicensed':
+                  return <Tag icon={<CloseCircleOutlined />} color="red" style={{ borderRadius: '12px' }}>Not Licensed</Tag>;
+                case 'error':
+                  return <Tag icon={<ExclamationCircleOutlined />} color="orange" style={{ borderRadius: '12px' }}>License Error</Tag>;
+                default:
+                  return <Tag color="default" style={{ borderRadius: '12px' }}>Unknown</Tag>;
+              }
+            })()}
+          </Descriptions.Item>
           <Descriptions.Item label="API Key Status">
             {environment.environmentApikey ? (
               <Tag color="green" style={{ borderRadius: '12px' }}>Configured</Tag>

client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx

@@ -47,6 +47,10 @@ const EnvironmentsList: React.FC = () => {
 
   // Handle row click to navigate to environment detail
   const handleRowClick = (record: Environment) => {
+    // Prevent navigation for unlicensed environments
+    if (record.isLicensed === false) {
+      return;
+    }
     history.push(buildEnvironmentId(record.environmentId));
   };
 

client/packages/lowcoder/src/pages/setting/environments/components/CreateEnvironmentModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Modal, Form, Input, Select, Switch, Button } from 'antd';
+import { Modal, Form, Input, Select, Switch, Button, Alert } from 'antd';
 import { Environment } from '../types/environment.types';
 
 const { Option } = Select;
@@ -153,6 +153,14 @@ const CreateEnvironmentModal: React.FC<CreateEnvironmentModalProps> = ({
         >
           <Switch />
         </Form.Item>
+
+        <Alert
+          message="License Information"
+          description="After creating the environment, the system will automatically check the license status. Make sure the API service URL and API key are correctly configured for license validation."
+          type="info"
+          showIcon
+          style={{ marginTop: '16px' }}
+        />
       </Form>
     </Modal>
   );