refactor(metadata): remove ui-component

frontend/package.json

@@ -14,7 +14,6 @@
     "@seafile/sdoc-editor": "2.0.11",
     "@seafile/seafile-calendar": "0.0.28",
     "@seafile/seafile-editor": "2.0.0",
-    "@seafile/sf-metadata-ui-component": "^1.0.2",
     "@seafile/stldraw-editor": "1.0.0",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/codemirror-themes": "^4.23.5",

frontend/src/components/centered-loading/index.css

@@ -0,0 +1,7 @@
+.sf-centered-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

frontend/src/components/centered-loading/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Loading from '../loading';
+
+import './index.css';
+
+function CenteredLoading(props) {
+  return (
+    <div className={classnames('sf-centered-loading', props.className)}>
+      <Loading />
+    </div>
+  );
+}
+
+CenteredLoading.propTypes = {
+  className: PropTypes.string,
+};
+
+export default CenteredLoading;

frontend/src/css/common-add-tool.css → frontend/src/components/common-add-tool/index.css

@@ -1,26 +1,30 @@
 .add-item-btn {
-  cursor: pointer;
   display: flex;
   align-items: center;
+  height: 40px;
   font-size: 14px;
   font-weight: 500;
   border-top: 1px solid #dedede;
   background: #fff;
+  padding: 0 1rem;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
   position: relative;
-  height: 30px;
-  padding: 0 10px;
-  overflow: hidden;
 }
 
 .add-item-btn:hover {
-  background-color: #f5f5f5;
+  cursor: pointer;
+  background: #f5f5f5;
+}
+
+.add-item-btn .seafile-multicolor-icon-add-table {
+  margin-right: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  transform: none;
+  fill: #666;
 }
 
-.add-item-btn .add-new-option {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.add-item-btn .description {
+  flex: 1;
 }

frontend/src/components/common/common-add-tool.js → frontend/src/components/common-add-tool/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import '../../css/common-add-tool.css';
+import Icon from '../icon';
 
-function CommonAddTool(props) {
-  const { callBack, footerName, className, addIconClassName } = props;
+import './index.css';
+
+function CommonAddTool({ callBack, footerName, className, addIconClassName, hideIcon, style }) {
   return (
-    <div className={`add-item-btn ${className ? className : ''}`} onClick={(e) => {callBack(e);}}>
-      <span className={`sf3-font sf3-font-enlarge mr-2 ${addIconClassName || ''}`}></span>
-      <span className='add-new-option' title={footerName}>{footerName}</span>
+    <div className={`add-item-btn ${className ? className : ''}`} style={style} onClick={(e) => {callBack(e);}}>
+      {!hideIcon && <Icon symbol="add-table" className={addIconClassName} />}
+      <span className="description text-truncate">{footerName}</span>
     </div>
   );
 }

frontend/src/components/common/group-select/select-option-group.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import SearchInput from '../search-input';
+import SearchInput from '../../search-input';
+import ClickOutside from '../../click-outside';
 import Option from './option';
 import KeyCodes from '../../../constants/keyCodes';
-import ClickOutside from './click-outside';
 
 import './select-option-group.css';
 

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

@@ -6,9 +6,8 @@ import DirOperationToolbar from '../../components/toolbar/dir-operation-toolbar'
 import MetadataViewName from '../../metadata/components/metadata-view-name';
 import TagViewName from '../../tag/components/tag-view-name';
 import { siteRoot, gettext } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
+import { debounce, Utils } from '../../utils/utils';
 import { PRIVATE_FILE_TYPE } from '../../constants';
-import { debounce } from '../../metadata/utils/common';
 import { EVENT_BUS_TYPE } from '../../metadata/constants';
 import { ALL_TAGS_ID } from '../../tag/constants';
 

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

@@ -4,7 +4,7 @@ import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap
 import { gettext, enableFileTags } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TextTranslation from '../../utils/text-translation';
-import SeahubPopover from '../common/seahub-popover';
+import CustomizePopover from '../customize-popover';
 import ListTagPopover from '../popover/list-tag-popover';
 import ViewModes from '../../components/view-modes';
 import SortMenu from '../../components/sort-menu';
@@ -164,20 +164,19 @@ class DirTool extends React.Component {
           }
         </div>
         {this.state.isRepoTagDialogOpen &&
-        <SeahubPopover
+        <CustomizePopover
           popoverClassName="list-tag-popover"
           target="cur-folder-more-op-toggle"
-          hideSeahubPopover={this.hidePopover}
-          hideSeahubPopoverWithEsc={this.hidePopover}
-          canHideSeahubPopover={true}
+          hidePopover={this.hidePopover}
+          hidePopoverWithEsc={this.hidePopover}
           boundariesElement={document.body}
           placement={'bottom-end'}
         >
           <ListTagPopover
             repoID={repoID}
             onListTagCancel={this.toggleCancel}
           />
-        </SeahubPopover>
+        </CustomizePopover>
         }
       </React.Fragment>
     );