add managed workspace in the workspace context

Author: iamfaran

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

@@ -1,14 +1,10 @@
-import React, { useEffect, useState } from "react";
-import { useParams, useHistory } from "react-router-dom";
+import React, { useState } from "react";
 import history from "@lowcoder-ee/util/history";
 import { 
   Spin, 
   Typography, 
   Card, 
-  Row, 
-  Col, 
   Tabs, 
-  Alert, 
   Button,
   Breadcrumb,
   Space,
@@ -26,101 +22,77 @@ import {
   ArrowLeftOutlined, 
   CloudUploadOutlined
 } from "@ant-design/icons";
-import { useEnvironmentContext } from "./context/EnvironmentContext";
+
+// Use the context hooks
+import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
+import { useWorkspaceContext } from "./context/WorkspaceContext";
+import { useDeployModal } from "./context/DeployModalContext";
+
 import DeployableItemsTab from "./components/DeployableItemsTab";
+import { workspaceConfig } from "./config/workspace.config";
 import { appsConfig } from "./config/apps.config";
 import { dataSourcesConfig } from "./config/data-sources.config";
 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;
 
-
-
 const WorkspaceDetail: React.FC = () => {
+  // Use the context hooks
+  const { environment } = useSingleEnvironmentContext();
+  const { workspace, isLoading, error, toggleManagedStatus } = useWorkspaceContext();
+  const { openDeployModal } = useDeployModal();
 
-    // Get parameters from URL
-    const { environmentId,workspaceId } = useParams<{ 
-      workspaceId: string; 
-      environmentId: string;
-    }>();
-    const {
-      environment,
-      isLoading: envLoading,
-      error: envError,
-    } = useSingleEnvironmentContext();
-
-    const {openDeployModal} = useDeployModal();
-
-     // Use our generic hook with the workspace config
-      const {
-        items: workspaces,
-        stats: workspaceStats,
-        loading: workspaceLoading,
-        error : workspaceError,
-        toggleManagedStatus,
-        refreshItems
-      } = useDeployableItems(
-        workspaceConfig,
-        environment,
-        { workspaceId } // Additional params if needed
-      );
-      
-        // Find the current workspace in the items array
-  const workspace = workspaces.find(w => w.id === workspaceId);
+  const [isToggling, setIsToggling] = useState(false);
 
+  // Handle toggle managed status
   const handleToggleManaged = async (checked: boolean) => {
     if (!workspace) return;
 
-    const success = await toggleManagedStatus(workspace, checked);
-    if (success) {
-      message.success(`Workspace is now ${checked ? 'Managed' : 'Unmanaged'}`);
-    } else {
-      message.error('Failed to change managed status');
+    setIsToggling(true);
+    try {
+      const success = await toggleManagedStatus(checked);
+      if (success) {
+        message.success(`Workspace is now ${checked ? 'Managed' : 'Unmanaged'}`);
+      } else {
+        message.error('Failed to change managed status');
+      }
+    } finally {
+      setIsToggling(false);
     }
   };
 
-    if (envLoading || workspaceLoading ) {
-      return (
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
-          <Spin size="large" tip="Loading workspace details..." />
-        </div>
-      );
-    }
+  if (isLoading) {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
+        <Spin size="large" tip="Loading workspace details..." />
+      </div>
+    );
+  }
 
-    if (!environment || !workspace) {
-      return (
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
-          <Typography.Title level={3}>Workspace not found</Typography.Title>
-        </div>  
-      ) 
-    }
+  if (error || !environment || !workspace) {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
+        <Typography.Title level={3}>
+          {error || "Workspace not found"}
+        </Typography.Title>
+      </div>  
+    );
+  }
 
-  
   return (
-    <div
-      className="workspace-detail-container"
-      style={{ padding: "24px", flex: 1 }}
-    >
+    <div className="workspace-detail-container" style={{ padding: "24px", flex: 1 }}>
       {/* Breadcrumb navigation */}
       <Breadcrumb style={{ marginBottom: "16px" }}>
         <Breadcrumb.Item>
-          <span
-            style={{ cursor: "pointer" }}
-            onClick={() => history.push("/setting/environments")}
-          >
+          <span style={{ cursor: "pointer" }} onClick={() => history.push("/setting/environments")}>
             <HomeOutlined /> Environments
           </span>
         </Breadcrumb.Item>
         <Breadcrumb.Item>
           <span
             style={{ cursor: "pointer" }}
-            onClick={() =>
-              history.push(`/setting/environments/${environmentId}`)
-            }
+            onClick={() => history.push(`/setting/environments/${environment.environmentId}`)}
           >
             <TeamOutlined /> {environment.environmentName}
           </span>
@@ -129,29 +101,14 @@ const WorkspaceDetail: React.FC = () => {
       </Breadcrumb>
 
       {/* Workspace header with details and actions */}
-      <Card
-        style={{ marginBottom: "24px" }}
-        bodyStyle={{ padding: "16px 24px" }}
-      >
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-          }}
-        >
+      <Card style={{ marginBottom: "24px" }} bodyStyle={{ padding: "16px 24px" }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           {/* Left section - Workspace info */}
           <div>
             <Title level={3} style={{ margin: 0 }}>
               {workspace.name}
             </Title>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                marginTop: "8px",
-              }}
-            >
+            <div style={{ display: "flex", alignItems: "center", marginTop: "8px" }}>
               <Text type="secondary" style={{ marginRight: "16px" }}>
                 ID: {workspace.id}
               </Text>
