delete useless codes (#6218)

* delete useless codes

* remove useless codes

frontend/src/pages/wiki2/main-panel.js

@@ -8,7 +8,6 @@ import { Utils } from '../../utils/utils';
 import Account from '../../components/common/account';
 import WikiTopNav from './top-nav';
 import { getCurrentPageConfig } from './utils';
-import WikiExternalOperations from './wiki-external-operations';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -67,7 +66,7 @@ class MainPanel extends Component {
   };
 
   render() {
-    const { permission, pathExist, isDataLoading, isViewFile, config, onAddWikiPage } = this.props;
+    const { permission, pathExist, isDataLoading, isViewFile, config } = this.props;
     const { currentPageConfig = {}, } = this.state;
     const isViewingFile = pathExist && !isDataLoading && isViewFile;
     const isReadOnly = !(permission === 'rw');

frontend/src/pages/wiki2/view-structure/folders/folder-operation-dropdownmenu.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-// import DeleteTip from '@/common/delete-tip';
 import { gettext } from '../../../../utils/constants';
 import Icon from '../../../../components/icon';
 
@@ -20,10 +19,7 @@ export default class FolderOperationDropdownMenu extends Component {
     super(props);
     this.state = {
       isMenuShow: false,
-      showTip: false,
     };
-    // this.isDesktop = checkDesktop();
-    this.position = {};
   }
 
   onDropdownToggle = (e) => {
@@ -43,26 +39,6 @@ export default class FolderOperationDropdownMenu extends Component {
     this.props.onDeleteFolder(this.props.folderId);
   };
 
-  // onClickDelete = (e) => {
-  //   if (this.isDesktop) {
-  //     e.stopPropagation();
-  //     const { top, left } = this.iconRef.getBoundingClientRect();
-  //     this.position = {
-  //       top: top,
-  //       left: left,
-  //     };
-  //     setTimeout(() => {
-  //       this.setState({ showTip: true });
-  //     }, 100);
-  //   } else {
-  //     this.onDeleteFolder(e);
-  //   }
-  // };
-
-  closeTip = () => {
-    this.setState({ showTip: false });
-  };
-
   render() {
     return (
       <>
@@ -79,7 +55,6 @@ export default class FolderOperationDropdownMenu extends Component {
             flip={false}
             modifiers={{ preventOverflow: { boundariesElement: document.body } }}
             positionFixed={true}
-            style={{ zIndex: 1051 }}
           >
             <DropdownItem onClick={this.props.onToggleAddView.bind(this, this.props.folderId)}>
               <Icon symbol={'file'}/>
@@ -89,23 +64,12 @@ export default class FolderOperationDropdownMenu extends Component {
               <Icon symbol={'edit'}/>
               <span className="item-text">{gettext('Modify name')}</span>
             </DropdownItem>
-            <DropdownItem
-              // onMouseDown={this.onClickDelete}
-              onMouseDown={this.onDeleteFolder}
-            >
+            <DropdownItem onMouseDown={this.onDeleteFolder}>
               <Icon symbol={'delete'}/>
               <span className="item-text">{gettext('Delete folder')}</span>
             </DropdownItem>
           </DropdownMenu>
         </Dropdown>
-        {/* {this.isDesktop && this.state.showTip &&
-          <DeleteTip
-            position={this.position}
-            toggle={this.closeTip}
-            onDelete={this.onDeleteFolder}
-            deleteTip={gettext('Are_you_sure_you_want_to_delete_this_folder_and_the_pages_in_it')}
-          />
-        } */}
       </>
     );
   }

frontend/src/pages/wiki2/view-structure/views/drop-target-top-view.js

@@ -1,81 +0,0 @@
-import React from 'react';
-import { DropTarget } from 'react-dnd';
-import PropTypes from 'prop-types';
-
-const DropTargetTopView = (Placeholder) => class extends React.Component {
-
-  static propTypes = {
-    connectDropTarget: PropTypes.func.isRequired,
-    isOver: PropTypes.bool,
-    canDrop: PropTypes.bool,
-    draggedPage: PropTypes.object,
-    targetFolderId: PropTypes.string,
-    targetViewId: PropTypes.string,
-    onMoveView: PropTypes.func,
-  };
-
-  render() {
-    const { connectDropTarget, isOver, canDrop, draggedPage } = this.props;
-    const { mode } = draggedPage || {};
-    if (mode !== 'view') {
-      return null;
-    }
-    const style = {
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      zIndex: canDrop ? 1 : -1,
-    };
-    return connectDropTarget(
-      <div style={style}>
-        <Placeholder />
-        {isOver && canDrop && <div className="view-drop-target" />}
-      </div>
-    );
-  }
-};
-
-const target = {
-  drop(props, monitor) {
-    const sourceRow = monitor.getItem();
-    if (sourceRow.mode !== 'view') {
-      return;
-    }
-    const { targetFolderId, targetViewId } = props;
-    const sourceFolderId = sourceRow.folderId;
-    const draggedViewId = sourceRow.data.id;
-    if (draggedViewId !== targetViewId) {
-      props.onMoveView({
-        moved_view_id: draggedViewId,
-        target_view_id: targetViewId,
-        source_view_folder_id: sourceFolderId,
-        target_view_folder_id: targetFolderId,
-        move_position: 'move_above'
-      });
-    }
-  }
-};
-
-function collect(connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
-    canDrop: monitor.canDrop(),
-    draggedPage: monitor.getItem(),
-  };
-}
-
-class Placeholder extends React.Component {
-
-  static propTypes = {
-    key: PropTypes.string,
-  };
-
-  render() {
-    return (
-      <div key={this.props.key} style={{ height: 40, width: '100%' }}/>
-    );
-  }
-}
-
-export default DropTarget('ViewStructure', target, collect)(DropTargetTopView(Placeholder));

frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js

@@ -141,7 +141,6 @@ export default class PageDropdownMenu extends Component {
           flip={false}
           modifiers={{ preventOverflow: { boundariesElement: document.body } }}
           positionFixed={true}
-          style={{ zIndex: 1051 }}
         >
           <DropdownItem onClick={this.handleCopyLink}>
             <i className="sf3-font sf3-font-sdoc-link" />

frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-left-bar-dialog.css

@@ -1,128 +0,0 @@
-.app-settings-dialog .nav .nav-item {
-  padding: 0;
-}
-
-.app-settings-dialog .nav .nav-item .nav-link {
-  padding: 0.5rem 0;
-  font-weight: normal;
-  transition: none;
-  width: 100%;
-}
-
-.app-settings-dialog .nav .nav-item .nav-link.active {
-  color: #ff8000;
-  text-decoration: none;
-  border-bottom: 0.125rem solid #ff8000;
-}
-
-.app-settings-dialog .nav-pills .nav-item .nav-link {
-  padding: 0.3125rem 1rem 0.3125rem 8px;
-}
-
-.app-settings-dialog .nav-pills .nav-item .nav-link:hover {
-  background-color: #f5f5f5;
-}
-
-.app-settings-dialog .nav-pills .nav-item .nav-link.active {
-  background-color: #ff8000;
-  color: #fff;
-  border: none;
-}
-
-.app-settings-dialog .ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.app-settings-dialog {
-  max-width: 800px;
-  height: calc(100% - 56px);
-}
-
-.app-settings-dialog .modal-content {
-  height: 100%;
-}
-
-.app-settings-dialog .app-settings-dialog-content {
-  padding: 0;
-  min-height: 27rem;
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-}
-
-.app-settings-dialog-content .app-settings-dialog-side {
-  display: flex;
-  flex: 0 0 25%;
-  padding: 12px 8px;
-  border-right: 1px solid #eee;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main {
-  display: flex;
-  flex: 0 0 75%;
-  padding: 12px 8px;
-  overflow: auto;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .tab-content {
-  flex: 1;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .tab-pane {
-  height: 100%;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .no-search-result {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 100px;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .no-search-result span {
-  color: #aaa;
-  margin-top: 10px;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .search-text-clear {
-  line-height: 38px;
-  height: 38px;
-  margin-right: 5px;
-}
-
-.app-setting-dialog-icon {
-  width: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.app-setting-dialog-icon img {
-  max-height: 128px;
-}
-
-.app-setting-dialog-icon-description {
-  color: #999;
-  font-size: 13px;
-}
-
-.app-setting-dialog-name {
-  padding: 10px;
-}
-
-.app-setting-dialog-name .rename-area-input {
-  width: 85%;
-}
-
-.app-setting-dialog-name .rename-area-submit {
-  width: 15%;
-}
-
-.tip {
-  color: #808080;
-  margin-bottom: 1rem;
-}

frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-custom-icon.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
-import { seafileAPI } from '../../../../utils/seafile-api';
-import { gettext } from '../../../../utils/constants';
-import { getIconURL } from '../../utils';
-
-class AppSettingsDialogCustomIcon extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      iconName: this.props.config.wiki_icon,
-    };
-    this.fileInput = React.createRef();
-  }
-
-  openFileInput = () => {
-    this.fileInput.current.click();
-  };
-
-  uploadFile = () => {
-    if (!this.fileInput.current.files.length) {
-      return;
-    }
-    const file = this.fileInput.current.files[0];
-    this.uploadLocalFile(file).then((iconName) => {
-      let wikiConfig = Object.assign({}, this.props.config, {
-        wiki_icon: iconName,
-      });
-      this.props.updateConfig(wikiConfig);
-      this.props.onToggle();
-      this.setState({
-        iconName: iconName,
-      });
-    });
-  };
-
-  uploadLocalFile = (imageFile) => {
-    let repoID = this.props.repoId;
-    const name = 'wiki-icon-image-' + Date.now().toString() + '.png';
-    return (
-      seafileAPI.getFileServerUploadLink(repoID, '/').then((res) => {
-        const uploadLink = res.data + '?ret-json=1';
-        const newFile = new File([imageFile], name, {type: imageFile.type});
-        const formData = new FormData();
-        formData.append('parent_dir', '/');
-        formData.append('relative_path', '_Internal/Wiki/Icon');
-        formData.append('file', newFile);
-        return seafileAPI.uploadImage(uploadLink, formData);
-      }).then ((res) => {
-        return name;
-      })
-    );
-  };
-
-  render() {
-    let { iconName } = this.state;
-    const src = getIconURL(this.props.repoId, iconName);
-    if (src) {
-      return (
-        <div className="app-setting-dialog-icon">
-          <img src={src} alt="" width={128} height={128} ></img>
-          <p className="mt-2 mb-1 app-setting-dialog-icon-description">
-            {gettext('Please select a png image within 5MB.')}
-          </p>
-          <p className="app-setting-dialog-icon-description">
-            {gettext('Recommended size is 256x256 px.')}
-          </p>
-          <Button color="primary" outline size="sm" onClick={this.openFileInput}>{gettext('Change icon')}</Button>
-          <input className="d-none" type="file" accept="image/png" onChange={this.uploadFile} ref={this.fileInput} />
-        </div>
-      );
-    } else {
-      return (
-        <div className="app-setting-dialog-icon mb-8">
-          <p className="mt-2 mb-1 app-setting-dialog-icon-description">
-            {gettext('Please select a png image within 5MB.')}
-          </p>
-          <p className="app-setting-dialog-icon-description">
-            {gettext('Recommended size is 256x256 px.')}
-          </p>
-          <Button color="primary" outline size="sm" onClick={this.openFileInput}>{gettext('Upload icon')}</Button>
-          <input className="d-none" type="file" accept="image/png" onChange={this.uploadFile} ref={this.fileInput} />
-        </div>
-      );
-    }
-  }
-}
-
-AppSettingsDialogCustomIcon.propTypes = {
-  onToggle: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-  repoId: PropTypes.string.isRequired,
-};
-
-export default AppSettingsDialogCustomIcon;

frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icon-color.css

@@ -1,71 +0,0 @@
-.app-settings-dialog-icon-color {
-  padding: 10px;
-}
-
-.app-settings-dialog-theme-color .seafile-multicolor-icon-container {
-  padding: 8px;
-}
-
-.app-settings-dialog-theme-color .theme-color-backdrop {
-  width: 60px;
-  height: 60px;
-  line-height: 60px;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 50%;
-}
-
-.app-settings-dialog-theme-color .theme-color-backdrop .dtable-font {
-  color: #fff;
-}
-
-.app-settings-dialog-theme-color .theme-color-backdrop:hover {
-  opacity: 1;
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-#app-settings-dialog-theme-color-input {
-  position: relative;
-}
-
-.app-settings-dialog-theme-color .dtable-icon-drop-down {
-  position: absolute;
-  font-size: 12px;
-  color: #b5b5b5;
-  -webkit-transform: scale(0.8);
-  transform: scale(0.8);
-  right: 10px;
-  top: 10px;
-}
-
-.app-settings-dialog-theme-color #app-settings-dialog-theme-color-input:hover {
-  border-color: rgb(179, 179, 179);
-}
-
-.app-settings-dialog-theme-color .app-theme-colors-content {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.app-settings-dialog-theme-color .app-theme-colors-content .app-theme-color-item {
-  display: inline-flex;
-  height: fit-content;
-  cursor: pointer;
-}
-
-.app-settings-dialog-theme-color .app-theme-colors-content .colorinput-color {
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: 50%;
-}
-
-.app-settings-dialog-theme-color .app-theme-colors-content .colorinput-color.light {
-  color: #555;
-}

frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icon-color.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormGroup, Label, Tooltip, Button } from 'reactstrap';
-import IconSettingsPopover from './icon-settings-popover';
-import { gettext } from '../../../../utils/constants';
-import { getIconURL } from '../../utils';
-
-import './app-settings-dialog-icon-color.css';
-
-class AppSettingsDialogIconColor extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShowIconPopover: false,
-      isTooltipOpen: false,
-    };
-    this.renameRef = React.createRef();
-  }
-
-  onIconPopoverToggle = () => {
-    this.setState({ isShowIconPopover: !this.state.isShowIconPopover });
-  };
-
-  onRenameIconToggle = () => {
-    this.setState({ isTooltipOpen: !this.state.isTooltipOpen });
-  };
-
-  render() {
-    const { wiki_icon } = this.props.config;
-    const src = getIconURL(this.props.repoId, wiki_icon);
-    return (
-      <div className="app-settings-dialog-icon-color">
-        <FormGroup className="app-settings-dialog-theme-color">
-          <Label>{gettext('Wiki icon')}</Label>
-          <div className='position-relative'>
-            {wiki_icon ?
-              <>
-                <img src={src} width={60} height={60} alt="" />
-                <div className="theme-color-backdrop" onClick={this.onIconPopoverToggle} id='app-settings-dialog-icon-backdrop'>
-                  <span className="iconfont icon-edit" ref={this.renameRef} style={{color: '#fff', fontSize: '24px'}}></span>
-                </div>
-              </>
-              :
-              <div onClick={this.onIconPopoverToggle} id='app-settings-dialog-icon-backdrop'>
-                <Button onClick={this.onIconPopoverToggle} size="sm" color="primary">{gettext('Select icon')}</Button>
-              </div>
-            }
-            <Tooltip
-              placement="bottom"
-              isOpen={this.state.isTooltipOpen}
-              target={this.renameRef}
-              toggle={this.onRenameIconToggle}
-            >
-              {gettext('Change icon')}
-            </Tooltip>
-          </div>
-        </FormGroup>
-        {this.state.isShowIconPopover &&
-          <IconSettingsPopover
-            onToggle={this.onIconPopoverToggle}
-            targetId='app-settings-dialog-icon-backdrop'
-            config={this.props.config}
-            updateConfig={this.props.updateConfig}
-            repoId={this.props.repoId}
-          />
-        }
-      </div>
-    );
-  }
-}
-
-AppSettingsDialogIconColor.propTypes = {
-  config: PropTypes.object.isRequired,
-  repoId: PropTypes.string.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-};
-
-export default AppSettingsDialogIconColor;

frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icons.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { mediaUrl } from '../../../../utils/constants';
-
-const ICON_CLASSNAMES = [
-  'default',
-];
-
-class AppSettingsDialogIcons extends React.Component {
-
-  onClickIcon = () => {
-    if (this.props.config.wiki_icon === 'default') {
-      this.props.updateConfig({ wiki_icon: '' });
-    } else {
-      this.props.updateConfig({ wiki_icon: 'default' });
-    }
-    this.props.onToggle();
-  };
-
-  render() {
-    return (
-      <div className="app-settings-dialog-icons">
-        <div className='d-flex flex-wrap'>
-          {ICON_CLASSNAMES.map((name, index) => {
-            return (
-              <div
-                key={index}
-                onClick={(e) => {
-                  this.onClickIcon(name, e);
-                }}
-                className={`seafile-multicolor-icon-container ${index < 5 ? 'top' : ''}`}
-              >
-                <img src={`${mediaUrl}img/wiki/${name}.png`} alt='' />
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-}
-
-AppSettingsDialogIcons.propTypes = {
-  onToggle: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-};
-
-export default AppSettingsDialogIcons;

frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-name.js

@@ -1,71 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Label } from 'reactstrap';
-import toaster from '../../../../components/toast';
-import { gettext } from '../../../../utils/constants';
-
-class AppSettingsDialogName extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: props.config.wiki_name || '',
-    };
-  }
-
-  onChange = (event) => {
-    this.setState({ name: event.target.value });
-  };
-
-  validateName = (name) => {
-    name = name.trim();
-    if (name === '') {
-      return { isValid: false, message: gettext('Name is required') };
-    }
-    if (name.includes('/')) {
-      return { isValid: false, message: gettext('Name cannot contain slash') };
-    }
-    if (name.includes('\\')) {
-      return { isValid: false, message: gettext('Name cannot contain backslash') };
-    }
-    return { isValid: true, message: name };
-  };
-
-  onCommit = () => {
-    const { name } = this.state;
-    const { isValid, message } = this.validateName(name);
-    if (!isValid) {
-      toaster.danger(message);
-      return;
-    } else {
-      this.props.updateConfig({ wiki_name: message });
-    }
-  };
-
-  render() {
-    const { name } = this.state;
-    return (
-      <div className="app-setting-dialog-name">
-        <Label>{gettext('Wiki name')}</Label>
-        <div className="d-flex">
-          <input
-            className="form-control rename-area-input"
-            type="text"
-            value={name}
-            onChange={this.onChange}
-          />
-          <Button className="rename-area-submit" color="primary ml-4" onClick={this.onCommit}>
-            {gettext('Submit')}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-}
-
-AppSettingsDialogName.propTypes = {
-  config: PropTypes.object.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-};
-
-export default AppSettingsDialogName;

frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/icon-settings-popover.css

@@ -1,64 +0,0 @@
-.dtable-icon-settings-popover .popover {
-  max-width: 314px;
-  width: 314px;
-}
-
-.app-icon-settings-popover-nav .nav {
-  border-bottom: 1px solid #efefef;
-}
-
-.app-icon-settings-popover-nav .nav .nav-item {
-  padding: 0;
-}
-
-.app-icon-settings-popover-nav .nav .nav-item .nav-link {
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  font-weight: 600;
-  padding: 0.5rem 0;
-  border-bottom: 0.125rem solid transparent;
-}
-
-.app-icon-settings-popover-nav .nav .nav-item .nav-link.active {
-  color: #ff8000;
-  text-decoration: none;
-  border-bottom: 0.125rem solid #ff8000;
-}
-
-.app-icon-settings-popover-main {
-  height: 300px;
-  display: flex;
-  justify-content: center;
-  padding: 16px 5px;
-  align-items: center;
-}
-
-.app-settings-dialog-icons {
-  height: 260px;
-}
-
-.app-settings-dialog-icons .seafile-multicolor-icon-container {
-  margin: 10px;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  position: relative;
-}
-
-.app-settings-dialog-icons .seafile-multicolor-icon-container.top {
-  margin: 0 10px 10px 10px;
-}
-
-.app-settings-dialog-icons .seafile-multicolor-icon-container img {
-  width: 40px;
-  max-width: fit-content;
-  height: 40px;
-}
-
-.app-settings-dialog-icons .seafile-multicolor-icon-container img.active {
-  width: 42px;
-  height: 42px;
-  border: 2px solid #b6e8e4;
-  border-radius: 50%;
-}

frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/icon-settings-popover.js

@@ -1,103 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Nav, NavItem, NavLink, TabContent, TabPane, PopoverBody } from 'reactstrap';
-import SeahubPopover from '../../../../components/common/seahub-popover';
-import { gettext } from '../../../../utils/constants';
-import AppSettingsDialogIcons from './app-settings-dialog-icons';
-import AppSettingsDialogCustomIcon from './app-settings-dialog-custom-icon';
-
-import './icon-settings-popover.css';
-
-export default class IconSettingsPopover extends React.Component {
-
-  static propTypes = {
-    targetId: PropTypes.string.isRequired,
-    onToggle: PropTypes.func.isRequired,
-    config: PropTypes.object.isRequired,
-    updateConfig: PropTypes.func.isRequired,
-    repoId: PropTypes.string.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeTab: 'system',
-    };
-  }
-
-  toggle = (tab) => {
-    if (this.state.activeTab !== tab) {
-      this.setState({ activeTab: tab });
-    }
-  };
-
-  onEnter = (e) => {
-    e.preventDefault();
-    this.props.onToggle();
-  };
-
-  renderContent = () => {
-    let { activeTab } = this.state;
-    return (
-      <>
-        <div className="app-icon-settings-popover-nav">
-          <Nav className="w-100">
-            <NavItem className="w-50">
-              <NavLink
-                className={activeTab === 'system' ? 'active w-100' : 'w-100'}
-                onClick={this.toggle.bind(this, 'system')}
-              >
-                {gettext('System icon')}
-              </NavLink>
-            </NavItem>
-            <NavItem className="w-50">
-              <NavLink
-                className={activeTab === 'custom' ? 'active w-100' : 'w-100'}
-                onClick={this.toggle.bind(this, 'custom')}
-              >
-                {gettext('Custom icon')}
-              </NavLink>
-            </NavItem>
-          </Nav>
-        </div>
-        <div className="app-icon-settings-popover-main">
-          <TabContent activeTab={activeTab}>
-            <TabPane tabId='custom'>
-              <AppSettingsDialogCustomIcon
-                onToggle={this.props.onToggle}
-                config={this.props.config}
-                updateConfig={this.props.updateConfig}
-                repoId={this.props.repoId}
-              />
-            </TabPane>
-            <TabPane tabId='system'>
-              <AppSettingsDialogIcons
-                onToggle={this.props.onToggle}
-                config={this.props.config}
-                updateConfig={this.props.updateConfig}
-              />
-            </TabPane>
-          </TabContent>
-        </div>
-      </>
-    );
-  };
-
-  render() {
-    return (
-      <SeahubPopover
-        placement='bottom-start'
-        target={this.props.targetId}
-        hideSeahubPopover={this.props.onToggle}
-        hideSeahubPopoverWithEsc={this.props.onToggle}
-        onEnter={this.onEnter}
-        hideArrow={true}
-        popoverClassName="dtable-icon-settings-popover"
-      >
-        <PopoverBody className="p-0">
-          {this.renderContent()}
-        </PopoverBody>
-      </SeahubPopover>
-    );
-  }
-}

frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/index.js

@@ -1,89 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { Modal, ModalBody, ModalHeader, Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
-import AppSettingsDialogIconColor from './app-settings-dialog-icon-color';
-import AppSettingsDialogName from './app-settings-dialog-name';
-import { gettext } from '../../../../utils/constants';
-
-import './app-left-bar-dialog.css';
-
-class AppSettingsDialog extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeTab: 'Name',
-    };
-  }
-
-  toggle = (tab) => {
-    if (this.state.activeTab !== tab) {
-      this.setState({ activeTab: tab });
-    }
-  };
-
-  renderContent = () => {
-    const { activeTab } = this.state;
-    return (
-      <Fragment>
-        <div className="app-settings-dialog-side">
-          <Nav pills vertical className="w-100">
-            <NavItem>
-              <NavLink
-                className={activeTab === 'Name' ? 'active' : ''}
-                onClick={this.toggle.bind(this, 'Name')}
-              >
-                {gettext('Wiki name')}
-              </NavLink>
-            </NavItem>
-            <NavItem>
-              <NavLink
-                className={activeTab === 'Icon' ? 'active' : ''}
-                onClick={this.toggle.bind(this, 'Icon')}
-              >
-                {gettext('Icons')}
-              </NavLink>
-            </NavItem>
-          </Nav>
-        </div>
-        <div className="app-settings-dialog-main">
-          <TabContent activeTab={activeTab}>
-            <TabPane tabId="Icon">
-              <AppSettingsDialogIconColor
-                config={this.props.config}
-                repoId={this.props.repoId}
-                updateConfig={this.props.updateConfig}
-              />
-            </TabPane>
-            <TabPane tabId="Name">
-              <AppSettingsDialogName
-                config={this.props.config}
-                updateConfig={this.props.updateConfig}
-              />
-            </TabPane>
-          </TabContent>
-        </div>
-      </Fragment>
-    );
-  };
-
-  render() {
-    return (
-      <Modal isOpen={true} toggle={this.props.toggle} className="app-settings-dialog">
-        <ModalHeader toggle={this.props.toggle}>{gettext('Wiki settings')}</ModalHeader>
-        <ModalBody className="app-settings-dialog-content">
-          {this.renderContent()}
-        </ModalBody>
-      </Modal>
-    );
-  }
-}
-
-AppSettingsDialog.propTypes = {
-  repoId: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-};
-
-export default AppSettingsDialog;

frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar-icon.jsx

@@ -1,53 +0,0 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip } from 'reactstrap';
-import Icon from '../../../components/icon';
-
-function WikiLeftBarIcon(props) {
-  const [open, setOpen] = useState(false);
-  const inputEl = useRef(null);
-
-  function onMouseEnter() {
-    if (inputEl && inputEl.current) {
-      inputEl.current.style.backgroundColor = '#dedede';
-    }
-  }
-
-  function onMouseLeave() {
-    if (inputEl && inputEl.current) {
-      inputEl.current.style.backgroundColor = '';
-    }
-  }
-
-  return (
-    <>
-      <div
-        className="left-bar-button"
-        ref={inputEl}
-        onClick={props.onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        <Icon symbol={props.iconClass}/>
-      </div>
-      <Tooltip
-        placement="right"
-        isOpen={open}
-        target={inputEl}
-        toggle={() => setOpen(!open)}
-        hideArrow={true}
-        fade={false}
-      >
-        {props.tipText}
-      </Tooltip>
-    </>
-  );
-}
-
-WikiLeftBarIcon.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  iconClass: PropTypes.string.isRequired,
-  tipText: PropTypes.string.isRequired,
-};
-
-export default WikiLeftBarIcon;

frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css

@@ -1,29 +0,0 @@
-.wiki-left-bar {
-  flex: 0 0 4%;
-  width: 50px;
-  background: #f5f5f5;
-  border-right: 1px solid #ddd;
-  z-index: 101;
-}
-
-.wiki-left-bar .left-bar-button {
-  height: 50px;
-  line-height: 50px;
-  text-align: center;
-}
-
-.wiki-left-bar .left-bar-button:hover {
-  cursor: pointer;
-}
-
-.wiki-left-bar .left-bar-button .seafile-multicolor-icon {
-  font-size: 22px;
-}
-
-.wiki-left-bar .left-bar-button .seafile-multicolor-icon {
-  color: rgba(0, 0, 0, 0.8);
-}
-
-.wiki-left-bar .left-bar-button:hover .seafile-multicolor-icon {
-  color: rgba(0, 0, 0, 0.9);
-}

frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import AppSettingsDialog from './app-settings-dialog/index';
-import Icon from './wiki-left-bar-icon.jsx';
-import { gettext } from '../../../utils/constants';
-
-import './wiki-left-bar.css';
-
-export default class WikiLeftBar extends React.Component {
-
-  static propTypes = {
-    config: PropTypes.object.isRequired,
-    repoId: PropTypes.string.isRequired,
-    updateConfig: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShowSettingsDialog: false,
-    };
-  }
-
-  openPreviewApp = () => {
-    window.open(window.location.href.replace('/wikis/', '/published/'));
-  };
-
-  openAppSettingsDialog = () => {
-    this.setState({ isShowSettingsDialog: true });
-  };
-
-  closeAppSettingsDialog = () => {
-    this.setState({ isShowSettingsDialog: false });
-  };
-
-  render() {
-    return (
-      <div className="wiki-left-bar">
-        <Icon onClick={this.openAppSettingsDialog} iconClass="wiki-settings" tipText={gettext('Settings')}/>
-        <Icon onClick={this.openPreviewApp} iconClass="wiki-preview" tipText={gettext('Go to wiki page to preview')}/>
-        {this.state.isShowSettingsDialog &&
-          <AppSettingsDialog
-            toggle={this.closeAppSettingsDialog}
-            config={this.props.config}
-            repoId={this.props.repoId}
-            updateConfig={this.props.updateConfig}
-          />
-        }
-      </div>
-    );
-  }
-}