show tags as tree in table tags editor (#7797)

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

frontend/src/metadata/components/cell-editors/editor-container/popup-editor-container.js

@@ -12,6 +12,8 @@ const NOT_SUPPORT_EDITOR_COLUMN_TYPES = [
   CellType.CTIME, CellType.MTIME, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.FILE_NAME,
 ];
 
+const TAGS_EDITOR_WIDTH = 400;
+
 class PopupEditorContainer extends React.Component {
 
   static displayName = 'PopupEditorContainer';
@@ -23,6 +25,9 @@ class PopupEditorContainer extends React.Component {
     if (column.type === CellType.SINGLE_SELECT || column.type === CellType.MULTIPLE_SELECT) {
       additionalStyles = { width, height };
     }
+    if (column.type === CellType.TAGS) {
+      additionalStyles = { left: left - (TAGS_EDITOR_WIDTH - column.width) };
+    }
     this.state = {
       isInvalid: false,
       style: {
@@ -82,12 +87,23 @@ class PopupEditorContainer extends React.Component {
       readOnly,
       onPressTab,
       updateFileTags,
+      showTagsAsTree: true,
     };
 
     if (column.type === CellType.DATE) {
       editorProps.format = column?.data?.format;
     }
 
+    if (column.type === CellType.TAGS) {
+      editorProps = {
+        ...editorProps,
+        column: {
+          ...column,
+          width: TAGS_EDITOR_WIDTH,
+        }
+      };
+    }
+
     return (<Editor {...editorProps} />);
   };
 

frontend/src/metadata/components/cell-editors/tags-editor/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import CommonAddTool from '../../../../components/common-add-tool';
 import SearchInput from '../../../../components/search-input';
-import DeleteTags from './delete-tags';
 import { Utils } from '../../../../utils/utils';
 import { KeyCodes } from '../../../../constants';
 import { gettext } from '../../../../utils/constants';
@@ -95,17 +94,6 @@ const TagsEditor = forwardRef(({
     localStorage.setItem(RECENTLY_USED_TAG_IDS, JSON.stringify(newIds));
   }, [value, record, tagsData, updateFileTags, recentlyUsed, localStorage]);
 
-  const onDeleteTag = useCallback((tagId) => {
-    const newValue = value.slice(0);
-    let optionIdx = value.indexOf(tagId);
-    if (optionIdx > -1) {
-      newValue.splice(optionIdx, 1);
-    }
-    setValue(newValue);
-    const recordId = getRecordIdFromRecord(record);
-    updateFileTags([{ record_id: recordId, tags: newValue, old_tags: value }]);
-  }, [value, record, updateFileTags]);
-
   const onMenuMouseEnter = useCallback((i, id) => {
     setHighlightIndex(i);
   }, []);
@@ -306,7 +294,9 @@ const TagsEditor = forwardRef(({
     return searchedNodes;
   }, [tagsData, searchValue, searchedKeyNodeFoldedMap]);
 
-  const toggleExpandTreeNode = useCallback((nodeKey) => {
+  const toggleExpandTreeNode = useCallback((e, nodeKey) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!searchValue) {
       const updatedKeyNodeFoldedMap = { ...keyNodeFoldedMap };
       if (updatedKeyNodeFoldedMap[nodeKey]) {
@@ -448,7 +438,7 @@ const TagsEditor = forwardRef(({
               depth={getTreeNodeDepth(node)}
               hasChildren={checkTreeNodeHasChildNodes(node)}
               isFolded={!searchValue ? keyNodeFoldedMap[nodeKey] : searchedKeyNodeFoldedMap[nodeKey]}
-              onToggleExpand={() => toggleExpandTreeNode(nodeKey)}
+              onToggleExpand={(e) => toggleExpandTreeNode(e, nodeKey)}
             />
           );
         })}
@@ -458,7 +448,6 @@ const TagsEditor = forwardRef(({
 
   return (
     <div className={classnames('sf-metadata-tags-editor', { 'tags-tree-container': showTagsAsTree })} style={style} ref={editorRef}>
-      <DeleteTags value={value} tags={tagsData} onDelete={onDeleteTag} />
       <div className="sf-metadata-search-tags-container">
         <SearchInput
           placeholder={gettext('Search tag')}

frontend/src/metadata/components/cell-editors/tags-editor/tag-item/index.js

@@ -32,7 +32,7 @@ const TagItem = ({
           'sf-metadata-tags-editor-tag-container-highlight': highlight,
         })}
         style={{ paddingLeft }}
-        onMouseDown={!node ? () => onSelect(tagId) : () => {}}
+        onClick={() => onSelect(tagId)}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
@@ -45,7 +45,7 @@ const TagItem = ({
             <i className={classNames('sf3-font sf3-font-down', { 'rotate-270': isFolded })}></i>
           </span>
         )}
-        <div className="sf-metadata-tag-color-and-name" onClick={node ? () => onSelect(tagId) : () => {}}>
+        <div className="sf-metadata-tag-color-and-name">
           <div className="sf-metadata-tag-color" style={{ backgroundColor: tagColor }} />
           <div className="sf-metadata-tag-name">{tagName}</div>
         </div>