refactor(metadata): update code structure (#6765)

frontend/src/components/cur-dir-path/dir-path.js

@@ -1,11 +1,11 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
+import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
+import MetadataViewName from '../../metadata/components/metadata-view-name';
 import { siteRoot, gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
 import { PRIVATE_FILE_TYPE } from '../../constants';
-import MetadataViewId2Name from '../../metadata/metadata-view-id-2-name';
 
 const propTypes = {
   currentRepoInfo: PropTypes.object.isRequired,
@@ -138,7 +138,7 @@ class DirPath extends React.Component {
         return (
           <Fragment key={index}>
             <span className="path-split">/</span>
-            <span className="path-item"><MetadataViewId2Name id={item} /></span>
+            <span className="path-item"><MetadataViewName id={item} /></span>
           </Fragment>
         );
       }

frontend/src/components/cur-dir-path/dir-tool.js

@@ -8,8 +8,8 @@ import SeahubPopover from '../common/seahub-popover';
 import ListTagPopover from '../popover/list-tag-popover';
 import ViewModes from '../../components/view-modes';
 import ReposSortMenu from '../../components/repos-sort-menu';
+import MetadataViewToolBar from '../../metadata/components/view-toolbar';
 import { PRIVATE_FILE_TYPE } from '../../constants';
-import MetadataViewToolBar from '../../metadata/metadata-view/components/view-toolbar';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,

frontend/src/components/dirent-detail/detail-container.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import LibDetail from './lib-details';
 import DirentDetail from './dirent-details';
-import ObjectUtils from '../../metadata/metadata-view/utils/object-utils';
+import ObjectUtils from '../../metadata/utils/object-utils';
 import { MetadataContext } from '../../metadata';
 
 const DetailContainer = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {

frontend/src/components/dirent-detail/detail-item/index.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Icon } from '@seafile/sf-metadata-ui-component';
-import { CellType, COLUMNS_ICON_CONFIG } from '../../../metadata/metadata-view/_basic';
+import { CellType, COLUMNS_ICON_CONFIG } from '../../../metadata/constants';
 
 import './index.css';
 
@@ -37,4 +37,3 @@ DetailItem.propTypes = {
 };
 
 export default DetailItem;
-

frontend/src/components/dirent-detail/dirent-details/dir-details.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
 import { getDirentPath } from './utils';
 import DetailItem from '../detail-item';
-import { CellType } from '../../../metadata/metadata-view/_basic';
+import { CellType } from '../../../metadata/constants';
 import { gettext } from '../../../utils/constants';
 import { MetadataDetails, useMetadata } from '../../../metadata';
 

frontend/src/components/dirent-detail/dirent-details/file-details.js

@@ -5,13 +5,13 @@ import { Formatter } from '@seafile/sf-metadata-ui-component';
 import classnames from 'classnames';
 import { getDirentPath } from './utils';
 import DetailItem from '../detail-item';
-import { CellType } from '../../../metadata/metadata-view/_basic';
+import { CellType } from '../../../metadata/constants';
 import { gettext } from '../../../utils/constants';
 import EditFileTagPopover from '../../popover/edit-filetag-popover';
 import FileTagList from '../../file-tag-list';
 import { Utils } from '../../../utils/utils';
 import { MetadataDetails, useMetadata } from '../../../metadata';
-import ObjectUtils from '../../../metadata/metadata-view/utils/object-utils';
+import ObjectUtils from '../../../metadata/utils/object-utils';
 
 const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList }) => {
   const [isEditFileTagShow, setEditFileTagShow] = useState(false);

frontend/src/components/dirent-detail/dirent-details/index.js

@@ -8,7 +8,7 @@ import Dirent from '../../../models/dirent';
 import { Detail, Header, Body } from '../detail';
 import DirDetails from './dir-details';
 import FileDetails from './file-details';
-import ObjectUtils from '../../../metadata/metadata-view/utils/object-utils';
+import ObjectUtils from '../../../metadata/utils/object-utils';
 
 import './index.css';
 

frontend/src/components/dirent-detail/embedded-file-details/file-details.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
 import DetailItem from '../detail-item';
-import { CellType } from '../../../metadata/metadata-view/_basic';
+import { CellType } from '../../../metadata/constants';
 import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import { MetadataDetails, useEnableMetadata } from '../../../metadata';

frontend/src/components/dirent-detail/lib-details.js

@@ -9,7 +9,7 @@ import { Detail, Header, Body } from './detail';
 import Repo from '../../models/repo';
 import Loading from '../loading';
 import DetailItem from './detail-item';
-import { CellType } from '../../metadata/metadata-view/_basic';
+import { CellType } from '../../metadata/constants';
 
 const LibDetail = React.memo(({ currentRepoInfo, onClose }) => {
   const [isLoading, setLoading] = useState(true);

frontend/src/metadata/api.js

@@ -1,9 +1,10 @@
 import axios from 'axios';
 import cookie from 'react-cookies';
 import { siteRoot } from '../utils/constants';
-import { VIEW_TYPE_DEFAULT_BASIC_FILTER, VIEW_TYPE_DEFAULT_SORTS } from './metadata-view/_basic';
+import { VIEW_TYPE_DEFAULT_BASIC_FILTER, VIEW_TYPE_DEFAULT_SORTS } from './constants';
 
 class MetadataManagerAPI {
+
   init({ server, username, password, token }) {
     this.server = server;
     this.username = username;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
-import { useCollaborators } from '../../../../../hooks';
+import { useCollaborators } from '../../../../hooks';
 
 import './index.css';
 

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

@@ -2,11 +2,11 @@ import React, { forwardRef, useMemo, useImperativeHandle, useCallback, useState,
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { SearchInput, Icon } from '@seafile/sf-metadata-ui-component';
-import { isFunction } from '../../../_basic';
-import { KeyCodes } from '../../../../../constants';
-import { gettext } from '../../../../../utils/constants';
-import { useCollaborators } from '../../../../hooks';
 import DeleteCollaborator from './delete-collaborator';
+import { Utils } from '../../../../utils/utils';
+import { KeyCodes } from '../../../../constants';
+import { gettext } from '../../../../utils/constants';
+import { useCollaborators } from '../../../hooks';
 
 import './index.css';
 
@@ -158,7 +158,7 @@ const CollaboratorEditor = forwardRef(({
     } else if (event.keyCode === KeyCodes.DownArrow) {
       onDownArrow(event);
     } else if (event.keyCode === KeyCodes.Tab) {
-      if (isFunction(onPressTab)) {
+      if (Utils.isFunction(onPressTab)) {
         onPressTab(event);
       }
     } else if (event.keyCode === KeyCodes.Esc) {
@@ -268,4 +268,3 @@ CollaboratorEditor.propTypes = {
 };
 
 export default CollaboratorEditor;
-

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import NormalEditorContainer from './normal-editor-container';
 import PopupEditorContainer from './popup-editor-container';
 import PreviewEditorContainer from './preview-editor-container';
-import { CellType } from '../../../_basic';
+import { CellType } from '../../../constants';
 
 const POPUP_EDITOR_COLUMN_TYPES = [
   CellType.DATE,

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

@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ClickOutside } from '@seafile/sf-metadata-ui-component';
-import { isFunction, Z_INDEX, getCellValueByColumn, PRIVATE_COLUMN_KEYS } from '../../../_basic';
-import { isCtrlKeyHeldDown, isKeyPrintable } from '../../../utils/keyboard-utils';
-import { isCellValueChanged } from '../../../utils/cell-comparer';
-import { EVENT_BUS_TYPE } from '../../../constants';
-import { getEventClassName } from '../../../utils';
 import Editor from '../editor';
-import { canEditCell } from '../../../utils/column-utils';
+import { Utils } from '../../../../utils/utils';
+import { getEventClassName } from '../../../utils/common';
+import { isCellValueChanged, getCellValueByColumn } from '../../../utils/cell';
+import { canEditCell } from '../../../utils/column';
+import { isCtrlKeyHeldDown, isKeyPrintable } from '../../../utils/keyboard-utils';
+import { EVENT_BUS_TYPE, metadataZIndexes, PRIVATE_COLUMN_KEYS } from '../../../constants';
 
 class NormalEditorContainer extends React.Component {
 
@@ -42,11 +42,11 @@ class NormalEditorContainer extends React.Component {
   }
 
   isKeyExplicitlyHandled = (key) => {
-    return isFunction(this['onPress' + key]);
+    return Utils.isFunction(this['onPress' + key]);
   };
 
   checkAndCall = (methodName, args) => {
-    if (isFunction(this[methodName])) {
+    if (Utils.isFunction(this[methodName])) {
       this[methodName](args);
     }
   };
@@ -66,7 +66,7 @@ class NormalEditorContainer extends React.Component {
     // Track which keys are currently down for shift clicking etc
     this._keysDown = this._keysDown || {};
     this._keysDown[e.keyCode] = true;
-    if (isFunction(this.props.onGridKeyDown)) {
+    if (Utils.isFunction(this.props.onGridKeyDown)) {
       this.props.onGridKeyDown(e);
     }
   };
@@ -98,7 +98,7 @@ class NormalEditorContainer extends React.Component {
       onOverrideKeyDown: this.onKeyDown,
       modifyColumnData,
     };
-    return (<Editor { ...editorProps } />);
+    return (<Editor {...editorProps} />);
   };
 
   onPressEnter = () => {
@@ -155,14 +155,14 @@ class NormalEditorContainer extends React.Component {
   };
 
   editorHasResults = () => {
-    if (isFunction(this.getEditor().hasResults)) {
+    if (Utils.isFunction(this.getEditor().hasResults)) {
       return this.getEditor().hasResults();
     }
     return false;
   };
 
   editorIsSelectOpen = () => {
-    if (isFunction(this.getEditor().isSelectOpen)) {
+    if (Utils.isFunction(this.getEditor().isSelectOpen)) {
       return this.getEditor().isSelectOpen();
     }
     return false;
@@ -211,7 +211,7 @@ class NormalEditorContainer extends React.Component {
       const original = this.getEditor().getOldValue();
       oldValue = original[Object.keys(original)[0]];
     }
-    const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnName]: oldValue } : { [columnName]: oldValue } ;
+    const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnName]: oldValue } : { [columnName]: oldValue };
     const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
     return { oldRowData, originalOldRowData };
   };
@@ -252,7 +252,7 @@ class NormalEditorContainer extends React.Component {
   };
 
   isNewValueValid = (value) => {
-    if (isFunction(this.getEditor().validate)) {
+    if (Utils.isFunction(this.getEditor().validate)) {
       const isValid = this.getEditor().validate(value);
       this.setState({ isInvalid: !isValid });
       return isValid;
@@ -315,7 +315,7 @@ class NormalEditorContainer extends React.Component {
 
   render() {
     const { width, height, left, top } = this.props;
-    const style = { position: 'absolute', height, width, left, top, zIndex: Z_INDEX.EDITOR_CONTAINER };
+    const style = { position: 'absolute', height, width, left, top, zIndex: metadataZIndexes.EDITOR_CONTAINER };
     return (
       <ClickOutside onClickOutside={this.onClickOutside}>
         <div

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

@@ -2,16 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ClickOutside } from '@seafile/sf-metadata-ui-component';
-import { CellType, isFunction, Z_INDEX, getCellValueByColumn, getColumnOptionNameById, PRIVATE_COLUMN_KEYS,
-  getColumnOptionNamesByIds,
-} from '../../../_basic';
-import { isCellValueChanged } from '../../../utils/cell-comparer';
-import { EVENT_BUS_TYPE } from '../../../constants';
 import Editor from '../editor';
-import { canEditCell, getColumnOriginName } from '../../../utils/column-utils';
+import { Utils } from '../../../../utils/utils';
+import { isCellValueChanged, getCellValueByColumn, getColumnOptionNameById, getColumnOptionNamesByIds } from '../../../utils/cell';
+import { canEditCell, getColumnOriginName } from '../../../utils/column';
+import { CellType, EVENT_BUS_TYPE, metadataZIndexes, PRIVATE_COLUMN_KEYS } from '../../../constants';
 
 const NOT_SUPPORT_EDITOR_COLUMN_TYPES = [
-  CellType.CTIME, CellType.MTIME, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.FILE_NAME
+  CellType.CTIME, CellType.MTIME, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.FILE_NAME,
 ];
 
 class PopupEditorContainer extends React.Component {
@@ -29,7 +27,7 @@ class PopupEditorContainer extends React.Component {
       isInvalid: false,
       style: {
         position: 'absolute',
-        zIndex: Z_INDEX.EDITOR_CONTAINER,
+        zIndex: metadataZIndexes.EDITOR_CONTAINER,
         left,
         top,
         ...additionalStyles
@@ -87,7 +85,7 @@ class PopupEditorContainer extends React.Component {
       editorProps.format = column?.data?.format;
     }
 
-    return (<Editor { ...editorProps } />);
+    return (<Editor {...editorProps} />);
   };
 
   getEditorContainer = () => {
@@ -183,7 +181,7 @@ class PopupEditorContainer extends React.Component {
   };
 
   isNewValueValid = (value) => {
-    if (isFunction(this.getEditor().validate)) {
+    if (Utils.isFunction(this.getEditor().validate)) {
       const isValid = this.getEditor().validate(value);
       this.setState({ isInvalid: !isValid });
       return isValid;
@@ -249,4 +247,3 @@ PopupEditorContainer.propTypes = {
 };
 
 export default PopupEditorContainer;
-

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SfCalendar } from '@seafile/sf-metadata-ui-component';
-import { CellType } from '../../_basic';
 import FileNameEditor from './file-name-editor';
 import TextEditor from './text-editor';
 import NumberEditor from './number-editor';
@@ -9,7 +8,8 @@ import SingleSelectEditor from './single-select-editor';
 import MultipleSelectEditor from './multiple-select-editor';
 import CollaboratorEditor from './collaborator-editor';
 import LongTextEditor from './long-text-editor';
-import { lang } from '../../../../utils/constants';
+import { lang } from '../../../utils/constants';
+import { CellType } from '../../constants';
 
 // eslint-disable-next-line react/display-name
 const Editor = React.forwardRef((props, ref) => {

frontend/src/metadata/components/cell-editors/file-name-editor.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ModalPortal } from '@seafile/sf-metadata-ui-component';
-import { PRIVATE_COLUMN_KEY } from '../../_basic';
-import { Utils } from '../../../../utils/utils';
-import ImageDialog from '../../../../components/dialog/image-dialog';
-import { EVENT_BUS_TYPE } from '../../../../components/common/event-bus-type';
-import { siteRoot, thumbnailSizeForOriginal } from '../../../../utils/constants';
+import { Utils } from '../../../utils/utils';
+import ImageDialog from '../../../components/dialog/image-dialog';
+import { EVENT_BUS_TYPE } from '../../../components/common/event-bus-type';
+import { siteRoot, thumbnailSizeForOriginal } from '../../../utils/constants';
+import { PRIVATE_COLUMN_KEY } from '../../constants';
 
 const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
   const [imageIndex, setImageIndex] = useState(0);

frontend/src/metadata/components/cell-editors/long-text-editor/api.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
-import { seafileAPI } from '../../../../../utils/seafile-api';
-import { Utils } from '../../../../../utils/utils';
+import { seafileAPI } from '../../../../utils/seafile-api';
+import { Utils } from '../../../../utils/utils';
 
 const getImageFileNameWithTimestamp = () => {
   var d = Date.now();

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

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { LongTextEditorDialog, getPreviewContent } from '@seafile/seafile-editor';
+import toaster from '../../../../components/toast';
 import LongtextAPI from './api';
-import { getValidLongTextValue, isLongTextValueExceedLimit, LONG_TEXT_EXCEED_LIMIT_MESSAGE,
-  LONG_TEXT_EXCEED_LIMIT_SUGGEST,
-} from '../../../_basic';
-import toaster from '../../../../../components/toast';
-import { lang, serviceURL } from '../../../../../utils/constants';
+import { getValidLongTextValue, isLongTextValueExceedLimit } from '../../../utils/column';
+import { lang, serviceURL } from '../../../../utils/constants';
+import { LONG_TEXT_EXCEED_LIMIT_MESSAGE, LONG_TEXT_EXCEED_LIMIT_SUGGEST } from '../../../constants';
 
 import './index.css';
 

frontend/src/metadata/components/cell-editors/multiple-select-editor/delete-options/index.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
-import { gettext } from '../../../../utils';
+import { gettext } from '../../../../../utils/constants';
 import { DELETED_OPTION_TIPS, DELETED_OPTION_BACKGROUND_COLOR } from '../../../../constants';
 
 import './index.css';

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

@@ -2,11 +2,12 @@ import React, { forwardRef, useMemo, useImperativeHandle, useCallback, useState,
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { SearchInput, CustomizeAddTool, Icon } from '@seafile/sf-metadata-ui-component';
-import { isFunction, getColumnOptions, getColumnOptionIdsByNames } from '../../../_basic';
-import { generateNewOption } from '../../../utils/select-utils';
-import { KeyCodes } from '../../../../../constants';
-import { gettext } from '../../../../../utils/constants';
 import DeleteOption from './delete-options';
+import { Utils } from '../../../../utils/utils';
+import { getColumnOptionIdsByNames } from '../../../utils/cell';
+import { getColumnOptions, generateNewOption } from '../../../utils/column';
+import { KeyCodes } from '../../../../constants';
+import { gettext } from '../../../../utils/constants';
 
 import './index.css';
 
@@ -160,7 +161,7 @@ const MultipleSelectEditor = forwardRef(({
     } else if (event.keyCode === KeyCodes.DownArrow) {
       onDownArrow(event);
     } else if (event.keyCode === KeyCodes.Tab) {
-      if (isFunction(onPressTab)) {
+      if (Utils.isFunction(onPressTab)) {
         onPressTab(event);
       }
     }

frontend/src/metadata/components/cell-editors/number-editor.js

@@ -1,11 +1,10 @@
 import React, { forwardRef, useMemo, useImperativeHandle, useCallback, useState, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import {
-  getNumberDisplayString, DEFAULT_NUMBER_FORMAT, formatStringToNumber, replaceNumberNotAllowInput, isMac,
-  isFunction
-} from '../../_basic';
-import { KeyCodes } from '../../../../constants';
+import { Utils } from '../../../utils/utils';
+import { getNumberDisplayString, replaceNumberNotAllowInput, formatStringToNumber } from '../../utils/cell';
+import { KeyCodes } from '../../../constants';
+import { DEFAULT_NUMBER_FORMAT } from '../../constants';
 
 const NumberEditor = forwardRef(({
   readOnly,
@@ -35,7 +34,7 @@ const NumberEditor = forwardRef(({
     const currency_symbol = format === 'custom_currency' ? data['currency_symbol'] : null;
     const initValue = event.target.value.trim();
     // Prevent the repetition of periods bug in the Chinese input method of the Windows system
-    if (!isMac() && initValue.indexOf('.。') > -1) return;
+    if (!Utils.isMac() && initValue.indexOf('.。') > -1) return;
     const newValue = replaceNumberNotAllowInput(initValue, format, currency_symbol);
     if (newValue === value) return;
     setValue(newValue);
@@ -43,7 +42,7 @@ const NumberEditor = forwardRef(({
   }, [data, value, propsOnchange]);
 
   const onBlur = useCallback(() => {
-    isFunction(onCommit) && onCommit();
+    Utils.isFunction(onCommit) && onCommit();
   }, [onCommit]);
 
   const onKeyDown = useCallback((event) => {
@@ -51,7 +50,7 @@ const NumberEditor = forwardRef(({
     if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Esc) {
       event.preventDefault();
       onBlur();
-      isFunction(selectDownCell) && selectDownCell();
+      Utils.isFunction(selectDownCell) && selectDownCell();
     } else if ((event.keyCode === KeyCodes.LeftArrow && selectionStart === 0) ||
       (event.keyCode === KeyCodes.RightArrow && selectionEnd === value.length)
     ) {

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

@@ -2,10 +2,11 @@ import React, { forwardRef, useMemo, useImperativeHandle, useCallback, useState,
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { SearchInput, CustomizeAddTool, Icon } from '@seafile/sf-metadata-ui-component';
-import { getCellValueByColumn, getColumnByKey, isFunction, getColumnOptions } from '../../../_basic';
-import { generateNewOption } from '../../../utils/select-utils';
-import { KeyCodes } from '../../../../../constants';
-import { gettext } from '../../../../../utils/constants';
+import { gettext } from '../../../../utils/constants';
+import { Utils } from '../../../../utils/utils';
+import { KeyCodes } from '../../../../constants';
+import { getCellValueByColumn } from '../../../utils/cell';
+import { getColumnByKey, getColumnOptions, generateNewOption } from '../../../utils/column';
 
 import './index.css';
 
@@ -155,7 +156,7 @@ const SingleSelectEditor = forwardRef(({
     } else if (event.keyCode === KeyCodes.DownArrow) {
       onDownArrow(event);
     } else if (event.keyCode === KeyCodes.Tab) {
-      if (isFunction(onPressTab)) {
+      if (Utils.isFunction(onPressTab)) {
         onPressTab(event);
       }
     }

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

@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
-import { KeyCodes } from '../../../../../constants';
-import { isCellValueChanged } from '../../../utils/cell-comparer';
-import { getTrimmedString } from '../../../utils';
+import { KeyCodes } from '../../../../constants';
 import { CellValueType } from './constants';
+import { getTrimmedString } from '../../../utils/common';
+import { isCellValueChanged } from '../../../utils/cell';
 
 class SimpleTextEditor extends Component {
 

frontend/src/metadata/components/cell-formatter/index.js

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
-import { useCollaborators } from '../../../hooks';
-import { Utils } from '../../../../utils/utils';
+import { useCollaborators } from '../../hooks';
+import { Utils } from '../../../utils/utils';
 
 const CellFormatter = ({ readonly, value, field, ...params }) => {
   const { collaborators, collaboratorsCache, updateCollaboratorsCache, queryUser } = useCollaborators();

frontend/src/metadata/components/data-process-setter/filter-setter.js

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import deepCopy from 'deep-copy';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
-import { getValidFilters, CommonlyUsedHotkey } from '../../_basic';
-import { gettext } from '../../../../utils/constants';
 import { FilterPopover } from '../popover';
+import { getValidFilters } from '../../utils/filter';
+import { gettext } from '../../../utils/constants';
+import { isEnter, isSpace } from '../../utils/hotkey';
 
 const FilterSetter = ({
   readOnly,
@@ -43,7 +44,7 @@ const FilterSetter = ({
 
   const onKeyDown = useCallback((event) => {
     event.stopPropagation();
-    if (CommonlyUsedHotkey.isEnter(event) || CommonlyUsedHotkey.isSpace(event)) onSetterToggle();
+    if (isEnter(event) || isSpace(event)) onSetterToggle();
   }, [onSetterToggle]);
 
   const onChange = useCallback((update) => {

frontend/src/metadata/components/data-process-setter/groupby-setter.js

@@ -2,9 +2,11 @@ import React, { useMemo, useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
-import { CommonlyUsedHotkey, getValidGroupbys, SUPPORT_GROUP_COLUMN_TYPES } from '../../_basic';
-import { gettext } from '../../utils';
 import { GroupbysPopover } from '../popover';
+import { gettext } from '../../../utils/constants';
+import { SUPPORT_GROUP_COLUMN_TYPES } from '../../constants';
+import { isEnter, isSpace } from '../../utils/hotkey';
+import { getValidGroupbys } from '../../utils/group';
 
 const GroupbySetter = ({ columns: allColumns, readOnly, isNeedSubmit, groupbys: propsGroupbys, wrapperClass, target, modifyGroupbys }) => {
   const [isShowSetter, setShowSetter] = useState(false);
@@ -31,7 +33,7 @@ const GroupbySetter = ({ columns: allColumns, readOnly, isNeedSubmit, groupbys:
 
   const onKeyDown = useCallback((event) => {
     event.stopPropagation();
-    if (CommonlyUsedHotkey.isEnter(event) || CommonlyUsedHotkey.isSpace(event)) onSetterToggle();
+    if (isEnter(event) || isSpace(event)) onSetterToggle();
   }, [onSetterToggle]);
 
   const onChange = useCallback((groupbys) => {

frontend/src/metadata/components/data-process-setter/hide-column-setter.js

@@ -2,9 +2,9 @@ import React, { useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
-import { CommonlyUsedHotkey } from '../../_basic';
-import { gettext } from '../../utils';
 import { HideColumnPopover } from '../popover';
+import { gettext } from '../../../utils/constants';
+import { isEnter, isSpace } from '../../utils/hotkey';
 
 const HideColumnSetter = ({ readOnly, columns, wrapperClass, target, hiddenColumns, modifyHiddenColumns, modifyColumnOrder }) => {
   const [isShowSetter, setShowSetter] = useState(false);
@@ -26,7 +26,7 @@ const HideColumnSetter = ({ readOnly, columns, wrapperClass, target, hiddenColum
 
   const onKeyDown = useCallback((event) => {
     event.stopPropagation();
-    if (CommonlyUsedHotkey.isEnter(event) || CommonlyUsedHotkey.isSpace(event)) onSetterToggle();
+    if (isEnter(event) || isSpace(event)) onSetterToggle();
   }, [onSetterToggle]);
 
   const onChange = useCallback((hiddenColumns) => {

frontend/src/metadata/components/data-process-setter/pre-hide-column-setter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '@seafile/sf-metadata-ui-component';
-import { gettext } from '../../utils';
+import { gettext } from '../../../utils/constants';
 
 class PreHideColumnSetter extends React.Component {
 

frontend/src/metadata/components/data-process-setter/slider-setter.js

@@ -1,8 +1,8 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Input } from 'reactstrap';
+import Icon from '../../../components/icon';
 import { EVENT_BUS_TYPE } from '../../constants';
-import Icon from '../../../../components/icon';
 
 import './slider-setter.css';
 

frontend/src/metadata/components/data-process-setter/sort-setter.js

@@ -2,10 +2,11 @@ import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
-import { getValidSorts, CommonlyUsedHotkey } from '../../_basic';
-import { gettext } from '../../utils';
 import { SortPopover } from '../popover';
+import { gettext } from '../../../utils/constants';
+import { getValidSorts } from '../../utils/sort';
 import { EVENT_BUS_TYPE } from '../../constants';
+import { isEnter, isSpace } from '../../utils/hotkey';
 
 const SortSetter = ({ target, type, sorts: propsSorts, readOnly, columns, isNeedSubmit, wrapperClass, modifySorts }) => {
   const [isShowSetter, setShowSetter] = useState(false);
@@ -40,7 +41,7 @@ const SortSetter = ({ target, type, sorts: propsSorts, readOnly, columns, isNeed
 
   const onKeyDown = useCallback((event) => {
     event.stopPropagation();
-    if (CommonlyUsedHotkey.isEnter(event) || CommonlyUsedHotkey.isSpace(event)) onSetterToggle();
+    if (isEnter(event) || isSpace(event)) onSetterToggle();
   }, [onSetterToggle]);
 
   const onChange = useCallback((update) => {

frontend/src/metadata/components/detail-editor/collaborator-editor/index.js

@@ -1,11 +1,12 @@
 import React, { useCallback, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from 'reactstrap';
-import { KeyCodes } from '../../../_basic';
-import { getEventClassName, gettext } from '../../../utils';
-import Editor from '../../cell-editor/collaborator-editor';
-import DeleteCollaborator from '../../cell-editor/collaborator-editor/delete-collaborator';
-import { useCollaborators } from '../../../../hooks';
+import Editor from '../../cell-editors/collaborator-editor';
+import DeleteCollaborator from '../../cell-editors/collaborator-editor/delete-collaborator';
+import { gettext } from '../../../../utils/constants';
+import { useCollaborators } from '../../../hooks';
+import { KeyCodes } from '../../../../constants';
+import { getEventClassName } from '../../../utils/common';
 
 import './index.css';
 

frontend/src/metadata/components/detail-editor/date-editor/index.js

@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { SfCalendar } from '@seafile/sf-metadata-ui-component';
 import PropTypes from 'prop-types';
-import { DEFAULT_DATE_FORMAT, getDateDisplayString } from '../../../_basic';
-import { gettext } from '../../../utils';
+import { getDateDisplayString } from '../../../utils/cell';
+import { DEFAULT_DATE_FORMAT } from '../../../constants';
+import { gettext } from '../../../../utils/constants';
 
 import './index.css';
 

frontend/src/metadata/components/detail-editor/index.js

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { CellType } from '../../_basic';
 import CheckboxEditor from './checkbox-editor';
 import TextEditor from './text-editor';
 import NumberEditor from './number-editor';
@@ -10,7 +9,8 @@ import CollaboratorEditor from './collaborator-editor';
 import DateEditor from './date-editor';
 import LongTextEditor from './long-text-editor';
 import RateEditor from './rate-editor';
-import { lang } from '../../../../utils/constants';
+import { lang } from '../../../utils/constants';
+import { CellType } from '../../constants';
 
 import './index.css';
 

frontend/src/metadata/components/detail-editor/long-text-editor/index.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { LongTextFormatter } from '@seafile/sf-metadata-ui-component';
-import Editor from '../../cell-editor/long-text-editor';
-import { gettext } from '../../../../../utils/constants';
+import Editor from '../../cell-editors/long-text-editor';
+import { gettext } from '../../../../utils/constants';
 
 import './index.css';
 

frontend/src/metadata/components/detail-editor/multiple-select-editor/index.js

@@ -1,10 +1,13 @@
 import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from 'reactstrap';
-import { getColumnOptionIdsByNames, getColumnOptions, KeyCodes } from '../../../_basic';
-import { getEventClassName, gettext } from '../../../utils';
-import Editor from '../../cell-editor/multiple-select-editor';
-import DeleteOptions from '../../cell-editor/multiple-select-editor/delete-options';
+import Editor from '../../cell-editors/multiple-select-editor';
+import DeleteOptions from '../../cell-editors/multiple-select-editor/delete-options';
+import { gettext } from '../../../../utils/constants';
+import { KeyCodes } from '../../../../constants';
+import { getColumnOptionIdsByNames } from '../../../utils/cell';
+import { getColumnOptions } from '../../../utils/column';
+import { getEventClassName } from '../../../utils/common';
 
 import './index.css';
 

frontend/src/metadata/components/detail-editor/number-editor/index.js

@@ -1,12 +1,11 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { KeyCodes } from '../../../../../constants';
-import { isCellValueChanged } from '../../../utils/cell-comparer';
-import { gettext } from '../../../utils';
+import { gettext } from '../../../../utils/constants';
+import { KeyCodes } from '../../../../constants';
+import { DEFAULT_NUMBER_FORMAT } from '../../../constants';
+import { Utils } from '../../../../utils/utils';
 import ObjectUtils from '../../../utils/object-utils';
-import { getNumberDisplayString, DEFAULT_NUMBER_FORMAT, formatStringToNumber,
-  replaceNumberNotAllowInput, isMac,
-} from '../../../_basic';
+import { isCellValueChanged, getNumberDisplayString, replaceNumberNotAllowInput, formatStringToNumber } from '../../../utils/cell';
 
 import './index.css';
 
@@ -27,7 +26,7 @@ const NumberEditor = React.memo(({ value: oldValue, field, onChange: onChangeAPI
     const currency_symbol = format === 'custom_currency' ? field.data['currency_symbol'] : null;
     const initValue = event.target.value.trim();
     // Prevent the repetition of periods bug in the Chinese input method of the Windows system
-    if (!isMac() && initValue.indexOf('.。') > -1) return;
+    if (!Utils.isMac() && initValue.indexOf('.。') > -1) return;
     const newValue = replaceNumberNotAllowInput(initValue, format, currency_symbol);
     if (newValue === value) return;
     setValue(newValue);

frontend/src/metadata/components/detail-editor/rate-editor/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import Editor from '../../cell-editor/rate-editor';
-import { gettext } from '../../../utils';
+import Editor from '../../cell-editors/rate-editor';
+import { gettext } from '../../../../utils/constants';
 
 import './index.css';
 

frontend/src/metadata/components/detail-editor/single-select-editor/index.js

@@ -1,9 +1,12 @@
 import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from 'reactstrap';
-import { getColumnOptions, getOption, KeyCodes } from '../../../_basic';
-import { getEventClassName, gettext } from '../../../utils';
-import Editor from '../../cell-editor/single-select-editor';
+import Editor from '../../cell-editors/single-select-editor';
+import { gettext } from '../../../../utils/constants';
+import { KeyCodes } from '../../../../constants';
+import { getOption } from '../../../utils/cell';
+import { getColumnOptions } from '../../../utils/column';
+import { getEventClassName } from '../../../utils/common';
 
 import './index.css';
 

frontend/src/metadata/components/detail-editor/text-editor/index.js

@@ -2,9 +2,10 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ClickOutside } from '@seafile/sf-metadata-ui-component';
-import { KeyCodes } from '../../../../../constants';
-import { isCellValueChanged } from '../../../utils/cell-comparer';
-import { gettext, getTrimmedString } from '../../../utils';
+import { gettext } from '../../../../utils/constants';
+import { KeyCodes } from '../../../../constants';
+import { isCellValueChanged } from '../../../utils/cell';
+import { getTrimmedString } from '../../../utils/common';
 import ObjectUtils from '../../../utils/object-utils';
 
 import './index.css';

frontend/src/metadata/components/dialog/delete-confirm-dialog/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { gettext } from '../../utils';
+import { gettext } from '../../../../utils/constants';
 
 const DeleteConfirmDialog = ({ title, content, onToggle, onSubmit }) => {
   return (

frontend/src/metadata/components/dialog/metadata-status-manage-dialog/index.js

@@ -2,12 +2,12 @@ import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
-import { gettext } from '../../utils/constants';
-import Switch from '../../components/common/switch';
-import metadataAPI from '../api';
-import { Utils } from '../../utils/utils';
-import toaster from '../../components/toast';
+import Switch from '../../../../components/common/switch';
+import toaster from '../../../../components/toast';
 import TurnOffConfirmDialog from './turn-off-confirm';
+import metadataAPI from '../../../api';
+import { Utils } from '../../../../utils/utils';
+import { gettext } from '../../../../utils/constants';
 
 import './index.css';
 

frontend/src/metadata/components/dialog/metadata-status-manage-dialog/turn-off-confirm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
-import { gettext } from '../metadata-view/utils';
+import { gettext } from '../../../../utils/constants';
 
 const TurnOffConfirmDialog = ({ toggle, submit }) => {
   return (

frontend/src/metadata/components/metadata-details/constants.js

@@ -1,4 +1,4 @@
-import { PRIVATE_COLUMN_KEY } from '../metadata-view/_basic';
+import { PRIVATE_COLUMN_KEY } from '../../constants';
 
 export const NOT_DISPLAY_COLUMN_KEYS = [
   PRIVATE_COLUMN_KEY.ID,

frontend/src/metadata/components/metadata-details/index.js

@@ -1,15 +1,17 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Utils } from '../../utils/utils';
-import metadataAPI from '../api';
-import Column from '../metadata-view/model/metadata/column';
-import { normalizeFields, getCellValueByColumn } from './utils';
-import DetailItem from '../../components/dirent-detail/detail-item';
-import toaster from '../../components/toast';
-import { gettext } from '../../utils/constants';
-import { DetailEditor, CellFormatter } from '../metadata-view';
-import { getColumnOriginName } from '../metadata-view/utils/column-utils';
-import { CellType, getColumnOptions, getOptionName, PREDEFINED_COLUMN_KEYS, getColumnOptionNamesByIds, PRIVATE_COLUMN_KEY } from '../metadata-view/_basic';
+import toaster from '../../../components/toast';
+import CellFormatter from '../cell-formatter';
+import DetailEditor from '../detail-editor';
+import DetailItem from '../../../components/dirent-detail/detail-item';
+import { Utils } from '../../../utils/utils';
+import metadataAPI from '../../api';
+import Column from '../../model/metadata/column';
+import { getCellValueByColumn, getOptionName, getColumnOptionNamesByIds } from '../../utils/cell';
+import { normalizeFields } from './utils';
+import { gettext } from '../../../utils/constants';
+import { CellType, PREDEFINED_COLUMN_KEYS, PRIVATE_COLUMN_KEY } from '../../constants';
+import { getColumnOptions, getColumnOriginName } from '../../utils/column';
 import { SYSTEM_FOLDERS } from './constants';
 
 import './index.css';

frontend/src/metadata/components/metadata-details/utils.js

@@ -1,5 +1,5 @@
-import { getColumnType } from '../metadata-view/utils/column-utils';
-import { getCellValueByColumn } from '../metadata-view/_basic';
+import { getNormalizedColumnType } from '../../utils/column';
+import { getCellValueByColumn } from '../../utils/cell';
 import { NOT_DISPLAY_COLUMN_KEYS } from './constants';
 
 export const normalizeFields = (fields) => {
@@ -9,7 +9,7 @@ export const normalizeFields = (fields) => {
     return {
       ...params,
       key,
-      type: getColumnType(key, type),
+      type: getNormalizedColumnType(key, type),
       width: 200,
     };
   }).filter(field => !NOT_DISPLAY_COLUMN_KEYS.includes(field.key));

frontend/src/metadata/components/metadata-view-name.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useMetadata } from './hooks';
+import { useMetadata } from '../hooks';
 
-const MetadataViewId2Name = ({ id }) => {
+const MetadataViewName = ({ id }) => {
   const { viewsMap } = useMetadata();
   if (!id) return null;
   const view = viewsMap[id];
@@ -10,8 +10,8 @@ const MetadataViewId2Name = ({ id }) => {
   return (<>{view.name}</>);
 };
 
-MetadataViewId2Name.propTypes = {
+MetadataViewName.propTypes = {
   id: PropTypes.string,
 };
 
-export default MetadataViewId2Name;
+export default MetadataViewName;

frontend/src/metadata/components/popover/column-popover/data/date-data/index.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { CustomizeSelect } from '@seafile/sf-metadata-ui-component';
 import { FormGroup, Label } from 'reactstrap';
-import { gettext } from '../../../../../utils';
-import { getDateDisplayString } from '../../../../../_basic';
-import Switch from '../../../../../../../components/common/switch';
+import { CustomizeSelect } from '@seafile/sf-metadata-ui-component';
+import Switch from '../../../../../../components/common/switch';
+import { gettext } from '../../../../../../utils/constants';
+import { getDateDisplayString } from '../../../../../utils/cell';
 
 import './index.css';
 

frontend/src/metadata/components/popover/column-popover/data/index.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useMemo, useState, useImperativeHandle, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { CellType } from '../../../../_basic';
+import { CellType } from '../../../../constants';
 import DateData from './date-data';
 import RateData from './rate-data';
 

frontend/src/metadata/components/popover/column-popover/data/rate-data/index.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { FormGroup, Label } from 'reactstrap';
 import classnames from 'classnames';
 import { CustomizeSelect, CustomizePopover, Icon, IconBtn } from '@seafile/sf-metadata-ui-component';
-import { gettext } from '../../../../../utils';
-import { RATE_MAX_NUMBER, RATE_COLORS, RATE_TYPES } from '../../../../../_basic';
+import { gettext } from '../../../../../../utils/constants';
+import { RATE_MAX_NUMBER, RATE_COLORS, RATE_TYPES } from '../../../../../constants';
 
 import './index.css';
 

frontend/src/metadata/components/popover/column-popover/index.js

@@ -2,16 +2,16 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, UncontrolledPopover } from 'reactstrap';
 import classnames from 'classnames';
-import { CellType, DEFAULT_DATE_FORMAT, PRIVATE_COLUMN_KEY } from '../../../_basic';
-import { gettext } from '../../../utils';
+import { gettext } from '../../../../utils/constants';
+import { useMetadataView } from '../../../hooks/metadata-view';
+import { CellType, DEFAULT_DATE_FORMAT, PRIVATE_COLUMN_KEY } from '../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
+import { getDefaultFileStatusOptions } from '../../../utils/column';
 import { ValidateColumnFormFields } from './utils';
 import { COMMON_FORM_FIELD_TYPE } from './constants';
-import { useMetadata } from '../../../hooks';
 import Name from './name';
 import Type from './type';
 import Data from './data';
-import { getDefaultFileStatusOptions } from '../../../utils/column-utils';
 
 import './index.css';
 
@@ -25,7 +25,7 @@ const ColumnPopover = ({ target, onChange }) => {
   const nameRef = useRef(null);
   const typeRef = useRef(null);
   const dataRef = useRef(null);
-  const { metadata } = useMetadata();
+  const { metadata } = useMetadataView();
 
   const popoverInnerWidth = useMemo(() => {
     return COLUMN_TYPE_POPOVER_INNER_WIDTH[column.type] || DEFAULT_POPOVER_INNER_WIDTH;

frontend/src/metadata/components/popover/column-popover/name/index.js

@@ -2,7 +2,7 @@ import React, { useState, forwardRef, useImperativeHandle, useCallback, useEffec
 import PropTypes from 'prop-types';
 import { FormGroup, FormFeedback, Input } from 'reactstrap';
 import classnames from 'classnames';
-import { gettext } from '../../../../utils';
+import { gettext } from '../../../../../utils/constants';
 
 // eslint-disable-next-line react/display-name
 const Name = forwardRef(({ readOnly, value }, ref) => {

frontend/src/metadata/components/popover/column-popover/type/column-types/index.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { Input } from 'reactstrap';
 import classnames from 'classnames';
 import { Icon } from '@seafile/sf-metadata-ui-component';
-import ModalPortal from '../../../../../../../components/modal-portal';
-import { gettext, getEventClassName } from '../../../../../utils';
+import ModalPortal from '../../../../../../components/modal-portal';
+import { gettext } from '../../../../../../utils/constants';
+import { getEventClassName } from '../../../../../utils/common';
 
 import './index.css';
 

frontend/src/metadata/components/popover/column-popover/type/index.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { FormGroup, FormFeedback, Label } from 'reactstrap';
 import classnames from 'classnames';
 import { Icon } from '@seafile/sf-metadata-ui-component';
-import { gettext } from '../../../../utils';
-import { CellType, COLUMNS_ICON_CONFIG, PRIVATE_COLUMN_KEY } from '../../../../_basic';
-import { getColumnDisplayName } from '../../../../utils/column-utils';
+import { gettext } from '../../../../../utils/constants';
+import { CellType, COLUMNS_ICON_CONFIG, PRIVATE_COLUMN_KEY } from '../../../../constants';
+import { getColumnDisplayName } from '../../../../utils/column';
 import ColumnTypes from './column-types';
 
 import './index.css';

frontend/src/metadata/components/popover/column-popover/utils.js

@@ -1,6 +1,6 @@
-import {
-  CellType, isRegExpression, getColumnByKey, getColumnByName
-} from '../../../_basic';
+import { isRegExpression } from '../../../utils/common';
+import { getColumnByKey, getColumnByName } from '../../../utils/column';
+import { CellType } from '../../../constants';
 import { COMMON_FORM_FIELD_TYPE, TEXT_FORM_FIELD, NUMBER_FORM_FIELD } from './constants';
 
 const _validateColumnName = ({ columnName, oldColumn, metadata, gettext }) => {

frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-calendar.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SfFilterCalendar } from '@seafile/sf-metadata-ui-component';
-import { getDateColumnFormat } from '../../../../utils/column-utils';
-import { lang } from '../../../../../../utils/constants';
+import { lang } from '../../../../../utils/constants';
+import { getDateColumnFormat } from '../../../../utils/column';
 
 const FilterCalendar = ({ value, filterColumn, readOnly, onChange }) => {
   const format = getDateColumnFormat(filterColumn).trim();

frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item-utils.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Icon } from '@seafile/sf-metadata-ui-component';
-import { COLUMNS_ICON_CONFIG, FILTER_PREDICATE_SHOW, FILTER_TERM_MODIFIER_SHOW } from '../../../../_basic';
-import { gettext } from '../../../../utils';
+import { gettext } from '../../../../../utils/constants';
+import { COLUMNS_ICON_CONFIG, FILTER_PREDICATE_SHOW, FILTER_TERM_MODIFIER_SHOW } from '../../../../constants';
 
 class FilterItemUtils {
 

frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item/collaborator-filter/index.js

@@ -1,8 +1,8 @@
 import React, { Fragment, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { CustomizeSelect, Icon } from '@seafile/sf-metadata-ui-component';
-import { FILTER_PREDICATE_TYPE } from '../../../../../../_basic';
-import { gettext } from '../../../../../../utils';
+import { gettext } from '../../../../../../../utils/constants';
+import { FILTER_PREDICATE_TYPE } from '../../../../../../constants';
 
 import './index.css';
 

frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item/index.js

@@ -2,26 +2,20 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { UncontrolledTooltip } from 'reactstrap';
 import { CustomizeSelect, IconBtn, SearchInput, Icon } from '@seafile/sf-metadata-ui-component';
-import {
-  CellType,
-  FILTER_PREDICATE_TYPE,
-  FILTER_TERM_MODIFIER_TYPE,
-  filterTermModifierIsWithin,
-  isDateColumn,
-  FILTER_ERR_MSG,
-  getColumnOptions as getSelectColumnOptions,
-} from '../../../../../_basic';
 import CollaboratorFilter from './collaborator-filter';
 import FilterCalendar from '../filter-calendar';
-import FilterItemUtils from '../filter-item-utils';
+import RateItem from '../../../../cell-editors/rate-editor/rate-item';
+import { gettext } from '../../../../../../utils/constants';
+import { isCheckboxColumn, isDateColumn, getColumnOptions as getSelectColumnOptions } from '../../../../../utils/column';
 import {
-  getFilterByColumn, getUpdatedFilterBySelectSingle, getUpdatedFilterBySelectMultiple,
-  getUpdatedFilterByCreator, getUpdatedFilterByCollaborator, getColumnOptions, getUpdatedFilterByPredicate,
-} from '../../../../../utils/filters-utils';
-import { isCheckboxColumn } from '../../../../../utils/column-utils';
-import { gettext } from '../../../../../utils';
-import { DELETED_OPTION_BACKGROUND_COLOR, DELETED_OPTION_TIPS } from '../../../../../constants';
-import RateItem from '../../../../cell-editor/rate-editor/rate-item';
+  getFilterByColumn, getUpdatedFilterBySelectSingle, getUpdatedFilterBySelectMultiple, getUpdatedFilterByCreator, getUpdatedFilterByCollaborator,
+  getColumnOptions, getUpdatedFilterByPredicate,
+} from '../../../../../utils/filter';
+import {
+  CellType, DELETED_OPTION_BACKGROUND_COLOR, DELETED_OPTION_TIPS, FILTER_PREDICATE_TYPE, FILTER_TERM_MODIFIER_TYPE, FILTER_ERR_MSG,
+  filterTermModifierIsWithin,
+} from '../../../../../constants';
+import FilterItemUtils from '../filter-item-utils';
 
 import './index.css';