Skip to content

Commit c1cb549

Browse files
devchenyandevchenyan
committed
feat: Optimize data migration
1 parent 1ccb2d7 commit c1cb549

File tree

18 files changed

+565
-164
lines changed

18 files changed

+565
-164
lines changed

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

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,16 @@
5050

5151
.itemBtn {
5252
color: var(--secondary-text-color);
53-
padding: 0 16px;
54-
flex-shrink: 0;
53+
padding: 0 8px;
5554
border-radius: 8px;
5655
height: 100%;
5756
background: var(--input-disabled-color);
5857
border: 1px solid var(--divide-line-color);
5958
&:hover:not([disabled]) {
60-
color: var(--primary-color);
59+
g,
60+
path {
61+
stroke: var(--primary-color);
62+
}
6163
}
6264
&[disabled] {
6365
cursor: not-allowed;
@@ -160,3 +162,29 @@
160162
word-break: normal;
161163
white-space: normal;
162164
}
165+
166+
.moreTooltip {
167+
height: 100%;
168+
}
169+
170+
.moreTip {
171+
margin-top: 4px;
172+
margin-left: 60px;
173+
}
174+
175+
.actions {
176+
button {
177+
background: none;
178+
font-size: 14px;
179+
line-height: 30px;
180+
color: var(--main-text-color);
181+
border: none;
182+
text-align: left;
183+
display: flex;
184+
align-items: center;
185+
cursor: pointer;
186+
&:hover {
187+
color: var(--primary-color);
188+
}
189+
}
190+
}

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

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,42 +18,56 @@ export const useDataPath = (network?: State.Network) => {
1818
}
1919
})
2020
}, [network?.id])
21-
const onSetting = useCallback(() => {
22-
invokeShowOpenDialog({
23-
buttonLabel: t('settings.data.set', { lng: navigator.language }),
24-
properties: ['openDirectory', 'createDirectory', 'promptToCreate', 'treatPackageAsDirectory'],
25-
}).then(res => {
26-
if (isSuccessResponse(res) && !res.result?.canceled && res.result?.filePaths?.length) {
27-
setCurrentPath(res.result?.filePaths?.[0])
28-
stopProcessMonitor(type).then(stopRes => {
29-
if (isSuccessResponse(stopRes)) {
30-
setIsDialogOpen(true)
31-
}
32-
})
33-
}
34-
})
35-
}, [t, type])
21+
22+
const onSetting = useCallback(
23+
(onSuccess?: (path: string) => void) => {
24+
invokeShowOpenDialog({
25+
buttonLabel: t('settings.data.set', { lng: navigator.language }),
26+
properties: ['openDirectory', 'createDirectory', 'promptToCreate', 'treatPackageAsDirectory'],
27+
}).then(res => {
28+
if (isSuccessResponse(res) && !res.result?.canceled && res.result?.filePaths?.length) {
29+
const path = res.result?.filePaths?.[0]
30+
setCurrentPath(path)
31+
stopProcessMonitor(type).then(stopRes => {
32+
if (isSuccessResponse(stopRes)) {
33+
onSuccess?.(path)
34+
}
35+
})
36+
}
37+
})
38+
},
39+
[t, type]
40+
)
41+
3642
const onCancel = useCallback(() => {
3743
startProcessMonitor(type).then(res => {
3844
if (isSuccessResponse(res)) {
3945
setIsDialogOpen(false)
4046
}
4147
})
4248
}, [setIsDialogOpen, type])
49+
4350
const onConfirm = useCallback(
4451
(dataPath: string) => {
4552
setPrevPath(dataPath)
4653
setIsDialogOpen(false)
4754
},
4855
[setIsDialogOpen, setPrevPath]
4956
)
57+
58+
const openDialog = useCallback(() => {
59+
setCurrentPath('')
60+
setIsDialogOpen(true)
61+
}, [setIsDialogOpen, setCurrentPath])
62+
5063
return {
5164
prevPath,
5265
currentPath,
5366
onSetting,
5467
onCancel,
5568
onConfirm,
5669
isDialogOpen,
70+
openDialog,
5771
}
5872
}
5973

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

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { useDispatch, useState as useGlobalState } from 'states'
55
import { shell } from 'electron'
66
import Tooltip from 'widgets/Tooltip'
77
import { NetworkType } from 'utils/const'
8-
import { Attention } from 'widgets/Icons/icon'
9-
import MigrateCkbDataDialog from 'widgets/MigrateCkbDataDialog'
8+
import { Attention, More } from 'widgets/Icons/icon'
9+
import ModifyPathDialog from 'components/ModifyPathDialog'
1010
import { useDataPath } from './hooks'
1111

