Merge pull request #1910 from RedisInsight/feature/RI-4295_delete-keys-from-list

Feature/ri 4295 delete keys from list

Author: mariasergeenko

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -213,6 +213,7 @@ const BrowserPage = () => {
                 >
                   <BrowserLeftPanel
                     selectKey={selectKey}
+                    setSelectedKey={setSelectedKey}
                     handleAddKeyPanel={handleAddKeyPanel}
                     handleBulkActionsPanel={handleBulkActionsPanel}
                     handleCreateIndexPanel={handleCreateIndexPanel}

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

@@ -18,6 +18,8 @@ import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 import { setConnectedInstanceId } from 'uiSrc/slices/instances/instances'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { redisearchDataSelector, redisearchListSelector, redisearchSelector } from 'uiSrc/slices/browser/redisearch'
+import { Nullable } from 'uiSrc/utils'
+import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 
 import KeyList from '../key-list'
 import KeyTree from '../key-tree'
@@ -27,6 +29,7 @@ import styles from './styles.module.scss'
 
 export interface Props {
   selectKey: ({ rowData }: { rowData: any }) => void
+  setSelectedKey: (keyName: Nullable<RedisResponseBuffer>) => void
   handleAddKeyPanel: (value: boolean) => void
   handleBulkActionsPanel: (value: boolean) => void
   handleCreateIndexPanel: (value: boolean) => void
@@ -35,6 +38,7 @@ export interface Props {
 const BrowserLeftPanel = (props: Props) => {
   const {
     selectKey,
+    setSelectedKey,
     handleAddKeyPanel,
     handleBulkActionsPanel,
     handleCreateIndexPanel,
@@ -99,6 +103,11 @@ const BrowserLeftPanel = (props: Props) => {
     keyListRef.current?.handleLoadMoreItems?.(config)
   }
 
+  const onDeleteKey = useCallback(
+    () => setSelectedKey(null),
+    [],
+  )
+
   return (
     <div className={styles.container}>
       <KeysHeader
@@ -121,6 +130,7 @@ const BrowserLeftPanel = (props: Props) => {
           scrollTopPosition={scrollTopPosition}
           loadMoreItems={loadMoreItems}
           selectKey={selectKey}
+          onDelete={onDeleteKey}
         />
       )}
       {viewType === KeyViewType.Tree && (
@@ -130,6 +140,7 @@ const BrowserLeftPanel = (props: Props) => {
           loading={loading}
           selectKey={selectKey}
           loadMoreItems={loadMoreItems}
+          onDelete={onDeleteKey}
         />
       )}
     </div>

redisinsight/ui/src/pages/browser/components/key-details-header/KeyDetailsHeader.tsx

@@ -175,6 +175,7 @@ const KeyDetailsHeader = ({
       ),
       eventData: {
         databaseId: instanceId,
+        source: 'keyValue',
         keyType: type
       }
     })

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

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
 import {
-  deleteKeyAction,
+  deleteSelectedKeyAction,
   editKey,
   editKeyTTL,
   fetchKeyInfo,
@@ -81,14 +81,13 @@ const KeyDetailsWrapper = (props: Props) => {
   }, [keyName])
 
   const handleDeleteKey = (key: RedisResponseBuffer, type: string) => {
-    if (type === KeyTypes.String) {
-      dispatch(deleteKeyAction(key, () => {
-        dispatch(resetStringValue())
+    dispatch(deleteSelectedKeyAction(key,
+      () => {
+        if (type === KeyTypes.String) {
+          dispatch(resetStringValue())
+        }
         onRemoveKey()
       }))
-      return
-    }
-    dispatch(deleteKeyAction(key, onRemoveKey))
   }
 
   const handleRefreshKey = (key: RedisResponseBuffer, type: KeyTypes | ModulesKeyTypes) => {

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

@@ -1,8 +1,9 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
-import { render, waitFor } from 'uiSrc/utils/test-utils'
+import { fireEvent } from '@testing-library/react'
+import { cleanup, mockedStore, render, waitFor, screen, clearStoreActions } from 'uiSrc/utils/test-utils'
 import { KeysStoreData, KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
-import { keysSelector, setLastBatchKeys } from 'uiSrc/slices/browser/keys'
+import { deleteSelectedKey, keysSelector, setLastBatchKeys } from 'uiSrc/slices/browser/keys'
 import { apiService } from 'uiSrc/services'
 import KeyList from './KeyList'
 
@@ -15,6 +16,7 @@ const propsMock = {
         ttl: -1,
         size: 100,
         length: 100,
+        nameString: 'key1'
       },
       {
         name: 'key2',
@@ -56,6 +58,13 @@ jest.mock('uiSrc/slices/browser/keys', () => ({
   }),
 }))
 
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
 // afterEach(() => {
 //   setLastBatchKeys.mockRestore()
 // })
@@ -175,4 +184,20 @@ describe('KeyList', () => {
     expect(queryAllByTestId(/type-loading/).length).toEqual(propsMock.keysState.keys.length)
     expect(queryAllByTestId(/size-loading/).length).toEqual(propsMock.keysState.keys.length)
   })
+
+  it('should call proper action after click on delete', async () => {
+    const { container } = render(<KeyList {...propsMock} />)
+
+    fireEvent.mouseOver(container.querySelectorAll(
+      '.ReactVirtualized__Table__row[role="row"]'
+    )[0])
+
+    fireEvent.click(screen.getByTestId('delete-key-btn-key1'))
+    fireEvent.click(screen.getByTestId('submit-delete-key'))
+
+    const expectedActions = [
+      deleteSelectedKey()
+    ]
+    expect(clearStoreActions(store.getActions().slice(-1))).toEqual(clearStoreActions(expectedActions))
+  })
 })