#RI-2124 - rely on the loading flag instead of command execution response

Author: Artyom Podymov

redisinsight/ui/src/components/query-card/QueryCard.tsx

@@ -170,7 +170,7 @@ const QueryCard = (props: Props) => {
         {isOpen && (
           <>
             {React.isValidElement(result)
-              ? <QueryCardCommonResult result={result} />
+              ? <QueryCardCommonResult loading={loading} result={result} />
               : (
                 <>
                   {viewTypeSelected === WBQueryType.Plugin && (
@@ -191,7 +191,7 @@ const QueryCard = (props: Props) => {
                     </>
                   )}
                   {viewTypeSelected === WBQueryType.Text && (
-                    <QueryCardCliResult status={status} result={result} />
+                    <QueryCardCliResult loading={loading} status={status} result={result} />
                   )}
                 </>
               )}

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)')
   })
 })

redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.tsx

@@ -9,19 +9,20 @@ import styles from './styles.module.scss'
 export interface Props {
   status: Maybe<CommandExecutionStatus>;
   result: any;
+  loading?: boolean;
 }
 
 const QueryCardCliResult = (props: Props) => {
-  const { result, status } = props
+  const { result, status, loading } = props
 
   return (
     <div className={cx('queryResultsContainer', styles.container)}>
-      {!!result && (
+      {!loading && (
         <div data-testid="query-cli-result">
-          {cliParseTextResponse(result, status, CliPrefix.QueryCard)}
+          {cliParseTextResponse(result || '(nil)', status, CliPrefix.QueryCard)}
         </div>
       )}
-      {!result && (
+      {loading && (
         <div className={styles.loading}>
           <EuiLoadingContent lines={1} />
         </div>

redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.spec.tsx

@@ -17,4 +17,14 @@ describe('QueryCardCliResult', () => {
   it('should render', () => {
     expect(render(<QueryCardCommonResult {...instance(mockedProps)} />)).toBeTruthy()
   })
+  it('should render (nil) result', () => {
+    const result = ''
+    const { queryByTestId } = render(
+      <QueryCardCommonResult {...instance(mockedProps)} result={result} />
+    )
+
+    const resultEl = queryByTestId('query-common-result')
+
+    expect(resultEl).toHaveTextContent('(nil)')
+  })
 })

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 (
     <div className={cx('queryResultsContainer', styles.container)}>
-      {!!result && (
+      {!loading && (
         <div data-testid="query-common-result">
-          { result }
+          { result || '(nil)' }
         </div>
       )}
-      {!result && (
+      {loading && (
         <div className={styles.loading}>
           <EuiLoadingContent lines={1} />
         </div>