Add repo setting tip when disable Metadata (#7623)

* Add repo setting tip when disable Metadata

* can not use button when disable metadata

frontend/src/components/dialog/image-dialog/index.js

@@ -5,7 +5,6 @@ import Lightbox from '@seafile/react-image-lightbox';
 import { useMetadataAIOperations } from '../../../hooks/metadata-ai-operation';
 import EmbeddedFileDetails from '../../dirent-detail/embedded-file-details';
 import { SYSTEM_FOLDERS } from '../../../constants';
-import { Utils } from '../../../utils/utils';
 import Icon from '../../icon';
 
 import '@seafile/react-image-lightbox/style.css';

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

@@ -51,7 +51,6 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
   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 enableMetadataOtherSettings = enableExtendedPropertiesSetting && enableMetadata;
 
   return (
     <div>
@@ -63,48 +62,98 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
           <Fragment>
             <div className="lib-setting-nav p-4">
               <Nav pills className="flex-column">
-                {enableHistorySetting && (
+                {enableHistorySetting &&
-                  <NavItem role="tab" aria-selected={activeTab === TAB.HISTORY_SETTING} aria-controls="history-setting-panel">
+                  <NavItem
-                    <NavLink className={activeTab === TAB.HISTORY_SETTING ? 'active' : ''} onClick={(toggleTab.bind(this, TAB.HISTORY_SETTING))} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    role="tab"
+                    aria-selected={activeTab === TAB.HISTORY_SETTING}
+                    aria-controls="history-setting-panel"
+                  >
+                    <NavLink
+                      className={activeTab === TAB.HISTORY_SETTING ? 'active' : ''}
+                      onClick={toggleTab.bind(this, TAB.HISTORY_SETTING)}
+                      tabIndex="0"
+                      onKeyDown={onTabKeyDown}
+                    >
                       {gettext('History')}
                     </NavLink>
                   </NavItem>
-                )}
+                }
-                {enableAutoDelSetting && (
+                {enableAutoDelSetting &&
-                  <NavItem role="tab" aria-selected={activeTab === TAB.AUTO_DEL_SETTING} aria-controls="auto-del-setting-panel">
+                  <NavItem
-                    <NavLink className={activeTab === TAB.AUTO_DEL_SETTING ? 'active' : ''} onClick={toggleTab.bind(this, TAB.AUTO_DEL_SETTING)} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    role="tab"
+                    aria-selected={activeTab === TAB.AUTO_DEL_SETTING}
+                    aria-controls="auto-del-setting-panel"
+                  >
+                    <NavLink
+                      className={activeTab === TAB.AUTO_DEL_SETTING ? 'active' : ''}
+                      onClick={toggleTab.bind(this, TAB.AUTO_DEL_SETTING)}
+                      tabIndex="0"
+                      onKeyDown={onTabKeyDown}
+                    >
                       {gettext('Auto deletion')}
                     </NavLink>
                   </NavItem>
-                )}
+                }
-                {enableExtendedPropertiesSetting && (
+                {enableExtendedPropertiesSetting &&
-                  <NavItem role="tab" aria-selected={activeTab === TAB.EXTENDED_PROPERTIES_SETTING} aria-controls="extended-properties-setting-panel">
+                  <>
-                    <NavLink className={activeTab === TAB.EXTENDED_PROPERTIES_SETTING ? 'active' : ''} onClick={toggleTab.bind(this, TAB.EXTENDED_PROPERTIES_SETTING)} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    <NavItem
+                      role="tab"
+                      aria-selected={activeTab === TAB.EXTENDED_PROPERTIES_SETTING}
+                      aria-controls="extended-properties-setting-panel"
+                    >
+                      <NavLink
+                        className={activeTab === TAB.EXTENDED_PROPERTIES_SETTING ? 'active' : ''}
+                        onClick={toggleTab.bind(this, TAB.EXTENDED_PROPERTIES_SETTING)}
+                        tabIndex="0"
+                        onKeyDown={onTabKeyDown}
+                      >
                         {gettext('Extended properties')}
                       </NavLink>
                     </NavItem>
-                )}
+                    <NavItem
-                {enableMetadataOtherSettings && (
+                      role="tab"
-                  <NavItem role="tab" aria-selected={activeTab === TAB.FACE_RECOGNITION_SETTING} aria-controls="face-recognition-setting-panel">
+                      aria-selected={activeTab === TAB.FACE_RECOGNITION_SETTING}
-                    <NavLink className={activeTab === TAB.FACE_RECOGNITION_SETTING ? 'active' : ''} onClick={toggleTab.bind(this, TAB.FACE_RECOGNITION_SETTING)} tabIndex="0" onKeyDown={onTabKeyDown}>
+                      aria-controls="face-recognition-setting-panel"
+                    >
+                      <NavLink
+                        className={activeTab === TAB.FACE_RECOGNITION_SETTING ? 'active' : ''}
+                        onClick={toggleTab.bind(this, TAB.FACE_RECOGNITION_SETTING)}
+                        tabIndex="0"
+                        onKeyDown={onTabKeyDown}
+                      >
                         {gettext('Face recognition')}
                       </NavLink>
                     </NavItem>
-                )}
+                    <NavItem
-                {enableMetadataOtherSettings && (
+                      role="tab"
-                  <NavItem role="tab" aria-selected={activeTab === TAB.TAGS_SETTING} aria-controls="tags-setting-panel">
+                      aria-selected={activeTab === TAB.TAGS_SETTING}
-                    <NavLink className={activeTab === TAB.TAGS_SETTING ? 'active' : ''} onClick={toggleTab.bind(this, TAB.TAGS_SETTING)} tabIndex="0" onKeyDown={onTabKeyDown}>
+                      aria-controls="tags-setting-panel"
+                    >
+                      <NavLink
+                        className={activeTab === TAB.TAGS_SETTING ? 'active' : ''}
+                        onClick={toggleTab.bind(this, TAB.TAGS_SETTING)}
+                        tabIndex="0"
+                        onKeyDown={onTabKeyDown}
+                      >
                         {gettext('Tags')}
                       </NavLink>
                     </NavItem>
-                )}
+                    <NavItem
-                {enableMetadataOtherSettings && (
+                      role="tab"
-                  <NavItem role="tab" aria-selected={activeTab === TAB.OCR_SETTING} aria-controls="ocr-setting-panel">
+                      aria-selected={activeTab === TAB.OCR_SETTING}
-                    <NavLink className={activeTab === TAB.OCR_SETTING ? 'active' : ''} onClick={toggleTab.bind(this, TAB.OCR_SETTING)} tabIndex="0" onKeyDown={onTabKeyDown}>
+                      aria-controls="ocr-setting-panel"
+                    >
+                      <NavLink
+                        className={activeTab === TAB.OCR_SETTING ? 'active' : ''}
+                        onClick={toggleTab.bind(this, TAB.OCR_SETTING)}
+                        tabIndex="0"
+                        onKeyDown={onTabKeyDown}
+                      >
                         {gettext('OCR')}
                       </NavLink>
                     </NavItem>
-                )}
+                  </>
+                }
               </Nav>
             </div>
             <TabContent activeTab={activeTab} className="flex-fill">
@@ -134,17 +183,18 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
                   />
                 </TabPane>
               )}
