feat: Optimize data migration

packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss

@@ -50,14 +50,16 @@
 
       .itemBtn {
         color: var(--secondary-text-color);
-        padding: 0 16px;
-        flex-shrink: 0;
+        padding: 0 8px;
         border-radius: 8px;
         height: 100%;
         background: var(--input-disabled-color);
         border: 1px solid var(--divide-line-color);
         &:hover:not([disabled]) {
-          color: var(--primary-color);
+          g,
+          path {
+            stroke: var(--primary-color);
+          }
         }
         &[disabled] {
           cursor: not-allowed;
@@ -160,3 +162,29 @@
   word-break: normal;
   white-space: normal;
 }
+
+.moreTooltip {
+  height: 100%;
+}
+
+.moreTip {
+  margin-top: 4px;
+  margin-left: 60px;
+}
+
+.actions {
+  button {
+    background: none;
+    font-size: 14px;
+    line-height: 30px;
+    color: var(--main-text-color);
+    border: none;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+}

packages/neuron-ui/src/components/DataSetting/hooks.ts

@@ -18,42 +18,62 @@ export const useDataPath = (network?: State.Network) => {
       }
     })
   }, [network?.id])
-  const onSetting = useCallback(() => {
-    invokeShowOpenDialog({
-      buttonLabel: t('settings.data.set', { lng: navigator.language }),
-      properties: ['openDirectory', 'createDirectory', 'promptToCreate', 'treatPackageAsDirectory'],
-    }).then(res => {
-      if (isSuccessResponse(res) && !res.result?.canceled && res.result?.filePaths?.length) {
-        setCurrentPath(res.result?.filePaths?.[0])
-        stopProcessMonitor(type).then(stopRes => {
-          if (isSuccessResponse(stopRes)) {
-            setIsDialogOpen(true)
-          }
-        })
-      }
-    })
-  }, [t, type])
+
+  const onSetting = useCallback(
+    (onSuccess?: (path: string) => void) => {
+      invokeShowOpenDialog({
+        buttonLabel: t('settings.data.set', { lng: navigator.language }),
+        properties: ['openDirectory', 'createDirectory', 'promptToCreate', 'treatPackageAsDirectory'],
+      }).then(res => {
+        if (isSuccessResponse(res) && !res.result?.canceled && res.result?.filePaths?.length) {
+          const path = res.result?.filePaths?.[0]
+          setCurrentPath(path)
+          stopProcessMonitor(type).then(stopRes => {
+            if (isSuccessResponse(stopRes)) {
+              onSuccess?.(path)
+            }
+          })
+        }
+      })
+    },
+    [t, type]
+  )
+
   const onCancel = useCallback(() => {
     startProcessMonitor(type).then(res => {
       if (isSuccessResponse(res)) {
         setIsDialogOpen(false)
       }
     })
   }, [setIsDialogOpen, type])
+
+  const onResync = useCallback(async () => {
+    await stopProcessMonitor(type)
+    return startProcessMonitor(type)
+  }, [type])
+
   const onConfirm = useCallback(
     (dataPath: string) => {
       setPrevPath(dataPath)
       setIsDialogOpen(false)
     },
     [setIsDialogOpen, setPrevPath]
   )
+
+  const openDialog = useCallback(() => {
+    setCurrentPath('')
+    setIsDialogOpen(true)
+  }, [setIsDialogOpen, setCurrentPath])
+
   return {
     prevPath,
     currentPath,
     onSetting,
     onCancel,
     onConfirm,
     isDialogOpen,
+    openDialog,
+    onResync,
   }
 }
 

packages/neuron-ui/src/components/DataSetting/index.tsx

@@ -1,12 +1,15 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ClearCache from 'components/ClearCache'
 import { useDispatch, useState as useGlobalState } from 'states'
 import { shell } from 'electron'
 import Tooltip from 'widgets/Tooltip'
 import { NetworkType } from 'utils/const'
