RI-6905: hide db controls begind three dots button (#4439)

* wrap controls in three dots popover
* remove unused imports; move the three dots icon from rdi to icons asset folder. fix the import in the rdi component

Author: dantovska

redisinsight/ui/src/assets/img/rdi/three_dots.svg renamed to redisinsight/ui/src/assets/img/icons/three_dots.svg

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EuiButton, EuiButtonIcon, EuiPopover, EuiText, EuiToolTip } from '@elastic/eui'
+import { EuiButton, EuiButtonEmpty, EuiButtonIcon, EuiPopover, EuiText, EuiToolTip } from '@elastic/eui'
 
 import { RedisString } from 'uiSrc/slices/interfaces'
 import { isTruncatedString } from 'uiSrc/utils'
@@ -20,6 +20,7 @@ export interface Props {
   handleButtonClick?: () => void
   appendInfo?: JSX.Element | string | null
   testid?: string
+  buttonLabel?: string
 }
 
 const PopoverDelete = (props: Props) => {
@@ -37,6 +38,7 @@ const PopoverDelete = (props: Props) => {
     handleButtonClick,
     appendInfo,
     testid = '',
+    buttonLabel,
   } = props
 
   const isDisabled = isTruncatedString(item)
@@ -51,7 +53,17 @@ const PopoverDelete = (props: Props) => {
     }
   }
 