1212
import styles from './dataSetting.module.scss'
@@ -28,9 +28,33 @@ const PathItem = ({
2828
<button className={styles.itemPath} type="button" onClick={openPath}>
2929
{path}
3030
</button>
31-
<button className={styles.itemBtn} type="button" onClick={handleClick} disabled={disabled}>
32-
{t('settings.data.set-path')}
33-
</button>
31+
<Tooltip
32+
className={styles.moreTooltip}
33+
tipClassName={styles.moreTip}
34+
tip={
35+
<div className={styles.actions}>
36+
{[
37+
{
38+
label: 'settings.data.browse-local-files',
39+
onClick: openPath,
40+
},
41+
{
42+
label: 'settings.data.modify-path',
43+
onClick: handleClick,
44+
},
45+
].map(({ label, onClick }) => (
46+
<button type="button" key={label} onClick={onClick}>
47+
<span>{t(label)}</span>
48+
</button>
49+
))}
50+
</div>
51+
}
52+
trigger="click"
53+
>
54+
<button className={styles.itemBtn} type="button" disabled={disabled}>
55+
<More />
56+
</button>
57+
</Tooltip>
3458
</div>
3559
)
3660
}
@@ -43,7 +67,7 @@ const DataSetting = () => {
4367
settings: { networks = [] },
4468
} = useGlobalState()
4569
const network = useMemo(() => networks.find(n => n.id === networkID), [networkID, networks])
46-
const { onSetting, prevPath, currentPath, isDialogOpen, onCancel, onConfirm } = useDataPath(network)
70+
const { isDialogOpen, openDialog, onSetting, prevPath, currentPath, onCancel, onConfirm } = useDataPath(network)
4771

