refactor: adjust collection categories to be loaded from the main data source and remove from global (#5602)

packages/core/client/src/collection-manager/CollectionManagerProvider.tsx

@@ -28,16 +28,7 @@ export const CollectionManagerProvider_deprecated: React.FC<CollectionManagerOpt
   );
 };
 
-const coptions = {
-  url: 'collectionCategories:list',
-  params: {
-    paginate: false,
-    sort: ['sort'],
-  },
-};
-
 export const RemoteCollectionManagerProvider = (props: any) => {
-  const api = useAPIClient();
   const dm = useDataSourceManager();
   const { refreshCH } = useCollectionHistory();
 
@@ -46,26 +37,13 @@ export const RemoteCollectionManagerProvider = (props: any) => {
   }>(() => {
     return dm.reload().then(refreshCH);
   });
-  const result = useRequest<{
-    data: any;
-  }>(coptions);
 
   const { render } = useAppSpin();
-  const refreshCategory = useCallback(async () => {
-    const { data } = await api.request(coptions);
-    result.mutate(data);
-    return data?.data || [];
-  }, [result]);
-
   if (service.loading) {
     return render();
   }
 
-  return (
+  return <CollectionManagerProvider_deprecated {...props}></CollectionManagerProvider_deprecated>;
-    <CollectionCategoriesProvider service={result} refreshCategory={refreshCategory}>
-      <CollectionManagerProvider_deprecated {...props}></CollectionManagerProvider_deprecated>
-    </CollectionCategoriesProvider>
-  );
 };
 
 export const CollectionCategoriesProvider = (props) => {

packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/CollectionMainProvider.tsx

@@ -0,0 +1,39 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { useCallback } from 'react';
+import { CollectionCategoriesProvider, useAPIClient, useRequest } from '@nocobase/client';
+import { Outlet } from 'react-router-dom';
+
+export const CollectionMainProvider = (props) => {
+  const api = useAPIClient();
+
+  const coptions = {
+    url: 'collectionCategories:list',
+    params: {
+      paginate: false,
+      sort: ['sort'],
+    },
+  };
+
+  const result = useRequest<{
+    data: any;
+  }>(coptions);
+
+  const refreshCategory = useCallback(async () => {
+    const { data } = await api.request(coptions);
+    result.mutate(data);
+    return data?.data || [];
+  }, [result]);
+  return (
+    <CollectionCategoriesProvider service={result} refreshCategory={refreshCategory}>
+      {<Outlet />}
+    </CollectionCategoriesProvider>
+  );
+};

packages/plugins/@nocobase/plugin-data-source-manager/src/client/index.tsx

@@ -19,6 +19,7 @@ import { DatabaseConnectionManagerPane } from './component/DatabaseConnectionMan
 import { MainDataSourceManager } from './component/MainDataSourceManager';
 import { DataSourcePermissionManager } from './component/PermissionManager';
 import { NAMESPACE } from './locale';
+import { CollectionMainProvider } from './component/MainDataSourceManager/CollectionMainProvider';
 
 export class PluginDataSourceManagerClient extends Plugin {
   types = new Map();
@@ -46,6 +47,7 @@ export class PluginDataSourceManagerClient extends Plugin {
     }));
 
     this.app.use(DatabaseConnectionProvider);
+
     this.app.pluginSettingsManager.add(NAMESPACE, {
       title: `{{t("Data sources", { ns: "${NAMESPACE}" })}}`,
       icon: 'ClusterOutlined',
@@ -74,6 +76,7 @@ export class PluginDataSourceManagerClient extends Plugin {
       sort: 100,
       skipAclConfigure: true,
       aclSnippet: 'pm.data-source-manager.data-source-main',
+      Component: CollectionMainProvider,
     });
     this.app.pluginSettingsManager.add(`${NAMESPACE}/main.collections`, {
       title: `{{t("Collections", { ns: "${NAMESPACE}" })}}`,

packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/GraphDrawPage.tsx

@@ -20,7 +20,6 @@ import {
   APIClientProvider,
   ApplicationContext,
   CollectionCategoriesContext,
-  CollectionCategoriesProvider,
   CurrentAppInfoContext,
   DataSourceApplicationProvider,
   SchemaComponent,
@@ -38,7 +37,7 @@ import {
 import { App, Button, ConfigProvider, Layout, Spin, Switch, Tooltip } from 'antd';
 import dagre from 'dagre';
 import lodash from 'lodash';
-import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react';
+import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks';
 import { AddCollectionAction } from './components/AddCollectionAction';
@@ -384,13 +383,15 @@ export const GraphDrawPage = React.memo(() => {
   const [collectionList, setCollectionList] = useState<any>([]);
   const [loading, setLoading] = useState(false);
   const { collections, getCollections } = useCollectionManager_deprecated();
+  const categoryCtx = useContext(CollectionCategoriesContext);
+  const categoryCtxRef = useRef<any>();
+  categoryCtxRef.current = categoryCtx;
   const dm = useDataSourceManager();
   const currentAppInfo = useCurrentAppInfo();
   const app = useApp();
   const {
     data: { database },
   } = currentAppInfo;
-  const categoryCtx = useContext(CollectionCategoriesContext);
   const scope = { ...options?.scope };
   const components = { ...options?.components };
   const saveGraphPositionAction = async (data) => {
@@ -442,7 +443,6 @@ export const GraphDrawPage = React.memo(() => {
   };
 
   const dataSource = useDataSource();
-
   const initGraphCollections = () => {
     targetGraph = new Graph({
       container: document.getElementById('container')!,
@@ -520,7 +520,7 @@ export const GraphDrawPage = React.memo(() => {
             <DataSourceApplicationProvider dataSourceManager={dm} dataSource={dataSource?.key}>
               <APIClientProvider apiClient={api}>
                 <SchemaComponentOptions inherit scope={scope} components={components}>
-                  <CollectionCategoriesProvider {...categoryCtx}>
+                  <CollectionCategoriesContext.Provider value={categoryCtxRef.current}>
                     {/* TODO: 因为画布中的卡片是一次性注册进 Graph 的，这里的 theme 是存在闭包里的，因此当主题动态变更时，并不会触发卡片的重新渲染 */}
                     <ConfigProvider theme={theme as any}>
                       <div style={{ height: 'auto' }}>
@@ -531,7 +531,7 @@ export const GraphDrawPage = React.memo(() => {
                         </App>
                       </div>
                     </ConfigProvider>
-                  </CollectionCategoriesProvider>
+                  </CollectionCategoriesContext.Provider>
                 </SchemaComponentOptions>
               </APIClientProvider>
             </DataSourceApplicationProvider>

packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/Entity.tsx

@@ -420,7 +420,7 @@ const Entity: React.FC<{
           <Badge.Ribbon
             key={index}
             color={v.color}
-            style={{ width: '103%', height: '3px', marginTop: index * 5 - 8, borderRadius: 0 }}
+            style={{ width: '103%', height: '3px', marginTop: index * 5 - 4, borderRadius: 0 }}
             placement="start"
           />
         );