1
1
import React , { useEffect , useState } from 'react'
2
2
import cx from 'classnames'
3
- import { VscEdit } from 'react-icons/vsc'
4
- import { isUndefined , toNumber } from 'lodash'
3
+ import { VscEdit , VscRefresh } from 'react-icons/vsc'
4
+ import { isUndefined , toNumber , isEqual } from 'lodash'
5
5
import * as l10n from '@vscode/l10n'
6
6
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
7
7
@@ -11,7 +11,7 @@ import {
11
11
getRedisModulesSummary ,
12
12
sendEventTelemetry ,
13
13
} from 'uiSrc/utils'
14
- import { ContextStoreProvider , Database , DatabaseOverview , checkConnectToDatabase , deleteDatabases } from 'uiSrc/store'
14
+ import { ContextStoreProvider , Database , DatabaseOverview , checkConnectToDatabase , deleteDatabases , fetchDatabaseOverviewById } from 'uiSrc/store'
15
15
import { Chevron , DatabaseIcon , Tooltip } from 'uiSrc/ui'
16
16
import { PopoverDelete } from 'uiSrc/components'
17
17
import { POPOVER_WINDOW_BORDER_WIDTH , StorageItem , VscodeMessageAction } from 'uiSrc/constants'
@@ -28,9 +28,29 @@ export interface Props {
28
28
database : Database
29
29
}
30
30
31
+ const LogicalDatabase = (
32
+ { database, open, dbTotal } :
33
+ { database : Database , open ?: boolean , dbTotal ?: number } ,
34
+ ) => (
35
+ < ContextStoreProvider >
36
+ < KeysStoreProvider >
37
+ < LogicalDatabaseWrapper database = { database } >
38
+ < KeysTreeHeader
39
+ database = { database }
40
+ open = { open }
41
+ dbTotal = { dbTotal }
42
+ >
43
+ < KeysTree database = { database } />
44
+ </ KeysTreeHeader >
45
+ </ LogicalDatabaseWrapper >
46
+ </ KeysStoreProvider >
47
+ </ ContextStoreProvider >
48
+ )
49
+
31
50
export const DatabaseWrapper = React . memo ( ( { database } : Props ) => {
32
51
const { id, name } = database
33
52
53
+ const [ loading , setLoading ] = useState < boolean > ( false )
34
54
const [ showTree , setShowTree ] = useState < boolean > ( false )
35
55
const [ totalKeysPerDb , setTotalKeysPerDb ] = useState < Maybe < Record < string , number > > > ( undefined )
36
56
@@ -82,6 +102,16 @@ export const DatabaseWrapper = React.memo(({ database }: Props) => {
82
102
vscodeApi . postMessage ( { action : VscodeMessageAction . EditDatabase , data : { database } } )
83
103
}
84
104
105
+ const refreshHandle = async ( ) => {
106
+ setLoading ( true )
107
+ const overview = await fetchDatabaseOverviewById ( id )
108
+ setLoading ( false )
109
+
110
+ if ( ! isEqual ( totalKeysPerDb , overview ?. totalKeysPerDb ) ) {
111
+ setTotalKeysPerDb ( overview ?. totalKeysPerDb )
112
+ }
113
+ }
114
+
85
115
const deleteDatabaseHandle = ( ) => {
86
116
deleteDatabases ( [ database ] )
87
117
}
@@ -95,25 +125,6 @@ export const DatabaseWrapper = React.memo(({ database }: Props) => {
95
125
} )
96
126
}
97
127
98
- const LogicalDatabase = (
99
- { database, open, dbTotal } :
100
- { database : Database , open ?: boolean , dbTotal ?: number } ,
101
- ) => (
102
- < ContextStoreProvider >
103
- < KeysStoreProvider >
104
- < LogicalDatabaseWrapper database = { database } >
105
- < KeysTreeHeader
106
- database = { database }
107
- open = { open }
108
- dbTotal = { dbTotal }
109
- >
110
- < KeysTree database = { database } />
111
- </ KeysTreeHeader >
112
- </ LogicalDatabaseWrapper >
113
- </ KeysStoreProvider >
114
- </ ContextStoreProvider >
115
- )
116
-
117
128
return (
118
129
< div className = { cx ( 'flex w-full flex-col' ) } >
119
130
< div className = { cx ( 'flex justify-between flex-1 min-h-[22px] flex-row group' ) } >
@@ -138,6 +149,14 @@ export const DatabaseWrapper = React.memo(({ database }: Props) => {
138
149
</ Tooltip >
139
150
</ div >
140
151
< div className = "flex pr-3.5" >
152
+ < VSCodeButton
153
+ appearance = "icon"
154
+ onClick = { refreshHandle }
155
+ className = { cx ( 'hidden' , 'group-hover:!flex' , { '!flex' : showTree } ) }
156
+ data-testid = "refresh-databases"
157
+ >
158
+ < VscRefresh />
159
+ </ VSCodeButton >
141
160
< VSCodeButton
142
161
appearance = "icon"
143
162
onClick = { editHandle }
@@ -160,6 +179,7 @@ export const DatabaseWrapper = React.memo(({ database }: Props) => {
160
179
/>
161
180
</ div >
162
181
</ div >
182
+ { loading && < div className = "data-loading" /> }
163
183
{ showTree && ( < >
164
184
{ ! isUndefined ( totalKeysPerDb ) && Object . keys ( totalKeysPerDb ) . map ( ( databaseIndex ) => (
165
185
< LogicalDatabase
0 commit comments