fix: metadata add option bug (#7258)

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/metadata/constants/event-bus-type.js

@@ -36,6 +36,7 @@ export const EVENT_BUS_TYPE = {
   EXPAND_ALL_GROUPS: 'expand_all_groups',
   LOCAL_RECORD_CHANGED: 'local_record_changed',
   LOCAL_RECORD_DETAIL_CHANGED: 'local_record_detail_changed',
+  LOCAL_COLUMN_DATA_CHANGED: 'local_column_data_changed',
   FOCUS_CANVAS: 'focus_canvas',
 
   // metadata

frontend/src/metadata/hooks/metadata-details.js

@@ -6,8 +6,8 @@ import { useMetadataStatus } from '../../hooks/metadata-status';
 import { SYSTEM_FOLDERS } from '../../constants';
 import Column from '../model/column';
 import { normalizeFields } from '../components/metadata-details/utils';
-import { CellType, EVENT_BUS_TYPE, PREDEFINED_COLUMN_KEYS, PRIVATE_COLUMN_KEY } from '../constants';
+import { CellType, EVENT_BUS_TYPE, PRIVATE_COLUMN_KEY } from '../constants';
-import { getCellValueByColumn, getOptionName, getColumnOptionNamesByIds, getColumnOptionNameById, getRecordIdFromRecord } from '../utils/cell';
+import { getCellValueByColumn, getColumnOptionNamesByIds, getColumnOptionNameById, getRecordIdFromRecord, getServerOptions } from '../utils/cell';
 import tagsAPI from '../../tag/api';
 import { getColumnByKey, getColumnOptions, getColumnOriginName } from '../utils/column';
 import ObjectUtils from '../utils/object-utils';
@@ -78,9 +78,14 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
 
   const modifyColumnData = useCallback((fieldKey, newData) => {
     let newColumns = originColumns.slice(0);
+    const oldColumn = getColumnByKey(originColumns, fieldKey);
+    let newColumn = null;
     let update;
+    if (oldColumn.type === CellType.SINGLE_SELECT) {
+      newData.options = getServerOptions({ key: fieldKey, data: newData });
+    }
     metadataAPI.modifyColumnData(repoID, fieldKey, newData).then(res => {
-      const newColumn = new Column(res.data.column);
+      newColumn = new Column(res.data.column);
       const fieldIndex = originColumns.findIndex(f => f.key === fieldKey);
       newColumns[fieldIndex] = newColumn;
       return newColumn;
@@ -89,8 +94,8 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
       const options = getColumnOptions(newField);
       const newOption = options[options.length - 1];
       update = { [fileName]: newOption.id };
-      if (!PREDEFINED_COLUMN_KEYS.includes(fieldKey) && newField.type === CellType.SINGLE_SELECT) {
+      if (newField.type === CellType.SINGLE_SELECT) {
-        update = { [fileName]: getOptionName(options, newOption.id) };
+        update = { [fileName]: getColumnOptionNameById(newField, newOption.id) };
       } else if (newField.type === CellType.MULTIPLE_SELECT) {
         const oldValue = getCellValueByColumn(record, newField) || [];
         update = { [fileName]: [...oldValue, newOption.name] };
@@ -99,6 +104,11 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
     }).then(res => {
       setOriginColumns(newColumns);
       setRecord({ ...record, ...update });
+      const eventBus = window?.sfMetadataContext?.eventBus;
+      if (eventBus) {
+        eventBus.dispatch(EVENT_BUS_TYPE.LOCAL_COLUMN_DATA_CHANGED, fieldKey, newColumn.data, oldColumn.data);
+        eventBus.dispatch(EVENT_BUS_TYPE.LOCAL_RECORD_CHANGED, { recordId: record._id }, update);
+      }
     }).catch(error => {
       const errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);

frontend/src/metadata/hooks/metadata-view.js

@@ -90,6 +90,10 @@ export const MetadataViewProvider = ({
     storeRef.current.modifyLocalRecord({ record_id: recordId, parent_dir: parentDir, file_name: fileName }, update);
   }, [storeRef]);
 
+  const updateLocalColumnData = useCallback((columnKey, newData, oldData) => {
+    storeRef.current.modifyLocalColumnData(columnKey, newData, oldData);
+  }, []);
+
   const modifyRecords = (rowIds, idRowUpdates, idOriginalRowUpdates, idOldRowData, idOriginalOldRowData, isCopyPaste = false, { success_callback, fail_callback } = {}) => {
     const isRename = storeRef.current.checkIsRenameFileOperator(rowIds, idOriginalRowUpdates);
     let newName = null;
@@ -307,6 +311,7 @@ export const MetadataViewProvider = ({
     const unsubscribeModifyColumnOrder = eventBus.subscribe(EVENT_BUS_TYPE.MODIFY_COLUMN_ORDER, modifyColumnOrder);
     const unsubscribeModifySettings = eventBus.subscribe(EVENT_BUS_TYPE.MODIFY_SETTINGS, modifySettings);
     const unsubscribeLocalRecordChanged = eventBus.subscribe(EVENT_BUS_TYPE.LOCAL_RECORD_CHANGED, updateLocalRecord);
+    const unsubscribeLocalColumnChanged = eventBus.subscribe(EVENT_BUS_TYPE.LOCAL_COLUMN_DATA_CHANGED, updateLocalColumnData);
 
     return () => {
       if (window.sfMetadataContext) {
@@ -325,6 +330,7 @@ export const MetadataViewProvider = ({
       unsubscribeModifyColumnOrder();
       unsubscribeModifySettings();
       unsubscribeLocalRecordChanged();
+      unsubscribeLocalColumnChanged();
       delayReloadDataTimer.current && clearTimeout(delayReloadDataTimer.current);
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/metadata/store/data-processor.js

@@ -267,7 +267,8 @@ class DataProcessor {
         table.view.groups = this.getGroupedRows(table, rows, groupbys, { collaborators });
         break;
       }
-      case OPERATION_TYPE.MODIFY_COLUMN_DATA: {
+      case OPERATION_TYPE.MODIFY_COLUMN_DATA:
+      case OPERATION_TYPE.MODIFY_LOCAL_COLUMN_DATA: {
         const { column_key, option_modify_type } = operation;
         const column = getColumnByKey(table.columns, column_key);
         if (!column) break;

frontend/src/metadata/store/index.js

@@ -407,6 +407,18 @@ class Store {
     this.applyOperation(operation);
   }
 
+  modifyLocalColumnData(column_key, new_data, old_data) {
+    const type = OPERATION_TYPE.MODIFY_LOCAL_COLUMN_DATA;
+    const operation = this.createOperation({
+      type,
+      column_key,
+      new_data,
+      old_data,
+      repo_id: this.repoId,
+    });
+    this.applyOperation(operation);
+  }
+
   moveRecord(row_id, target_repo_id, dirent, target_parent_path, source_parent_path, update_data, { success_callback, fail_callback }) {
     const type = OPERATION_TYPE.MOVE_RECORD;
     const operation = this.createOperation({

frontend/src/metadata/store/operations/apply.js

@@ -211,7 +211,8 @@ export default function apply(data, operation) {
       data.view = new View(data.view, data.columns);
       return data;
     }
-    case OPERATION_TYPE.MODIFY_COLUMN_DATA: {
+    case OPERATION_TYPE.MODIFY_COLUMN_DATA:
+    case OPERATION_TYPE.MODIFY_LOCAL_COLUMN_DATA: {
       const { column_key, new_data } = operation;
       const columnIndex = data.columns.findIndex(column => column.key === column_key);
       if (columnIndex !== -1) {

frontend/src/metadata/store/operations/constants.js

@@ -11,6 +11,7 @@ export const OPERATION_TYPE = {
   DELETE_COLUMN: 'delete_column',
   RENAME_COLUMN: 'rename_column',
   MODIFY_COLUMN_DATA: 'modify_column_data',
+  MODIFY_LOCAL_COLUMN_DATA: 'modify_local_column_data',
   MODIFY_COLUMN_WIDTH: 'modify_column_width',
   MODIFY_COLUMN_ORDER: 'modify_column_order',
 
@@ -59,6 +60,7 @@ export const OPERATION_ATTRIBUTES = {
   [OPERATION_TYPE.INSERT_COLUMN]: ['repo_id', 'name', 'column_type', 'column_key', 'data', 'column'],
   [OPERATION_TYPE.RENAME_COLUMN]: ['repo_id', 'column_key', 'new_name', 'old_name'],
   [OPERATION_TYPE.MODIFY_COLUMN_DATA]: ['repo_id', 'column_key', 'new_data', 'old_data', 'option_modify_type'],
+  [OPERATION_TYPE.MODIFY_LOCAL_COLUMN_DATA]: ['column_key', 'new_data', 'old_data'],
   [OPERATION_TYPE.DELETE_COLUMN]: ['repo_id', 'column_key', 'column'],
   [OPERATION_TYPE.MODIFY_COLUMN_WIDTH]: ['column_key', 'new_width', 'old_width'],
   [OPERATION_TYPE.MODIFY_COLUMN_ORDER]: ['repo_id', 'view_id', 'new_columns_keys', 'old_columns_keys'],
@@ -87,6 +89,7 @@ export const UNDO_OPERATION_TYPE = [
 export const LOCAL_APPLY_OPERATION_TYPE = [
   OPERATION_TYPE.MODIFY_COLUMN_WIDTH,
   OPERATION_TYPE.MODIFY_LOCAL_RECORD,
+  OPERATION_TYPE.MODIFY_LOCAL_COLUMN_DATA,
 ];
 
 // apply operation after exec operation on the server
@@ -112,4 +115,5 @@ export const COLUMN_OPERATION = [
   OPERATION_TYPE.MODIFY_COLUMN_DATA,
   OPERATION_TYPE.MODIFY_COLUMN_WIDTH,
   OPERATION_TYPE.MODIFY_COLUMN_ORDER,
+  OPERATION_TYPE.MODIFY_LOCAL_COLUMN_DATA,
 ];

frontend/src/metadata/store/server-operator.js

@@ -5,7 +5,7 @@ import { OPERATION_TYPE } from './operations';
 import { getColumnByKey } from '../utils/column';
 import { getRowById } from '../utils/table';
 import { checkIsDir } from '../utils/row';
-import { checkIsPredefinedOption, getFileNameFromRecord } from '../utils/cell';
+import { getFileNameFromRecord, getServerOptions } from '../utils/cell';
 import ObjectUtils from '../utils/object-utils';
 import { CellType } from '../constants';
 
@@ -142,10 +142,7 @@ class ServerOperator {
         let origin_data = new_data;
 
         if (column.type === CellType.SINGLE_SELECT) {
-          origin_data.options = Array.isArray(origin_data.options) ? origin_data.options.map(option => {
+          origin_data.options = getServerOptions({ key: column_key, data: origin_data });
-            if (checkIsPredefinedOption(column, option.id)) return { id: option.id, name: option.id };
-            return option;
-          }) : [];
         }
         window.sfMetadataContext.modifyColumnData(repo_id, column_key, origin_data).then(res => {
           callback({ operation });

frontend/src/metadata/utils/cell/column/index.js

@@ -16,6 +16,7 @@ export {
   getColumnOptionIdsByNames,
   getOptionName,
   getMultipleOptionName,
+  getServerOptions,
 } from './option';
 export {
   getCollaborator,

frontend/src/metadata/utils/cell/column/option.js

@@ -93,6 +93,16 @@ const getMultipleOptionName = (column, targetOptionsIds) => {
   return selectedOptions.map((option) => option.name).join(', ');
 };
 
+const getServerOptions = (column) => {
+  if (!column) return;
+  const options = column?.data?.options || [];
+  if (options.length === 0) return [];
+  return options.map(option => {
+    if (checkIsPredefinedOption(column, option.id)) return { id: option.id, name: option.id };
+    return option;
+  });
+};
+
 export {
   checkIsPredefinedOption,
   getOption,
@@ -101,4 +111,5 @@ export {
   getColumnOptionNamesByIds,
   getColumnOptionIdsByNames,
   getMultipleOptionName,
+  getServerOptions,
 };