RI-7298: Rework delete confirmation (#4831)

pawelangelow · web-flow · commit 896bfb555baa · 2025-08-11T12:12:42.000+03:00
diff --git a/redisinsight/ui/src/pages/vector-search/manage-indexes/DeleteConfirmationButton.spec.tsx b/redisinsight/ui/src/pages/vector-search/manage-indexes/DeleteConfirmationButton.spec.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import DeleteConfirmationButton from './DeleteConfirmationButton'
+import { render, screen } from 'uiSrc/utils/test-utils'
+
+describe('DeleteConfirmationButton', () => {
+  it('renders the trigger IconButton', () => {
+    const onConfirm = jest.fn()
+    render(<DeleteConfirmationButton onConfirm={onConfirm} />)
+
+    const trigger = screen.getByTestId('manage-index-delete-btn')
+    expect(trigger).toBeInTheDocument()
+  })
+
+  it('opens the popover on trigger click and shows content', async () => {
+    const user = userEvent.setup()
+    const onConfirm = jest.fn()
+    render(<DeleteConfirmationButton onConfirm={onConfirm} />)
+
+    expect(
+      screen.queryByText(/are you sure you want to delete this index\?/i),
+    ).not.toBeInTheDocument()
+
+    await user.click(screen.getByTestId('manage-index-delete-btn'))
+
+    expect(
+      screen.getByText(/are you sure you want to delete this index\?/i),
+    ).toBeInTheDocument()
+
+    const deleteBtn = screen.getByTestId('manage-index-delete-confirmation-btn')
+    expect(deleteBtn).toBeInTheDocument()
+    expect(deleteBtn).toHaveTextContent(/delete/i)
+  })
+
+  it('calls onConfirm when the Delete button is clicked', async () => {
+    const onConfirm = jest.fn()
+
+    render(<DeleteConfirmationButton onConfirm={onConfirm} isOpen />)
+
+    // In JSDOM, Popover content may be rendered with `pointer-events: none`
+    // or `visibility: hidden` due to missing layout measurements.
+    // This disables userEvent's pointer-events check so the button can be clicked in tests.
+    const user = userEvent.setup({ pointerEventsCheck: 0 })
+
+    await user.click(screen.getByTestId('manage-index-delete-btn'))
+    const deleteBtn = await screen.findByTestId(
+      'manage-index-delete-confirmation-btn',
+    )
+    await user.click(deleteBtn)
+
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+  })
+
+  it('forwards RiPopover props via ...rest and keeps hardcoded ones', async () => {
+    const user = userEvent.setup()
+    const onConfirm = jest.fn()
+
+    render(
+      <DeleteConfirmationButton
+        onConfirm={onConfirm}
+        id="test-id-manage-index"
+        anchorPosition="upLeft"
+      />,
+    )
+
+    await user.click(screen.getByTestId('manage-index-delete-btn'))
+
+    const popoverRoot = document.querySelector('#test-id-manage-index')
+    expect(popoverRoot).not.toBeNull()
+
+    expect(
+      screen.getByText(/are you sure you want to delete this index\?/i),
+    ).toBeInTheDocument()
+  })
+})
diff --git a/redisinsight/ui/src/pages/vector-search/manage-indexes/DeleteConfirmationButton.tsx b/redisinsight/ui/src/pages/vector-search/manage-indexes/DeleteConfirmationButton.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { RiPopover, RiPopoverProps } from 'uiSrc/components'
+import { Button, IconButton } from 'uiSrc/components/base/forms/buttons'
+import {
+  ButtonWrapper,
+  IconAndTitleWrapper,
+  IconWrapper,
+  PopoverContent,
+  Title,
+} from './styles'
+import { DeleteIcon, RiIcon } from 'uiSrc/components/base/icons'
+
+export type DeleteConfirmationButtonProps = Omit<
+  RiPopoverProps,
+  'children' | 'button'
+> & {
+  onConfirm: () => void
+}
+
+const DeleteConfirmationButton = ({
+  onConfirm,
+  ...rest
+}: DeleteConfirmationButtonProps) => (
+  <RiPopover
+    id="manage-index-delete-confirmation"
+    panelPaddingSize="none"
+    anchorPosition="downCenter"
+    {...rest}
+    button={
+      <IconButton
+        icon={DeleteIcon}
+        data-testid="manage-index-delete-btn"
+      ></IconButton>
+    }
+  >
+    <PopoverContent>
+      <IconAndTitleWrapper>
+        <IconWrapper>
+          <RiIcon color="danger600" type="ToastDangerIcon" />
+        </IconWrapper>
+
+        <Title color="danger">
+          Are you sure you want to delete this index?
+        </Title>
+      </IconAndTitleWrapper>
+
+      <ButtonWrapper>
+        <Button
+          variant="destructive"
+          onClick={onConfirm}
+          data-testid="manage-index-delete-confirmation-btn"
+        >
+          Delete
+        </Button>
+      </ButtonWrapper>
+    </PopoverContent>
+  </RiPopover>
+)
+
+export default DeleteConfirmationButton
diff --git a/redisinsight/ui/src/pages/vector-search/manage-indexes/IndexSection.spec.tsx b/redisinsight/ui/src/pages/vector-search/manage-indexes/IndexSection.spec.tsx
@@ -10,6 +10,7 @@ import {
   initialStateDefault,
   userEvent,
   getMswURL,
+  waitForRiPopoverVisible,
   fireEvent,
 } from 'uiSrc/utils/test-utils'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
@@ -292,36 +293,38 @@ describe('IndexSection', () => {
   })
 
   describe('delete index', () => {
-    let confirmSpy: jest.SpyInstance
     let telemetryMock: jest.Mock
 
     beforeEach(() => {
-      // Mock window.confirm to return true (user confirms deletion)
-      confirmSpy = jest.spyOn(window, 'confirm').mockReturnValue(true)
-
       // Mock the telemetry function
       telemetryMock = sendEventTelemetry as jest.Mock
       telemetryMock.mockClear()
     })
 
     afterEach(() => {
-      confirmSpy.mockRestore()
       mswServer.resetHandlers()
     })
 
     it('should delete an index when the delete button is clicked and confirmed', async () => {
       renderComponent()
 
-      const deleteButton = screen.getByText('Delete')
+      // Trigger confirm dialog
+      const deleteButton = screen.getByTestId('manage-index-delete-btn')
       expect(deleteButton).toBeInTheDocument()
+      fireEvent.click(deleteButton)
 
-      // Click the delete button
-      await userEvent.click(deleteButton)
+      // Confirm dialog is visible
+      await waitForRiPopoverVisible()
+      expect(
+        screen.getByText('Are you sure you want to delete this index?'),
+      ).toBeInTheDocument()
 
-      // Verify that confirm was called with the correct message
-      expect(confirmSpy).toHaveBeenCalledWith(
-        'Are you sure you want to delete this index?',
+      // Confirm actual delete
+      const confirmDeleteButton = screen.getByTestId(
+        'manage-index-delete-confirmation-btn',
       )
+      expect(confirmDeleteButton).toBeInTheDocument()
+      fireEvent.click(confirmDeleteButton)
 
       // Wait for the success notification to appear
       const successNotification = await screen.findByText(
@@ -338,30 +341,6 @@ describe('IndexSection', () => {
       })
     })
 
-    it('should not delete an index when the deletion is cancelled', async () => {
-      // Mock window.confirm to return false (user cancels deletion)
-      confirmSpy.mockReturnValueOnce(false)
-
-      renderComponent()
-
-      const deleteButton = screen.getByText('Delete')
-      expect(deleteButton).toBeInTheDocument()
-
-      // Click the delete button
-      await userEvent.click(deleteButton)
-
-      // Verify that confirm was called with the correct message
-      expect(confirmSpy).toHaveBeenCalledWith(
-        'Are you sure you want to delete this index?',
-      )
-
-      // Verify that no API call was made and no notification appears
-      expect(telemetryMock).not.toHaveBeenCalled()
-
-      const successNotification = screen.queryByText('Index has been deleted')
-      expect(successNotification).not.toBeInTheDocument()
-    })
-
     it('should handle deletion failure gracefully', async () => {
       // Override the MSW handler to return an error for this test
       mswServer.use(
@@ -381,16 +360,23 @@ describe('IndexSection', () => {
 
       renderComponent()
 
-      const deleteButton = screen.getByText('Delete')
+      // Trigger confirm dialog
+      const deleteButton = screen.getByTestId('manage-index-delete-btn')
       expect(deleteButton).toBeInTheDocument()
+      fireEvent.click(deleteButton)
 
-      // Click the delete button
-      await userEvent.click(deleteButton)
+      // Confirm dialog is visible
+      await waitForRiPopoverVisible()
+      expect(
+        screen.getByText('Are you sure you want to delete this index?'),
+      ).toBeInTheDocument()
 
-      // Verify that confirm was called with the correct message
-      expect(confirmSpy).toHaveBeenCalledWith(
-        'Are you sure you want to delete this index?',
+      // Confirm actual delete
+      const confirmDeleteButton = screen.getByTestId(
+        'manage-index-delete-confirmation-btn',
       )
+      expect(confirmDeleteButton).toBeInTheDocument()
+      fireEvent.click(confirmDeleteButton)
 
       // Wait for the error notification to appear
       const errorNotification = await screen.findByText(
diff --git a/redisinsight/ui/src/pages/vector-search/manage-indexes/IndexSection.tsx b/redisinsight/ui/src/pages/vector-search/manage-indexes/IndexSection.tsx
@@ -18,6 +18,7 @@ import {
   collectManageIndexesDeleteTelemetry,
   collectManageIndexesDetailsToggleTelemetry,
 } from '../telemetry'
+import DeleteConfirmationButton from './DeleteConfirmationButton'
 
 export interface IndexSectionProps extends Omit<SectionProps, 'label'> {
   index: RedisString
@@ -26,6 +27,7 @@ export interface IndexSectionProps extends Omit<SectionProps, 'label'> {
 export const IndexSection = ({ index, ...rest }: IndexSectionProps) => {
   const dispatch = useDispatch()
   const indexName = bufferToString(index)
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const { id: instanceId } = useSelector(connectedInstanceSelector)
 
   const [indexInfo, setIndexInfo] = useState<IndexInfoDto>()
@@ -45,17 +47,11 @@ export const IndexSection = ({ index, ...rest }: IndexSectionProps) => {
   }, [indexName, dispatch])
 
   const handleDelete = () => {
-    // TODO: Replace with confirmation popup once the design is ready
-    // eslint-disable-next-line no-restricted-globals
-    const result = confirm('Are you sure you want to delete this index?')
-
-    if (result) {
-      const data: IndexDeleteRequestBodyDto = {
-        index: stringToBuffer(indexName),
-      }
-
-      dispatch(deleteRedisearchIndexAction(data, onDeletedIndexSuccess))
+    const data: IndexDeleteRequestBodyDto = {
+      index: stringToBuffer(indexName),
     }
+
+    dispatch(deleteRedisearchIndexAction(data, onDeletedIndexSuccess))
   }
 
   const onDeletedIndexSuccess = () => {
@@ -71,20 +67,40 @@ export const IndexSection = ({ index, ...rest }: IndexSectionProps) => {
     })
   }
 
+  // TODO: Add FieldTag component to list the types of the different fields
   return (
-    <Section
+    <Section.Compose
       collapsible
       collapsedInfo={<CategoryValueList categoryValueList={indexSummaryInfo} />}
       content={<IndexAttributesList indexInfo={indexInfo} />}
       // TODO: Add FieldTag component to list the types of the different fields
-      label={formatLongName(indexName)}
       defaultOpen={false}
-      actionButtonText="Delete" // TODO: Replace with an icon of a trash can
-      onAction={handleDelete}
       onOpenChange={handleOpenChange}
+      onAction={() => setIsPopoverOpen(true)}
       data-testid={`manage-indexes-list--item--${indexName}`}
       {...rest}
-    />
+    >
+      <Section.Header.Compose
+        collapsedInfo={
+          <CategoryValueList categoryValueList={indexSummaryInfo} />
+        }
+      >
+        <Section.Header.Group>
+          <Section.Header.Label label={formatLongName(indexName)} />
+        </Section.Header.Group>
+        <Section.Header.Group>
+          <Section.Header.ActionButton onClick={() => setIsPopoverOpen(true)}>
+            <DeleteConfirmationButton
+              isOpen={isPopoverOpen}
+              closePopover={() => setIsPopoverOpen(false)}
+              onConfirm={handleDelete}
+            />
+          </Section.Header.ActionButton>
+          <Section.Header.CollapseIndicator />
+        </Section.Header.Group>
+      </Section.Header.Compose>
+      <Section.Body content={<IndexAttributesList indexInfo={indexInfo} />} />
+    </Section.Compose>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/vector-search/manage-indexes/styles.ts b/redisinsight/ui/src/pages/vector-search/manage-indexes/styles.ts
@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+import { Text } from 'uiSrc/components/base/text'
+
+export const PopoverContent = styled.div`
+  padding: ${({ theme }) => theme.core?.space.space200};
+`
+
+export const Title = styled(Text)`
+  margin-top: ${({ theme }) => theme.core?.space.space100};
+  margin-bottom: ${({ theme }) => theme.core?.space.space100};
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.danger500};
+`
+
+export const IconWrapper = styled.div`
+  text-align: center;
+`
+export const ButtonWrapper = styled.div`
+  margin-top: ${({ theme }) => theme.core?.space.space100};
+  display: flex;
+  justify-content: flex-end;
+`
+
+export const IconAndTitleWrapper = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.core?.space.space100};
+  align-items: center;
+`
