RI-7747: hide db delete popover on confirm (#5213)

Author: KrumTy

redisinsight/ui/src/pages/home/components/databases-list/components/DatabasesListCellControls/DatabasesListCellControls.spec.tsx

@@ -4,6 +4,7 @@ import {
   screen,
   userEvent,
   waitForRiPopoverVisible,
+  waitFor,
 } from 'uiSrc/utils/test-utils'
 import { Instance } from 'uiSrc/slices/interfaces'
 import {
@@ -118,4 +119,30 @@ describe('DatabasesListCellControls component', () => {
     expect(mockHandleDeleteInstances).toHaveBeenCalledWith(instance)
     expect(openDialogSpy).toHaveBeenLastCalledWith(null)
   })
+
+  it('should close controls popover after confirming delete (closeControlsPopover)', async () => {
+    renderWithProvider()
+
+    // Open controls popover
+    await userEvent.click(screen.getByTestId(`controls-button-${instance.id}`))
+    await waitForRiPopoverVisible()
+    expect(await screen.findByTestId(`edit-instance-${instance.id}`)).toBeInTheDocument()
+
+    // Trigger delete flow
+    await userEvent.click(
+      await screen.findByTestId(`delete-instance-${instance.id}-icon`),
+    )
+    await waitForRiPopoverVisible() // wait for confirmation popover
+
+    // Confirm deletion -> this calls closeControlsPopover inside handleDeleteItem
+    await userEvent.click(
+      await screen.findByTestId(`delete-instance-${instance.id}`),
+      { pointerEventsCheck: 0 },
+    )
+
+    // Assert the controls popover content is gone (popover closed)
+    await waitFor(() =>
+      expect(screen.queryByTestId(`edit-instance-${instance.id}`)).not.toBeInTheDocument(),
+    )
+  })
 })

redisinsight/ui/src/pages/home/components/databases-list/components/DatabasesListCellControls/DatabasesListCellControls.tsx

@@ -34,11 +34,13 @@ const suffix = '_db_instance'
 const DatabasesListCellControls: IDatabaseListCell = ({ row }) => {
   const instance = row.original
   const { setOpenDialog } = useHomePageDataProvider()
+  const [isControlsPopoverOpen, setControlsPopoverOpen] = useState(false)
   const [isDeletePopoverOpen, setIsDeletePopoverOpen] = useState(false)
 
   const deletingId = isDeletePopoverOpen ? `${instance.id + suffix}` : ''
-  const closePopover = () => setIsDeletePopoverOpen(false)
-  const showPopover = () => setIsDeletePopoverOpen(true)
+  const closeControlsPopover = () => setControlsPopoverOpen(false)
+  const closeDeletePopover = () => setIsDeletePopoverOpen(false)
+  const showDeletePopover = () => setIsDeletePopoverOpen(true)
 
   return (
     <Row
@@ -77,6 +79,9 @@ const DatabasesListCellControls: IDatabaseListCell = ({ row }) => {
           ownFocus
           anchorPosition="leftUp"
           panelPaddingSize="s"
+          isOpen={isControlsPopoverOpen}
+          closePopover={closeControlsPopover}
+          onOpenChange={setControlsPopoverOpen}
           button={
             <IconButton
               icon={MoreactionsIcon}
@@ -106,12 +111,13 @@ const DatabasesListCellControls: IDatabaseListCell = ({ row }) => {
               item={instance.id}
               suffix={suffix}
               deleting={deletingId}
-              closePopover={closePopover}
+              closePopover={closeDeletePopover}
               updateLoading={false}
-              showPopover={showPopover}
+              showPopover={showDeletePopover}
               handleDeleteItem={() => {
                 handleDeleteInstances(instance)
                 setOpenDialog(null)
+                closeControlsPopover()
               }}
               handleButtonClick={() => handleClickDeleteInstance(instance)}
               testid={`delete-instance-${instance.id}`}