diff --git a/redisinsight/ui/src/components/cli/Cli/styles.module.scss b/redisinsight/ui/src/components/cli/Cli/styles.module.scss
index d10e657e75..92f31f1508 100644
--- a/redisinsight/ui/src/components/cli/Cli/styles.module.scss
+++ b/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 {
diff --git a/redisinsight/ui/src/components/cli/CliWrapper.spec.tsx b/redisinsight/ui/src/components/cli/CliWrapper.spec.tsx
index 08655bc584..2d94d17571 100644
--- a/redisinsight/ui/src/components/cli/CliWrapper.spec.tsx
+++ b/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)
})
})
diff --git a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx
index e712422299..d7034251dd 100644
--- a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx
+++ b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx
@@ -3,7 +3,7 @@ import React from 'react'
import { keys } from '@elastic/eui'
import { instance, mock } from 'ts-mockito'
import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
-import { clearOutput, updateCliHistoryStorage } from 'uiSrc/utils/cli'
+import { clearOutput, updateCliHistoryStorage } from 'uiSrc/utils/cliHelper'
import CLI from 'uiSrc/components/cli/Cli'
import { MOCK_COMMANDS_ARRAY } from 'uiSrc/constants'
import CliBody, { Props } from './CliBody'
@@ -48,8 +48,8 @@ jest.mock(redisCommandsPath, () => {
}
})
-jest.mock('uiSrc/utils/cli', () => ({
- ...jest.requireActual('uiSrc/utils/cli'),
+jest.mock('uiSrc/utils/cliHelper', () => ({
+ ...jest.requireActual('uiSrc/utils/cliHelper'),
updateCliHistoryStorage: jest.fn(),
clearOutput: jest.fn(),
}))
@@ -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 ', () => {
diff --git a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx
index 4317d9d85e..b0a3ea2b72 100644
--- a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx
+++ b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx
@@ -8,7 +8,7 @@ import { ClearCommand } from 'uiSrc/constants/cliOutput'
import { outputSelector } from 'uiSrc/slices/cli/cli-output'
import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
import CliInputWrapper from 'uiSrc/components/cli/components/cli-input'
-import { clearOutput, updateCliHistoryStorage } from 'uiSrc/utils/cli'
+import { clearOutput, updateCliHistoryStorage } from 'uiSrc/utils/cliHelper'
import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
import styles from './styles.module.scss'
@@ -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
) => {
diff --git a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/styles.module.scss b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/styles.module.scss
index 168b934237..3350192da3 100644
--- a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/styles.module.scss
+++ b/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;
diff --git a/redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.spec.tsx b/redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.spec.tsx
index 47dd77e029..461c518c5a 100644
--- a/redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.spec.tsx
+++ b/redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react'
import { cloneDeep, first } from 'lodash'
-import { instance, mock } from 'ts-mockito'
import {
cleanup,
fireEvent,
@@ -21,9 +20,7 @@ import { processCliClient } from 'uiSrc/slices/cli/cli-settings'
import { connectedInstanceSelector } from 'uiSrc/slices/instances'
import { sessionStorageService } from 'uiSrc/services'
-import CliBodyWrapper, { Props } from './CliBodyWrapper'
-
-const mockedProps = mock()
+import CliBodyWrapper from './CliBodyWrapper'
let store: typeof mockedStore
beforeEach(() => {
@@ -55,8 +52,8 @@ jest.mock('uiSrc/slices/cli/cli-output', () => ({
updateCliCommandHistory: jest.fn,
}))
-jest.mock('uiSrc/utils/cli', () => ({
- ...jest.requireActual('uiSrc/utils/cli'),
+jest.mock('uiSrc/utils/cliHelper', () => ({
+ ...jest.requireActual('uiSrc/utils/cliHelper'),
updateCliHistoryStorage: jest.fn(),
clearOutput: jest.fn(),
cliParseTextResponse: jest.fn(),
@@ -78,20 +75,11 @@ jest.mock('uiSrc/slices/cli/cli-settings', () => ({
describe('CliBodyWrapper', () => {
it('should render', () => {
- expect(render()).toBeTruthy()
- })
-
- it('should SessionStorage be called', () => {
- const mockUuid = 'test-uuid'
- sessionStorageService.get = jest.fn().mockReturnValue(mockUuid)
-
- render()
-
- expect(sessionStorageService.get).toBeCalledWith(BrowserStorageItem.cliClientUuid)
+ expect(render()).toBeTruthy()
})
it('should render with SessionStorage', () => {
- render()
+ render()
const expectedActions = [concatToOutput(InitOutputText('', 0)), processCliClient()]
expect(clearStoreActions(store.getActions().slice(0, expectedActions.length))).toEqual(
@@ -100,7 +88,7 @@ describe('CliBodyWrapper', () => {
})
it('"onSubmit" should be called after keyDown Enter', () => {
- render()
+ render()
fireEvent.keyDown(screen.getByTestId(cliCommandTestId), {
key: 'Enter',
@@ -113,12 +101,6 @@ describe('CliBodyWrapper', () => {
)
})
- it('CliHelper should be opened by default', () => {
- render()
-
- 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
@@ -127,7 +109,7 @@ describe('CliBodyWrapper', () => {
processUnsupportedCommand.mockImplementation(() => processUnsupportedCommandMock)
- render()
+ render()
// Act
fireEvent.change(screen.getByTestId(cliCommandTestId), {
@@ -152,7 +134,7 @@ describe('CliBodyWrapper', () => {
sendCliClusterCommandAction.mockImplementation(() => sendCliClusterActionMock)
- render()
+ render()
// Act
fireEvent.keyDown(screen.getByTestId(cliCommandTestId), {
diff --git a/redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.tsx b/redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.tsx
index 37cc792bb7..3b83085ffb 100644
--- a/redisinsight/ui/src/components/cli/components/cli-body/CliBodyWrapper.tsx
+++ b/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,22 +20,17 @@ 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/cli'
+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) ?? ''
-
const [command, setCommand] = useState('')
const dispatch = useDispatch()
@@ -45,10 +39,10 @@ const CliBodyWrapper = () => {
const {
errorClient: error,
unsupportedCommands,
- isShowHelper,
isEnteringCommand,
isSearching,
- matchedCommand
+ matchedCommand,
+ cliClientUuid,
} = useSelector(cliSettingsSelector)
const { host, port, connectionType } = useSelector(connectedInstanceSelector)
@@ -57,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(() => {
@@ -147,7 +136,6 @@ const CliBodyWrapper = () => {
setCommand={setCommand}
onSubmit={handleSubmit}
/>
- {isShowHelper && }
)
}
diff --git a/redisinsight/ui/src/components/cli/components/cli-command-info/index.ts b/redisinsight/ui/src/components/cli/components/cli-command-info/index.ts
deleted file mode 100644
index 0e9667fe8b..0000000000
--- a/redisinsight/ui/src/components/cli/components/cli-command-info/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import CliCommandInfo from './CliCommandInfo'
-
-export default CliCommandInfo
diff --git a/redisinsight/ui/src/components/cli/components/cli-header-minimized/CliHeaderMinimized.spec.tsx b/redisinsight/ui/src/components/cli/components/cli-header-minimized/CliHeaderMinimized.spec.tsx
deleted file mode 100644
index 7be5f7f5a9..0000000000
--- a/redisinsight/ui/src/components/cli/components/cli-header-minimized/CliHeaderMinimized.spec.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { cloneDeep } from 'lodash'
-import { instance, mock } from 'ts-mockito'
-
-import { toggleCli, clearSearchingCommand } from 'uiSrc/slices/cli/cli-settings'
-import { fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
-import CliHeaderMinimized, { Props } from './CliHeaderMinimized'
-
-const mockedProps = mock()
-
-describe('CliHeaderMinimized', () => {
- it('should render', () => {
- expect(
- render()
- ).toBeTruthy()
- })
-
- it('should "toggleCli" & "clearSearchingCommand" actions be called after click "expand-cli" button', () => {
- const store = cloneDeep(mockedStore)
-
- render()
- fireEvent.click(screen.getByTestId('expand-cli'))
-
- const expectedActions = [toggleCli(), clearSearchingCommand()]
- expect(store.getActions()).toEqual(expectedActions)
- })
-})
diff --git a/redisinsight/ui/src/components/cli/components/cli-header-minimized/CliHeaderMinimized.tsx b/redisinsight/ui/src/components/cli/components/cli-header-minimized/CliHeaderMinimized.tsx
deleted file mode 100644
index 3a475d3714..0000000000
--- a/redisinsight/ui/src/components/cli/components/cli-header-minimized/CliHeaderMinimized.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react'
-import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiText, EuiToolTip } from '@elastic/eui'
-import { useDispatch } from 'react-redux'
-import { useParams } from 'react-router-dom'
-
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { toggleCli, clearSearchingCommand } from 'uiSrc/slices/cli/cli-settings'
-
-import styles from '../cli-header/styles.module.scss'
-
-const CliHeaderMinimized = () => {
- const { instanceId = '' } = useParams<{ instanceId: string }>()
- const dispatch = useDispatch()
-
- const handleExpandCli = () => {
- sendEventTelemetry({
- event: TelemetryEvent.CLI_OPENED,
- eventData: {
- databaseId: instanceId
- }
- })
- dispatch(toggleCli())
- dispatch(clearSearchingCommand())
- }
-
- return (
-
-
-
- CLI
-
-
-
-
- {}}
- />
-
-
-
-
- )
-}
-
-export default CliHeaderMinimized
diff --git a/redisinsight/ui/src/components/cli/components/cli-header-minimized/index.ts b/redisinsight/ui/src/components/cli/components/cli-header-minimized/index.ts
deleted file mode 100644
index 7e207404d1..0000000000
--- a/redisinsight/ui/src/components/cli/components/cli-header-minimized/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import CliHeaderMinimized from './CliHeaderMinimized'
-
-export default CliHeaderMinimized
diff --git a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.spec.tsx b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.spec.tsx
index b03f77b94e..14cf5b8e96 100644
--- a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.spec.tsx
+++ b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.spec.tsx
@@ -1,6 +1,5 @@
import { cloneDeep } from 'lodash'
import React from 'react'
-import { instance, mock } from 'ts-mockito'
import {
cleanup,
@@ -12,12 +11,11 @@ import {
waitFor,
} from 'uiSrc/utils/test-utils'
import { BrowserStorageItem } from 'uiSrc/constants'
-import { processCliClient, toggleCli, toggleCliHelper } 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 CliHeader, { Props } from './CliHeader'
-
-const mockedProps = mock()
+import { resetOutputLoading } from 'uiSrc/slices/cli/cli-output'
+import CliHeader from './CliHeader'
let store: typeof mockedStore
beforeEach(() => {
@@ -44,56 +42,50 @@ jest.mock('uiSrc/services', () => ({
describe('CliHeader', () => {
it('should render', () => {
- expect(render()).toBeTruthy()
+ expect(render()).toBeTruthy()
})
- it('should "toggleCli" action be called after click "collapse-cli" button', () => {
- render()
- fireEvent.click(screen.getByTestId('collapse-cli'))
+ it('should "resetCliSettings" action be called after click "close-cli" button', () => {
+ render()
+ 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()
+ render()
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()
+ fireEvent.click(screen.getByTestId('hide-cli'))
+
const expectedActions = [toggleCli()]
expect(store.getActions()).toEqual(expectedActions)
})
- it('should "toggleCliHelper" action be called after click "collapse-cli-helper" button', async () => {
+ it('should "toggleCli" action be called after click "hide-cli" button', async () => {
const mockUuid = 'test-uuid'
sessionStorageMock.getItem = jest.fn().mockReturnValue(mockUuid)
- render()
+ render()
await waitFor(() => {
- fireEvent.click(screen.getByTestId('collapse-cli-helper'))
+ fireEvent.click(screen.getByTestId('hide-cli'))
})
- const expectedActions = [toggleCliHelper()]
- expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
- })
-
- it('should "processCliClient" action be called after unmount with mocked sessionStorage item ', () => {
- const mockUuid = 'test-uuid'
- sessionStorageService.get = jest.fn().mockReturnValue(mockUuid)
-
- const { unmount } = render()
-
- unmount()
-
- expect(sessionStorageService.get).toBeCalledWith(BrowserStorageItem.cliClientUuid)
-
- const expectedActions = [processCliClient()]
+ const expectedActions = [toggleCli()]
expect(store.getActions()).toEqual(expectedActions)
})
@@ -108,7 +100,7 @@ describe('CliHeader', () => {
port,
}))
- const { queryByTestId } = render()
+ const { queryByTestId } = render()
const endpointEl = queryByTestId(mockEndpoint)
@@ -116,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()
+
+ await waitFor(() => {
+ fireEvent.click(screen.getByTestId('close-cli'))
+ })
+
+ expect(sessionStorageService.get).toBeCalledWith(BrowserStorageItem.cliClientUuid)
+
+ const expectedActions = [
+ processCliClient(),
+ resetCliSettings(),
+ resetOutputLoading(),
+ ]
+ expect(store.getActions()).toEqual(expectedActions)
+})
diff --git a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx
index 67b702431f..6bf6d9d1cd 100644
--- a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx
+++ b/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,
@@ -10,18 +9,19 @@ import {
EuiText,
EuiToolTip,
EuiTextColor,
+ EuiIcon,
} from '@elastic/eui'
import {
- cliSettingsSelector,
- deleteCliClientAction,
toggleCli,
- toggleCliHelper,
+ 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'
@@ -30,7 +30,6 @@ const CliHeader = () => {
const { instanceId = '' } = useParams<{ instanceId: string }>()
- const { isShowHelper } = useSelector(cliSettingsSelector)
const { host, port } = useSelector(connectedInstanceSelector)
const endpoint = `${host}:${port}`
@@ -43,42 +42,43 @@ const CliHeader = () => {
useEffect(() => {
window.addEventListener('beforeunload', removeCliClient, false)
return () => {
- removeCliClient()
window.removeEventListener('beforeunload', removeCliClient, false)
}
}, [])
- const handleCollapseCli = () => {
+ const handleCloseCli = () => {
sendEventTelemetry({
- event: TelemetryEvent.CLI_HIDDEN,
+ event: TelemetryEvent.CLI_CLOSED,
eventData: {
databaseId: instanceId
}
})
- dispatch(toggleCli())
+ removeCliClient()
+ dispatch(resetCliSettings())
+ dispatch(resetOutputLoading())
}
- const handleCollapseCliHelper = (event: React.MouseEvent) => {
- event.stopPropagation()
+ const handleHideCli = () => {
sendEventTelemetry({
- event: isShowHelper ? TelemetryEvent.COMMAND_HELPER_COLLAPSED : TelemetryEvent.COMMAND_HELPER_EXPANDED,
+ event: TelemetryEvent.CLI_MINIMIZED,
eventData: {
databaseId: instanceId
}
})
- dispatch(toggleCliHelper())
+ dispatch(toggleCli())
}
return (
-