Add Workspace and UserGroup hooks

iamfaran · iamfaran · commit 46911b0e65c7 · 2025-04-12T02:58:23.000+05:00
diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -25,6 +25,9 @@ import {
 import { useEnvironmentDetail } from "./hooks/useEnvironmentDetail";
 import WorkspacesList from "./components/WorkspacesList";
 import UserGroupsList from "./components/UserGroupsList";
+import { useEnvironmentContext } from "./context/EnvironmentContext";
+import { useEnvironmentWorkspaces } from "./hooks/useEnvironmentWorkspaces";
+import { useEnvironmentUserGroups } from "./hooks/useEnvironmentUserGroups";
 
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
@@ -35,29 +38,35 @@ const { TabPane } = Tabs;
  */
 const EnvironmentDetail: React.FC = () => {
   // Get environment ID from URL params
-  const { environmentId: id } = useParams<{ environmentId: string }>();
-
-  // Use the custom hook to handle data fetching and state management
-  // Use the custom hook to handle data fetching and state management
   const {
     environment,
-    loading,
-    error,
+    loading: envLoading,
+    error: envError,
     refresh,
+  } = useEnvironmentContext();  
+  
+  
+  const {
     workspaces,
-    workspacesLoading,
-    workspacesError,
-    refreshWorkspaces,
+    loading: workspacesLoading,
+    error: workspacesError,
+    refresh: refreshWorkspaces,
     workspaceStats,
+  } = useEnvironmentWorkspaces(environment);
+
+  const {
     userGroups,
-    userGroupsLoading,
-    userGroupsError,
-    refreshUserGroups,
-    userGroupStats
-    
-  } = useEnvironmentDetail(id);
+    loading: userGroupsLoading,
+    error: userGroupsError,
+    refresh: refreshUserGroups,
+    userGroupStats,
+  } = useEnvironmentUserGroups(environment);
+
+  // Use the custom hook to handle data fetching and state management
+  // Use the custom hook to handle data fetching and state management
+  
   // If loading, show spinner
-  if (loading) {
+  if (envLoading) {
     return (
       <div
         style={{
@@ -74,11 +83,11 @@ const EnvironmentDetail: React.FC = () => {
   }
 
   // If error, show error message
-  if (error) {
+  if (envError) {
     return (
       <Alert
         message="Error loading environment details"
-        description={error}
+        description={envError}
         type="error"
         showIcon
         style={{ margin: "24px" }}
diff --git a/client/packages/lowcoder/src/pages/setting/environments/hooks/useEnvironmentUserGroups.ts b/client/packages/lowcoder/src/pages/setting/environments/hooks/useEnvironmentUserGroups.ts
@@ -0,0 +1,81 @@
+import { useState, useEffect, useCallback } from "react";
+import { getEnvironmentUserGroups } from "../services/environments.service";
+import { Environment } from "../types/environment.types";
+import { UserGroup } from "../types/userGroup.types";
+
+interface UserGroupStats {
+  total: number;
+  totalUsers: number;
+  adminUsers: number;
+  apiKeyConfigured: boolean;
+  apiServiceUrlConfigured: boolean;
+}
+
+export const useEnvironmentUserGroups = (
+  environment: Environment | null
+) => {
+  const [userGroups, setUserGroups] = useState<UserGroup[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchUserGroups = useCallback(async () => {
+    if (!environment) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { environmentId, environmentApikey, environmentApiServiceUrl } = environment;
+
+      if (!environmentApikey) {
+        setError("No API key configured for this environment. User groups cannot be fetched.");
+        setLoading(false);
+        return;
+      }
+
+      if (!environmentApiServiceUrl) {
+        setError("No API service URL configured for this environment. User groups cannot be fetched.");
+        setLoading(false);
+        return;
+      }
+
+      const data = await getEnvironmentUserGroups(
+        environmentId,
+        environmentApikey,
+        environmentApiServiceUrl
+      );
+
+      setUserGroups(data);
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Failed to fetch user groups"
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [environment]);
+
+  useEffect(() => {
+    if (environment) {
+      fetchUserGroups();
+    }
+  }, [environment, fetchUserGroups]);
+
+  const userGroupStats: UserGroupStats = {
+    total: userGroups.length,
+    totalUsers: userGroups.reduce((sum, group) => sum + (group.stats?.userCount ?? 0), 0),
+    adminUsers: userGroups.reduce((sum, group) => sum + (group.stats?.adminUserCount ?? 0), 0),
+    apiKeyConfigured: !!environment?.environmentApikey,
+    apiServiceUrlConfigured: !!environment?.environmentApiServiceUrl,
+  };
+
+  return {
+    userGroups,
+    loading,
+    error,
+    refresh: fetchUserGroups,
+    userGroupStats,
+  };
+};
diff --git a/client/packages/lowcoder/src/pages/setting/environments/hooks/useEnvironmentWorkspaces.ts b/client/packages/lowcoder/src/pages/setting/environments/hooks/useEnvironmentWorkspaces.ts
@@ -0,0 +1,81 @@
+import { useState, useEffect, useCallback } from "react";
+import { getEnvironmentWorkspaces } from "../services/environments.service";
+import { Environment } from "../types/environment.types";
+import { Workspace } from "../types/workspace.types";
+
+interface WorkspaceStats {
+  total: number;
+  managed: number;
+  unmanaged: number;
+  apiKeyConfigured: boolean;
+  apiServiceUrlConfigured: boolean;
+}
+
+export const useEnvironmentWorkspaces = (
+  environment: Environment | null
+) => {
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchWorkspaces = useCallback(async () => {
+    if (!environment) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { environmentId, environmentApikey, environmentApiServiceUrl } = environment;
+
+      if (!environmentApikey) {
+        setError("No API key configured for this environment. Workspaces cannot be fetched.");
+        setLoading(false);
+        return;
+      }
+
+      if (!environmentApiServiceUrl) {
+        setError("No API service URL configured for this environment. Workspaces cannot be fetched.");
+        setLoading(false);
+        return;
+      }
+
+      const data = await getEnvironmentWorkspaces(
+        environmentId,
+        environmentApikey,
+        environmentApiServiceUrl
+      );
+
+      setWorkspaces(data);
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Failed to fetch workspaces"
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [environment]);
+
+  useEffect(() => {
+    if (environment) {
+      fetchWorkspaces();
+    }
+  }, [environment, fetchWorkspaces]);
+
+  const workspaceStats: WorkspaceStats = {
+    total: workspaces.length,
+    managed: 0, // logic to be added later
+    unmanaged: workspaces.length, // logic to be added later
+    apiKeyConfigured: !!environment?.environmentApikey,
+    apiServiceUrlConfigured: !!environment?.environmentApiServiceUrl,
+  };
+
+  return {
+    workspaces,
+    loading,
+    error,
+    refresh: fetchWorkspaces,
+    workspaceStats,
+  };
+};
