Revamp the Environments UI and Refactor

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

@@ -3,29 +3,30 @@ import {
   Spin,
   Typography,
   Card,
-  Tag,
   Tabs,
   Alert,
   Descriptions,
   Menu,
   Button,
-  Breadcrumb,
+  Tag,
 } from "antd";
 import {
   LinkOutlined,
-  TeamOutlined,
+  HomeOutlined,
+  AppstoreOutlined,
+  UsergroupAddOutlined,
   EditOutlined,
-  HomeOutlined
 } from "@ant-design/icons";
 
 import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
-import { workspaceConfig } from "./config/workspace.config";
-import { userGroupsConfig } from "./config/usergroups.config";
-import DeployableItemsTab from "./components/DeployableItemsTab";
 import EditEnvironmentModal from "./components/EditEnvironmentModal";
 import { Environment } from "./types/environment.types";
 import history from "@lowcoder-ee/util/history";
-
+import WorkspacesTab from "./components/WorkspacesTab";
+import UserGroupsTab from "./components/UserGroupsTab";
+import EnvironmentHeader from "./components/EnvironmentHeader";
+import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
+import { getEnvironmentTagColor } from "./utils/environmentUtils";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
@@ -44,6 +45,7 @@ const EnvironmentDetail: React.FC = () => {
 
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
+  const [activeTab, setActiveTab] = useState('workspaces');
 
   // Handle edit menu item click
   const handleEditClick = () => {
@@ -73,15 +75,7 @@ const EnvironmentDetail: React.FC = () => {
     }
   };
 
-  // Dropdown menu for environment actions
-  const actionsMenu = (
-    <Menu>
-      <Menu.Item key="edit" icon={<EditOutlined />} onClick={handleEditClick}>
-        Edit Environment
-      </Menu.Item>
-      {/* Add more menu items here if needed */}
-    </Menu>
-  );
+
 
   if (isLoading) {
     return (
@@ -92,67 +86,81 @@ const EnvironmentDetail: React.FC = () => {
   }
 
   if (error || !environment) {
+    const errorItems = [
+      {
+        key: 'environments',
+        title: (
+          <span>
+            <HomeOutlined /> Environments
+          </span>
+        ),
+        onClick: () => history.push("/setting/environments")
+      },
+      {
+        key: 'notFound',
+        title: 'Not Found'
+      }
+    ];
+
     return (
-      <Alert
-        message="Error loading environment"
-        description={error || "Environment not found"}
-        type="error"
-        showIcon
-      />
+      <div style={{ padding: "24px", flex: 1 }}>
+        <ModernBreadcrumbs items={errorItems} />
+
+        <Card style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
+          <div style={{ textAlign: "center", padding: "40px 0" }}>
+            <Title level={3} style={{ color: "#ff4d4f" }}>
+              Environment Not Found
+            </Title>
+            <Text type="secondary" style={{ display: "block", margin: "16px 0" }}>
+              {error || "The environment you're looking for doesn't exist or you don't have permission to view it."}
+            </Text>
+            <Button 
+              type="primary"
+              onClick={() => history.push("/setting/environments")}
+              style={{ marginTop: "16px" }}
+            >
+              Return to Environments List
+            </Button>
+          </div>
+        </Card>
+      </div>
     );
   }
-
+
+  const breadcrumbItems = [
+    {
+      key: 'environments',
+      title: (
+        <span>
+          <HomeOutlined /> Environments
+        </span>
+      ),
+      onClick: () => history.push("/setting/environments")
+    },
+    {
+      key: 'currentEnvironment',
+      title: environment.environmentName
+    }
+  ];
+
   return (
     <div
       className="environment-detail-container"
       style={{ padding: "24px", flex: 1 }}
     >
-      <Breadcrumb style={{ marginBottom: "16px" }}>
-        <Breadcrumb.Item>
-          <span
-            style={{ cursor: "pointer" }}
-            onClick={() => history.push("/setting/environments")}
-          >
-            <HomeOutlined /> Environments
-          </span>
-        </Breadcrumb.Item>
-        <Breadcrumb.Item>{environment.environmentName}</Breadcrumb.Item>
-      </Breadcrumb>
+      {/* Environment Header Component */}
+      <EnvironmentHeader 
+        environment={environment} 
+        onEditClick={handleEditClick} 
+      />
 
-      {/* Header with environment name and controls */}
-      <div
-        className="environment-header"
-        style={{
-          marginBottom: "24px",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "flex-start",
-          flexWrap: "wrap",
-          gap: "16px",
-        }}
-      >
-        <div style={{ flex: "1 1 auto", minWidth: "200px" }}>
-          <Title level={3} style={{ margin: 0, wordBreak: "break-word" }}>
-            {environment.environmentName || "Unnamed Environment"}
-          </Title>
-          <Text type="secondary">ID: {environment.environmentId}</Text>
-        </div>
-        <div style={{ flexShrink: 0 }}>
-          <Button
-            icon={<EditOutlined />}
-            onClick={handleEditClick}
-            type="primary"
-          >
-            Edit Environment
-          </Button>
-        </div>
-      </div>
+
 
       {/* Basic Environment Information Card - improved responsiveness */}
       <Card
         title="Environment Overview"
-        style={{ marginBottom: "24px" }}
-        extra={environment.isMaster && <Tag color="green">Master</Tag>}
+        style={{ marginBottom: "24px", borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}
+        className="environment-overview-card"
       >
         <Descriptions
           bordered
@@ -175,22 +183,17 @@ const EnvironmentDetail: React.FC = () => {
           </Descriptions.Item>
           <Descriptions.Item label="Environment Type">
             <Tag
-              color={
-                environment.environmentType === "production"
-                  ? "red"
-                  : environment.environmentType === "testing"
-                    ? "orange"
-                    : "blue"
-              }
+              color={getEnvironmentTagColor(environment.environmentType)}
+              style={{ borderRadius: '12px' }}
             >
               {environment.environmentType}
             </Tag>
           </Descriptions.Item>
           <Descriptions.Item label="API Key Status">
             {environment.environmentApikey ? (
-              <Tag color="green">Configured</Tag>
+              <Tag color="green" style={{ borderRadius: '12px' }}>Configured</Tag>
             ) : (
-              <Tag color="red">Not Configured</Tag>
+              <Tag color="red" style={{ borderRadius: '12px' }}>Not Configured</Tag>
             )}
           </Descriptions.Item>
           <Descriptions.Item label="Master Environment">
@@ -199,33 +202,41 @@ const EnvironmentDetail: React.FC = () => {
         </Descriptions>
       </Card>
 
+      {/* Modern Breadcrumbs navigation */}
+      <ModernBreadcrumbs items={breadcrumbItems} />
       {/* Tabs for Workspaces and User Groups */}
-      <Tabs defaultActiveKey="workspaces">
-        <TabPane tab="Workspaces" key="workspaces">
-          {/* Using our new generic component with the workspace config */}
-          <DeployableItemsTab
-            environment={environment}
-            config={workspaceConfig}
-            title="Workspaces in this Environment"
-          />
+      <Tabs 
+        defaultActiveKey="workspaces"
+        activeKey={activeTab}
+        onChange={setActiveTab}
+        className="modern-tabs"
+        type="card"
+      >
+        <TabPane 
+          tab={
+            <span>
+              <AppstoreOutlined /> Workspaces
+            </span>
+          } 
+          key="workspaces"
+        >
+          {/* Using our new standalone WorkspacesTab component */}
+          <WorkspacesTab environment={environment} />
         </TabPane>
+
         <TabPane
           tab={
             <span>
-              <TeamOutlined /> User Groups
+              <UsergroupAddOutlined /> User Groups
             </span>
           }
           key="userGroups"
         >
-          {/* Using our new generic component with the user group config */}
-          <DeployableItemsTab
-            environment={environment}
-            config={userGroupsConfig}
-            title="User Groups in this Environment"
-          />
+          {/* Now using our standalone UserGroupsTab component */}
+          <UserGroupsTab environment={environment} />
         </TabPane>
       </Tabs>
-      
+
       {/* Edit Environment Modal */}
       {environment && (
         <EditEnvironmentModal