add managed/unmanged workspaces

Author: iamfaran

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import { useParams } from "react-router-dom";
 import {
   Spin,
@@ -13,6 +13,7 @@ import {
   Button,
   Statistic,
   Divider,
+  message
 } from "antd";
 import {
   ReloadOutlined,
@@ -29,6 +30,8 @@ import { useEnvironmentWorkspaces } from "./hooks/useEnvironmentWorkspaces";
 import { useEnvironmentUserGroups } from "./hooks/useEnvironmentUserGroups";
 import { useManagedWorkspaces } from "./hooks/enterprise/useManagedWorkspaces";
 import { getMergedWorkspaces } from "./utils/getMergedWorkspaces";
+import { Workspace } from "./types/workspace.types";
+import { connectManagedWorkspace, unconnectManagedWorkspace } from "./services/enterprise.service";
 
 
 const { Title, Text } = Typography;
@@ -38,6 +41,12 @@ const { TabPane } = Tabs;
  * Environment Detail Page Component
  * Shows detailed information about a specific environment
  */
+
+type WorkspaceStats = {
+  total: number;
+  managed: number;
+  unmanaged: number;
+};
 const EnvironmentDetail: React.FC = () => {
   // Get environment ID from URL params
   const {
@@ -72,6 +81,22 @@ const EnvironmentDetail: React.FC = () => {
 
   // Use the custom hook to handle data fetching and state management
   // Use the custom hook to handle data fetching and state management
+
+  const [mergedWorkspaces, setMergedWorkspaces] = useState<Workspace[]>([]);
+  const [workspaceStats, setWorkspaceStats] = useState<WorkspaceStats>({
+    total: 0,
+    managed: 0,
+    unmanaged: 0,
+  });
+  
+
+  React.useEffect(() => {
+    if (workspaces && managedWorkspaces) {
+      const { merged, stats } = getMergedWorkspaces(workspaces, managedWorkspaces);
+      setMergedWorkspaces(merged);
+      setWorkspaceStats(stats);
+    }
+  }, [workspaces, managedWorkspaces]);
 
   // If loading, show spinner
   if (envLoading) {
@@ -121,7 +146,39 @@ const EnvironmentDetail: React.FC = () => {
     );
   }
 
-  const { merged, stats: workspaceStats } = getMergedWorkspaces(workspaces, managedWorkspaces);
+  const { merged, stats: initialStats } = getMergedWorkspaces(workspaces, managedWorkspaces);
+ 
+
+
+  const handleToggleManaged = async (workspace: Workspace, checked: boolean) => {
+    try {
+      console.log("WORKSPACE", workspace);
+      if (checked) {
+        await connectManagedWorkspace(environment.environmentId, workspace.name, workspace.gid!);
+      } else {
+        await unconnectManagedWorkspace(workspace.gid!);
+      }
+  
+      // Optimistically update the local state
+      const updatedList = mergedWorkspaces.map((w) =>
+        w.id === workspace.id ? { ...w, managed: checked } : w
+      );
+  
+      const updatedManagedCount = updatedList.filter((w) => w.managed).length;
+  
+      setMergedWorkspaces(updatedList);
+      setWorkspaceStats({
+        total: updatedList.length,
+        managed: updatedManagedCount,
+        unmanaged: updatedList.length - updatedManagedCount,
+      });
+  
+      message.success(`${workspace.name} is now ${checked ? 'Managed' : 'Unmanaged'}`);
+    } catch (err) {
+      message.error(`Failed to toggle managed state for ${workspace.name}`);
+    }
+  };
+  
 
   return (
     <div className="environment-detail-container" style={{ padding: "24px" }}>
@@ -297,10 +354,11 @@ const EnvironmentDetail: React.FC = () => {
 
             {/* Workspaces List */}
             <WorkspacesList
-              workspaces={merged}
+              workspaces={mergedWorkspaces} // ⬅️ Use local state!
               loading={workspacesLoading && !workspacesError}
               error={workspacesError}
               environmentId={environment.environmentId}
+              onToggleManaged={handleToggleManaged} // ⬅️ Add this to enable toggles
             />
           </Card>
         </TabPane>

client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, Tag, Empty, Spin } from 'antd';
+import { Table, Tag, Empty, Spin, Switch, Space } from 'antd';
 import { Workspace } from '../types/workspace.types';
 import history from '@lowcoder-ee/util/history';
 import { buildEnvironmentWorkspaceId } from '@lowcoder-ee/constants/routesURL';
@@ -9,18 +9,18 @@ interface WorkspacesListProps {
   loading: boolean;
   error?: string | null;
   environmentId: string;
+  onToggleManaged?: (workspace: Workspace, checked: boolean) => void;
+  refreshing?: boolean;
 }
 
-/**
- * Component to display a list of workspaces in a table
- */
 const WorkspacesList: React.FC<WorkspacesListProps> = ({
   workspaces,
   loading,
   error,
   environmentId,
+  onToggleManaged,
+  refreshing = false,
 }) => {
-  // Format timestamp to date string
   const formatDate = (timestamp?: number): string => {
     if (!timestamp) return 'N/A';
     const date = new Date(timestamp);
@@ -31,7 +31,6 @@ const WorkspacesList: React.FC<WorkspacesListProps> = ({
     history.push(`${buildEnvironmentWorkspaceId(environmentId, workspace.id)}`);
   };
 
-  // Table columns definition
   const columns = [
     {
       title: 'Name',
@@ -48,9 +47,7 @@ const WorkspacesList: React.FC<WorkspacesListProps> = ({
       title: 'Role',
       dataIndex: 'role',
       key: 'role',
-      render: (role: string) => (
-        <span>{role}</span>
-      ),
+      render: (role: string) => <span>{role}</span>,
     },
     {
       title: 'Creation Date',
@@ -71,14 +68,27 @@ const WorkspacesList: React.FC<WorkspacesListProps> = ({
       title: 'Managed',
       key: 'managed',
       render: (record: Workspace) => (
-        <Tag color={record.managed ? 'green' : 'default'}>
-          {record.managed ? 'Managed' : 'Unmanaged'}
-        </Tag>
+        <Space>
+          <Tag color={record.managed ? 'green' : 'default'}>
+            {record.managed ? 'Managed' : 'Unmanaged'}
+          </Tag>
+          {onToggleManaged && (
+            <Switch
+              size="small"
+              checked={record.managed}
+              loading={refreshing}
+              onClick={(checked,e) => {
+                e.stopPropagation(); // ✅ THIS STOPS the row from being triggered
+                onToggleManaged(record, checked);
+              }}
+              onChange={() => {}}
+            />
+          )}
+        </Space>
       ),
     },
   ];
 
-  // If loading, show spinner
   if (loading) {
     return (
       <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
@@ -87,7 +97,6 @@ const WorkspacesList: React.FC<WorkspacesListProps> = ({
     );
   }
 
-  // If no workspaces or error, show empty state
   if (!workspaces || workspaces.length === 0 || error) {
     return (
       <Empty
@@ -106,7 +115,7 @@ const WorkspacesList: React.FC<WorkspacesListProps> = ({
       size="middle"
       onRow={(record) => ({
         onClick: () => handleRowClick(record),
-        style: { cursor: 'pointer' }, // Add pointer cursor to indicate clickable rows
+        style: { cursor: 'pointer' },
       })}
     />
   );

client/packages/lowcoder/src/pages/setting/environments/services/enterprise.service.ts

@@ -41,11 +41,11 @@ export async function getManagedWorkspaces(
 
 export async function connectManagedWorkspace(
   environmentId: string,
-  apiServiceUrl: string,
   orgName: string,
-  orgTags: string[] = []
+  org_gid: string, // ✅ not optional
+  orgTags: string[] = [],
 ) {
-  if (!environmentId || !apiServiceUrl || !orgName) {
+  if (!environmentId || !orgName || !org_gid) {
     throw new Error("Missing required params to connect org");
   }
 
@@ -54,9 +54,10 @@ export async function connectManagedWorkspace(
       environment_id: environmentId,
       org_name: orgName,
       org_tags: orgTags,
+      org_gid,
     };
 
-    const res = await axios.post(`${apiServiceUrl}/api/plugins/enterprise/org`, payload);
+    const res = await axios.post(`/api/plugins/enterprise/org`, payload);
     return res.data;
   } catch (err) {
     const errorMsg = err instanceof Error ? err.message : "Failed to connect org";
@@ -67,27 +68,24 @@ export async function connectManagedWorkspace(
 
 
 
-
-
-
 /**
  * Fetch workspaces for a specific environment
  * @param apiServiceUrl - API service URL for the environment
  * @param orgId - ID of the workspace
  * 
  */
-export async function unconnectManagedWorkspace(
-  apiServiceUrl: string,
-  orgId: string
-) {
-  if (!apiServiceUrl || !orgId) {
-    throw new Error("Missing apiServiceUrl or orgId");
+export async function unconnectManagedWorkspace(orgGid: string) {
+  if (!orgGid) {
+    throw new Error("Missing orgGid to unconnect workspace");
   }
 
   try {
-    await axios.delete(`${apiServiceUrl}/api/plugins/enterprise/org/${orgId}`);
+    await axios.delete(`/api/plugins/enterprise/org`, {
+      params: { orgGid }, // ✅ pass as query param
+    });
   } catch (err) {
-    const errorMsg = err instanceof Error ? err.message : "Failed to unconnect org";
+    const errorMsg =
+      err instanceof Error ? err.message : "Failed to unconnect org";
     message.error(errorMsg);
     throw err;
   }