add_child_tags context option (#7448)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/components/sf-table/constants/context-menu.js

@@ -0,0 +1,11 @@
+export const OPERATION = {
+  EDIT_TAG: 'edit_tag',
+  SET_SUB_TAGS: 'set_sub_tags',
+  DELETE_TAG: 'delete_tag',
+  DELETE_TAGS: 'delete_tags',
+  NEW_SUB_TAG: 'new_sub_tag',
+  MERGE_TAGS: 'merge_tags',
+  ADD_CHILD_TAGS: 'add_child_tags',
+};
+
+export const POPUP_EDITOR_OPERATION_KEYS = [OPERATION.SET_SUB_TAGS, OPERATION.ADD_CHILD_TAGS];

frontend/src/components/sf-table/editors/editor-container/index.js

@@ -5,12 +5,13 @@ import PopupEditorContainer from './popup-editor-container';
 import PreviewEditorContainer from './preview-editor-container';
 import { checkIsColumnSupportPreview, checkIsPopupColumnEditor } from '../../utils/column';
 import { EDITOR_TYPE } from '../../constants/grid';
+import { POPUP_EDITOR_OPERATION_KEYS } from '../../constants/context-menu';
 
 const EditorContainer = (props) => {
-  const { column, openEditorMode } = props;
+  const { column, openEditorMode, operation } = props;
   if (!column || !isValidElement(column.editor)) return null;
 
-  if (checkIsPopupColumnEditor(column)) {
+  if (checkIsPopupColumnEditor(column) || POPUP_EDITOR_OPERATION_KEYS.includes(operation)) {
     return <PopupEditorContainer { ...props } />;
   }
   if (checkIsColumnSupportPreview(column) && openEditorMode === EDITOR_TYPE.PREVIEWER) {

frontend/src/components/sf-table/editors/editor-container/popup-editor-container.js

@@ -55,7 +55,7 @@ class PopupEditorContainer extends React.Component {
   };
 
   createEditor = () => {
-    const { column, record, height, onPressTab, editorPosition, columns, modifyColumnData, readOnly } = this.props;
+    const { column, record, height, onPressTab, editorPosition, columns, modifyColumnData, readOnly, operation } = this.props;
     const value = this.getInitialValue();
 
     let editorProps = {
@@ -78,6 +78,7 @@ class PopupEditorContainer extends React.Component {
       column,
       readOnly,
       onPressTab,
+      operation,
     };
 
     return (

frontend/src/components/sf-table/masks/interaction-masks/index.js

@@ -121,8 +121,8 @@ class InteractionMasks extends React.Component {
     });
   };
 
-  onOpenEditorEvent = (mode) => {
+  onOpenEditorEvent = (mode, op) => {
-    this.setState({ openEditorMode: mode }, () => {
+    this.setState({ openEditorMode: mode, selectedOperation: op }, () => {
       this.openEditor(null);
     });
   };
@@ -206,7 +206,6 @@ class InteractionMasks extends React.Component {
     const { isEditorEnabled, selectedPosition, openEditorMode } = this.state;
     const { columns } = this.props;
     const selectedColumn = getSelectedColumn({ selectedPosition, columns });
-
     // how to open editors?
     // 1. editor is closed
     // 2. record-cell is editable or open editor with preview mode
@@ -1031,7 +1030,7 @@ class InteractionMasks extends React.Component {
   };
 
   render() {
-    const { selectedRange, isEditorEnabled, draggedRange, selectedPosition, firstEditorKeyDown, openEditorMode, editorPosition } = this.state;
+    const { selectedRange, isEditorEnabled, draggedRange, selectedPosition, firstEditorKeyDown, openEditorMode, editorPosition, selectedOperation } = this.state;
     const { columns, isGroupView, recordGetterByIndex, scrollTop, getScrollLeft, editorPortalTarget, contextMenu } = this.props;
     const isSelectedSingleCell = selectedRangeIsSingleCell(selectedRange);
     return (
@@ -1066,6 +1065,7 @@ class InteractionMasks extends React.Component {
               onCommit={this.onCommit}
               onCommitCancel={this.onCommitCancel}
               modifyColumnData={this.props.modifyColumnData}
+              operation={selectedOperation}
               {...{
                 ...this.getSelectedDimensions(selectedPosition),
                 ...this.state.editorPosition

frontend/src/tag/views/all-tags/tags-table/context-menu-options.js

@@ -6,15 +6,7 @@ import { EVENT_BUS_TYPE } from '../../../../components/sf-table/constants/event-
 import { PRIVATE_COLUMN_KEY } from '../../../constants';
 import { TreeMetrics } from '../../../../components/sf-table/utils/tree-metrics';
 import { RecordMetrics } from '../../../../components/sf-table/utils/record-metrics';
-
+import { OPERATION } from '../../../../components/sf-table/constants/context-menu';
-const OPERATION = {
-  EDIT_TAG: 'edit_tag',
-  SET_SUB_TAGS: 'set_sub_tags',
-  DELETE_TAG: 'delete_tag',
-  DELETE_TAGS: 'delete_tags',
-  NEW_SUB_TAG: 'new_sub_tag',
-  MERGE_TAGS: 'merge_tags',
-};
 
 export const createContextMenuOptions = ({
   context,
@@ -62,6 +54,10 @@ export const createContextMenuOptions = ({
         onMergeTags(option.tagsIds, menuPosition);
         break;
       }
+      case OPERATION.ADD_CHILD_TAGS: {
+        eventBus.dispatch(EVENT_BUS_TYPE.OPEN_EDITOR, null, option.value);
+        break;
+      }
       default: {
         break;
       }
@@ -160,13 +156,18 @@ export const createContextMenuOptions = ({
         tagsIds: [tag._id],
       });
     }
-
     if (isNameColumn && canAddTag) {
-      options.push({
+      options.push(
-        label: gettext('New child tag'),
+        {
-        value: OPERATION.NEW_SUB_TAG,
+          label: gettext('New child tag'),
-        parentTagId: tag._id,
+          value: OPERATION.NEW_SUB_TAG,
-      });
+          parentTagId: tag._id,
+        },
+        {
+          label: gettext('Add child tags'),
+          value: OPERATION.ADD_CHILD_TAGS,
+        }
+      );
     }
     return options;
   };

frontend/src/tag/views/all-tags/tags-table/editors/editor-factory.js

@@ -7,8 +7,8 @@ import { PRIVATE_COLUMN_KEY } from '../../../../constants';
 export const createColumnEditor = ({ column, otherProps }) => {
   switch (column.key) {
     case PRIVATE_COLUMN_KEY.TAG_NAME: {
-      const { updateTag } = otherProps;
+      const { updateTag, addTagLinks, deleteTagLinks } = otherProps;
-      return <TagNameEditor updateTag={updateTag} />;
+      return <TagNameEditor updateTag={updateTag} addTagLinks={addTagLinks} deleteTagLinks={deleteTagLinks} />;
     }
     case PRIVATE_COLUMN_KEY.PARENT_LINKS: {
       const { addTagLinks, deleteTagLinks } = otherProps;

frontend/src/tag/views/all-tags/tags-table/editors/tag-name.js

@@ -1,10 +1,13 @@
 import React, { forwardRef, useCallback, useMemo } from 'react';
 import EditTagDialog from '../../../../components/dialog/edit-tag-dialog';
+import ChildTagsEditor from './child-tags';
 import { gettext } from '../../../../../utils/constants';
 import { getRecordIdFromRecord } from '../../../../../metadata/utils/cell';
 import { useTags } from '../../../../hooks';
+import { OPERATION } from '../../../../../components/sf-table/constants/context-menu';
+import { PRIVATE_COLUMN_KEY } from '../../../../constants';
 
-const TagNameEditor = forwardRef(({ record, updateTag, onCommitCancel, ...editorProps }, ref) => {
+const TagNameEditor = forwardRef(({ record, updateTag, onCommitCancel, operation, addTagLinks, deleteTagLinks, column, ...editorProps }, ref) => {
   const { tagsData } = useTags();
 
   const tags = useMemo(() => {
@@ -16,6 +19,12 @@ const TagNameEditor = forwardRef(({ record, updateTag, onCommitCancel, ...editor
     updateTag(recordId, updates, { success_callback, fail_callback });
   }, [record, updateTag]);
 
+  if (operation && operation === OPERATION.ADD_CHILD_TAGS) {
+    return (
+      <ChildTagsEditor {...editorProps} addTagLinks={addTagLinks} deleteTagLinks={deleteTagLinks} column={{ key: PRIVATE_COLUMN_KEY.SUB_LINKS, width: column.width }} />
+    );
+  }
+
   return (
     <EditTagDialog {...editorProps} tags={tags} title={gettext('Edit tag')} tag={record} onToggle={onCommitCancel} onSubmit={handelUpdateTag} />
   );