@@ -166,8 +123,9 @@ const WorkspaceDetail: React.FC = () => {
             <div style={{ display: "flex", alignItems: "center" }}>
               <Text style={{ marginRight: "8px" }}>Managed:</Text>
               <Switch
-                checked={workspace.managed}
+                checked={!!workspace.managed}
                 onChange={handleToggleManaged}
+                loading={isToggling}
                 checkedChildren="Yes"
                 unCheckedChildren="No"
               />
@@ -192,9 +150,7 @@ const WorkspaceDetail: React.FC = () => {
             </Tooltip>
             <Button
               icon={<ArrowLeftOutlined />}
-              onClick={() =>
-                history.push(`/setting/environments/${environmentId}`)
-              }
+              onClick={() => history.push(`/setting/environments/${environment.environmentId}`)}
             >
               Back
             </Button>
@@ -204,58 +160,35 @@ const WorkspaceDetail: React.FC = () => {
 
       {/* Tabs for Apps, Data Sources, and Queries */}
       <Tabs defaultActiveKey="apps">
-        <TabPane
-          tab={
-            <span>
-              <AppstoreOutlined /> Apps
-            </span>
-          }
-          key="apps"
-        >
+        <TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
           <DeployableItemsTab
             environment={environment}
             config={appsConfig}
-            additionalParams={{ workspaceId }}
+            additionalParams={{ workspaceId: workspace.id }}
             title="Apps in this Workspace"
           />
         </TabPane>
 
-        {/* Update the TabPane in WorkspaceDetail.tsx */}
-        <TabPane
-          tab={
-            <span>
-              <DatabaseOutlined /> Data Sources
-            </span>
-          }
-          key="dataSources"
-        >
+        <TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
           <DeployableItemsTab
             environment={environment}
             config={dataSourcesConfig}
-            additionalParams={{ workspaceId }}
+            additionalParams={{ workspaceId: workspace.id }}
             title="Data Sources in this Workspace"
           />
         </TabPane>
 
-        <TabPane
-          tab={
-            <span>
-              <CodeOutlined /> Queries
-            </span>
-          }
-          key="queries"
-        >
+        <TabPane tab={<span><CodeOutlined /> Queries</span>} key="queries">
           <DeployableItemsTab
             environment={environment}
             config={queryConfig}
-            additionalParams={{ workspaceId }}
+            additionalParams={{ workspaceId: workspace.id }}
             title="Queries in this Workspace"
           />
         </TabPane>
       </Tabs>
     </div>
   );
-  }
-
+};
 
-export default WorkspaceDetail
+export default WorkspaceDetail;

client/packages/lowcoder/src/pages/setting/environments/context/WorkspaceContext.tsx

@@ -10,8 +10,9 @@ import React, {
   import { message } from "antd";
   import { useParams } from "react-router-dom";
   import { useSingleEnvironmentContext } from "./SingleEnvironmentContext";
-  import { fetchWorkspaceById} from "../services/environments.service";
+  import { fetchWorkspaceById } from "../services/environments.service";
   import { Workspace } from "../types/workspace.types";
+  import { getManagedWorkspaces, connectManagedWorkspace, unconnectManagedWorkspace } from "../services/enterprise.service";
 
   interface WorkspaceContextState {
     // Workspace data
@@ -25,6 +26,7 @@ import React, {
 
     // Functions
     refreshWorkspace: () => Promise<void>;
+    toggleManagedStatus: (checked: boolean) => Promise<boolean>;
   }
 
   const WorkspaceContext = createContext<WorkspaceContextState | undefined>(undefined);
@@ -71,8 +73,29 @@ import React, {
       setError(null);
 
       try {
-        const data = await fetchWorkspaceById(environment.environmentId, workspaceId, environment.environmentApikey, environment.environmentApiServiceUrl!);
-        setWorkspace(data);
+        // Fetch the workspace data
+        const workspaceData = await fetchWorkspaceById(
+          environment.environmentId, 
+          workspaceId, 
+          environment.environmentApikey, 
+          environment.environmentApiServiceUrl!
+        );
+        
+        if (!workspaceData) {
+          throw new Error("Workspace not found");
+        }
+        
+        // Fetch managed workspaces to check if this one is managed
+        const managedWorkspaces = await getManagedWorkspaces(environment.environmentId);
+        
+        // Set the managed status
+        const isManaged = managedWorkspaces.some(org => org.orgGid === workspaceData.gid);
+        
+        // Update the workspace with managed status
+        setWorkspace({
+          ...workspaceData,
+          managed: isManaged
+        });
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Workspace not found or failed to load";
         setError(errorMessage);
@@ -81,6 +104,35 @@ import React, {
       }
     }, [workspaceId, environment]);
 
+    // Function to toggle managed status
+    const toggleManagedStatus = useCallback(async (checked: boolean): Promise<boolean> => {
+      if (!workspace || !environment) {
+        return false;
+      }
+      
+      try {
+        if (checked) {
+          // Connect the workspace as managed
+          await connectManagedWorkspace(
+            environment.environmentId,
+            workspace.name,
+            workspace.gid!
+          );
+        } else {
+          // Disconnect the managed workspace
+          await unconnectManagedWorkspace(workspace.gid!);
+        }
+        
+        // Update local state
+        setWorkspace(prev => prev ? { ...prev, managed: checked } : null);
+        
+        return true;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to update managed status";
+        message.error(errorMessage);
+        return false;
+      }
+    }, [workspace, environment]);
 
     // Load workspace data when the component mounts or dependencies change
     useEffect(() => {
@@ -93,6 +145,7 @@ import React, {
       isLoading,
       error,
       refreshWorkspace: fetchWorkspace,
+      toggleManagedStatus
     };
 
     return (