fix(graphical-interface): collection category does not display title (#1503)

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

@@ -1,8 +1,10 @@
 import {
   ApartmentOutlined,
   FullscreenExitOutlined,
-  FullscreenOutlined, LineHeightOutlined, MenuOutlined,
-  ShareAltOutlined
+  FullscreenOutlined,
+  LineHeightOutlined,
+  MenuOutlined,
+  ShareAltOutlined,
 } from '@ant-design/icons';
 import { Graph } from '@antv/x6';
 import '@antv/x6-react-shape';
@@ -10,13 +12,18 @@ import { css, cx } from '@emotion/css';
 import { SchemaOptionsContext } from '@formily/react';
 import {
   APIClientProvider,
-  collection, CollectionManagerContext, CollectionManagerProvider,
+  collection,
+  CollectionManagerContext,
+  CollectionManagerProvider,
   CurrentAppInfoContext,
   SchemaComponent,
-  SchemaComponentOptions, Select, useAPIClient,
+  SchemaComponentOptions,
+  Select,
+  useAPIClient,
   useCollectionManager,
   useCompile,
-  useCurrentAppInfo
+  useCurrentAppInfo,
+  CollectionCategroriesProvider,
 } from '@nocobase/client';
 import { useFullscreen } from 'ahooks';
 import { Button, Input, Layout, Menu, Popover, Switch, Tooltip } from 'antd';
@@ -28,7 +35,14 @@ import { AddCollectionAction } from './components/AddCollectionAction';
 import Entity from './components/Entity';
 import { SimpleNodeView } from './components/ViewNode';
 import { collectionListClass, graphCollectionContainerClass } from './style';
-import { formatData, getChildrenCollections, getDiffEdge, getDiffNode, getInheritCollections, useGCMTranslation } from './utils';
+import {
+  formatData,
+  getChildrenCollections,
+  getDiffEdge,
+  getDiffNode,
+  getInheritCollections,
+  useGCMTranslation,
+} from './utils';
 
 const LINE_HEIGHT = 40;
 const NODE_WIDTH = 250;
@@ -392,7 +406,6 @@ export const GraphDrawPage = React.memo(() => {
   };
   const refreshGM = async () => {
     const data = await refreshCM();
-    console.log(data);
     targetGraph.collections = data;
     targetGraph.updatePositionAction = useUpdatePositionAction;
     const currentNodes = targetGraph.getNodes();
@@ -491,15 +504,17 @@ export const GraphDrawPage = React.memo(() => {
           <CurrentAppInfoContext.Provider value={database}>
             <APIClientProvider apiClient={api}>
               <SchemaComponentOptions inherit scope={scope} components={components}>
-                <CollectionManagerProvider
-                  collections={targetGraph?.collections}
-                  refreshCM={refreshGM}
-                  interfaces={ctx.interfaces}
-                >
-                  <div style={{ height: 'auto' }}>
-                    <Entity node={node} setTargetNode={setTargetNode} targetGraph={targetGraph} />
-                  </div>
-                </CollectionManagerProvider>
+                <CollectionCategroriesProvider>
+                  <CollectionManagerProvider
+                    collections={targetGraph?.collections}
+                    refreshCM={refreshGM}
+                    interfaces={ctx.interfaces}
+                  >
+                    <div style={{ height: 'auto' }}>
+                      <Entity node={node} setTargetNode={setTargetNode} targetGraph={targetGraph} />
+                    </div>
+                  </CollectionManagerProvider>
+                </CollectionCategroriesProvider>
               </SchemaComponentOptions>
             </APIClientProvider>
           </CurrentAppInfoContext.Provider>

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

@@ -23,10 +23,11 @@ import {
   useCompile,
   useCurrentAppInfo,
   useRecord,
+  CollectionCategroriesContext,
 } from '@nocobase/client';
 import { Badge, Dropdown, Popover, Tag } from 'antd';
 import { groupBy } from 'lodash';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 import {
   useAsyncDataSource,
   useCancelAction,
@@ -59,6 +60,7 @@ const Entity: React.FC<{
   } = node;
   const database = useCurrentAppInfo();
   const collectionData = useRef();
+  const categoryData = useContext(CollectionCategroriesContext);
   collectionData.current = { ...item, title, inherits: item.inherits && new Proxy(item.inherits, {}) };
   const { category } = item;
   const compile = useCompile();
@@ -68,6 +70,12 @@ const Entity: React.FC<{
       value: collection.name,
     }));
   };
+  const loadCategories = async () => {
+    return categoryData.data.map((item: any) => ({
+      label: compile(item.name),
+      value: item.id,
+    }));
+  };
   const portsProps = {
     targetGraph,
     collectionData,
@@ -104,6 +112,7 @@ const Entity: React.FC<{
                     useUpdateCollectionActionAndRefreshCM,
                     useCancelAction,
                     loadCollections,
+                    loadCategories,
                     useAsyncDataSource,
                     Action,
                     DeleteOutlined,