4872
const openPath = useCallback(() => {
4973
if (prevPath) {
@@ -52,6 +76,7 @@ const DataSetting = () => {
5276
}, [prevPath])
5377
const isLightClient = network?.type === NetworkType.Light
5478
const hiddenDataPath = isLightClient || !network?.readonly
79+
5580
return (
5681
<>
5782
<div className={styles.root}>
@@ -82,17 +107,20 @@ const DataSetting = () => {
82107
</div>
83108
</div>
84109
<div className={styles.rightContainer}>
85-
{hiddenDataPath ? null : <PathItem path={prevPath} openPath={openPath} handleClick={onSetting} />}
110+
{hiddenDataPath ? null : <PathItem path={prevPath} openPath={openPath} handleClick={openDialog} />}
86111
<ClearCache className={styles.item} btnClassName={styles.itemBtn} dispatch={dispatch} />
87112
</div>
88113
</div>
89-
<MigrateCkbDataDialog
90-
show={isDialogOpen}
91-
prevPath={prevPath}
92-
currentPath={currentPath}
93-
onCancel={onCancel}
94-
onConfirm={onConfirm}
95-
/>
114+
115+
{isDialogOpen && (
116+
<ModifyPathDialog
117+
prevPath={prevPath}
118+
currentPath={currentPath}
119+
onCancel={onCancel}
120+
onConfirm={onConfirm}
121+
onSetting={onSetting}
122+
/>
123+
)}
96124
</>
97125
)
98126
}

‎packages/neuron-ui/src/components/ModifyPathDialog/index.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import React, { useState, useCallback } from 'react'
2+
import { useTranslation } from 'react-i18next'
3+
import Dialog from 'widgets/Dialog'
4+
import Button from 'widgets/Button'
5+
import AlertDialog from 'widgets/AlertDialog'
6+
import MigrateCkbDataDialog from 'widgets/MigrateCkbDataDialog'
7+
import { setCkbNodeDataPath } from 'services/remote'
8+
import { Attention } from 'widgets/Icons/icon'
9+
import { isSuccessResponse } from 'utils'
10+
import styles from './modifyPathDialog.module.scss'
11+
12+
const requiredDiskSpace = '158'
13+
14+
const ModifyPathDialog = ({
15+
prevPath,
16+
currentPath,
17+
onCancel,
18+
onConfirm,
19+
onSetting,
20+
}: {
21+
onCancel?: () => void
22+
prevPath: string
23+
currentPath: string
24+
onConfirm: (dataPath: string) => void
25+
onSetting: (onSuccess?: (path: string) => void) => void
26+
}) => {
27+
const [t] = useTranslation()
28+
const [isMigrateOpen, setIsMigrateOpen] = useState(false)
29+
const [failureMessage, setFailureMessage] = useState('')
30+
const [isRetainPreviousData, setIsRetainPreviousData] = useState(false)
31+
32+
const handleResynchronize = useCallback(async () => {
33+
setFailureMessage('')
34+
onSetting(path => {
35+
setCkbNodeDataPath({
36+
dataPath: path,
37+
clearCache: true,
38+
}).then(res => {
39+
if (isSuccessResponse(res)) {
40+
onConfirm(path)
41+
} else {
42+
setFailureMessage(typeof res.message === 'string' ? res.message : res.message.content!)
43+
}
44+
})
45+
})
46+
}, [onSetting, onConfirm])
47+
48+
if (isMigrateOpen) {
49+
return (
50+
<MigrateCkbDataDialog
51+
prevPath={prevPath}
52+
currentPath={currentPath}
53+
onCancel={() => setIsMigrateOpen(false)}
54+
onConfirm={onConfirm}
55+
/>
56+
)
57+
}
58+
59+
if (isRetainPreviousData) {
60+
return (
61+
<Dialog
62+
show
63+
title={t('settings.data.set-a-new-path')}
64+
cancelText={t('wizard.back')}
65+
onCancel={() => setIsRetainPreviousData(false)}
66+
onConfirm={() => setIsMigrateOpen(true)}
67+
confirmText={t('wizard.next')}
68+
className={styles.dialog}
69+
disabled={!currentPath}
70+
>
71+
<div>
72+
<div className={styles.tip}>
73+
<Attention />
74+
{t('settings.data.modify-path-notice', { requiredDiskSpace })}
75+
</div>
76+
77+
<div className={styles.pathItem}>
78+
<p>{currentPath}</p>
79+
<button type="button" onClick={() => onSetting()}>
80+
{t('settings.data.browse')}
81+
</button>
82+
</div>
83+
</div>
84+
</Dialog>
85+
)
86+
}
87+
88+
return (
89+
<>
90+
<Dialog
91+
show={!failureMessage}
92+
title={t('settings.data.modify-path')}
93+
showFooter={false}
94+
onCancel={onCancel}
95+
className={styles.dialog}
96+
>
97+
<div>
98+
<div className={styles.tip}>
99+
<Attention />
100+
{t('settings.data.modify-path-notice', { requiredDiskSpace })}
101+
</div>
102+
<p className={styles.modifyTip}>{t('settings.data.modify-path-content')}</p>
103+
104+
<div className={styles.footer}>
105+
<Button type="dashed" label={t('settings.data.resynchronize')} onClick={handleResynchronize} />
106+
<Button
107+
type="dashed"
108+
label={t('settings.data.retain-previous-data')}
109+
onClick={() => setIsRetainPreviousData(true)}
110+
/>
111+
</div>
112+
</div>
113+
</Dialog>
114+
<AlertDialog
115+
show={!!failureMessage}
116+
title={t('settings.data.ckb-node-data')}
117+
message={failureMessage}
118+
type="warning"
119+
action="ok"
120+
onOk={() => setFailureMessage('')}
121+
/>
122+
</>
123+
)
124+
}
125+
126+
ModifyPathDialog.displayName = 'ModifyPathDialog'
127+
128+
export default ModifyPathDialog

0 commit comments

Comments
 (0)