May 26, 2025 · May 23, 2025 · May 23, 2025 · May 26, 2025 · May 26, 2025 · May 26, 2025
diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
 import React, {useState} from "react";
 import React, {useState, useEffect} from "react";
 import {
  Spin,
  Typography,
  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";
 import EditEnvironmentModal from "./components/EditEnvironmentModal";
 import UnlicensedEnvironmentView from "./components/UnlicensedEnvironmentView";
 import { Environment } from "./types/environment.types";
 import history from "@lowcoder-ee/util/history";
 import WorkspacesTab from "./components/WorkspacesTab";
    );
  }

  // Check if environment is not licensed and show modern UI
  if (environment.isLicensed === false) {
    return (
      <>
        <UnlicensedEnvironmentView
          environment={environment}
          onEditClick={handleEditClick}
        />

        {/* Edit Environment Modal */}
        {environment && (
          <EditEnvironmentModal
            visible={isEditModalVisible}
            environment={environment}
            onClose={handleCloseModal}
            onSave={handleSaveEnvironment}
            loading={isUpdating}
          />
        )}
      </>
    );
  }

  const breadcrumbItems = [
    {
      key: 'environments',
  return (
    <div
      className="environment-detail-container"
      style={{ padding: "24px", flex: 1 }}
      style={{ padding: "24px", flex: 1, minWidth: "1000px" }}
    >
      {/* Environment Header Component */}
      <EnvironmentHeader
              {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>
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		import React, {useState} from "react";
		import React, {useState, useEffect} from "react";
		import {
		Spin,
		Typography,
Expand All		@@ -9,17 +9,23 @@ 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";
		import EditEnvironmentModal from "./components/EditEnvironmentModal";
		import UnlicensedEnvironmentView from "./components/UnlicensedEnvironmentView";
		import { Environment } from "./types/environment.types";
		import history from "@lowcoder-ee/util/history";
		import WorkspacesTab from "./components/WorkspacesTab";
Expand DownExpand Up		@@ -95,6 +101,29 @@ const EnvironmentDetail: React.FC = () => {
		);
		}

		// Check if environment is not licensed and show modern UI
		if (environment.isLicensed === false) {
		return (
		<>
		<UnlicensedEnvironmentView
		environment={environment}
		onEditClick={handleEditClick}
		/>

		{/* Edit Environment Modal */}
		{environment && (
		<EditEnvironmentModal
		visible={isEditModalVisible}
		environment={environment}
		onClose={handleCloseModal}
		onSave={handleSaveEnvironment}
		loading={isUpdating}
		/>
		)}
		</>
		);
		}

		const breadcrumbItems = [
		{
		key: 'environments',
Expand All		@@ -114,7 +143,7 @@ const EnvironmentDetail: React.FC = () => {
		return (
		<div
		className="environment-detail-container"
		style={{ padding: "24px", flex: 1 }}
		style={{ padding: "24px", flex: 1, minWidth: "1000px" }}
		>
		{/* Environment Header Component */}
		<EnvironmentHeader
Expand DownExpand Up		@@ -157,6 +186,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>
Expand Down