Merge pull request #115 from RedisInsight/feature/RI-1756_rework-cli-ch

#RI-1756 - rework CLI & Command Helper

Author: rsergeenko

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

@@ -0,0 +1,62 @@
+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 BottomGroupComponents from './BottomGroupComponents'
+
+jest.mock('uiSrc/slices/cli/cli-settings', () => ({
+  ...jest.requireActual('uiSrc/slices/cli/cli-settings'),
+  cliSettingsSelector: jest.fn().mockReturnValue({
+    isShowCli: true,
+    isShowHelper: true
+  }),
+}))
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+const commandHelperId = 'command-helper'
+const cliId = 'cli'
+
+describe('BottomGroupComponents', () => {
+  it('should render', () => {
+    expect(
+      render(<BottomGroupComponents />)
+    ).toBeTruthy()
+  })
+
+  it('should render Cli when isShowCli truthy', () => {
+    render(<BottomGroupComponents />)
+    expect(screen.getByTestId(cliId)).toBeInTheDocument()
+  })
+
+  it('should render Command Helper when isShowHelper truthy', () => {
+    render(<BottomGroupComponents />)
+    expect(screen.getByTestId(commandHelperId)).toBeInTheDocument()
+  })
+
+  it('should not to close command helper after closing cli', () => {
+    render(<BottomGroupComponents />)
+    fireEvent.click(screen.getByTestId('collapse-cli'))
+    const expectedActions = [toggleCli()]
+    expect(store.getActions()).toEqual(expect.arrayContaining(expectedActions))
+
+    expect(screen.getByTestId('command-helper')).toBeInTheDocument()
+  })
+
+  it('should not to close cli after closing command-helper', () => {
+    render(<BottomGroupComponents />)
+    fireEvent.click(screen.getByTestId('close-command-helper'))
+
+    const expectedActions = [toggleCliHelper()]
+    expect(store.getActions()).toEqual(expect.arrayContaining(expectedActions))
+
+    expect(screen.getByTestId('cli')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,29 @@
+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, 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/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { cloneDeep } from 'lodash'
+
+import { toggleCli, toggleCliHelper } from 'uiSrc/slices/cli/cli-settings'
+import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import BottomGroupMinimized from './BottomGroupMinimized'
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('BottomGroupMinimized', () => {
+  it('should render', () => {
+    expect(
+      render(<BottomGroupMinimized />)
+    ).toBeTruthy()
+  })
+
+  it('should "toggleCli" action be called after click "expand-cli" button', () => {
+    render(<BottomGroupMinimized />)
+    fireEvent.click(screen.getByTestId('expand-cli'))
+
+    const expectedActions = [toggleCli()]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
+  it('should "toggleCliHelper" action be called after click "expand-command-helper" button', () => {
+    render(<BottomGroupMinimized />)
+    fireEvent.click(screen.getByTestId('expand-command-helper'))
+
+    const expectedActions = [toggleCliHelper()]
+    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-command-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: var(--buttonIconPrimaryHover) !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/Cli.tsx

@@ -5,7 +5,7 @@ import CliBodyWrapper from 'uiSrc/components/cli/components/cli-body'
 import styles from './styles.module.scss'
 
 const CLI = () => (
-  <div className={styles.container}>
+  <div className={styles.container} data-testid="cli">
     <div className={styles.main}>
       <CliHeader />
       <CliBodyWrapper />

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;