Merge pull request #141 from RedisInsight/feature/RI-2117_Minimize_CLI

* #RI-2117 - Minimize/Maximize CLI and minimize Command Helper

Author: egor-zalenski

redisinsight/ui/src/components/bottom-group-components/BottomGroupComponents.spec.tsx

@@ -2,7 +2,8 @@ import { cloneDeep } from 'lodash'
 import React from 'react'
 
 import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
-import { toggleCli, toggleCliHelper } from 'uiSrc/slices/cli/cli-settings'
+import { resetCliHelperSettings, resetCliSettings } from 'uiSrc/slices/cli/cli-settings'
+import { resetOutputLoading } from 'uiSrc/slices/cli/cli-output'
 
 import BottomGroupComponents from './BottomGroupComponents'
 
@@ -43,8 +44,8 @@ describe('BottomGroupComponents', () => {
 
   it('should not to close command helper after closing cli', () => {
     render(<BottomGroupComponents />)
-    fireEvent.click(screen.getByTestId('collapse-cli'))
-    const expectedActions = [toggleCli()]
+    fireEvent.click(screen.getByTestId('close-cli'))
+    const expectedActions = [resetCliSettings(), resetOutputLoading()]
     expect(store.getActions()).toEqual(expect.arrayContaining(expectedActions))
 
     expect(screen.getByTestId('command-helper')).toBeInTheDocument()
@@ -54,7 +55,7 @@ describe('BottomGroupComponents', () => {
     render(<BottomGroupComponents />)
     fireEvent.click(screen.getByTestId('close-command-helper'))
 
-    const expectedActions = [toggleCliHelper()]
+    const expectedActions = [resetCliHelperSettings()]
     expect(store.getActions()).toEqual(expect.arrayContaining(expectedActions))
 
     expect(screen.getByTestId('cli')).toBeInTheDocument()

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx

@@ -1,11 +1,17 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import cx from 'classnames'
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
+import {
+  toggleCli,
+  toggleCliHelper,
+  cliSettingsSelector,
+  clearSearchingCommand,
+  setCliEnteringCommand,
+} from 'uiSrc/slices/cli/cli-settings'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { toggleCli, toggleCliHelper, cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
 
 import styles from '../../styles.module.scss'
 
@@ -14,6 +20,12 @@ const BottomGroupMinimized = () => {
   const { instanceId = '' } = useParams<{ instanceId: string }>()
   const dispatch = useDispatch()
 
+  useEffect(() =>
+    () => {
+      dispatch(clearSearchingCommand())
+      dispatch(setCliEnteringCommand())
+    }, [])
+
   const handleExpandCli = () => {
     sendEventTelemetry({
       event: TelemetryEvent.CLI_OPENED,

redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx

@@ -244,7 +244,7 @@ describe('CliBody', () => {
         key: keys.ESCAPE,
       })
 
-      expect(screen.getByTestId('collapse-cli')).toHaveFocus()
+      expect(screen.getByTestId('close-cli')).toHaveFocus()
     })
 
     it('"Tab" with command="" should setCommand first command from constants/commands ', () => {

redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx

@@ -141,7 +141,7 @@ const CliBody = (props: Props) => {
   }
 
   const onKeyEsc = () => {
-    document.getElementById('collapse-cli')?.focus()
+    document.getElementById('close-cli')?.focus()
   }
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {

redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.spec.tsx

@@ -78,15 +78,6 @@ describe('CliBodyWrapper', () => {
     expect(render(<CliBodyWrapper />)).toBeTruthy()
   })
 
-  it('should SessionStorage be called', () => {
-    const mockUuid = 'test-uuid'
-    sessionStorageService.get = jest.fn().mockReturnValue(mockUuid)
-
-    render(<CliBodyWrapper />)
-
-    expect(sessionStorageService.get).toBeCalledWith(BrowserStorageItem.cliClientUuid)
-  })
-
   it('should render with SessionStorage', () => {
     render(<CliBodyWrapper />)
 

redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.tsx

@@ -9,7 +9,6 @@ import { useParams } from 'react-router-dom'
 import {
   cliSettingsSelector,
   createCliClientAction,
-  updateCliClientAction,
   setCliEnteringCommand,
   clearSearchingCommand,
 } from 'uiSrc/slices/cli/cli-settings'
@@ -21,9 +20,7 @@ import {
   processUnsupportedCommand,
 } from 'uiSrc/slices/cli/cli-output'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { BrowserStorageItem } from 'uiSrc/constants'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
-import { sessionStorageService } from 'uiSrc/services'
 import { ClusterNodeRole } from 'uiSrc/slices/interfaces/cli'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances'
 import { checkUnsupportedCommand, clearOutput } from 'uiSrc/utils/cliHelper'
@@ -34,8 +31,6 @@ import CliBody from './CliBody'
 import styles from './CliBody/styles.module.scss'
 
 const CliBodyWrapper = () => {
-  const cliClientUuid = sessionStorageService.get(BrowserStorageItem.cliClientUuid) ?? ''
-
   const [command, setCommand] = useState('')
 
   const dispatch = useDispatch()
@@ -46,7 +41,8 @@ const CliBodyWrapper = () => {
     unsupportedCommands,
     isEnteringCommand,
     isSearching,
-    matchedCommand
+    matchedCommand,
+    cliClientUuid,
   } = useSelector(cliSettingsSelector)
   const { host, port, connectionType } = useSelector(connectedInstanceSelector)
 
@@ -55,12 +51,7 @@ const CliBodyWrapper = () => {
       dispatch(concatToOutput(InitOutputText(host, port)))
     }
 
-    if (cliClientUuid) {
-      dispatch(updateCliClientAction(cliClientUuid, onSuccess, onFail))
-      return
-    }
-
-    dispatch(createCliClientAction(onSuccess, onFail))
+    !cliClientUuid && dispatch(createCliClientAction(onSuccess, onFail))
   }, [])
 
   useEffect(() => {

redisinsight/ui/src/components/cli/components/cli-header/CliHeader.spec.tsx

@@ -11,9 +11,10 @@ import {
   waitFor,
 } from 'uiSrc/utils/test-utils'
 import { BrowserStorageItem } from 'uiSrc/constants'
-import { processCliClient, toggleCli } from 'uiSrc/slices/cli/cli-settings'
+import { processCliClient, resetCliSettings, toggleCli } from 'uiSrc/slices/cli/cli-settings'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances'
 import { sessionStorageService } from 'uiSrc/services'
+import { resetOutputLoading } from 'uiSrc/slices/cli/cli-output'
 import CliHeader from './CliHeader'
 
 let store: typeof mockedStore
@@ -44,39 +45,47 @@ describe('CliHeader', () => {
     expect(render(<CliHeader />)).toBeTruthy()
   })
 
-  it('should "toggleCli" action be called after click "collapse-cli" button', () => {
+  it('should "resetCliSettings" action be called after click "close-cli" button', () => {
     render(<CliHeader />)
-    fireEvent.click(screen.getByTestId('collapse-cli'))
+    fireEvent.click(screen.getByTestId('close-cli'))
 
-    const expectedActions = [toggleCli()]
+    const expectedActions = [resetCliSettings(), resetOutputLoading()]
     expect(store.getActions()).toEqual(expectedActions)
   })
 
-  it('should "toggleCli" action be called after click "collapse-cli" button', async () => {
+  it('should "resetCliSettings" action be called after click "close-cli" button', async () => {
     const mockUuid = 'test-uuid'
     sessionStorageMock.getItem = jest.fn().mockReturnValue(mockUuid)
 
     render(<CliHeader />)
 
     await waitFor(() => {
-      fireEvent.click(screen.getByTestId('collapse-cli'))
+      fireEvent.click(screen.getByTestId('close-cli'))
     })
 
+    const expectedActions = [resetCliSettings(), resetOutputLoading()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
+  it('should "toggleCli" action be called after click "hide-cli" button', () => {
+    render(<CliHeader />)
+    fireEvent.click(screen.getByTestId('hide-cli'))
+
     const expectedActions = [toggleCli()]
     expect(store.getActions()).toEqual(expectedActions)
   })
 
-  it('should "processCliClient" action be called after unmount with mocked sessionStorage item ', () => {
+  it('should "toggleCli" action be called after click "hide-cli" button', async () => {
     const mockUuid = 'test-uuid'
-    sessionStorageService.get = jest.fn().mockReturnValue(mockUuid)
-
-    const { unmount } = render(<CliHeader />)
+    sessionStorageMock.getItem = jest.fn().mockReturnValue(mockUuid)
 
-    unmount()
+    render(<CliHeader />)
 
-    expect(sessionStorageService.get).toBeCalledWith(BrowserStorageItem.cliClientUuid)
+    await waitFor(() => {
+      fireEvent.click(screen.getByTestId('hide-cli'))
+    })
 
-    const expectedActions = [processCliClient()]
+    const expectedActions = [toggleCli()]
     expect(store.getActions()).toEqual(expectedActions)
   })
 
@@ -99,3 +108,23 @@ describe('CliHeader', () => {
     expect(endpointEl).toHaveTextContent(endpoint)
   })
 })
+
+it('should "processCliClient" action be called after close cli with mocked sessionStorage item ', async () => {
+  const mockUuid = 'test-uuid'
+  sessionStorageService.get = jest.fn().mockReturnValue(mockUuid)
+
+  render(<CliHeader />)
+
+  await waitFor(() => {
+    fireEvent.click(screen.getByTestId('close-cli'))
+  })
+
+  expect(sessionStorageService.get).toBeCalledWith(BrowserStorageItem.cliClientUuid)
+
+  const expectedActions = [
+    processCliClient(),
+    resetCliSettings(),
+    resetOutputLoading(),
+  ]
+  expect(store.getActions()).toEqual(expectedActions)
+})

redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
-
 import cx from 'classnames'
 import {
   EuiFlexGroup,
@@ -14,13 +13,15 @@ import {
 } from '@elastic/eui'
 
 import {
-  deleteCliClientAction,
   toggleCli,
+  resetCliSettings,
+  deleteCliClientAction,
 } from 'uiSrc/slices/cli/cli-settings'
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { BrowserStorageItem } from 'uiSrc/constants'
 import { sessionStorageService } from 'uiSrc/services'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { resetOutputLoading } from 'uiSrc/slices/cli/cli-output'
 
 import styles from './styles.module.scss'
 
@@ -41,18 +42,29 @@ const CliHeader = () => {
   useEffect(() => {
     window.addEventListener('beforeunload', removeCliClient, false)
     return () => {
-      removeCliClient()
       window.removeEventListener('beforeunload', removeCliClient, false)
     }
   }, [])
 
-  const handleCollapseCli = () => {
+  const handleCloseCli = () => {
     sendEventTelemetry({
       event: TelemetryEvent.CLI_HIDDEN,
       eventData: {
         databaseId: instanceId
       }
     })
+    removeCliClient()
+    dispatch(resetCliSettings())
+    dispatch(resetOutputLoading())
+  }
+
+  const handleHideCli = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.CLI_MINIMIZED,
+      eventData: {
+        databaseId: instanceId
+      }
+    })
     dispatch(toggleCli())
   }
 
@@ -88,6 +100,24 @@ const CliHeader = () => {
             </EuiText>
           </EuiToolTip>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiToolTip
+            content="Minimize"
+            position="top"
+            display="inlineBlock"
+            anchorClassName="flex-row"
+          >
+            <EuiButtonIcon
+              iconType="minus"
+              color="primary"
+              id="hide-cli"
+              aria-label="hide cli"
+              data-testid="hide-cli"
+              className={styles.icon}
+              onClick={handleHideCli}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiToolTip
             content="Close"
@@ -98,11 +128,11 @@ const CliHeader = () => {
             <EuiButtonIcon
               iconType="cross"
               color="primary"
-              id="collapse-cli"
-              aria-label="collapse cli"
-              data-testid="collapse-cli"
+              id="close-cli"
+              aria-label="close cli"
+              data-testid="close-cli"
               className={styles.icon}
-              onClick={handleCollapseCli}
+              onClick={handleCloseCli}
             />
           </EuiToolTip>
         </EuiFlexItem>

redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.spec.tsx

@@ -6,7 +6,7 @@ import {
   render,
   screen,
 } from 'uiSrc/utils/test-utils'
-import { toggleCliHelper } from 'uiSrc/slices/cli/cli-settings'
+import { resetCliHelperSettings, toggleCliHelper } from 'uiSrc/slices/cli/cli-settings'
 import CommandHelperHeader from './CommandHelperHeader'
 
 let store: typeof mockedStore
@@ -21,10 +21,18 @@ describe('CommandHelperHeader', () => {
     expect(render(<CommandHelperHeader />)).toBeTruthy()
   })
 
-  it('should "toggleCli" action be called after click "close-command-helper" button', () => {
+  it('should "resetCliHelperSettings" action be called after click "close-command-helper" button', () => {
     render(<CommandHelperHeader />)
     fireEvent.click(screen.getByTestId('close-command-helper'))
 
+    const expectedActions = [resetCliHelperSettings()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
+  it('should "toggleCliHelper" action be called after click "hide-command-helper" button', () => {
+    render(<CommandHelperHeader />)
+    fireEvent.click(screen.getByTestId('hide-command-helper'))
+
     const expectedActions = [toggleCliHelper()]
     expect(store.getActions()).toEqual(expectedActions)
   })