update ui

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

@@ -14,6 +14,7 @@ import {
 } from '../../metadata';
 import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import { useMetadataStatus } from '../../hooks';
+import Loading from '../../components/loading';
 
 import '../../css/lib-settings.css';
 
@@ -28,6 +29,7 @@ const propTypes = {
 
 const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab, showMigrateTip, usedRepoTags, onMigrateSuccess }) => {
   const [activeTab, setActiveTab] = useState(tab || TAB.HISTORY_SETTING);
+  const [isMigrating, setIsMigrating] = useState(false);
   const toggleTab = useCallback((tab) => {
     setActiveTab(tab);
   }, []);
@@ -46,9 +48,38 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab, showMig
   const enableAutoDelSetting = is_admin && enableRepoAutoDel;
   const enableExtendedPropertiesSetting = !encrypted && is_admin && enableMetadataManagement;
 
+  const handleMigrateStart = useCallback(() => {
+    setIsMigrating(true);
+  }, []);
+
+  const handleMigrateEnd = useCallback(() => {
+    setIsMigrating(false);
+    onMigrateSuccess && onMigrateSuccess();
+  }, [onMigrateSuccess]);
+
+  const handleMigrateError = useCallback(() => {
+    setIsMigrating(false);
+  }, []);
+
   return (
     <div>
       <Modal isOpen={true} className="lib-settings-dialog" toggle={toggleDialog}>
+        {isMigrating && (
+          <div style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1050
+          }}>
+            <Loading />
+          </div>
+        )}
         <SeahubModalHeader toggle={toggleDialog}>
           {gettext('Settings')}
         </SeahubModalHeader>
@@ -203,7 +234,9 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab, showMig
                     enableMetadata={enableMetadata}
                     showMigrateTip={showMigrateTip}
                     usedRepoTags={usedRepoTags}
-                    onMigrateSuccess={onMigrateSuccess}
+                    onMigrateSuccess={handleMigrateEnd}
+                    onMigrateError={handleMigrateError}
+                    onMigrateStart={handleMigrateStart}
                   />
                 </TabPane>
               )}

frontend/src/components/repo-info-bar-migrate.js

@@ -7,7 +7,7 @@ import { EVENT_BUS_TYPE } from '../components/common/event-bus-type';
 
 const RepoInfoBarMigrate = () => {
 
-  const { enableMetadata, detailsSettings } = useMetadataStatus();
+  const { enableMetadataManagement, detailsSettings } = useMetadataStatus();
   const tagsMigrated = detailsSettings?.tags_migrated;
   const openMigrate = () => {
     eventBus.dispatch(EVENT_BUS_TYPE.OPEN_TREE_PANEL, () => eventBus.dispatch(EVENT_BUS_TYPE.OPEN_LIBRARY_SETTINGS_TAGS));
@@ -15,17 +15,16 @@ const RepoInfoBarMigrate = () => {
 
   return (
     <div className="repo-info-bar-migrate mt-2">
-      {enableMetadata && !tagsMigrated ?
+      {!tagsMigrated && (
-        (
+        enableMetadataManagement ? (
           <>
             {gettext('Tips: There are tags of old version. Please migrate tags to new version.')}
             <Button color="link" size="sm" tag="a" onClick={openMigrate}>{gettext('Migrate')}</Button>
           </>
-        ) :
+        ) : (
-        (
           <>{gettext('Tips: These are tags of old version. The feature is deprecated and can no longer be used.')}</>
         )
-      }
+      )}
     </div>
   );
 };

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

@@ -19,13 +19,11 @@ const langOptions = [
   }
 ];
 
-const MetadataTagsStatusDialog = ({ value: oldValue, lang: oldLang, repoID, toggleDialog: toggle, submit, enableMetadata, showMigrateTip, usedRepoTags, onMigrateSuccess }) => {
+const MetadataTagsStatusDialog = ({ value: oldValue, lang: oldLang, repoID, toggleDialog: toggle, submit, enableMetadata, showMigrateTip, usedRepoTags, onMigrateSuccess, onMigrateStart, onMigrateError }) => {
   const [value, setValue] = useState(oldValue);
   const [lang, setLang] = useState(oldLang);
   const [submitting, setSubmitting] = useState(false);
-  const [migrated, setMigrated] = useState(false);
   const [showTurnOffConfirmDialog, setShowTurnOffConfirmDialog] = useState(false);
-
   const onToggle = useCallback(() => {
     toggle();
   }, [toggle]);
@@ -47,16 +45,16 @@ const MetadataTagsStatusDialog = ({ value: oldValue, lang: oldLang, repoID, togg
   }, [lang, repoID, submit, toggle, value]);
 
   const migrateTag = useCallback(() => {
+    onMigrateStart && onMigrateStart();
     tagsAPI.migrateTags(repoID, usedRepoTags).then(res => {
-      setMigrated(true);
       toaster.success(gettext('Tags migrated successfully'));
       onMigrateSuccess && onMigrateSuccess();
     }).catch(error => {
       const errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);
-      setMigrated(false);
+      onMigrateError && onMigrateError();
     });
-  }, [repoID, usedRepoTags, onMigrateSuccess]);
+  }, [repoID, usedRepoTags, onMigrateSuccess, onMigrateStart, onMigrateError]);
 
   const turnOffConfirmToggle = useCallback(() => {
     setShowTurnOffConfirmDialog(!showTurnOffConfirmDialog);
@@ -122,9 +120,8 @@ const MetadataTagsStatusDialog = ({ value: oldValue, lang: oldLang, repoID, togg
                 <Button
                   color="primary"
                   onClick={migrateTag}
-                  disabled={migrated}
                 >
-                  {migrated ? gettext('Migrated') : gettext('Migrate old version tags')}
+                  {gettext('Migrate old version tags')}
                 </Button>
               </FormGroup>
             }
@@ -153,6 +150,8 @@ MetadataTagsStatusDialog.propTypes = {
   showMigrateTip: PropTypes.bool,
   repoTags: PropTypes.array,
   onMigrateSuccess: PropTypes.func,
+  onMigrateError: PropTypes.func,
+  onMigrateStart: PropTypes.func,
 };
 
 export default MetadataTagsStatusDialog;