You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by e2...@apache.org on 2022/09/29 14:59:04 UTC

[incubator-devlake] branch main updated: fix: fix migration dialog only appear after refresh (#3260)

This is an automated email from the ASF dual-hosted git repository.

e2corporation pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


The following commit(s) were added to refs/heads/main by this push:
     new b2582272 fix: fix migration dialog only appear after refresh (#3260)
b2582272 is described below

commit b25822726433b26f1e897da696751989604e5d74
Author: likyh <l...@likyh.com>
AuthorDate: Thu Sep 29 22:59:00 2022 +0800

    fix: fix migration dialog only appear after refresh (#3260)
    
    * fix: fix migration dialog only appear after refresh
    
    * fix: fix for lint
    
    * fix: add additional 3s after migrations run...
    
    * fix: for lint
    
    Co-authored-by: linyh <ya...@meri.co>
---
 config-ui/src/App.js                          |  6 +---
 config-ui/src/config/migration.js             |  8 ++++-
 config-ui/src/hooks/useDatabaseMigrations.jsx | 42 +++++++++++----------------
 config-ui/src/utils/request.js                | 12 +++-----
 4 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/config-ui/src/App.js b/config-ui/src/App.js
index 0ee04a5b..c745e5e7 100644
--- a/config-ui/src/App.js
+++ b/config-ui/src/App.js
@@ -52,10 +52,6 @@ function App(props) {
     migrationAlertOpened,
     wasMigrationSuccessful,
     hasMigrationFailed,
-    setMigrationWarning,
-    setMigrationAlertOpened,
-    setWasMigrationSuccessful,
-    setHasMigrationFailed,
     handleConfirmMigration,
     handleCancelMigration,
     handleMigrationDialogClose
@@ -123,7 +119,7 @@ function App(props) {
         onCancel={handleCancelMigration}
         onConfirm={handleConfirmMigration}
         isMigrating={isProcessing}
-        wasSuccesful={wasMigrationSuccessful}
+        wasSuccessful={wasMigrationSuccessful}
         hasFailed={hasMigrationFailed}
       />
     </Router>
diff --git a/config-ui/src/config/migration.js b/config-ui/src/config/migration.js
index 527fc45e..3aa9366d 100644
--- a/config-ui/src/config/migration.js
+++ b/config-ui/src/config/migration.js
@@ -16,15 +16,21 @@
  *
  */
 import { DEVLAKE_ENDPOINT } from '@/utils/config'
+
+let needMigrateCallback = (errorObject) => undefined
+
 const MigrationOptions = {
   apiProceedEndpoint: `${DEVLAKE_ENDPOINT}/proceed-db-migration`, // API Get Endpoint
   // NO Api.Get action required for cancel at this time
   apiCancelEndpoint: null,
   apiStatusCode: 428, // API Response Code for Migration Required
-  warningId: 'DEVLAKE__MIGRATION_WARNING', // Local Storage Warning ID Key
   cancelToastMessage:
     'Migration Halted - Please downgrade manually, you will continue to receive a warning unless you proceed with migration or rollback.',
   failedToastMessage: 'Database Migration Failed! (Check Network Console)',
+  runNeedMigrateCallback: (errorObject) => needMigrateCallback(errorObject),
+  setNeedMigrateCallback: (cb) => {
+    needMigrateCallback = cb
+  },
   AlertDialog: {
     title: 'New Migration Scripts Detected',
     cancelBtnText: 'Cancel',
diff --git a/config-ui/src/hooks/useDatabaseMigrations.jsx b/config-ui/src/hooks/useDatabaseMigrations.jsx
index a545de37..a784964a 100644
--- a/config-ui/src/hooks/useDatabaseMigrations.jsx
+++ b/config-ui/src/hooks/useDatabaseMigrations.jsx
@@ -24,9 +24,7 @@ import { ToastNotification } from '@/components/Toast'
 function useDatabaseMigrations(Configuration = MigrationOptions) {
   const [isProcessing, setIsProcessing] = useState(false)
 
-  const [migrationWarning, setMigrationWarning] = useState(
-    localStorage.getItem(Configuration.warningId)
-  )
+  const [migrationWarning, setMigrationWarning] = useState()
   const [migrationAlertOpened, setMigrationAlertOpened] = useState(false)
   const [wasMigrationSuccessful, setWasMigrationSuccessful] = useState(false)
   const [hasMigrationFailed, setHasMigrationFailed] = useState(false)
@@ -35,8 +33,10 @@ function useDatabaseMigrations(Configuration = MigrationOptions) {
     setIsProcessing(true)
     const migrate = async () => {
       const m = await request.get(Configuration.apiProceedEndpoint)
-      setWasMigrationSuccessful(m?.status === 200 && m?.data?.success === true)
       setTimeout(() => {
+        setWasMigrationSuccessful(
+          m?.status === 200 && m?.data?.success === true
+        )
         setIsProcessing(false)
         setHasMigrationFailed(m?.status !== 200)
       }, 3000)
@@ -46,7 +46,6 @@ function useDatabaseMigrations(Configuration = MigrationOptions) {
 
   const handleCancelMigration = useCallback(() => {
     setIsProcessing(true)
-    localStorage.removeItem(Configuration.warningId)
     setMigrationAlertOpened(false)
     setIsProcessing(false)
     ToastNotification.clear()
@@ -56,22 +55,16 @@ function useDatabaseMigrations(Configuration = MigrationOptions) {
       intent: Intent.NONE,
       icon: 'warning-sign'
     })
-  }, [Configuration.cancelToastMessage, Configuration.warningId])
+  }, [Configuration.cancelToastMessage])
 
   const handleMigrationDialogClose = useCallback(() => {
     setMigrationAlertOpened(false)
   }, [setMigrationAlertOpened])
 
   useEffect(() => {
-    setMigrationAlertOpened(migrationWarning !== null)
+    setMigrationAlertOpened(!!migrationWarning)
   }, [migrationWarning, setMigrationAlertOpened])
 
-  useEffect(() => {
-    if (wasMigrationSuccessful) {
-      localStorage.removeItem(MigrationOptions.warningId)
-    }
-  }, [wasMigrationSuccessful])
-
   useEffect(() => {
     if (hasMigrationFailed) {
       ToastNotification.clear()
@@ -84,15 +77,18 @@ function useDatabaseMigrations(Configuration = MigrationOptions) {
     }
   }, [hasMigrationFailed])
 
+  const setNeedMigrateCallback = useCallback(
+    (errorObject) => {
+      setMigrationWarning(errorObject)
+      setWasMigrationSuccessful(false)
+      setIsProcessing(false)
+      setHasMigrationFailed(false)
+    },
+    [setMigrationWarning]
+  )
   useEffect(() => {
-    if (migrationWarning) {
-      // eslint-disable-next-line max-len
-      console.log(
-        `>>> MIGRATION WARNING DETECTED !! Local Storage Key = [${MigrationOptions.warningId}]:`,
-        migrationWarning
-      )
-    }
-  }, [migrationWarning])
+    MigrationOptions.setNeedMigrateCallback(setNeedMigrateCallback)
+  }, [setNeedMigrateCallback])
 
   return {
     migrationWarning,
@@ -100,10 +96,6 @@ function useDatabaseMigrations(Configuration = MigrationOptions) {
     wasMigrationSuccessful,
     hasMigrationFailed,
     isProcessing,
-    setMigrationWarning,
-    setMigrationAlertOpened,
-    setWasMigrationSuccessful,
-    setHasMigrationFailed,
     setIsProcessing,
     handleConfirmMigration,
     handleCancelMigration,
diff --git a/config-ui/src/utils/request.js b/config-ui/src/utils/request.js
index 88e3b304..a4f2172d 100644
--- a/config-ui/src/utils/request.js
+++ b/config-ui/src/utils/request.js
@@ -35,18 +35,14 @@ const handleErrorResponse = (e, cb = () => {}) => {
       status: e.response ? e.response.status : 504
     }
   }
-  localStorage.removeItem(MigrationOptions.warningId)
   if (e.response?.status === MigrationOptions.apiStatusCode) {
     console.log(
       '>>> DATABASE MIGRATION REQUESTED! Setting Warning Identifier in Browser Storage...'
     )
-    localStorage.setItem(
-      MigrationOptions.warningId,
-      JSON.stringify({
-        migration: true,
-        message: e.response?.data?.message
-      })
-    )
+    MigrationOptions.runNeedMigrateCallback({
+      migration: true,
+      message: e.response?.data?.message
+    })
   }
   cb(e)
   return errorResponse