[library] added new 'settings' dialog(includes setting panels for (#7002)

'history', 'auto deletion', 'extended properties', and 'face
recognition')

- deleted 'history settings', 'auto deletion setting' in the dropdown
  menu & context menu of 'my library' & 'department library' items.
- fixed bug in the context menu of 'department library' items.
- deleted the 'more' menu(included 'extended properties' & 'face
  recognition') for library 'views'.
- click the 'extended properties' prompt in 'views', the new 'settings'
  dialog will be shown.

frontend/src/components/dialog/lib-settings.js

@@ -0,0 +1,129 @@
+import React, { Fragment, useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { gettext, enableRepoAutoDel } from '../../utils/constants';
+import LibHistorySettingPanel from './lib-settings/lib-history-setting-panel';
+import LibAutoDelSettingPanel from './lib-settings/lib-old-files-auto-del-setting-panel';
+import {
+  MetadataStatusManagementDialog as LibExtendedPropertiesSettingPanel,
+  MetadataFaceRecognitionDialog as LibFaceRecognitionSettingPanel,
+  useMetadata
+} from '../../metadata';
+
+import '../../css/lib-settings.css';
+
+const propTypes = {
+  toggleDialog: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
+  currentRepoInfo: PropTypes.object.isRequired
+};
+
+const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
+  let [activeTab, setActiveTab] = useState(tab || 'historySetting');
+
+  const toggleTab = useCallback((tab) => {
+    setActiveTab(tab);
+  }, []);
+
+  const onTabKeyDown = useCallback((e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      e.target.click();
+    }
+  }, []);
+
+  const { encrypted, is_admin } = currentRepoInfo;
+  const { enableMetadataManagement } = window.app.pageOptions;
+  const { enableMetadata, updateEnableMetadata, enableFaceRecognition, updateEnableFaceRecognition } = useMetadata();
+  const enableHistorySetting = is_admin; // repo owner, admin of the department which the repo belongs to, and ...
+  const enableAutoDelSetting = is_admin && enableRepoAutoDel;
+  const enableExtendedPropertiesSetting = !encrypted && is_admin && enableMetadataManagement;
+  const enableFaceRecognitionSetting = enableExtendedPropertiesSetting && enableMetadata;
+
+  return (
+    <div>
+      <Modal isOpen={true} className="lib-settings-dialog" toggle={toggleDialog}>
+        <ModalHeader toggle={toggleDialog}>
+          {gettext('Settings')}
+        </ModalHeader>
+        <ModalBody className="d-md-flex p-md-0" role="tablist">
+          <Fragment>
+            <div className="lib-setting-nav p-4">
+              <Nav pills className="flex-column">
+                {enableHistorySetting &&
+                <NavItem role="tab" aria-selected={activeTab === 'historySetting'} aria-controls="history-setting-panel">
+                  <NavLink className={activeTab === 'historySetting' ? 'active' : ''} onClick={(toggleTab.bind(this, 'historySetting'))} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    {gettext('History')}
+                  </NavLink>
+                </NavItem>
+                }
+                {enableAutoDelSetting &&
+                <NavItem role="tab" aria-selected={activeTab === 'autoDelSetting'} aria-controls="auto-del-setting-panel">
+                  <NavLink className={activeTab === 'autoDelSetting' ? 'active' : ''} onClick={toggleTab.bind(this, 'autoDelSetting')} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    {gettext('Auto deletion')}
+                  </NavLink>
+                </NavItem>
+                }
+                {enableExtendedPropertiesSetting &&
+                <NavItem role="tab" aria-selected={activeTab === 'extendedPropertiesSetting'} aria-controls="extended-properties-setting-panel">
+                  <NavLink className={activeTab === 'extendedPropertiesSetting' ? 'active' : ''} onClick={toggleTab.bind(this, 'extendedPropertiesSetting')} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    {gettext('Extended properties')}
+                  </NavLink>
+                </NavItem>
+                }
+                {enableFaceRecognitionSetting &&
+                <NavItem role="tab" aria-selected={activeTab === 'faceRecognitionSetting'} aria-controls="face-recognition-setting-panel">
+                  <NavLink className={activeTab === 'faceRecognitionSetting' ? 'active' : ''} onClick={toggleTab.bind(this, 'faceRecognitionSetting')} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    {gettext('Face recognition')}
+                  </NavLink>
+                </NavItem>
+                }
+              </Nav>
+            </div>
+            <TabContent activeTab={activeTab} className="flex-fill">
+              {(enableHistorySetting && activeTab === 'historySetting') &&
+                <TabPane tabId="historySetting" role="tabpanel" id="history-setting-panel">
+                  <LibHistorySettingPanel
+                    repoID={repoID}
+                    toggleDialog={toggleDialog}
+                  />
+                </TabPane>
+              }
+              {(enableAutoDelSetting && activeTab === 'autoDelSetting') &&
+                <TabPane tabId="autoDelSetting" role="tabpanel" id="auto-del-setting-panel">
+                  <LibAutoDelSettingPanel
+                    repoID={repoID}
+                    toggleDialog={toggleDialog}
+                  />
+                </TabPane>
+              }
+              {(enableExtendedPropertiesSetting && activeTab === 'extendedPropertiesSetting') &&
+                <TabPane tabId="extendedPropertiesSetting" role="tabpanel" id="extended-properties-setting-panel">
+                  <LibExtendedPropertiesSettingPanel
+                    repoID={repoID}
+                    value={enableMetadata}
+                    submit={(value) => { updateEnableMetadata(value); }}
+                    toggleDialog={toggleDialog}
+                  />
+                </TabPane>
+              }
+              {(enableFaceRecognitionSetting && activeTab === 'faceRecognitionSetting') &&
+                <TabPane tabId="faceRecognitionSetting" role="tabpanel" id="face-recognition-setting-panel">
+                  <LibFaceRecognitionSettingPanel
+                    repoID={repoID}
+                    value={enableFaceRecognition}
+                    submit={(value) => { updateEnableFaceRecognition(true); }}
+                    toggleDialog={toggleDialog}
+                  />
+                </TabPane>
+              }
+            </TabContent>
+          </Fragment>
+        </ModalBody>
+      </Modal>
+    </div>
+  );
+};
+
+LibSettingsDialog.propTypes = propTypes;
+
+export default LibSettingsDialog;

frontend/src/components/dialog/lib-settings/lib-history-setting-panel.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
+import { Button, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
-import { gettext, enableRepoHistorySetting } from '../../utils/constants';
+import { gettext, enableRepoHistorySetting } from '../../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
+import { seafileAPI } from '../../../utils/seafile-api';
-import { Utils } from '../../utils/utils';
+import { Utils } from '../../../utils/utils';
-import toaster from '../toast';
+import toaster from '../../toast';
 
 const propTypes = {
-  itemName: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,
   repoID: PropTypes.string.isRequired,
 };
@@ -108,14 +107,8 @@ class LibHistorySetting extends React.Component {
   };
 
   render() {
-    const { itemName: repoName } = this.props;
-    let title = gettext('{placeholder} History Setting');
-    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
-      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+      <>
-        <ModalHeader toggle={this.props.toggleDialog}>
-          <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-        </ModalHeader>
         <ModalBody>
           <Form>
             {!enableRepoHistorySetting &&
@@ -151,7 +144,7 @@ class LibHistorySetting extends React.Component {
           <Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
           <Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
         </ModalFooter>
-      </Modal>
+      </>
     );
   }
 }

frontend/src/components/dialog/lib-settings/lib-old-files-auto-del-setting-panel.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
+import { Button, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
-import { gettext } from '../../utils/constants';
+import { gettext } from '../../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
+import { seafileAPI } from '../../../utils/seafile-api';
-import { Utils } from '../../utils/utils';
+import { Utils } from '../../../utils/utils';
-import toaster from '../toast';
+import toaster from '../../toast';
 
 const propTypes = {
   toggleDialog: PropTypes.func.isRequired,
   repoID: PropTypes.string.isRequired,
 };
 
-class LibOldFilesAutoDelDialog extends React.Component {
+class LibOldFilesAutoDelSetting extends React.Component {
 
   constructor(props) {
     super(props);
@@ -93,10 +93,7 @@ class LibOldFilesAutoDelDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+      <>
-        <ModalHeader toggle={this.props.toggleDialog}>
-          {gettext('Auto deletion')}
-        </ModalHeader>
         <ModalBody>
           <Form>
             <FormGroup check>
@@ -123,11 +120,11 @@ class LibOldFilesAutoDelDialog extends React.Component {
           <Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
           <Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
         </ModalFooter>
-      </Modal>
+      </>
     );
   }
 }
 
-LibOldFilesAutoDelDialog.propTypes = propTypes;
+LibOldFilesAutoDelSetting.propTypes = propTypes;
 
-export default LibOldFilesAutoDelDialog;
+export default LibOldFilesAutoDelSetting;

frontend/src/components/dir-view-mode/dir-others.js

@@ -4,9 +4,17 @@ import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TreeSection from '../tree-section';
 import TrashDialog from '../dialog/trash-dialog';
+import LibSettingsDialog from '../dialog/lib-settings';
+
 import './dir-others.css';
 
 const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
+  const showSettings = currentRepoInfo.is_admin; // repo owner, department admin, shared with 'Admin' permission
+  let [isSettingsDialogOpen, setSettingsDialogOpen] = useState(false);
+  const toggleSettingsDialog = () => {
+    setSettingsDialogOpen(!isSettingsDialogOpen);
+  };
+
   const [showTrashDialog, setShowTrashDialog] = useState(false);
   let trashUrl = null;
   const historyUrl = siteRoot + 'repo/history/' + repoID + '/';
@@ -18,6 +26,12 @@ const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
   };
   return (
     <TreeSection title={gettext('Others')} className="dir-others">
+      {showSettings &&
+        <div className='dir-others-item text-nowrap' title={gettext('Settings')} onClick={toggleSettingsDialog}>
+          <span className="sf3-font-set-up sf3-font"></span>
+          <span className="dir-others-item-text">{gettext('Settings')}</span>
+        </div>
+      }
       {trashUrl &&
         <div className='dir-others-item text-nowrap' title={gettext('Trash')} onClick={toggleTrashDialog}>
           <span className="sf3-font-trash sf3-font"></span>
@@ -38,6 +52,13 @@ const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
           toggleTrashDialog={toggleTrashDialog}
         />
       )}
+      {isSettingsDialogOpen && (
+        <LibSettingsDialog
+          repoID={repoID}
+          currentRepoInfo={currentRepoInfo}
+          toggleDialog={toggleSettingsDialog}
+        />
+      )}
     </TreeSection>
   );
 };

frontend/src/components/dir-view-mode/dir-views.js

@@ -2,8 +2,9 @@ import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import TreeSection from '../tree-section';
-import { MetadataStatusManagementDialog, MetadataFaceRecognitionDialog, MetadataTreeView, useMetadata } from '../../metadata';
+import { MetadataTreeView, useMetadata } from '../../metadata';
 import ExtensionPrompts from './extension-prompts';
+import LibSettingsDialog from '../dialog/lib-settings';
 
 const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
   const enableMetadataManagement = useMemo(() => {
@@ -12,53 +13,14 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [window.app.pageOptions.enableMetadataManagement, currentRepoInfo]);
 
-  const [showMetadataStatusManagementDialog, setShowMetadataStatusManagementDialog] = useState(false);
+  const { enableMetadata, navigation } = useMetadata();
-  const [showMetadataFaceRecognitionDialog, setShowMetadataFaceRecognitionDialog] = useState(false);
-  const { enableMetadata, updateEnableMetadata, enableFaceRecognition, updateEnableFaceRecognition, navigation } = useMetadata();
-  const moreOperations = useMemo(() => {
-    if (!enableMetadataManagement || !currentRepoInfo.is_admin) return [];
-    let operations = [
-      { key: 'extended-properties', value: gettext('Extended properties') }
-    ];
-    if (enableMetadata) {
-      operations.push({ key: 'face-recognition', value: gettext('Face recognition') });
-    }
-    return operations;
-  }, [enableMetadataManagement, enableMetadata, currentRepoInfo]);
-
-  const moreOperationClick = useCallback((operationKey) => {
-    switch (operationKey) {
-      case 'extended-properties': {
-        setShowMetadataStatusManagementDialog(true);
-        break;
-      }
-      case 'face-recognition': {
-        setShowMetadataFaceRecognitionDialog(true);
-        break;
-      }
-      default:
-        break;
-    }
-  }, []);
-
-  const closeMetadataManagementDialog = useCallback(() => {
-    setShowMetadataStatusManagementDialog(false);
-  }, []);
-
-  const closeMetadataFaceRecognitionDialog = useCallback(() => {
-    setShowMetadataFaceRecognitionDialog(false);
-  }, []);
-
-  const openMetadataFaceRecognition = useCallback(() => {
-    updateEnableFaceRecognition(true);
-  }, [updateEnableFaceRecognition]);
-
-  const toggleMetadataStatus = useCallback((value) => {
-    updateEnableMetadata(value);
-  }, [updateEnableMetadata]);
 
+  let [isSettingsDialogOpen, setSettingsDialogOpen] = useState(false);
+  const toggleSettingsDialog = () => {
+    setSettingsDialogOpen(!isSettingsDialogOpen);
+  };
   const onExtendedProperties = useCallback(() => {
-    setShowMetadataStatusManagementDialog(true);
+    setSettingsDialogOpen(true);
   }, []);
 
   if (!enableMetadataManagement) return null;
@@ -67,9 +29,6 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
     <>
       <TreeSection
         title={gettext('Views')}
-        moreKey={{ name: 'views' }}
-        moreOperations={moreOperations}
-        moreOperationClick={moreOperationClick}
       >
         {!enableMetadata ? (
           <ExtensionPrompts onExtendedProperties={onExtendedProperties} />
@@ -77,20 +36,12 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
           <MetadataTreeView userPerm={userPerm} currentPath={currentPath} />
         ) : null}
       </TreeSection>
-      {showMetadataStatusManagementDialog && (
+      {isSettingsDialogOpen && (
-        <MetadataStatusManagementDialog
+        <LibSettingsDialog
-          value={enableMetadata}
           repoID={repoID}
-          toggle={closeMetadataManagementDialog}
+          currentRepoInfo={currentRepoInfo}
-          submit={toggleMetadataStatus}
+          tab="extendedPropertiesSetting"
-        />
+          toggleDialog={toggleSettingsDialog}
-      )}
-      {showMetadataFaceRecognitionDialog && (
-        <MetadataFaceRecognitionDialog
-          value={enableFaceRecognition}
-          repoID={repoID}
-          toggle={closeMetadataFaceRecognitionDialog}
-          submit={openMetadataFaceRecognition}
         />
       )}
     </>
@@ -101,7 +52,7 @@ DirViews.propTypes = {
   userPerm: PropTypes.string,
   repoID: PropTypes.string,
   currentPath: PropTypes.string,
-  onNodeClick: PropTypes.func,
+  currentRepoInfo: PropTypes.object.isRequired,
 };
 
 export default DirViews;

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -5,18 +5,16 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import { Link, navigate } from '@gatsbyjs/reach-router';
 import { Utils } from '../../utils/utils';
-import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff, enableResetEncryptedRepoPassword, isEmailConfigured, enableRepoAutoDel } from '../../utils/constants';
+import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff, enableResetEncryptedRepoPassword, isEmailConfigured } from '../../utils/constants';
 import ModalPortal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
 import LibSubFolderPermissionDialog from '../../components/dialog/lib-sub-folder-permission-dialog';
 import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
 import ChangeRepoPasswordDialog from '../../components/dialog/change-repo-password-dialog';
 import ResetEncryptedRepoPasswordDialog from '../../components/dialog/reset-encrypted-repo-password-dialog';
-import LibOldFilesAutoDelDialog from '../../components/dialog/lib-old-files-auto-del-dialog';
 import Rename from '../rename';
 import { seafileAPI } from '../../utils/seafile-api';
 import { userAPI } from '../../utils/user-api';
-import LibHistorySettingDialog from '../dialog/lib-history-setting-dialog';
 import toaster from '../toast';
 import RepoAPITokenDialog from '../dialog/repo-api-token-dialog';
 import RepoShareAdminDialog from '../dialog/repo-share-admin-dialog';
@@ -55,7 +53,6 @@ class SharedRepoListItem extends React.Component {
       isRenaming: false,
       isStarred: this.props.repo.starred,
       isFolderPermissionDialogOpen: false,
-      isHistorySettingDialogShow: false,
       isDeleteDialogShow: false,
       isAPITokenDialogShow: false,
       isTransferDialogShow: false,
@@ -63,7 +60,6 @@ class SharedRepoListItem extends React.Component {
       isRepoDeleted: false,
       isChangePasswordDialogShow: false,
       isResetPasswordDialogShow: false,
-      isOldFilesAutoDelDialogOpen: false
     };
     this.isDeparementOnwerGroupMember = false;
   }
@@ -182,9 +178,6 @@ class SharedRepoListItem extends React.Component {
       case 'Unshare':
         this.onItemUnshare();
         break;
-      case 'History Setting':
-        this.onHistorySettingToggle();
-        break;
       case 'API Token':
         this.onAPITokenToggle();
         break;
@@ -203,9 +196,6 @@ class SharedRepoListItem extends React.Component {
       case 'Unwatch File Changes':
         this.unwatchFileChanges();
         break;
-      case 'Old Files Auto Delete':
-        this.toggleOldFilesAutoDelDialog();
-        break;
       // no default
     }
   };
@@ -273,10 +263,6 @@ class SharedRepoListItem extends React.Component {
     this.setState({ isFolderPermissionDialogOpen: !this.state.isFolderPermissionDialogOpen });
   };
 
-  onHistorySettingToggle = () => {
-    this.setState({ isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow });
-  };
-
   onItemShare = () => {
     this.setState({ isShowSharedDialog: true });
   };
@@ -328,10 +314,6 @@ class SharedRepoListItem extends React.Component {
     this.setState({ isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen });
   };
 
-  toggleOldFilesAutoDelDialog = () => {
-    this.setState({ isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen });
-  };
-
   onAPITokenToggle = () => {
     this.setState({ isAPITokenDialogShow: !this.state.isAPITokenDialogShow });
   };
@@ -362,9 +344,6 @@ class SharedRepoListItem extends React.Component {
       case 'Share':
         translateResult = gettext('Share');
         break;
-      case 'History Setting':
-        translateResult = gettext('History Setting');
-        break;
       case 'Share Admin':
         translateResult = gettext('Share Admin');
         break;
@@ -380,9 +359,6 @@ class SharedRepoListItem extends React.Component {
       case 'Unwatch File Changes':
         translateResult = gettext('Unwatch File Changes');
         break;
-      case 'Old Files Auto Delete':
-        translateResult = gettext('Auto Deletion Setting');
-        break;
       case 'API Token':
         translateResult = 'API Token'; // translation is not needed here
         break;
@@ -401,9 +377,6 @@ class SharedRepoListItem extends React.Component {
   getAdvancedOperations = () => {
     const operations = [];
     operations.push('API Token');
-    if (enableRepoAutoDel) {
-      operations.push('Old Files Auto Delete');
-    }
     return operations;
   };
 
@@ -435,9 +408,8 @@ class SharedRepoListItem extends React.Component {
               const monitorOp = repo.monitored ? 'Unwatch File Changes' : 'Watch File Changes';
               operations.push(monitorOp);
             }
-            operations.push('Divider', 'History Setting');
             if (Utils.isDesktop()) {
-              operations.push('Advanced');
+              operations.push('Divider', 'Advanced');
             }
             return operations;
           } else {
@@ -803,15 +775,6 @@ class SharedRepoListItem extends React.Component {
             />
           </ModalPortal>
         }
-        {this.state.isHistorySettingDialogShow && (
-          <ModalPortal>
-            <LibHistorySettingDialog
-              repoID={repo.repo_id}
-              itemName={repo.repo_name}
-              toggleDialog={this.onHistorySettingToggle}
-            />
-          </ModalPortal>
-        )}
         {this.state.isAPITokenDialogShow && (
           <ModalPortal>
             <RepoAPITokenDialog
@@ -845,14 +808,6 @@ class SharedRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
-        {this.state.isOldFilesAutoDelDialogOpen && (
-          <ModalPortal>
-            <LibOldFilesAutoDelDialog
-              repoID={repo.repo_id}
-              toggleDialog={this.toggleOldFilesAutoDelDialog}
-            />
-          </ModalPortal>
-        )}
         {this.state.isTransferDialogShow && (
           <ModalPortal>
             <TransferDialog

frontend/src/css/lib-settings.css

@@ -0,0 +1,53 @@
+.lib-settings-dialog {
+  max-width: 760px;
+}
+
+@media (min-width: 768px) {
+  .lib-settings-dialog .modal-content {
+    min-height: 534px;
+  }
+}
+
+.lib-setting-nav {
+  border-bottom: 1px solid rgba(0,40,100,0.12) !important;
+}
+
+@media (min-width: 768px) {
+  .lib-setting-nav {
+    min-width: 240px;
+    border-bottom: none;
+    border-right: 1px solid rgba(0,40,100,0.12) !important;
+  }
+}
+
+.lib-setting-nav .nav-pills .nav-item .nav-link {
+  margin: 0;
+  padding: 0 10px;
+  height: 32px;
+  flex: 1 1 auto;
+}
+
+.lib-setting-nav .nav-pills .nav-item .nav-link.active {
+  background: #f5f5f5;
+  color: inherit;
+  position: relative;
+}
+
+.lib-setting-nav .nav-pills .nav-item .nav-link.active::before {
+  content: '';
+  display: block;
+  width: 4px;
+  height: 24px;
+  background-color: #ff8000;
+  border-radius: 2px;
+  position: absolute;
+  top: 4px;
+  left: -8px;
+  z-index: 0;
+}
+
+.lib-settings-dialog .tab-pane {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}

frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { ModalBody, ModalFooter, Button } from 'reactstrap';
 import classnames from 'classnames';
 import Switch from '../../../../components/common/switch';
 import { gettext } from '../../../../utils/constants';
@@ -10,7 +10,7 @@ import { Utils } from '../../../../utils/utils';
 
 import './index.css';
 
-const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit }) => {
+const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
   const [value, setValue] = useState(oldValue);
   const [submitting, setSubmitting] = useState(false);
 
@@ -36,9 +36,8 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit
   }, [value]);
 
   return (
-    <Modal className="metadata-face-recognition-dialog" isOpen={true} toggle={onToggle}>
+    <>
-      <ModalHeader toggle={onToggle}>{gettext('Face recognition management')}</ModalHeader>
+      <ModalBody className="metadata-face-recognition-dialog">
-      <ModalBody>
         <Switch
           checked={value}
           disabled={submitting || oldValue}
@@ -48,9 +47,9 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit
           onChange={onValueChange}
           placeholder={gettext('Face recognition')}
         />
-        <div className="tip">
+        <p className="tip m-0">
           {gettext('Enable face recognition to identify people in your photos.')}
-        </div>
+        </p>
       </ModalBody>
       {!oldValue && (
         <ModalFooter>
@@ -58,14 +57,14 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit
           <Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
         </ModalFooter>
       )}
-    </Modal>
+    </>
   );
 };
 
 MetadataFaceRecognitionDialog.propTypes = {
   value: PropTypes.bool.isRequired,
   repoID: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
 };
 

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { ModalBody, ModalFooter, Button } from 'reactstrap';
 import Switch from '../../../../components/common/switch';
 import toaster from '../../../../components/toast';
 import TurnOffConfirmDialog from './turn-off-confirm';
@@ -11,7 +11,7 @@ import { gettext } from '../../../../utils/constants';
 
 import './index.css';
 
-const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submit }) => {
+const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
   const [value, setValue] = useState(oldValue);
   const [submitting, setSubmitting] = useState(false);
   const [showTurnOffConfirmDialog, setShowTurnOffConfirmDialog] = useState(false);
@@ -62,9 +62,8 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
   return (
     <>
       {!showTurnOffConfirmDialog && (
-        <Modal className="metadata-status-management-dialog" isOpen={true} toggle={onToggle}>
+        <>
-          <ModalHeader toggle={onToggle}>{gettext('Extended properties management')}</ModalHeader>
+          <ModalBody className="metadata-status-management-dialog">
-          <ModalBody>
             <Switch
               checked={value}
               disabled={submitting}
@@ -74,15 +73,15 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
               onChange={onValueChange}
               placeholder={gettext('Enable extended properties')}
             />
-            <div className="tip">
+            <p className="tip m-0">
               {gettext('After enable extended properties for files, you can add different properties to files, like collaborators, file expiring time, file description. You can also create different views for files based extended properties.')}
-            </div>
+            </p>
           </ModalBody>
           <ModalFooter>
             <Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
             <Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
           </ModalFooter>
-        </Modal>
+        </>
       )}
       {showTurnOffConfirmDialog && (
         <TurnOffConfirmDialog toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit} />
@@ -94,7 +93,7 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
 MetadataStatusManagementDialog.propTypes = {
   value: PropTypes.bool,
   repoID: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
 };
 

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -12,7 +12,6 @@ import ShareDialog from '../../components/dialog/share-dialog';
 import toaster from '../../components/toast';
 import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
 import TransferDialog from '../../components/dialog/transfer-dialog';
-import LibHistorySettingDialog from '../../components/dialog/lib-history-setting-dialog';
 import ChangeRepoPasswordDialog from '../../components/dialog/change-repo-password-dialog';
 import ResetEncryptedRepoPasswordDialog from '../../components/dialog/reset-encrypted-repo-password-dialog';
 import LabelRepoStateDialog from '../../components/dialog/label-repo-state-dialog';
@@ -21,7 +20,6 @@ import Rename from '../../components/rename';
 import MylibRepoMenu from './mylib-repo-menu';
 import RepoAPITokenDialog from '../../components/dialog/repo-api-token-dialog';
 import RepoShareAdminDialog from '../../components/dialog/repo-share-admin-dialog';
-import LibOldFilesAutoDelDialog from '../../components/dialog/lib-old-files-auto-del-dialog';
 import RepoMonitoredIcon from '../../components/repo-monitored-icon';
 import { GRID_MODE, LIST_MODE } from '../../components/dir-view-mode/constants';
 import { userAPI } from '../../utils/user-api';
@@ -52,7 +50,6 @@ class MylibRepoListItem extends React.Component {
       isShareDialogShow: false,
       isDeleteDialogShow: false,
       isTransferDialogShow: false,
-      isHistorySettingDialogShow: false,
       isChangePasswordDialogShow: false,
       isResetPasswordDialogShow: false,
       isLabelRepoStateDialogOpen: false,
@@ -60,7 +57,6 @@ class MylibRepoListItem extends React.Component {
       isAPITokenDialogShow: false,
       isRepoShareAdminDialogOpen: false,
       isRepoDeleted: false,
-      isOldFilesAutoDelDialogOpen: false,
     };
   }
 
@@ -108,9 +104,6 @@ class MylibRepoListItem extends React.Component {
       case 'Transfer':
         this.onTransferToggle();
         break;
-      case 'History Setting':
-        this.onHistorySettingToggle();
-        break;
       case 'Change Password':
         this.onChangePasswordToggle();
         break;
@@ -135,9 +128,6 @@ class MylibRepoListItem extends React.Component {
       case 'Share Admin':
         this.toggleRepoShareAdminDialog();
         break;
-      case 'Old Files Auto Delete':
-        this.toggleOldFilesAutoDelDialog();
-        break;
       default:
         break;
     }
@@ -211,10 +201,6 @@ class MylibRepoListItem extends React.Component {
     this.setState({ isTransferDialogShow: !this.state.isTransferDialogShow });
   };
 
-  onHistorySettingToggle = () => {
-    this.setState({ isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow });
-  };
-
   onChangePasswordToggle = () => {
     this.setState({ isChangePasswordDialogShow: !this.state.isChangePasswordDialogShow });
   };
@@ -239,10 +225,6 @@ class MylibRepoListItem extends React.Component {
     this.setState({ isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen });
   };
 
-  toggleOldFilesAutoDelDialog = () => {
-    this.setState({ isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen });
-  };
-
   onUnfreezedItem = () => {
     this.setState({
       highlight: false,
@@ -510,15 +492,6 @@ class MylibRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
-        {this.state.isHistorySettingDialogShow && (
-          <ModalPortal>
-            <LibHistorySettingDialog
-              repoID={repo.repo_id}
-              itemName={repo.repo_name}
-              toggleDialog={this.onHistorySettingToggle}
-            />
-          </ModalPortal>
-        )}
         {this.state.isChangePasswordDialogShow && (
           <ModalPortal>
             <ChangeRepoPasswordDialog
@@ -574,14 +547,6 @@ class MylibRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
-        {this.state.isOldFilesAutoDelDialogOpen && (
-          <ModalPortal>
-            <LibOldFilesAutoDelDialog
-              repoID={repo.repo_id}
-              toggleDialog={this.toggleOldFilesAutoDelDialog}
-            />
-          </ModalPortal>
-        )}
 
       </Fragment>
     );

frontend/src/pages/my-libs/mylib-repo-menu.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext, isPro, folderPermEnabled, enableRepoSnapshotLabel, enableResetEncryptedRepoPassword, isEmailConfigured, enableRepoAutoDel } from '../../utils/constants';
+import { gettext, isPro, folderPermEnabled, enableRepoSnapshotLabel, enableResetEncryptedRepoPassword, isEmailConfigured } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
@@ -103,7 +103,7 @@ class MylibRepoMenu extends React.Component {
       operations.push(monitorOp);
     }
 
-    operations.push('Divider', 'History Setting', 'Advanced');
+    operations.push('Divider', 'Advanced');
     // Remove adjacent excess 'Divider'
     for (let i = 0; i < operations.length; i++) {
       if (operations[i] === 'Divider' && operations[i + 1] === 'Divider') {
@@ -120,9 +120,6 @@ class MylibRepoMenu extends React.Component {
     if (this.props.isPC && enableRepoSnapshotLabel) {
       operations.push('Label Current State');
     }
-    if (enableRepoAutoDel) {
-      operations.push('Old Files Auto Delete');
-    }
     return operations;
   };
 
@@ -147,9 +144,6 @@ class MylibRepoMenu extends React.Component {
       case 'Transfer':
         translateResult = gettext('Transfer');
         break;
-      case 'History Setting':
-        translateResult = gettext('History Setting');
-        break;
       case 'Change Password':
         translateResult = gettext('Change Password');
         break;
@@ -174,9 +168,6 @@ class MylibRepoMenu extends React.Component {
       case 'Share Admin':
         translateResult = gettext('Share Admin');
         break;
-      case 'Old Files Auto Delete':
-        translateResult = gettext('Auto Deletion Setting');
-        break;
       case 'Advanced':
         translateResult = gettext('Advanced');
         break;

frontend/src/utils/text-translation.js

@@ -165,10 +165,6 @@ const TextTranslation = {
     key: 'Watch File Changes',
     value: gettext('Watch File Changes')
   },
-  'HISTORY_SETTING': {
-    key: 'History Setting',
-    value: gettext('History Setting')
-  },
   'ADVANCED': {
     key: 'advanced',
     value: gettext('Advanced')
@@ -183,10 +179,6 @@ const TextTranslation = {
     key: 'Label Current State',
     value: gettext('Label Current State')
   },
-  'OLD_FILES_AUTO_DELETE': {
-    key: 'Old Files Auto Delete',
-    value: gettext('Old Files Auto Delete')
-  },
 
   'UNSHARE': {
     key: 'Unshare',

frontend/src/utils/utils.js

@@ -1,4 +1,5 @@
-import { mediaUrl, gettext, serviceURL, siteRoot, isPro, fileAuditEnabled, canGenerateShareLink, canGenerateUploadLink, shareLinkPasswordMinLength, username, folderPermEnabled, onlyofficeConverterExtensions, enableOnlyoffice, enableSeadoc, enableFileTags, enableRepoSnapshotLabel, enableRepoAutoDel, enableResetEncryptedRepoPassword, isEmailConfigured, isSystemStaff } from './constants';
+import { mediaUrl, gettext, serviceURL, siteRoot, isPro, fileAuditEnabled, canGenerateShareLink, canGenerateUploadLink, shareLinkPasswordMinLength, username, folderPermEnabled, onlyofficeConverterExtensions, enableOnlyoffice, enableSeadoc, enableFileTags, enableRepoSnapshotLabel,
+  enableResetEncryptedRepoPassword, isEmailConfigured, isSystemStaff } from './constants';
 import TextTranslation from './text-translation';
 import React from 'react';
 import toaster from '../components/toast';
@@ -720,7 +721,7 @@ export const Utils = {
     const showResetPasswordMenuItem = isPro && repo.encrypted && enableResetEncryptedRepoPassword && isEmailConfigured;
     const operations = [];
     const DIVIDER = 'Divider';
-    const { SHARE, DELETE, RENAME, TRANSFER, FOLDER_PERMISSION, SHARE_ADMIN, CHANGE_PASSWORD, RESET_PASSWORD, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, HISTORY_SETTING, ADVANCED } = TextTranslation;
+    const { SHARE, DELETE, RENAME, TRANSFER, FOLDER_PERMISSION, SHARE_ADMIN, CHANGE_PASSWORD, RESET_PASSWORD, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, ADVANCED } = TextTranslation;
 
     operations.push(SHARE, DELETE, DIVIDER, RENAME, TRANSFER);
 
@@ -742,7 +743,7 @@ export const Utils = {
       operations.push(monitorOp);
     }
 
-    operations.push(DIVIDER, HISTORY_SETTING);
+    operations.push(DIVIDER);
     const subOpList = Utils.getAdvancedOperations();
     operations.push({ ...ADVANCED, subOpList });
 
@@ -752,7 +753,7 @@ export const Utils = {
 
   getAdvancedOperations: function () {
     const operations = [];
-    const { API_TOKEN, LABEL_CURRENT_STATE, OLD_FILES_AUTO_DELETE } = TextTranslation;
+    const { API_TOKEN, LABEL_CURRENT_STATE } = TextTranslation;
 
     operations.push(API_TOKEN);
 
@@ -760,10 +761,6 @@ export const Utils = {
       operations.push(LABEL_CURRENT_STATE);
     }
 
-    if (enableRepoAutoDel) {
-      operations.push(OLD_FILES_AUTO_DELETE);
-    }
-
     return operations;
   },
 
@@ -796,7 +793,7 @@ export const Utils = {
 
   getSharedRepoOperationList: function (repo, currentGroup, isPublic) {
     const operations = [];
-    const { SHARE, UNSHARE, DELETE, RENAME, FOLDER_PERMISSION, SHARE_ADMIN, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, HISTORY_SETTING, ADVANCED, CHANGE_PASSWORD, RESET_PASSWORD } = TextTranslation;
+    const { SHARE, UNSHARE, DELETE, RENAME, FOLDER_PERMISSION, SHARE_ADMIN, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, ADVANCED, CHANGE_PASSWORD, RESET_PASSWORD, API_TOKEN } = TextTranslation;
 
     const isStaff = currentGroup && currentGroup.admins && currentGroup.admins.indexOf(username) > -1;
     const isRepoOwner = repo.owner_email === username;
@@ -830,9 +827,9 @@ export const Utils = {
               const monitorOp = repo.monitored ? UNWATCH_FILE_CHANGES : WATCH_FILE_CHANGES;
               operations.push(monitorOp);
             }
-            operations.push(DIVIDER, HISTORY_SETTING);
             if (Utils.isDesktop()) {
-              const subOpList = Utils.getAdvancedOperations();
+              operations.push(DIVIDER);
+              const subOpList = [API_TOKEN];
               operations.push({ ...ADVANCED, subOpList });
             }
             return operations;