RI-6638 - No trash icon to remove key if key size column is hidden. And updated texts for the RI-6336

Author: KIvanow

redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.spec.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import { stringToBuffer } from 'uiSrc/utils'
+import { KeyTypes } from 'uiSrc/constants'
+import { DeleteKeyPopover } from './DeleteKeyPopover'
+
+describe('DeleteKeyPopover', () => {
+  const mockProps = {
+    nameString: 'test-key',
+    name: stringToBuffer('test-key'),
+    type: KeyTypes.String,
+    rowId: 1,
+    onDelete: jest.fn(),
+    onOpenPopover: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render delete button with proper data-testid', () => {
+    render(<DeleteKeyPopover {...mockProps} />)
+
+    expect(screen.getByTestId(`delete-key-btn-${mockProps.nameString}`)).toBeInTheDocument()
+  })
+
+  it('should not show popover content by default', () => {
+    render(<DeleteKeyPopover {...mockProps} />)
+
+    expect(screen.queryByText('will be deleted.')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('submit-delete-key')).not.toBeInTheDocument()
+  })
+
+  it('should show popover content when deletePopoverId matches rowId', () => {
+    render(<DeleteKeyPopover {...mockProps} deletePopoverId={mockProps.rowId} />)
+
+    expect(screen.getByText('will be deleted.')).toBeInTheDocument()
+    expect(screen.getByTestId('submit-delete-key')).toBeInTheDocument()
+  })
+
+  it('should call onOpenPopover when delete button is clicked', () => {
+    render(<DeleteKeyPopover {...mockProps} />)
+
+    fireEvent.click(screen.getByTestId(`delete-key-btn-${mockProps.nameString}`))
+
+    expect(mockProps.onOpenPopover).toHaveBeenCalledWith(mockProps.rowId, mockProps.type)
+  })
+
+  it('should call onOpenPopover with -1 when closing the popover', () => {
+    const { container } = render(<DeleteKeyPopover {...mockProps} deletePopoverId={mockProps.rowId} />)
+
+    container.querySelector('.euiPopover')
+    const closePopover = () => mockProps.onOpenPopover(-1, mockProps.type)
+    closePopover()
+
+    expect(mockProps.onOpenPopover).toHaveBeenCalledWith(-1, mockProps.type)
+  })
+
+  it('should call onDelete with proper arguments when confirm button is clicked', () => {
+    render(<DeleteKeyPopover {...mockProps} deletePopoverId={mockProps.rowId} />)
+
+    fireEvent.click(screen.getByTestId('submit-delete-key'))
+
+    expect(mockProps.onDelete).toHaveBeenCalledWith(mockProps.name)
+  })
+
+  it('should disable delete button when deleting is true', () => {
+    render(<DeleteKeyPopover {...mockProps} deletePopoverId={mockProps.rowId} deleting />)
+
+    expect(screen.getByTestId('submit-delete-key')).toBeDisabled()
+  })
+
+  it('should format long names in the confirmation message', () => {
+    const longNameProps = {
+      ...mockProps,
+      nameString: 'very-long-key-name-that-might-need-formatting',
+      deletePopoverId: mockProps.rowId
+    }
+
+    render(<DeleteKeyPopover {...longNameProps} />)
+
+    expect(screen.getByText(longNameProps.nameString)).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.tsx

@@ -0,0 +1,69 @@
+import { EuiButton, EuiButtonIcon, EuiPopover, EuiSpacer, EuiText } from '@elastic/eui'
+
+import React from 'react'
+
+import cx from 'classnames'
+import { KeyTypes, ModulesKeyTypes } from 'uiSrc/constants'
+import { formatLongName } from 'uiSrc/utils'
+import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
+
+export interface DeleteProps {
+  nameString: string
+  name: RedisResponseBuffer
+  type: KeyTypes | ModulesKeyTypes
+  rowId: number
+  deletePopoverId?: number
+  deleting?: boolean
+  onDelete: (key: RedisResponseBuffer) => void
+  onOpenPopover: (index: number, type: KeyTypes | ModulesKeyTypes) => void
+}
+
+export const DeleteKeyPopover = ({
+  nameString,
+  name,
+  type,
+  rowId,
+  deletePopoverId,
+  deleting,
+  onDelete,
+  onOpenPopover,
+}: DeleteProps) => (
+  <EuiPopover
+    anchorClassName={cx(
+      'showOnHoverKey',
+      { show: deletePopoverId === rowId },
+    )}
+    anchorPosition="leftUp"
+    isOpen={deletePopoverId === rowId}
+    closePopover={() => onOpenPopover(-1, type)}
+    panelPaddingSize="l"
+    button={(
+      <EuiButtonIcon
+        iconType="trash"
+        onClick={() => onOpenPopover(rowId, type)}
+        aria-label="Delete Key"
+        data-testid={`delete-key-btn-${nameString}`}
+      />
+    )}
+    onClick={(e) => e.stopPropagation()}
+  >
+    <>
+      <EuiText size="m">
+        <h4 style={{ wordBreak: 'break-all' }}><b>{formatLongName(nameString)}</b></h4>
+        <EuiText size="s">will be deleted.</EuiText>
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiButton
+        fill
+        size="s"
+        color="warning"
+        iconType="trash"
+        isDisabled={deleting}
+        onClick={() => onDelete(name)}
+        data-testid="submit-delete-key"
+      >
+        Delete
+      </EuiButton>
+    </>
+  </EuiPopover>
+)

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

@@ -252,4 +252,22 @@ describe('KeyList', () => {
       expect(spy).toHaveBeenCalled()
     }, { timeout: 1000 })
   })
+
+  it.each`
+      columns                                      | description
+      ${[]}                                        | ${'no columns are shown'}
+      ${[BrowserColumns.TTL]}                      | ${'only TTL column is shown'}
+      ${[BrowserColumns.Size]}                     | ${'only Size column is shown'}
+      ${[BrowserColumns.TTL, BrowserColumns.Size]} | ${'both TTL and Size columns are shown'}
+  `('should render DeleteKeyPopover when $description', ({ columns }) => {
+    (keysSelector as jest.Mock).mockImplementation(() => ({
+      ...mockedKeySlice,
+      shownColumns: columns,
+    }))
+
+    const { container } = render(<KeyList {...propsMock} />)
+
+    expect(container.querySelector(`[data-testid="delete-key-btn-${propsMock.keysState.keys[0].nameString}"]`))
+      .toBeInTheDocument()
+  })
 })

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

