#RI-1756 - rework CLI & Command Helper

Author: Roman.Sergeenko

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import cx from 'classnames'
+import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
+import CliWrapper from 'uiSrc/components/cli/CliWrapper'
+import CommandHelperWrapper from 'uiSrc/components/command-helper/CommandHelperWrapper'
+import BottomGroupMinimized from './components/bottom-group-minimized/BottomGroupMinimized'
+
+import styles from './styles.module.scss'
+
+const BottomGroupComponents = () => {
+  const { isShowCli } = useSelector(cliSettingsSelector)
+  const {
+    isShowHelper,
+  } = useSelector(cliSettingsSelector)
+
+  return (
+    <div className={styles.groupComponentsWrapper}>
+      <div className={styles.groupComponents}>
+        {isShowCli && <CliWrapper />}
+        {isShowHelper && (
+          <div className={cx(styles.helperWrapper, { [styles.fullWidth]: !isShowCli })}>
+            <CommandHelperWrapper />
+          </div>
+        )}
+      </div>
+      <BottomGroupMinimized />
+    </div>
+  )
+}
+
+export default BottomGroupComponents

redisinsight/ui/src/components/cli/components/cli-header-minimized/CliHeaderMinimized.spec.tsx renamed to redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.spec.tsx

@@ -1,27 +1,24 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
-import { instance, mock } from 'ts-mockito'
 
-import { toggleCli, clearSearchingCommand } from 'uiSrc/slices/cli/cli-settings'
+import { toggleCli } from 'uiSrc/slices/cli/cli-settings'
 import { fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
-import CliHeaderMinimized, { Props } from './CliHeaderMinimized'
-
-const mockedProps = mock<Props>()
+import BottomGroupMinimized from './BottomGroupMinimized'
 
 describe('CliHeaderMinimized', () => {
   it('should render', () => {
     expect(
-      render(<CliHeaderMinimized {...instance(mockedProps)} />)
+      render(<BottomGroupMinimized />)
     ).toBeTruthy()
   })
 
   it('should "toggleCli" & "clearSearchingCommand" actions be called after click "expand-cli" button', () => {
     const store = cloneDeep(mockedStore)
 
-    render(<CliHeaderMinimized {...instance(mockedProps)} />)
+    render(<BottomGroupMinimized />)
     fireEvent.click(screen.getByTestId('expand-cli'))
 
-    const expectedActions = [toggleCli(), clearSearchingCommand()]
+    const expectedActions = [toggleCli()]
     expect(store.getActions()).toEqual(expectedActions)
   })
 })

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

@@ -0,0 +1,72 @@
+import React 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 { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { toggleCli, toggleCliHelper, cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
+
+import styles from '../../styles.module.scss'
+
+const BottomGroupMinimized = () => {
+  const { isShowHelper, isShowCli } = useSelector(cliSettingsSelector)
+  const { instanceId = '' } = useParams<{ instanceId: string }>()
+  const dispatch = useDispatch()
+
+  const handleExpandCli = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.CLI_OPENED,
+      eventData: {
+        databaseId: instanceId
+      }
+    })
+    dispatch(toggleCli())
+  }
+
+  const handleExpandHelper = () => {
+    sendEventTelemetry({
+      event: isShowHelper ? TelemetryEvent.COMMAND_HELPER_COLLAPSED : TelemetryEvent.COMMAND_HELPER_EXPANDED,
+      eventData: {
+        databaseId: instanceId
+      }
+    })
+    dispatch(toggleCliHelper())
+  }
+
+  return (
+    <div className={styles.containerMinimized}>
+      <EuiFlexGroup
+        gutterSize="none"
+        alignItems="center"
+        responsive={false}
+        style={{ height: '100%' }}
+      >
+        <EuiFlexItem
+          className={styles.componentBadgeItem}
+          grow={false}
+          onClick={handleExpandCli}
+          data-testid="expand-cli"
+        >
+          <EuiBadge className={cx(styles.componentBadge, { [styles.active]: isShowCli })}>
+            <EuiIcon type="console" size="m" />
+            <span>CLI</span>
+          </EuiBadge>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className={styles.componentBadgeItem}
+          grow={false}
+          onClick={handleExpandHelper}
+          data-testid="expand-helper"
+        >
+          <EuiBadge className={cx(styles.componentBadge, { [styles.active]: isShowHelper })}>
+            <EuiIcon type="documents" size="m" />
+            <span>Command Helper</span>
+          </EuiBadge>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  )
+}
+
+export default BottomGroupMinimized

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/index.ts

