fix: collection fields should refreshed after editing sync from database (#4224)

* fix: collection fields table should refreshed after editing collection field

* fix: bug

packages/core/client/src/collection-manager/Configuration/EditFieldAction.tsx

@@ -190,7 +190,7 @@ export const EditFieldAction = (props) => {
     return (
       record?.fields ||
       getCollection(record.collectionName)
-        .options.fields.filter((v) => {
+        ?.options.fields.filter((v) => {
           return ['string', 'bigInt', 'integer'].includes(v.type);
         })
         .map((k) => {

packages/core/client/src/collection-manager/Configuration/OverridingCollectionField.tsx

@@ -111,15 +111,7 @@ const getIsOverriding = (currentFields, record) => {
   return flag;
 };
 export const OverridingFieldAction = (props) => {
-  const {
-    scope,
-    getContainer,
-    item: record,
-    parentItem: parentRecord,
-    children,
-    currentCollection,
-    handleRefresh,
-  } = props;
+  const { scope, getContainer, item: record, parentItem: parentRecord, children, currentCollection } = props;
   const { target, through } = record;
   const { getInterface, getCurrentCollectionFields, getChildrenCollections, collections } =
     useCollectionManager_deprecated();
@@ -175,7 +167,6 @@ export const OverridingFieldAction = (props) => {
         await form.reset();
         await refreshCM();
         await refresh();
-        handleRefresh?.();
         ctx.setVisible(false);
       },
     };

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

@@ -57,6 +57,11 @@ const resourceActionProps = {
     },
   },
 };
+
+const CollectionFieldsProvider = (props) => {
+  return <ResourceActionProvider {...resourceActionProps}>{props.children}</ResourceActionProvider>;
+};
+
 const indentStyle = css`
   .ant-table {
     margin-left: -16px !important;
@@ -86,8 +91,6 @@ const tableContainer = css`
 `;
 
 const titlePrompt = 'Default title for each record';
-const RefreshContext = createContext(null);
-
 const CurrentFields = (props) => {
   const compile = useCompile();
   const { getInterface } = useCollectionManager_deprecated();
@@ -101,7 +104,7 @@ const CurrentFields = (props) => {
   const targetTemplate = getTemplate(template);
   const columns: TableColumnProps<any>[] = [
     {
-      dataIndex: ['uiSchema', 'rawTitle'],
+      dataIndex: ['uiSchema', 'title'],
       title: t('Field display name'),
       render: (value) => <div style={{ marginLeft: 7 }}>{compile(value)}</div>,
     },
@@ -265,11 +268,9 @@ const InheritFields = (props) => {
       dataIndex: 'actions',
       title: t('Actions'),
       render: function Render(_, record) {
-        const { handleRefresh } = useContext(RefreshContext);
         const overrideProps = {
           type: 'primary',
           currentCollection: name,
-          handleRefresh,
         };
         const viewCollectionProps = {
           type: 'primary',
@@ -297,20 +298,19 @@ const InheritFields = (props) => {
   );
 };
 
-export const CollectionFields = () => {
+const CollectionFieldsInternal = () => {
   const compile = useCompile();
   const field = useField<Field>();
   const { name, template } = useRecord();
   const {
     data: { database },
   } = useCurrentAppInfo();
-  const { getInterface, getInheritCollections, getCollection, getCurrentCollectionFields, getTemplate } =
-    useCollectionManager_deprecated();
+  const { getInterface, getInheritCollections, getCollection, getTemplate } = useCollectionManager_deprecated();
   const form = useMemo(() => createForm(), []);
   const f = useAttach(form.createArrayField({ ...field.props, basePath: '' }));
   const { t } = useTranslation();
   const collectionResource = useResourceContext();
-  const { refreshAsync } = useContext(ResourceActionContext);
+  const { refreshAsync, data } = useContext(ResourceActionContext);
   const targetTemplate = getTemplate(template);
   const inherits = getInheritCollections(name);
 
@@ -349,8 +349,7 @@ export const CollectionFields = () => {
       title: t('Actions'),
     },
   ];
-
-  const fields = getCurrentCollectionFields(name);
+  const fields = data?.data || [];
   const groups = {
     pf: [],
     association: [],
@@ -427,14 +426,7 @@ export const CollectionFields = () => {
   );
   const addProps = { type: 'primary', database };
   const syncProps = { type: 'primary' };
-  const [refresh, setRefresh] = useState(false);
-
-  const handleRefresh = () => {
-    setRefresh(!refresh);
-  };
   return (
-    <RefreshContext.Provider value={{ refresh, handleRefresh }}>
-      <ResourceActionProvider {...resourceActionProps}>
     <FormContext.Provider value={form}>
       <FieldContext.Provider value={f}>
         <Space
@@ -485,7 +477,13 @@ export const CollectionFields = () => {
         />
       </FieldContext.Provider>
     </FormContext.Provider>
-      </ResourceActionProvider>
-    </RefreshContext.Provider>
+  );
+};
+
+export const CollectionFields = () => {
+  return (
+    <CollectionFieldsProvider>
+      <CollectionFieldsInternal />
+    </CollectionFieldsProvider>
   );
 };