Merge pull request #1684 from iamfaran/environments

Environments Refactor + New Plugin Updates

Author: FalkWolsky

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

@@ -1,5 +1,4 @@
 import React, {useState} from "react";
-import { useParams } from "react-router-dom";
 import {
   Spin,
   Typography,
@@ -8,25 +7,18 @@ import {
   Tabs,
   Alert,
   Descriptions,
-  Dropdown,
   Menu,
   Button,
   Breadcrumb,
 } from "antd";
 import {
-  ReloadOutlined,
   LinkOutlined,
-  ClusterOutlined,
   TeamOutlined,
-  UserOutlined,
-  SyncOutlined,
   EditOutlined,
-  EllipsisOutlined,
-  MoreOutlined,
   HomeOutlined
 } from "@ant-design/icons";
 
-import { useEnvironmentContext } from "./context/EnvironmentContext";
+import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
 import { workspaceConfig } from "./config/workspace.config";
 import { userGroupsConfig } from "./config/usergroups.config";
 import DeployableItemsTab from "./components/DeployableItemsTab";
@@ -37,21 +29,18 @@ import history from "@lowcoder-ee/util/history";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
-
 /**
  * Environment Detail Page Component
  * Shows detailed information about a specific environment
  */
 const EnvironmentDetail: React.FC = () => {
-  // Get environment ID from URL params
+  // Use the SingleEnvironmentContext instead of EnvironmentContext
   const {
     environment,
-    isLoadingEnvironment,
+    isLoading,
     error,
     updateEnvironmentData
-  } = useEnvironmentContext();  
-  
-  
+  } = useSingleEnvironmentContext();  
 
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
@@ -67,11 +56,16 @@ const EnvironmentDetail: React.FC = () => {
   };
 
   // Handle save environment
-  const handleSaveEnvironment = async (environmentId: string, data: Partial<Environment>) => {
+  const handleSaveEnvironment = async (data: Partial<Environment>) => {
+    if (!environment) return;
+    
     setIsUpdating(true);
     try {
-      await updateEnvironmentData(environmentId, data);
+      // Close the modal first, before the update completes
       handleCloseModal();
+      
+      // Then update the environment data
+      await updateEnvironmentData(data);
     } catch (error) {
       console.error('Failed to update environment:', error);
     } finally {
@@ -89,7 +83,7 @@ const EnvironmentDetail: React.FC = () => {
     </Menu>
   );
 
-  if (isLoadingEnvironment) {
+  if (isLoading) {
     return (
       <div style={{ display: 'flex', justifyContent: 'center', padding: '50px' }}>
         <Spin size="large" tip="Loading environment..." />
@@ -107,6 +101,7 @@ const EnvironmentDetail: React.FC = () => {
       />
     );
   }
+  
   return (
     <div
       className="environment-detail-container"
@@ -124,7 +119,6 @@ const EnvironmentDetail: React.FC = () => {
         <Breadcrumb.Item>{environment.environmentName}</Breadcrumb.Item>
       </Breadcrumb>
 
-      {/* Header with environment name and controls */}
       {/* Header with environment name and controls */}
       <div
         className="environment-header"
@@ -231,6 +225,7 @@ const EnvironmentDetail: React.FC = () => {
           />
         </TabPane>
       </Tabs>
+      
       {/* Edit Environment Modal */}
       {environment && (
         <EditEnvironmentModal
@@ -245,4 +240,4 @@ const EnvironmentDetail: React.FC = () => {
   );
 };
 
-export default EnvironmentDetail;
+export default EnvironmentDetail;

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

@@ -1,30 +1,28 @@
+// client/packages/lowcoder/src/pages/setting/environments/Environments.tsx
 import React from "react";
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, useRouteMatch } from "react-router-dom";
 import { EnvironmentProvider } from "./context/EnvironmentContext";
+import EnvironmentRoutes from "./routes/EnvironmentRoutes";
 import EnvironmentsList from "./EnvironmentsList";
-import EnvironmentScopedRoutes from "./components/EnvironmentScopedRoutes";
-
-import {
-  ENVIRONMENT_SETTING,
-  ENVIRONMENT_DETAIL
-} from "@lowcoder-ee/constants/routesURL";
 
 /**
- * Top-level Environments component that wraps all environment-related routes
- * with the EnvironmentProvider for shared state management
+ * Top-level Environments component
+ * Provides the EnvironmentProvider at the top level
  */
 const Environments: React.FC = () => {
+  const { path } = useRouteMatch();
+  
   return (
     <EnvironmentProvider>
       <Switch>
-        {/* Route that shows the list of environments */}
-        <Route exact path={ENVIRONMENT_SETTING}>
+        {/* Environment list route */}
+        <Route exact path={path}>
           <EnvironmentsList />
         </Route>
-
-        {/* All other routes under /environments/:envId */}
-        <Route path={ENVIRONMENT_DETAIL}>
-          <EnvironmentScopedRoutes />
+        
+        {/* All routes that need a specific environment */}
+        <Route path={`${path}/:envId`}>
+          <EnvironmentRoutes />
         </Route>
       </Switch>
     </EnvironmentProvider>

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

@@ -18,7 +18,7 @@ const EnvironmentsList: React.FC = () => {
   // Use the shared context instead of a local hook
   const { 
     environments, 
-    isLoadingEnvironments, 
+    isLoading, 
     error, 
   } = useEnvironmentContext();
 
@@ -83,7 +83,7 @@ const EnvironmentsList: React.FC = () => {
       )}
 
       {/* Empty state handling */}
-      {!isLoadingEnvironments && environments.length === 0 && !error ? (
+      {!isLoading && environments.length === 0 && !error ? (
         <Empty
           description="No environments found"
           image={Empty.PRESENTED_IMAGE_SIMPLE}
@@ -92,7 +92,7 @@ const EnvironmentsList: React.FC = () => {
         /* Table component */
         <EnvironmentsTable
           environments={filteredEnvironments}
-          loading={isLoadingEnvironments}
+          loading={isLoading}
           onRowClick={handleRowClick}
         />
       )}