refactor routing structure and fix loading / duplicate network requests

lowcoder-org · FalkWolsky · May 8, 2025 · May 8, 2025 · May 8, 2025 · May 8, 2025
commit 9c4baf315b80806d19e9a1d9a5a669ef6761475f
diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/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,10 +56,12 @@ 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);
+      await updateEnvironmentData(data);
       handleCloseModal();
     } catch (error) {
       console.error('Failed to update environment:', error);
@@ -89,7 +80,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 +98,7 @@ const EnvironmentDetail: React.FC = () => {
       />
     );
   }
+
   return (
     <div
       className="environment-detail-container"
@@ -124,7 +116,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 +222,7 @@ const EnvironmentDetail: React.FC = () => {
           />
         </TabPane>
       </Tabs>
+
       {/* Edit Environment Modal */}
       {environment && (
         <EditEnvironmentModal
@@ -245,4 +237,4 @@ const EnvironmentDetail: React.FC = () => {
   );
 };
 
-export default EnvironmentDetail;
+export default EnvironmentDetail;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/Environments.tsx b/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>

diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx b/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}
         />
       )}

diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -34,7 +34,7 @@ import { queryConfig } from "./config/query.config";
 import { useDeployableItems } from "./hooks/useDeployableItems";
 import { workspaceConfig } from "./config/workspace.config";
 import { useDeployModal } from "./context/DeployModalContext";
-
+import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
@@ -49,9 +49,9 @@ const WorkspaceDetail: React.FC = () => {
     }>();
     const {
       environment,
-      isLoadingEnvironment: envLoading,
+      isLoading: envLoading,
       error: envError,
-    } = useEnvironmentContext();
+    } = useSingleEnvironmentContext();
 
     const {openDeployModal} = useDeployModal();
 

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx
@@ -4,7 +4,6 @@ import { Modal, Form, Select, Checkbox, Button, message, Spin, Input } from 'ant
 import { Environment } from '../types/environment.types';
 import { DeployableItem, BaseStats, DeployableItemConfig } from '../types/deployable-item.types';
 import { useEnvironmentContext } from '../context/EnvironmentContext';
-
 interface DeployItemModalProps<T extends DeployableItem, S extends BaseStats> {
   visible: boolean;
   item: T | null;
@@ -23,7 +22,7 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
   onSuccess
 }: DeployItemModalProps<T, S>) {
   const [form] = Form.useForm();
-  const { environments, isLoadingEnvironments } = useEnvironmentContext();
+  const { environments, isLoading } = useEnvironmentContext();
   const [deploying, setDeploying] = useState(false);
 
   useEffect(() => {
@@ -34,7 +33,7 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
 
   // Filter out source environment from target list
   const targetEnvironments = environments.filter(
-    env => env.environmentId !== sourceEnvironment.environmentId
+    (env: Environment) => env.environmentId !== sourceEnvironment.environmentId
   );
 
   const handleDeploy = async () => {
@@ -76,7 +75,7 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
       footer={null}
       destroyOnClose
     >
-      {isLoadingEnvironments ? (
+      {isLoading ? (
         <div style={{ textAlign: 'center', padding: '20px' }}>
           <Spin tip="Loading environments..." />
         </div>

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EditEnvironmentModal.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EditEnvironmentModal.tsx
@@ -8,7 +8,7 @@ interface EditEnvironmentModalProps {
   visible: boolean;
   environment: Environment | null;
   onClose: () => void;
-  onSave: (environmentId: string, data: Partial<Environment>) => Promise<void>;
+  onSave: (data: Partial<Environment>) => Promise<void>; // Updated signature
   loading?: boolean;
 }
 
@@ -45,7 +45,7 @@ const EditEnvironmentModal: React.FC<EditEnvironmentModalProps> = ({
       const values = await form.validateFields();
       setSubmitLoading(true);
 
-      await onSave(environment.environmentId, values);
+      await onSave(values); // Call with only the data parameter
       onClose();
     } catch (error) {
       if (error instanceof Error) {

diff --git a/...t/packages/lowcoder/src/pages/setting/environments/components/EnvironmentScopedRoutes.tsx b/...t/packages/lowcoder/src/pages/setting/environments/components/EnvironmentScopedRoutes.tsx
diff --git a/client/packages/lowcoder/src/pages/setting/environments/routes/EnvironmentRoutes.tsx b/client/packages/lowcoder/src/pages/setting/environments/routes/EnvironmentRoutes.tsx
@@ -0,0 +1,35 @@
+// client/packages/lowcoder/src/pages/setting/environments/routes/EnvironmentRoutes.tsx
+import React from "react";
+import { Switch, Route, useRouteMatch } from "react-router-dom";
+import { SingleEnvironmentProvider } from "../context/SingleEnvironmentContext";
+import { DeployModalProvider } from "../context/DeployModalContext";
+import EnvironmentDetail from "../EnvironmentDetail";
+import WorkspaceRoutes from "./WorkspaceRoutes";
+
+/**
+ * Routes that require a specific environment
+ * Provides the SingleEnvironmentProvider for all child routes
+ */
+const EnvironmentRoutes: React.FC = () => {
+  const { path } = useRouteMatch();
+
+  return (
+    <SingleEnvironmentProvider>
+      <DeployModalProvider>
+        <Switch>
+          {/* Environment detail route */}
+          <Route exact path={path}>
+            <EnvironmentDetail />
+          </Route>
+
+          {/* All routes that need a specific workspace */}
+          <Route path={`${path}/workspaces/:workspaceId`}>
+            <WorkspaceRoutes />
+          </Route>
+        </Switch>
+      </DeployModalProvider>
+    </SingleEnvironmentProvider>
+  );
+};
+
+export default EnvironmentRoutes;
diff --git a/client/packages/lowcoder/src/pages/setting/environments/routes/WorkspaceRoutes.tsx b/client/packages/lowcoder/src/pages/setting/environments/routes/WorkspaceRoutes.tsx
@@ -0,0 +1,28 @@
+// client/packages/lowcoder/src/pages/setting/environments/routes/WorkspaceRoutes.tsx
+import React from "react";
+import { Switch, Route, useRouteMatch } from "react-router-dom";
+import { WorkspaceProvider } from "../context/WorkspaceContext";
+import WorkspaceDetail from "../WorkspaceDetail";
+
+/**
+ * Routes that require a specific workspace
+ * Provides the WorkspaceProvider for all child routes
+ */
+const WorkspaceRoutes: React.FC = () => {
+  const { path } = useRouteMatch();
+
+  return (
+    <WorkspaceProvider>
+      <Switch>
+        {/* Workspace detail route */}
+        <Route exact path={path}>
+          <WorkspaceDetail />
+        </Route>
+
+        {/* You can add more workspace-specific routes here */}
+      </Switch>
+    </WorkspaceProvider>
+  );
+};
+
+export default WorkspaceRoutes;