-              {(enableMetadataOtherSettings && activeTab === TAB.FACE_RECOGNITION_SETTING) && (
+              {(enableExtendedPropertiesSetting && activeTab === TAB.FACE_RECOGNITION_SETTING) && (
                 <TabPane tabId={TAB.FACE_RECOGNITION_SETTING} role="tabpanel" id="face-recognition-setting-panel">
                   <LibFaceRecognitionSettingPanel
                     repoID={repoID}
                     value={enableFaceRecognition}
                     submit={updateEnableFaceRecognition}
                     toggleDialog={toggleDialog}
+                    enableMetadata={enableMetadata}
                   />
                 </TabPane>
               )}
-              {(enableMetadataOtherSettings && activeTab === TAB.TAGS_SETTING) && (
+              {(enableExtendedPropertiesSetting && activeTab === TAB.TAGS_SETTING) && (
                 <TabPane tabId={TAB.TAGS_SETTING} role="tabpanel" id="tags-setting-panel">
                   <LibMetadataTagsStatusSettingPanel
                     repoID={repoID}
@@ -152,10 +202,11 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
                     lang={tagsLang}
                     submit={updateEnableTags}
                     toggleDialog={toggleDialog}
+                    enableMetadata={enableMetadata}
                   />
                 </TabPane>
               )}
-              {(enableMetadataOtherSettings && activeTab === TAB.OCR_SETTING) && (
+              {(enableExtendedPropertiesSetting && activeTab === TAB.OCR_SETTING) && (
                 <TabPane tabId={TAB.OCR_SETTING} role="tabpanel" id="ocr-setting-panel">
                   <LibMetadataOCRStatusSettingPanel
                     repoID={repoID}
@@ -163,6 +214,7 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
                     lang={tagsLang}
                     submit={updateEnableOCR}
                     toggleDialog={toggleDialog}
+                    enableMetadata={enableMetadata}
                   />
                 </TabPane>
               )}

frontend/src/components/switch/index.css

@@ -9,10 +9,6 @@
   cursor: pointer;
 }
 
-.seahub-switch.small .custom-switch-indicator.disabled {
-  cursor: default;
-}
-
 .seahub-switch.small .custom-switch-indicator:before {
   height: 8px;
   width: 8px;
@@ -21,3 +17,8 @@
 .seahub-switch.small .custom-switch-input:checked~.custom-switch-indicator:before {
   left: 12px;
 }
+
+.seahub-switch.disabled .custom-switch,
+.seahub-switch .custom-switch-indicator.disabled {
+  cursor: not-allowed;
+}

frontend/src/components/switch/index.js

@@ -6,7 +6,7 @@ import './index.css';
 
 function Switch({ onChange, checked, placeholder, disabled, className, size, textPosition = 'left', setRef }) {
   return (
-    <div className={classnames('seahub-switch position-relative', className, size)} ref={setRef}>
+    <div className={classnames('seahub-switch position-relative', className, size, { 'disabled': disabled })} ref={setRef}>
       <label className="custom-switch">
         <input
           className="custom-switch-input"

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

@@ -11,7 +11,7 @@ import TurnOffConfirmDialog from '../turn-off-confirm-dialog';
 
 import './index.css';
 
-const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
+const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit, enableMetadata }) => {
   const [value, setValue] = useState(oldValue);
   const [submitting, setSubmitting] = useState(false);
   const [showTurnOffConfirmDialog, setShowTurnOffConfirmDialog] = useState(false);
@@ -63,9 +63,10 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog:
       {!showTurnOffConfirmDialog && (
         <>
           <ModalBody className="metadata-face-recognition-dialog">
+            {!enableMetadata && <p className="tip">{gettext('Please enable the extended properties setting first')}</p>}
             <Switch
               checked={value}
-              disabled={submitting}
+              disabled={submitting || !enableMetadata}
               size="large"
               textPosition="right"
               className={classnames('change-face-recognition-status-management w-100', { 'disabled': submitting || oldValue })}
@@ -78,7 +79,7 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog:
           </ModalBody>
           <ModalFooter>
             <Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
-            <Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
+            <Button color="primary" disabled={oldValue === value || submitting || !enableMetadata} onClick={onSubmit}>{gettext('Submit')}</Button>
           </ModalFooter>
         </>
       )}
@@ -96,6 +97,7 @@ MetadataFaceRecognitionDialog.propTypes = {
   repoID: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
+  enableMetadata: PropTypes.bool.isRequired,
 };
 
 export default MetadataFaceRecognitionDialog;

frontend/src/metadata/components/dialog/metadata-ocr-status-management-dialog/index.js

@@ -9,7 +9,7 @@ import metadataAPI from '../../../api';
 import { Utils } from '../../../../utils/utils';
 import { gettext } from '../../../../utils/constants';
 
-const MetadataOCRStatusManagementDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
+const MetadataOCRStatusManagementDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit, enableMetadata }) => {
   const [value, setValue] = useState(oldValue);
   const [submitting, setSubmitting] = useState(false);
   const [showTurnOffConfirmDialog, setShowTurnOffConfirmDialog] = useState(false);
@@ -62,9 +62,10 @@ const MetadataOCRStatusManagementDialog = ({ value: oldValue, repoID, toggleDial
       {!showTurnOffConfirmDialog && (
         <>
           <ModalBody className="metadata-status-management-dialog">
+            {!enableMetadata && <p className="tip">{gettext('Please enable the extended properties setting first')}</p>}
             <Switch
               checked={value}
-              disabled={submitting}
+              disabled={submitting || !enableMetadata}
               size="large"
               textPosition="right"
               className={classnames('change-metadata-status-management w-100', { 'disabled': submitting })}
@@ -77,7 +78,7 @@ const MetadataOCRStatusManagementDialog = ({ value: oldValue, repoID, toggleDial
           </ModalBody>
           <ModalFooter>
             <Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
-            <Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
+            <Button color="primary" disabled={oldValue === value || submitting || !enableMetadata} onClick={onSubmit}>{gettext('Submit')}</Button>
           </ModalFooter>
         </>
       )}
@@ -95,6 +96,7 @@ MetadataOCRStatusManagementDialog.propTypes = {
   repoID: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
+  enableMetadata: PropTypes.bool.isRequired,
 };
 
 export default MetadataOCRStatusManagementDialog;

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

@@ -22,7 +22,7 @@ const langOptions = [
   }
 ];
 
-const MetadataTagsStatusDialog = ({ value: oldValue, lang: oldLang, repoID, toggleDialog: toggle, submit }) => {
+const MetadataTagsStatusDialog = ({ value: oldValue, lang: oldLang, repoID, toggleDialog: toggle, submit, enableMetadata }) => {
   const [value, setValue] = useState(oldValue);
   const [lang, setLang] = useState(oldLang);
   const [submitting, setSubmitting] = useState(false);
@@ -81,9 +81,10 @@ const MetadataTagsStatusDialog = ({ value: oldValue, lang: oldLang, repoID, togg
       {!showTurnOffConfirmDialog && (
         <>
           <ModalBody className="metadata-face-recognition-dialog">
+            {!enableMetadata && <p className="tip">{gettext('Please enable the extended properties setting first')}</p>}
             <Switch
               checked={value}
-              disabled={submitting}
+              disabled={submitting || !enableMetadata}
               size="large"
               textPosition="right"
               className={classnames('change-face-recognition-status-management w-100', { 'disabled': submitting || oldValue })}
@@ -108,7 +109,7 @@ const MetadataTagsStatusDialog = ({ value: oldValue, lang: oldLang, repoID, togg
           </ModalBody>
           <ModalFooter>
             <Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
-            <Button color="primary" disabled={(oldValue === value && oldLang === lang.value) || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
+            <Button color="primary" disabled={(oldValue === value && oldLang === lang.value) || submitting || !enableMetadata} onClick={onSubmit}>{gettext('Submit')}</Button>
           </ModalFooter>
         </>
       )}
@@ -126,6 +127,7 @@ MetadataTagsStatusDialog.propTypes = {
   repoID: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
+  enableMetadata: PropTypes.bool.isRequired,
 };
 
 export default MetadataTagsStatusDialog;