diff --git a/redisinsight/ui/src/components/query-card/QueryCard.tsx b/redisinsight/ui/src/components/query-card/QueryCard.tsx index c1e7bb1bb5..3e9785aa90 100644 --- a/redisinsight/ui/src/components/query-card/QueryCard.tsx +++ b/redisinsight/ui/src/components/query-card/QueryCard.tsx @@ -149,7 +149,7 @@ const QueryCard = (props: Props) => { {isOpen && ( <> {React.isValidElement(result) - ? + ? : ( <> {viewTypeSelected === WBQueryType.Plugin && ( @@ -170,7 +170,7 @@ const QueryCard = (props: Props) => { )} {viewTypeSelected === WBQueryType.Text && ( - + )} )} diff --git a/redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.spec.tsx b/redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.spec.tsx index 029f906002..33cae89641 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.spec.tsx +++ b/redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.spec.tsx @@ -50,7 +50,7 @@ describe('QueryCardCliResult', () => { expect(resultEl).toHaveTextContent(result) }) - it('Result element should not render without result prop', () => { + it('Result element should render (nil) result', () => { const result = '' const { queryByTestId } = render( @@ -59,6 +59,6 @@ describe('QueryCardCliResult', () => { const resultEl = queryByTestId(resultTestId) - expect(resultEl).not.toBeInTheDocument() + expect(resultEl).toHaveTextContent('(nil)') }) }) diff --git a/redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.tsx b/redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.tsx index ce8d3ce3b1..2387fdb4df 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.tsx +++ b/redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.tsx @@ -4,25 +4,27 @@ import { EuiLoadingContent } from '@elastic/eui' import { cliParseTextResponse, CliPrefix, Maybe } from 'uiSrc/utils' import { CommandExecutionStatus } from 'uiSrc/slices/interfaces/cli' + import styles from './styles.module.scss' export interface Props { status: Maybe; query: string; result: any; + loading?: boolean; } const QueryCardCliResult = (props: Props) => { - const { result, query, status } = props + const { result, query, status, loading } = props return (
- {!!result && ( + {!loading && (
- {cliParseTextResponse(result, query, status, CliPrefix.QueryCard)} + {cliParseTextResponse(result || '(nil)', query, status, CliPrefix.QueryCard)}
)} - {!result && ( + {loading && (
diff --git a/redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.spec.tsx b/redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.spec.tsx index a724687a02..65e1adfbc2 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.spec.tsx +++ b/redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.spec.tsx @@ -17,4 +17,14 @@ describe('QueryCardCliResult', () => { it('should render', () => { expect(render()).toBeTruthy() }) + it('should render (nil) result', () => { + const result = '' + const { queryByTestId } = render( + + ) + + const resultEl = queryByTestId('query-common-result') + + expect(resultEl).toHaveTextContent('(nil)') + }) }) diff --git a/redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.tsx b/redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.tsx index 16a7d818f6..048fbafe64 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.tsx +++ b/redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.tsx @@ -5,20 +5,21 @@ import { EuiLoadingContent } from '@elastic/eui' import styles from './styles.module.scss' export interface Props { - result: React.ReactElement; + result: React.ReactElement | string; + loading?: boolean; } const QueryCardCommonResult = (props: Props) => { - const { result } = props + const { result, loading } = props return (
- {!!result && ( + {!loading && (
- { result } + { result || '(nil)' }
)} - {!result && ( + {loading && (