From de1a7b4f8d3f4c43c1a5fb9df766092d478f49d1 Mon Sep 17 00:00:00 2001
From: Krum Tyukenov <krum.tyukenov@redis.com>
Date: Wed, 19 Nov 2025 14:39:10 +0200
Subject: [PATCH] RI-7747: hide db delete popover on confirm

---
 .../DatabasesListCellControls.spec.tsx        | 27 +++++++++++++++++++
 .../DatabasesListCellControls.tsx             | 14 +++++++---
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/databases-list/components/DatabasesListCellControls/DatabasesListCellControls.spec.tsx b/redisinsight/ui/src/pages/home/components/databases-list/components/DatabasesListCellControls/DatabasesListCellControls.spec.tsx
index 1acd7fa627..e8f95733ca 100644
--- a/redisinsight/ui/src/pages/home/components/databases-list/components/DatabasesListCellControls/DatabasesListCellControls.spec.tsx
+++ b/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(),
+    )
+  })
 })
diff --git a/redisinsight/ui/src/pages/home/components/databases-list/components/DatabasesListCellControls/DatabasesListCellControls.tsx b/redisinsight/ui/src/pages/home/components/databases-list/components/DatabasesListCellControls/DatabasesListCellControls.tsx
index 1442df9888..e4b238d185 100644
--- a/redisinsight/ui/src/pages/home/components/databases-list/components/DatabasesListCellControls/DatabasesListCellControls.tsx
+++ b/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}`}