@@ -0,0 +1,3 @@
+import BottomGroupMinimized from './BottomGroupMinimized'
+
+export default BottomGroupMinimized

redisinsight/ui/src/components/bottom-group-components/styles.module.scss

@@ -0,0 +1,63 @@
+.groupComponentsWrapper {
+  flex-grow: 1;
+  height: 100%;
+  padding: 0 16px;
+}
+
+.groupComponents {
+  display: flex;
+  flex-grow: 1;
+  height: calc(100% - 26px);
+}
+
+.containerMinimized {
+  height: 26px;
+  line-height: 26px;
+  border: 1px solid var(--euiColorLightShade);
+}
+
+.componentBadgeItem {
+  margin: 0 2px;
+  cursor: pointer;
+  user-select: none;
+
+  :global {
+    .euiBadge__text, .euiBadge__content {
+      cursor: pointer !important;
+    }
+
+    .euiBadge__text {
+      display: flex;
+      align-items: center;
+    }
+
+    .euiIcon {
+      margin-right: 4px;
+    }
+  }
+}
+
+.componentBadge {
+  background-color: transparent !important;
+  color: var(--euiTextSubduedColor) !important;
+  height: 18px !important;
+  border: none !important;
+
+  &:hover {
+    background-color: #364DA8 !important;
+  }
+
+  &.active {
+    background-color: var(--hoverInListColorDarken) !important;
+    color: var(--euiColorPrimary) !important;
+  }
+}
+
+
+.helperWrapper {
+  width: 100%;
+  max-width: 360px;
+  &.fullWidth {
+    max-width: 100%;
+  }
+}

redisinsight/ui/src/components/cli/Cli/styles.module.scss

@@ -5,8 +5,6 @@
 .container {
   height: 100%;
   width: 100%;
-  padding-left: 16px;
-  padding-right: 16px;
 }
 
 .main {

redisinsight/ui/src/components/cli/CliWrapper.spec.tsx

@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
-import { clearSearchingCommand, setCliEnteringCommand } from 'uiSrc/slices/cli/cli-settings'
+import { processCliClient, setCliEnteringCommand } from 'uiSrc/slices/cli/cli-settings'
 import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
 import CliWrapper from './CliWrapper'
 
@@ -35,7 +35,7 @@ describe('CliWrapper', () => {
 
     unmount()
 
-    const expectedActions = [clearSearchingCommand(), setCliEnteringCommand()]
+    const expectedActions = [processCliClient(), setCliEnteringCommand()]
     expect(store.getActions().slice(-2)).toEqual(expectedActions)
   })
 })

redisinsight/ui/src/components/cli/components/cli-body/CliBody/styles.module.scss

@@ -23,7 +23,6 @@
   color: var(--textColorShade);
 
   border-top: 1px solid var(--euiColorLightShade);
-  border-right: 1px solid var(--euiColorLightShade);
 
   z-index: 10;
 

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

@@ -110,12 +110,6 @@ describe('CliBodyWrapper', () => {
     )
   })
 
-  it('CliHelper should be opened by default', () => {
-    render(<CliBodyWrapper />)
-
-    expect(screen.getByTestId('cli-helper')).toBeInTheDocument()
-  })
-
   // It's not possible to simulate events on contenteditable with testing-react-library,
   // or any testing library that uses js - dom, because of a limitation on js - dom itself.
   // https://github.com/testing-library/dom-testing-library/pull/235

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

@@ -29,10 +29,9 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances'
 import { checkUnsupportedCommand, clearOutput } from 'uiSrc/utils/cliHelper'
 import { InitOutputText, ConnectionSuccessOutputText } from 'uiSrc/constants/cliOutput'
 import { SendClusterCommandDto } from 'apiSrc/modules/cli/dto/cli.dto'
-
 import CliBody from './CliBody'
+
 import styles from './CliBody/styles.module.scss'
-import CliHelperWrapper from '../cli-helper'
 
 const CliBodyWrapper = () => {
   const cliClientUuid = sessionStorageService.get(BrowserStorageItem.cliClientUuid) ?? ''
@@ -45,7 +44,6 @@ const CliBodyWrapper = () => {
   const {
     errorClient: error,
     unsupportedCommands,
-    isShowHelper,
     isEnteringCommand,
     isSearching,
     matchedCommand
@@ -147,7 +145,6 @@ const CliBodyWrapper = () => {
         setCommand={setCommand}
         onSubmit={handleSubmit}
       />
-      {isShowHelper && <CliHelperWrapper />}
     </section>
   )
 }