-import { Attention } from 'widgets/Icons/icon'
-import MigrateCkbDataDialog from 'widgets/MigrateCkbDataDialog'
+import { Attention, More } from 'widgets/Icons/icon'
+import Toast from 'widgets/Toast'
+import ModifyPathDialog from 'components/ModifyPathDialog'
+import AlertDialog from 'widgets/AlertDialog'
+import { isSuccessResponse } from 'utils'
 import { useDataPath } from './hooks'
 
 import styles from './dataSetting.module.scss'
@@ -28,9 +31,33 @@ const PathItem = ({
       <button className={styles.itemPath} type="button" onClick={openPath}>
         {path}
       </button>
-      <button className={styles.itemBtn} type="button" onClick={handleClick} disabled={disabled}>
-        {t('settings.data.set-path')}
-      </button>
+      <Tooltip
+        className={styles.moreTooltip}
+        tipClassName={styles.moreTip}
+        tip={
+          <div className={styles.actions}>
+            {[
+              {
+                label: 'settings.data.browse-local-files',
+                onClick: openPath,
+              },
+              {
+                label: 'settings.data.modify-path',
+                onClick: handleClick,
+              },
+            ].map(({ label, onClick }) => (
+              <button type="button" key={label} onClick={onClick}>
+                <span>{t(label)}</span>
+              </button>
+            ))}
+          </div>
+        }
+        trigger="click"
+      >
+        <button className={styles.itemBtn} type="button" disabled={disabled}>
+          <More />
+        </button>
+      </Tooltip>
     </div>
   )
 }
@@ -42,16 +69,31 @@ const DataSetting = () => {
     chain: { networkID },
     settings: { networks = [] },
   } = useGlobalState()
+  const [notice, setNotice] = useState('')
+  const [showLostDialog, setShowLostDialog] = useState(false)
   const network = useMemo(() => networks.find(n => n.id === networkID), [networkID, networks])
-  const { onSetting, prevPath, currentPath, isDialogOpen, onCancel, onConfirm } = useDataPath(network)
+  const { isDialogOpen, openDialog, onSetting, prevPath, currentPath, onCancel, onConfirm, onResync } =
+    useDataPath(network)
 
   const openPath = useCallback(() => {
-    if (prevPath) {
-      shell.openPath(prevPath!)
-    }
-  }, [prevPath])
+    shell.openPath(prevPath).then(res => {
+      if (res) {
+        setShowLostDialog(true)
+      }
+    })
+  }, [prevPath, onResync])
   const isLightClient = network?.type === NetworkType.Light
   const hiddenDataPath = isLightClient || !network?.readonly
+
+  const handleResync = useCallback(() => {
+    setShowLostDialog(false)
+    onResync().then(res => {
+      if (isSuccessResponse(res)) {
+        openPath()
+      }
+    })
+  }, [openPath])
+
   return (
     <>
       <div className={styles.root}>
@@ -82,17 +124,36 @@ const DataSetting = () => {
           </div>
         </div>
         <div className={styles.rightContainer}>
-          {hiddenDataPath ? null : <PathItem path={prevPath} openPath={openPath} handleClick={onSetting} />}
+          {hiddenDataPath ? null : <PathItem path={prevPath} openPath={openPath} handleClick={openDialog} />}
           <ClearCache className={styles.item} btnClassName={styles.itemBtn} dispatch={dispatch} />
         </div>
       </div>
-      <MigrateCkbDataDialog
-        show={isDialogOpen}
-        prevPath={prevPath}
-        currentPath={currentPath}
-        onCancel={onCancel}
-        onConfirm={onConfirm}
-      />
+
+      {isDialogOpen && (
+        <ModifyPathDialog
+          prevPath={prevPath}
+          currentPath={currentPath}
+          onCancel={onCancel}
+          onConfirm={onConfirm}
+          onSetting={onSetting}
+          setNotice={setNotice}
+        />
+      )}
+
+      {showLostDialog && (
+        <AlertDialog
+          show
+          title={t('settings.data.sync-file-lost')}
+          message={t('settings.data.sync-file-lost-notice')}
+          type="warning"
+          cancelText={t('settings.data.resync')}
+          onCancel={handleResync}
+          okText={t('settings.data.retry')}
+          onOk={() => setShowLostDialog(false)}
+        />
+      )}
+
+      <Toast content={notice} onDismiss={() => setNotice('')} />
     </>
   )
 }