From c5c9e803c4e3ea1511fd9f2117181ab11ed95d34 Mon Sep 17 00:00:00 2001 From: Zalenski Egor <63463140+zalenskiSofteq@users.noreply.github.com> Date: Mon, 29 Nov 2021 14:50:58 +0300 Subject: [PATCH] #RI-1788 - [Workbench] Add placeholder text for empty output in workbench --- .../src/assets/img/multi_play_icon_dark.svg | 13 ++++ .../src/assets/img/multi_play_icon_light.svg | 13 ++++ .../wb-results/WBResults/WBResults.spec.tsx | 33 +++++++--- .../wb-results/WBResults/WBResults.tsx | 65 +++++++++++++------ .../wb-results/WBResults/styles.module.scss | 29 +++++++++ 5 files changed, 122 insertions(+), 31 deletions(-) create mode 100644 redisinsight/ui/src/assets/img/multi_play_icon_dark.svg create mode 100644 redisinsight/ui/src/assets/img/multi_play_icon_light.svg diff --git a/redisinsight/ui/src/assets/img/multi_play_icon_dark.svg b/redisinsight/ui/src/assets/img/multi_play_icon_dark.svg new file mode 100644 index 0000000000..cf20b5fefd --- /dev/null +++ b/redisinsight/ui/src/assets/img/multi_play_icon_dark.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/redisinsight/ui/src/assets/img/multi_play_icon_light.svg b/redisinsight/ui/src/assets/img/multi_play_icon_light.svg new file mode 100644 index 0000000000..1e0d0c67ec --- /dev/null +++ b/redisinsight/ui/src/assets/img/multi_play_icon_light.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.spec.tsx b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.spec.tsx index 9e224bf82c..46771c13c3 100644 --- a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.spec.tsx +++ b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.spec.tsx @@ -1,21 +1,17 @@ import { cloneDeep } from 'lodash' import React from 'react' import { instance, mock } from 'ts-mockito' -import { WORKBENCH_HISTORY_WRAPPER_NAME } from 'uiSrc/pages/workbench/constants' import { WBHistoryObject } from 'uiSrc/pages/workbench/interfaces' -import HistoryContainer from 'uiSrc/services/queryHistory' import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils' import WBResults, { Props } from './WBResults' const mockedProps = mock() let store: typeof mockedStore -let history: HistoryContainer beforeEach(() => { cleanup() store = cloneDeep(mockedStore) store.clearActions() - history = new HistoryContainer(WORKBENCH_HISTORY_WRAPPER_NAME) }) jest.mock('uiSrc/services', () => ({ @@ -37,11 +33,11 @@ describe('WBResults', () => { // sendCliClusterCommandAction.mockImplementation(() => sendCliClusterActionMock); - expect(render()).toBeTruthy() + expect(render()).toBeTruthy() }) it('should render with custom props', () => { - const historyObjectsMock: WBHistoryObject[] = [ + const historyItemsMock: WBHistoryObject[] = [ { query: 'query1', data: 'data1', @@ -56,10 +52,27 @@ describe('WBResults', () => { }, ] - const historyProp = { - getData: () => historyObjectsMock, - } + expect(render()).toBeTruthy() + }) + + it('should not render NoResults component with empty history', () => { + const { getByTestId } = render() + + expect(getByTestId('wb_no-results')).toBeInTheDocument() + }) + + it('should render NoResults component with history', () => { + const historyItemsMock: WBHistoryObject[] = [{ + query: 'query1', + data: 'data1', + id: 1, + fromPersistentStore: true, + }] + + const { queryByTestId } = render() + + const noResultsEl = queryByTestId('wb_no-results') - expect(render()).toBeTruthy() + expect(noResultsEl).not.toBeInTheDocument() }) }) diff --git a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx index 26abdb46b3..f58f394254 100644 --- a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx +++ b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx @@ -1,9 +1,14 @@ -import React from 'react' +import React, { useContext } from 'react' import cx from 'classnames' +import { EuiIcon, EuiText } from '@elastic/eui' +import { Theme } from 'uiSrc/constants' import QueryCard from 'uiSrc/components/query-card' import { WBHistoryObject } from 'uiSrc/pages/workbench/interfaces' import { WBQueryType } from 'uiSrc/pages/workbench/constants' +import { ThemeContext } from 'uiSrc/contexts/themeContext' +import MultiPlayIconDark from 'uiSrc/assets/img/multi_play_icon_dark.svg' +import MultiPlayIconLight from 'uiSrc/assets/img/multi_play_icon_light.svg' import styles from './styles.module.scss' export interface Props { @@ -12,26 +17,44 @@ export interface Props { onQueryRun: (query: string, historyId?: number, type?: WBQueryType) => void; onQueryDelete: (historyId: number) => void } -const WBResults = ({ historyItems = [], onQueryRun, onQueryDelete, scrollDivRef }: Props) => ( -
-
- {historyItems.map(({ query, data, id, time, fromPersistentStore, matched, loading, status }) => ( - onQueryRun(query, id, queryType)} - onQueryReRun={() => onQueryRun(query)} - onQueryDelete={() => onQueryDelete(id)} +const WBResults = ({ historyItems = [], onQueryRun, onQueryDelete, scrollDivRef }: Props) => { + const { theme } = useContext(ThemeContext) + + const NoResults = ( +
+ - ))} -
-) + No results to display. + + Run Redis commands to get results or see the left menu to learn more. + +
+ ) + + return ( +
+
+ {historyItems.map(({ query, data, id, time, fromPersistentStore, matched, loading, status }) => ( + onQueryRun(query, id, queryType)} + onQueryReRun={() => onQueryRun(query)} + onQueryDelete={() => onQueryDelete(id)} + /> + ))} + {!historyItems.length && NoResults} +
+ ) +} export default React.memo(WBResults) diff --git a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss index 04f24d3f08..d59c21a5b6 100644 --- a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss @@ -13,3 +13,32 @@ border: 1px solid var(--euiColorLightShade); overflow: auto; } + +.noResults { + width: 326px; + height: 100%; + min-height: 140px; + display: flex; + margin: 0 auto; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + overflow: hidden; +} + +.noResultsTitle { + padding-top: 18px; + font: normal normal 500 15px/24px 'Graphik', sans-serif !important; +} + +.noResultsText { + font: normal normal normal 13px/18px 'Graphik', sans-serif !important; + letter-spacing: -0.13px; + padding-top: 12px; +} + +.playIcon { + width: 42px !important; + height: 42px !important; +}