@@ -41,6 +41,7 @@ import KeyRowType from 'uiSrc/pages/browser/components/key-row-type'
 import { GetKeyInfoResponse } from 'apiSrc/modules/browser/keys/dto'
 
 import NoKeysMessage from '../no-keys-message'
+import { DeleteKeyPopover } from '../delete-key-popover/DeleteKeyPopover'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -297,6 +298,9 @@ const KeyList = forwardRef((props: Props, ref) => {
     rerender({})
   }
 
+  const isTtlTheLastColumn = !shownColumns.includes(BrowserColumns.Size)
+  const ttlColumnSize = isTtlTheLastColumn ? 146 : 86
+
   const columns: ITableColumn[] = [
     {
       id: 'type',
@@ -312,19 +316,50 @@ const KeyList = forwardRef((props: Props, ref) => {
       label: 'Key',
       minWidth: 94,
       truncateText: true,
-      render: (cellData: string) => (
-        <KeyRowName nameString={cellData} shortName={cellData} />
+      render: (cellData: string, { name, type }: IKeyPropTypes, _expanded, rowIndex) => (
+        <>
+          <KeyRowName nameString={cellData} shortName={cellData} />
+          {columns[columns.length - 1].id === 'nameString' && (
+            <DeleteKeyPopover
+              deletePopoverId={deletePopoverIndex}
+              nameString={cellData}
+              name={name}
+              type={type}
+              rowId={rowIndex || 0}
+              onDelete={handleRemoveKey}
+              onOpenPopover={handleDeletePopoverOpen}
+            />
+          )}
+        </>
       )
     },
     shownColumns.includes(BrowserColumns.TTL) ? {
       id: 'ttl',
       label: 'TTL',
-      absoluteWidth: 86,
-      minWidth: 86,
+      absoluteWidth: ttlColumnSize,
+      minWidth: ttlColumnSize,
       truncateText: true,
       alignment: TableCellAlignment.Right,
-      render: (cellData: number, { nameString }: IKeyPropTypes, _expanded, rowIndex) => (
-        <KeyRowTTL ttl={cellData} nameString={nameString} deletePopoverId={deletePopoverIndex} rowId={rowIndex || 0} />
+      render: (cellData: number, { nameString, name, type }: IKeyPropTypes, _expanded, rowIndex) => (
+        <>
+          <KeyRowTTL
+            ttl={cellData}
+            nameString={nameString}
+            deletePopoverId={deletePopoverIndex}
+            rowId={rowIndex || 0}
+          />
+          {isTtlTheLastColumn && (
+            <DeleteKeyPopover
+              deletePopoverId={deletePopoverIndex}
+              nameString={nameString}
+              name={name}
+              type={type}
+              rowId={rowIndex || 0}
+              onDelete={handleRemoveKey}
+              onOpenPopover={handleDeletePopoverOpen}
+            />
+          )}
+        </>
       )
     } : null,
     shownColumns.includes(BrowserColumns.Size) ? {
@@ -334,26 +369,28 @@ const KeyList = forwardRef((props: Props, ref) => {
       minWidth: 90,
       alignment: TableCellAlignment.Right,
       textAlignment: TableCellTextAlignment.Right,
-      render: (
-        cellData: number,
-        { nameString, type, name: bufferName }: IKeyPropTypes,
-        _expanded,
-        rowIndex
-      ) => (
-        <KeyRowSize
-          size={cellData}
-          nameString={nameString}
-          nameBuffer={bufferName}
-          deletePopoverId={deletePopoverIndex}
-          rowId={rowIndex || 0}
-          type={type}
-          deleting={deleting}
-          setDeletePopoverId={setDeletePopoverIndex}
-          handleDeletePopoverOpen={handleDeletePopoverOpen}
-          handleDelete={handleRemoveKey}
-        />
+      render: (cellData: number, { nameString, name, type }: IKeyPropTypes, _expanded, rowIndex) => (
+        <>
+          <KeyRowSize
+            size={cellData}
+            nameString={nameString}
+            deletePopoverId={deletePopoverIndex}
+            rowId={rowIndex || 0}
+          />
+          {columns[columns.length - 1].id === 'size' && (
+            <DeleteKeyPopover
+              deletePopoverId={deletePopoverIndex}
+              nameString={nameString}
+              name={name}
+              type={type}
+              rowId={rowIndex || 0}
+              onDelete={handleRemoveKey}
+              onOpenPopover={handleDeletePopoverOpen}
+            />
+          )}
+        </>
       )
-    } : null,
+    } : null
   ].filter((el) => !!el)
 
   const noItemsMessage = NoItemsMessage()

redisinsight/ui/src/pages/browser/components/key-row-size/KeyRowSize.tsx

@@ -1,46 +1,28 @@
 import React from 'react'
 import cx from 'classnames'
 import {
-  EuiButton,
-  EuiButtonIcon,
   EuiLoadingContent,
-  EuiPopover,
-  EuiSpacer,
   EuiText,
   EuiToolTip,
 } from '@elastic/eui'
 import { isUndefined } from 'lodash'
 
-import { Maybe, formatBytes, formatLongName } from 'uiSrc/utils'
-import { KeyTypes, ModulesKeyTypes } from 'uiSrc/constants'
-import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
+import { Maybe, formatBytes } from 'uiSrc/utils'
 import styles from './styles.module.scss'
 
 export interface Props {
   size: Maybe<number>
   deletePopoverId: Maybe<number | string>
   rowId: number | string
   nameString: string
-  type: KeyTypes | ModulesKeyTypes
-  deleting: boolean
-  nameBuffer: RedisResponseBuffer
-  setDeletePopoverId: (id: any) => void
-  handleDeletePopoverOpen: (id: any, type: KeyTypes | ModulesKeyTypes) => void
-  handleDelete: (key: RedisResponseBuffer) => void
 }
 
 const KeyRowSize = (props: Props) => {
   const {
     size,
     nameString,
-    nameBuffer,
     deletePopoverId,
-    deleting,
     rowId,
-    type,
-    setDeletePopoverId,
-    handleDeletePopoverOpen,
-    handleDelete,
   } = props
 
   if (isUndefined(size)) {
@@ -88,46 +70,6 @@ const KeyRowSize = (props: Props) => {
           </EuiToolTip>
         </div>
       </EuiText>
-      <EuiPopover
-        anchorClassName={cx(
-          styles.deleteAnchor,
-          'showOnHoverKey',
-          { show: deletePopoverId === rowId },
-        )}
-        anchorPosition="rightUp"
-        isOpen={deletePopoverId === rowId}
-        closePopover={() => setDeletePopoverId(undefined)}
-        panelPaddingSize="l"
-        panelClassName={styles.deletePopover}
-        button={(
-          <EuiButtonIcon
-            iconType="trash"
-            onClick={() => handleDeletePopoverOpen(rowId, type)}
-            aria-label="Delete Key"
-            data-testid={`delete-key-btn-${nameString}`}
-          />
-        )}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <>
-          <EuiText size="m">
-            <h4 style={{ wordBreak: 'break-all' }}><b>{formatLongName(nameString)}</b></h4>
-            <EuiText size="s">will be deleted.</EuiText>
-          </EuiText>
-          <EuiSpacer size="m" />
-          <EuiButton
-            fill
-            size="s"
-            color="warning"
-            iconType="trash"
-            isDisabled={deleting}
-            onClick={() => handleDelete(nameBuffer)}
-            data-testid="submit-delete-key"
-          >
-            Delete
-          </EuiButton>
-        </>
-      </EuiPopover>
     </>
   )
 }