-  const deleteButton = (
+  const deleteButton = buttonLabel ? (
+    <EuiButtonEmpty
+      iconType="trash"
+      aria-label="Remove field"
+      color="primary"
+      disabled={isDisabled || updateLoading}
+      onClick={isDisabled ? () => {} : onButtonClick}
+      data-testid={testid ? `${testid}-icon` : 'remove-icon'}
+      isDisabled={isDisabled}
+    >{buttonLabel}</EuiButtonEmpty>
+    ) : (
     <EuiButtonIcon
       iconType="trash"
       aria-label="Remove field"

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

@@ -194,15 +194,35 @@ describe('DatabasesListWrapper', () => {
     (sendEventTelemetry as jest.Mock).mockRestore()
   })
 
+  it('should open controls popover when three dots clicked', async () => {
+    render(<DatabasesListWrapper {...instance(mockedProps)} instances={mockInstances} onEditInstance={() => {}} />);
+
+    await act(() => {
+      fireEvent.click(screen.getByTestId('controls-button-a0db1bc8-a353-4c43-a856-b72f4811d2d4'));
+    })
+
+    const controlsPopoverId = screen.getByTestId('controls-popover-a0db1bc8-a353-4c43-a856-b72f4811d2d4');
+    const editBtn = screen.getByTestId('edit-instance-a0db1bc8-a353-4c43-a856-b72f4811d2d4');
+    const deleteBtn = screen.getByTestId('delete-instance-a0db1bc8-a353-4c43-a856-b72f4811d2d4-icon');
+
+    expect(controlsPopoverId).toBeInTheDocument();
+    expect(editBtn).toBeInTheDocument();
+    expect(deleteBtn).toBeInTheDocument();
+  });
+
   it('should call proper telemetry on delete database', async () => {
     const sendEventTelemetryMock = jest.fn();
 
     (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
     render(<DatabasesListWrapper {...instance(mockedProps)} instances={mockInstances} />)
 
+    await act(() => {
+      fireEvent.click(screen.getByTestId('controls-button-a0db1bc8-a353-4c43-a856-b72f4811d2d4'));
+    });
+
     await act(() => {
       fireEvent.click(screen.getByTestId('delete-instance-a0db1bc8-a353-4c43-a856-b72f4811d2d4-icon'))
-    })
+    });
 
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.CONFIG_DATABASES_SINGLE_DATABASE_DELETE_CLICKED,
@@ -220,6 +240,10 @@ describe('DatabasesListWrapper', () => {
     (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
     render(<DatabasesListWrapper {...instance(mockedProps)} instances={mockInstances} onEditInstance={() => {}} />)
 
+    await act(() => {
+      fireEvent.click(screen.getByTestId('controls-button-a0db1bc8-a353-4c43-a856-b72f4811d2d4'));
+    });
+
     await act(() => {
       fireEvent.click(screen.getByTestId('edit-instance-a0db1bc8-a353-4c43-a856-b72f4811d2d4'))
     })

redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.test.tsx

@@ -1,8 +1,10 @@
 import {
   Criteria,
+  EuiButtonEmpty,
   EuiButtonIcon,
   EuiIcon,
   EuiLink,
+  EuiPopover,
   EuiResizeObserver,
   EuiTableFieldDataColumnType,
   EuiText,
@@ -23,16 +25,16 @@ import RediStackLightMin from 'uiSrc/assets/img/modules/redistack/RediStackLight
 import RediStackDarkLogo from 'uiSrc/assets/img/modules/redistack/RedisStackLogoDark.svg'
 import RediStackLightLogo from 'uiSrc/assets/img/modules/redistack/RedisStackLogoLight.svg'
 import CloudLinkIcon from 'uiSrc/assets/img/oauth/cloud_link.svg?react'
+import ThreeDots from 'uiSrc/assets/img/icons/three_dots.svg?react'
 import DatabaseListModules from 'uiSrc/components/database-list-modules/DatabaseListModules'
 import ItemList from 'uiSrc/components/item-list'
 import { BrowserStorageItem, DEFAULT_SORT, FeatureFlags, Pages, Theme } from 'uiSrc/constants'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
 import { localStorageService } from 'uiSrc/services'
-import { appContextSelector, resetRdiContext, setAppContextInitialState } from 'uiSrc/slices/app/context'
-import { resetKeys } from 'uiSrc/slices/browser/keys'
-import { resetRedisearchKeysData } from 'uiSrc/slices/browser/redisearch'
+import { appContextSelector, resetRdiContext } from 'uiSrc/slices/app/context'
+
 import {
   checkConnectToInstanceAction,
   deleteInstancesAction,
@@ -100,6 +102,12 @@ const DatabasesListWrapper = (props: Props) => {
   )
 
   const deletingIdRef = useRef('')
+  const controlsOpenIdRef = useRef('')
+
+  const toggleControlsPopover = (instanceId: string) => {
+    controlsOpenIdRef.current = controlsOpenIdRef.current === instanceId ? '' : instanceId
+    forceRerender({})
+  }
 
   const closePopover = () => {
     if (deletingIdRef.current) {
@@ -270,6 +278,15 @@ const DatabasesListWrapper = (props: Props) => {
     'data-testid': `db-row_${instance?.id}`
   })
 
+  const controlsButton = (instanceId: string) => (
+    <EuiButtonIcon
+      iconType={ThreeDots}
+      aria-label="Controls icon"
+      data-testid={`controls-button-${instanceId}`}
+      onClick={() => toggleControlsPopover(instanceId)}
+    />
+  )
+
   const columns: EuiTableFieldDataColumnType<Instance>[] = [
     {
       field: 'name',
@@ -450,26 +467,46 @@ const DatabasesListWrapper = (props: Props) => {
               </EuiToolTip>
             )}
             <FeatureFlagComponent name={FeatureFlags.databaseManagement}>
-              <EuiButtonIcon
-                iconType="pencil"
-                className="editInstanceBtn"
-                aria-label="Edit instance"
-                data-testid={`edit-instance-${instance.id}`}
-                onClick={() => handleClickEditInstance(instance)}
-              />
-              <PopoverDelete
-                header={formatLongName(instance.name, 50, 10, '...')}
-                text="will be removed from Redis Insight."
-                item={instance.id}
-                suffix={suffix}
-                deleting={deletingIdRef.current}
-                closePopover={closePopover}
-                updateLoading={false}
-                showPopover={showPopover}
-                handleDeleteItem={() => handleDeleteInstance(instance)}
-                handleButtonClick={() => handleClickDeleteInstance(instance)}
-                testid={`delete-instance-${instance.id}`}
-              />
+              <EuiPopover
+                ownFocus
+                initialFocus={false}
+                anchorPosition='leftUp'
+                isOpen={controlsOpenIdRef.current === instance.id}
+                closePopover={() => toggleControlsPopover('')}
+                panelPaddingSize="s"
+                button={controlsButton(instance.id)}
+                data-testid={`controls-popover-${instance.id}`}
+              >
+                <div className="controlsPopoverContent">
+                  <div>
+                    <EuiButtonEmpty
+                      iconType="pencil"
+                      className="editInstanceBtn"
+                      aria-label="Edit instance"
+                      data-testid={`edit-instance-${instance.id}`}
+                      onClick={() => handleClickEditInstance(instance)}
+                    >
+                      Edit database
+                    </EuiButtonEmpty>
+                  </div>
+                  <div>
+                    <PopoverDelete
+                      header={formatLongName(instance.name, 50, 10, '...')}
+                      text="will be removed from Redis Insight."
+                      item={instance.id}
+                      suffix={suffix}
+                      deleting={deletingIdRef.current}
+                      closePopover={closePopover}
+                      updateLoading={false}
+                      showPopover={showPopover}
+                      handleDeleteItem={() => handleDeleteInstance(instance)}
+                      handleButtonClick={() => handleClickDeleteInstance(instance)}
+                      testid={`delete-instance-${instance.id}`}
+                      buttonLabel="Remove database"
+                    />
+                  </div>
+                </div>
+              </EuiPopover>
             </FeatureFlagComponent>
           </>
         )

redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx

@@ -109,3 +109,20 @@ $breakpoint-l: 1400px;
     }
   }
 }
+
+:global(.controlsPopoverContent) {
+  display: flex;
+  flex-direction: column;
+
+  & > div {
+    display: flex;
+
+    button {
+      flex: 1;
+      
+      :global(.euiButtonContent) {
+        justify-content: start;
+      }
+    }
+  }
+}

redisinsight/ui/src/pages/home/components/database-list-component/styles.module.scss

@@ -7,7 +7,7 @@ import {
   EuiFlexItem,
 } from '@elastic/eui'
 import cx from 'classnames'
-import threeDots from 'uiSrc/assets/img/rdi/three_dots.svg?react'
+import threeDots from 'uiSrc/assets/img/icons/three_dots.svg?react'
 import uploadIcon from 'uiSrc/assets/img/rdi/upload.svg?react'
 import UploadModal from 'uiSrc/pages/rdi/pipeline-management/components/upload-modal/UploadModal'
 import Download from 'uiSrc/pages/rdi/instance/components/download'