Skip to content

Commit ee55c60

Browse files
rsergeenkorsergeenko
committed
#RI-4354 - fix error when deleting key from tree view
#RI-4355 - disable delete button after clicking
1 parent 06dfdd0 commit ee55c60

File tree

18 files changed

+213
-66
lines changed

18 files changed

+213
-66
lines changed

‎redisinsight/ui/src/pages/browser/components/browser-left-panel/BrowserLeftPanel.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ const BrowserLeftPanel = (props: Props) => {
140140
loading={loading}
141141
selectKey={selectKey}
142142
loadMoreItems={loadMoreItems}
143+
onDelete={onDeleteKey}
143144
/>
144145
)}
145146
</div>

‎redisinsight/ui/src/pages/browser/components/key-details/KeyDetailsWrapper.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'
44
import { useParams } from 'react-router-dom'
55

66
import {
7-
deleteKeyAction,
7+
deleteSelectedKeyAction,
88
editKey,
99
editKeyTTL,
1010
fetchKeyInfo,
@@ -81,10 +81,7 @@ const KeyDetailsWrapper = (props: Props) => {
8181
}, [keyName])
8282

8383
const handleDeleteKey = (key: RedisResponseBuffer, type: string) => {
84-
dispatch(deleteKeyAction(key,
85-
{
86-
source: 'keyValue'
87-
},
84+
dispatch(deleteSelectedKeyAction(key,
8885
() => {
8986
if (type === KeyTypes.String) {
9087
dispatch(resetStringValue())

‎redisinsight/ui/src/pages/browser/components/key-list/KeyList.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash'
33
import { fireEvent } from '@testing-library/react'
44
import { cleanup, mockedStore, render, waitFor, screen, clearStoreActions } from 'uiSrc/utils/test-utils'
55
import { KeysStoreData, KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
6-
import { deleteKey, keysSelector, setLastBatchKeys } from 'uiSrc/slices/browser/keys'
6+
import { deleteSelectedKey, keysSelector, setLastBatchKeys } from 'uiSrc/slices/browser/keys'
77
import { apiService } from 'uiSrc/services'
88
import KeyList from './KeyList'
99

@@ -196,7 +196,7 @@ describe('KeyList', () => {
196196
fireEvent.click(screen.getByTestId('submit-delete-key'))
197197

198198
const expectedActions = [
199-
deleteKey()
199+
deleteSelectedKey()
200200
]
201201
expect(clearStoreActions(store.getActions().slice(-1))).toEqual(clearStoreActions(expectedActions))
202202
})

‎redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const KeyList = forwardRef((props: Props, ref) => {
9090

9191
const selectedKey = useSelector(selectedKeySelector)
9292
const { total, nextCursor, previousResultCount } = useSelector(keysDataSelector)
93-
const { isSearched, isFiltered, viewType, searchMode } = useSelector(keysSelector)
93+
const { isSearched, isFiltered, viewType, searchMode, deleting } = useSelector(keysSelector)
9494
const { selectedIndex } = useSelector(redisearchSelector)
9595
const { keyList: { isNotRendered: isNotRenderedContext } } = useSelector(appContextBrowser)
9696

@@ -239,20 +239,11 @@ const KeyList = forwardRef((props: Props, ref) => {
239239
setDeletePopoverIndex(index !== deletePopoverIndex ? index : undefined)
240240
}
241241

242-
const handleRemoveKey = (key: RedisResponseBuffer, type: string) => {
243-
dispatch(deleteKeyAction(
244-
key,
245-
{
246-
source: 'keyList'
247-
},
248-
() => {
249-
setDeletePopoverIndex(undefined)
250-
onDelete()
251-
if (type === KeyTypes.String) {
252-
dispatch(resetStringValue())
253-
}
254-
}
255-
))
242+
const handleRemoveKey = (key: RedisResponseBuffer) => {
243+
dispatch(deleteKeyAction(key, () => {
244+
setDeletePopoverIndex(undefined)
245+
onDelete()
246+
}))
256247
}
257248

258249
const setScrollTopPosition = useCallback((position: number) => {
@@ -493,7 +484,8 @@ const KeyList = forwardRef((props: Props, ref) => {
493484
size="s"
494485
color="warning"
495486
iconType="trash"
496-
onClick={() => handleRemoveKey(bufferName, type)}
487+
isDisabled={deleting}
488+
onClick={() => handleRemoveKey(bufferName)}
497489
data-testid="submit-delete-key"
498490
>
499491
Delete

‎redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export interface Props {
3131
oldKeys: IKeyPropTypes[],
3232
{ startIndex, stopIndex }: { startIndex: number, stopIndex: number },
3333
) => void
34+
onDelete: () => void
3435
}
3536

3637
export const firstPanelId = 'tree'
@@ -41,7 +42,7 @@ const parseKeyNames = (keys: GetKeyInfoResponse[]) =>
4142
({ ...item, nameString: item.nameString ?? bufferToString(item.name) }))
4243

4344
const KeyTree = forwardRef((props: Props, ref) => {
44-
const { selectKey, loadMoreItems, loading, keysState } = props
45+
const { selectKey, loadMoreItems, loading, keysState, onDelete } = props
4546

4647
const firstPanelId = 'tree'
4748
const secondPanelId = 'keys'
@@ -213,6 +214,7 @@ const KeyTree = forwardRef((props: Props, ref) => {
213214
keysState={keyListState}
214215
loading={loading || constructingTree}
215216
selectKey={selectKey}
217+
onDelete={onDelete}
216218
/>
217219
</div>
218220
</EuiResizablePanel>

‎redisinsight/ui/src/slices/browser/hash.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from 'apiSrc/modules/browser/dto/hash.dto'
1313
import {
1414
deleteKeyFromList,
15-
deleteKeySuccess,
15+
deleteSelectedKeySuccess,
1616
fetchKeyInfo,
1717
refreshKeyInfoAction,
1818
updateSelectedKeyRefreshTime,
@@ -346,7 +346,7 @@ export function deleteHashFields(
346346
)
347347
))
348348
} else {
349-
dispatch(deleteKeySuccess())
349+
dispatch(deleteSelectedKeySuccess())
350350
dispatch(deleteKeyFromList(key))
351351
dispatch(addMessageNotification(successMessages.DELETED_KEY(key)))
352352
}

‎redisinsight/ui/src/slices/browser/keys.ts‎

Lines changed: 71 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const defaultViewFormat = KeyValueFormat.Unicode
7070

7171
export const initialState: KeysStore = {
7272
loading: false,
73+
deleting: false,
7374
error: '',
7475
filter: null,
7576
search: '',
@@ -202,28 +203,38 @@ const keysSlice = createSlice({
202203
updateSelectedKeyRefreshTime: (state, { payload }) => {
203204
state.selectedKey.lastRefreshTime = payload
204205
},
205-
// delete Key
206-
deleteKey: (state) => {
206+
// delete selected Key
207+
deleteSelectedKey: (state) => {
207208
state.selectedKey = {
208209
...state.selectedKey,
209210
loading: true,
210211
error: '',
211212
}
212213
},
213-
deleteKeySuccess: (state) => {
214+
deleteSelectedKeySuccess: (state) => {
214215
state.selectedKey = {
215216
...state.selectedKey,
216217
loading: false,
217218
data: null,
218219
}
219220
},
220-
deleteKeyFailure: (state, { payload }) => {
221+
deleteSelectedKeyFailure: (state, { payload }) => {
221222
state.selectedKey = {
222223
...state.selectedKey,
223224
loading: false,
224225
error: payload,
225226
}
226227
},
228+
// delete Key
229+
deleteKey: (state) => {
230+
state.deleting = true
231+
},
232+
deleteKeySuccess: (state) => {
233+
state.deleting = false
234+
},
235+
deleteKeyFailure: (state) => {
236+
state.deleting = false
237+
},
227238
deletePatternKeyFromList: (state, { payload }) => {
228239
remove(state.data?.keys, (key) => isEqualBuffers(key.name, payload))
229240

@@ -427,10 +438,13 @@ export const {
427438
addKeyFailure,
428439
addKeySuccess,
429440
resetAddKey,
441+
deleteSelectedKey,
442+
deleteSelectedKeySuccess,
443+
deleteSelectedKeyFailure,
444+
deletePatternKeyFromList,
430445
deleteKey,
431446
deleteKeySuccess,
432447
deleteKeyFailure,
433-
deletePatternKeyFromList,
434448
editPatternKeyFromList,
435449
editPatternKeyTTLFromList,
436450
setPatternSearchMatch,
@@ -841,15 +855,61 @@ export function addStreamKey(
841855
return addTypedKey(data, KeyTypes.Stream, onSuccessAction, onFailAction)
842856
}
843857

858+
// Asynchronous thunk action
859+
export function deleteSelectedKeyAction(
860+
key: RedisResponseBuffer,
861+
onSuccessAction?: () => void
862+
) {
863+
return async (dispatch: AppDispatch, stateInit: () => RootState) => {
864+
dispatch(deleteSelectedKey())
865+
866+
try {
867+
const state = stateInit()
868+
const { encoding } = state.app.info
869+
const { status } = await apiService.delete(
870+
getUrl(
871+
state.connections.instances?.connectedInstance?.id ?? '',
872+
ApiEndpoints.KEYS
873+
),
874+
{
875+
data: { keyNames: [key] },
876+
params: { encoding },
877+
}
878+
)
879+
880+
if (isStatusSuccessful(status)) {
881+
sendEventTelemetry({
882+
event: getBasedOnViewTypeEvent(
883+
state.browser.keys?.viewType,
884+
TelemetryEvent.BROWSER_KEYS_DELETED,
885+
TelemetryEvent.TREE_VIEW_KEYS_DELETED
886+
),
887+
eventData: {
888+
databaseId: state.connections.instances?.connectedInstance?.id,
889+
numberOfDeletedKeys: 1,
890+
source: 'keyValue',
891+
}
892+
})
893+
dispatch(deleteSelectedKeySuccess())
894+
dispatch<any>(deleteKeyFromList(key))
895+
onSuccessAction?.()
896+
dispatch(addMessageNotification(successMessages.DELETED_KEY(key)))
897+
}
898+
} catch (error) {
899+
const errorMessage = getApiErrorMessage(error as AxiosError)
900+
dispatch(addErrorNotification(error as AxiosError))
901+
dispatch(deleteSelectedKeyFailure(errorMessage))
902+
}
903+
}
904+
}
905+
844906
// Asynchronous thunk action
845907
export function deleteKeyAction(
846908
key: RedisResponseBuffer,
847-
telemetryData: Record<string, any> = {},
848909
onSuccessAction?: () => void
849910
) {
850911
return async (dispatch: AppDispatch, stateInit: () => RootState) => {
851912
dispatch(deleteKey())
852-
853913
try {
854914
const state = stateInit()
855915
const { encoding } = state.app.info
@@ -874,19 +934,17 @@ export function deleteKeyAction(
874934
eventData: {
875935
databaseId: state.connections.instances?.connectedInstance?.id,
876936
numberOfDeletedKeys: 1,
877-
...telemetryData
937+
source: 'keyList',
878938
}
879939
})
880-
console.log(sendEventTelemetry)
881940
dispatch(deleteKeySuccess())
882941
dispatch<any>(deleteKeyFromList(key))
883942
onSuccessAction?.()
884943
dispatch(addMessageNotification(successMessages.DELETED_KEY(key)))
885944
}
886945
} catch (error) {
887-
const errorMessage = getApiErrorMessage(error)
888-
dispatch(addErrorNotification(error))
889-
dispatch(deleteKeyFailure(errorMessage))
946+
dispatch(addErrorNotification(error as AxiosError))
947+
dispatch(deleteKeyFailure())
890948
}
891949
}
892950
}
@@ -959,7 +1017,7 @@ export function editKeyTTL(key: RedisResponseBuffer, ttl: number) {
9591017
dispatch<any>(editKeyTTLFromList([key, ttl]))
9601018
dispatch<any>(fetchKeyInfo(key))
9611019
} else {
962-
dispatch(deleteKeySuccess())
1020+
dispatch(deleteSelectedKeySuccess())
9631021
dispatch<any>(deleteKeyFromList(key))
9641022
}
9651023
dispatch(defaultSelectedKeyActionSuccess())

‎redisinsight/ui/src/slices/browser/list.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
refreshKeyInfoAction,
2727
fetchKeyInfo,
2828
deleteKeyFromList,
29-
deleteKeySuccess,
29+
deleteSelectedKeySuccess,
3030
updateSelectedKeyRefreshTime,
3131
} from './keys'
3232
import { StateList } from '../interfaces/list'
@@ -461,7 +461,7 @@ export function deleteListElementsAction(
461461
)
462462
))
463463
} else {
464-
dispatch(deleteKeySuccess())
464+
dispatch(deleteSelectedKeySuccess())
465465
dispatch(deleteKeyFromList(data.keyName))
466466
dispatch(addMessageNotification(successMessages.DELETED_KEY(data.keyName)))
467467
}

‎redisinsight/ui/src/slices/browser/set.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from 'apiSrc/modules/browser/dto/set.dto'
1414
import {
1515
deleteKeyFromList,
16-
deleteKeySuccess,
16+
deleteSelectedKeySuccess,
1717
fetchKeyInfo,
1818
refreshKeyInfoAction,
1919
updateSelectedKeyRefreshTime,
@@ -348,7 +348,7 @@ export function deleteSetMembers(
348348
)
349349
))
350350
} else {
351-
dispatch(deleteKeySuccess())
351+
dispatch(deleteSelectedKeySuccess())
352352
dispatch(deleteKeyFromList(key))
353353
dispatch(addMessageNotification(successMessages.DELETED_KEY(key)))
354354
}

‎redisinsight/ui/src/slices/browser/zset.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
} from 'apiSrc/modules/browser/dto'
1717
import {
1818
deleteKeyFromList,
19-
deleteKeySuccess,
19+
deleteSelectedKeySuccess,
2020
fetchKeyInfo,
2121
refreshKeyInfoAction,
2222
updateSelectedKeyRefreshTime,
@@ -389,7 +389,7 @@ export function deleteZSetMembers(
389389
)
390390
)
391391
} else {
392-
dispatch(deleteKeySuccess())
392+
dispatch(deleteSelectedKeySuccess())
393393
dispatch(deleteKeyFromList(key))
394394
dispatch(addMessageNotification(successMessages.DELETED_KEY(key)))
395395
}

0 commit comments

Comments
 (0)