refactor workspace detail page

iamfaran · iamfaran · commit bf39d50e406b · 2025-04-12T02:58:23.000+05:00
diff --git a/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx
@@ -1,11 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, useHistory } from "react-router-dom";
 import history from "@lowcoder-ee/util/history";
-import { useWorkspaceDetail } from "./hooks/useWorkspaceDetail";
 import DataSourcesList from './components/DataSourcesList';
-
-
-
 import { 
   Spin, 
   Typography, 
@@ -20,7 +16,6 @@ import {
   Breadcrumb
 } from "antd";
 import { 
-  ReloadOutlined, 
   AppstoreOutlined, 
   DatabaseOutlined, 
   CodeOutlined,
@@ -32,7 +27,8 @@ import {
 import AppsList from './components/AppsList';
 import { useEnvironmentContext } from "./context/EnvironmentContext";
 import { useWorkspace } from "./hooks/useWorkspace";
-
+import { useWorkspaceApps } from "./hooks/useWorkspaceApps";
+import { useWorkspaceDataSources } from "./hooks/useWorkspaceDataSources";
 
 
 const { Title, Text } = Typography;
@@ -59,6 +55,22 @@ const WorkspaceDetail: React.FC = () => {
       error: workspaceError,
       refresh: refreshWorkspace
     } = useWorkspace(environment, workspaceId);
+
+    const {
+      apps,
+      loading: appsLoading,
+      error: appsError,
+      refresh: refreshApps,
+      appStats,
+    } = useWorkspaceApps(environment, workspaceId);
+
+    const {
+      dataSources,
+      loading: dataSourcesLoading,
+      error: dataSourcesError,
+      refresh: refreshDataSources,
+      dataSourceStats,
+    } = useWorkspaceDataSources(environment, workspaceId);
     
    
   
diff --git a/client/packages/lowcoder/src/pages/setting/environments/hooks/useWorkspaceApps.ts b/client/packages/lowcoder/src/pages/setting/environments/hooks/useWorkspaceApps.ts
@@ -0,0 +1,68 @@
+import { useState, useEffect, useCallback } from "react";
+import { getWorkspaceApps } from "../services/environments.service";
+import { Environment } from "../types/environment.types";
+import { App } from "../types/app.types";
+
+interface AppStats {
+  total: number;
+  published: number;
+}
+
+export const useWorkspaceApps = (
+  environment: Environment | null,
+  workspaceId: string
+) => {
+  const [apps, setApps] = useState<App[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchApps = useCallback(async () => {
+    if (!environment || !workspaceId) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const { environmentId, environmentApikey, environmentApiServiceUrl } = environment;
+
+      if (!environmentApikey || !environmentApiServiceUrl) {
+        setError("Missing API key or service URL for this environment. Apps cannot be fetched.");
+        setLoading(false);
+        return;
+      }
+
+      const data = await getWorkspaceApps(
+        workspaceId,
+        environmentApikey,
+        environmentApiServiceUrl
+      );
+
+      setApps(data);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to fetch apps"
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [environment, workspaceId]);
+
+  useEffect(() => {
+    if (environment) {
+      fetchApps();
+    }
+  }, [environment, fetchApps]);
+
+  const appStats: AppStats = {
+    total: apps.length,
+    published: apps.filter(app => app.published).length,
+  };
+
+  return {
+    apps,
+    loading,
+    error,
+    refresh: fetchApps,
+    appStats,
+  };
+};
diff --git a/client/packages/lowcoder/src/pages/setting/environments/hooks/useWorkspaceDataSources.ts b/client/packages/lowcoder/src/pages/setting/environments/hooks/useWorkspaceDataSources.ts
@@ -0,0 +1,70 @@
+import { useState, useEffect, useCallback } from "react";
+import { getWorkspaceDataSources } from "../services/environments.service";
+import { Environment } from "../types/environment.types";
+import { DataSourceWithMeta } from "../types/datasource.types";
+
+interface DataSourceStats {
+  total: number;
+  types: number; // unique types
+}
+
+export const useWorkspaceDataSources = (
+  environment: Environment | null,
+  workspaceId: string
+) => {
+  const [dataSources, setDataSources] = useState<DataSourceWithMeta[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchDataSources = useCallback(async () => {
+    if (!environment || !workspaceId) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const {  environmentApikey, environmentApiServiceUrl } = environment;
+
+      if (!environmentApikey || !environmentApiServiceUrl) {
+        setError("Missing API key or service URL. Data sources cannot be fetched.");
+        setLoading(false);
+        return;
+      }
+
+      const data = await getWorkspaceDataSources(
+        workspaceId,
+        environmentApikey,
+        environmentApiServiceUrl
+      );
+
+      setDataSources(data);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to fetch data sources"
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [environment, workspaceId]);
+
+  useEffect(() => {
+    if (environment) {
+      fetchDataSources();
+    }
+  }, [environment, fetchDataSources]);
+
+  const uniqueTypes = new Set(dataSources.map(ds => ds.datasource.type));
+
+  const dataSourceStats: DataSourceStats = {
+    total: dataSources.length,
+    types: uniqueTypes.size,
+  };
+
+  return {
+    dataSources,
+    loading,
+    error,
+    refresh: fetchDataSources,
+    dataSourceStats,
+  };
+};
