Merge pull request #1290 from RedisInsight/fe/feature/RI-3561_Virtual_list_for_Workbench

#RI-3561 - Handle big output in Workbench

Author: egor-zalenski

redisinsight/ui/src/components/cli/components/cli-body/CliBody/styles.module.scss

@@ -1,6 +1,6 @@
-@import '@elastic/eui/src/global_styling/mixins/helpers';
-@import '@elastic/eui/src/components/table/mixins';
-@import '@elastic/eui/src/global_styling/index';
+@import "@elastic/eui/src/global_styling/mixins/helpers";
+@import "@elastic/eui/src/components/table/mixins";
+@import "@elastic/eui/src/global_styling/index";
 
 .section {
   position: absolute;
@@ -52,4 +52,5 @@
 
 :global(.cli-command-wrapper) {
   font: normal normal bold 14px/15px Inconsolata !important;
+  white-space: pre-line;
 }

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

@@ -186,6 +186,7 @@ const QueryCard = (props: Props) => {
                       resultsMode={resultsMode}
                       result={result}
                       isNotStored={isNotStored}
+                      isFullScreen={isFullScreen}
                       data-testid="group-mode-card"
                     />
                   )}
@@ -215,6 +216,7 @@ const QueryCard = (props: Props) => {
                           resultsMode={resultsMode}
                           result={result}
                           isNotStored={isNotStored}
+                          isFullScreen={isFullScreen}
                         />
                       )}
                     </>

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

@@ -9,19 +9,4 @@ describe('QueryCardCliDefaultResult', () => {
   it('should render', () => {
     expect(render(<QueryCardCliDefaultResult {...instance(mockedProps)} />)).toBeTruthy()
   })
-
-  it('Result element should render (nil) result', () => {
-    const mockResult = [{
-      response: '',
-      status: 'success'
-    }]
-
-    const { queryByTestId } = render(
-      <QueryCardCliDefaultResult {...instance(mockedProps)} result={mockResult} />
-    )
-
-    const resultEl = queryByTestId('query-cli-group-result')
-
-    expect(resultEl).toHaveTextContent('(nil)')
-  })
 })

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

@@ -1,22 +1,36 @@
 import React from 'react'
+import cx from 'classnames'
 
-import { CommandExecutionResult } from 'uiSrc/slices/interfaces'
-import { cliParseTextResponse, CliPrefix, Maybe } from 'uiSrc/utils'
+import VirtualList from 'uiSrc/components/virtual-list'
+
+import styles from './styles.module.scss'
 
 export interface Props {
-  query: string
-  result: Maybe<CommandExecutionResult[]>
+  items: (string | JSX.Element)[]
+  isFullScreen?: boolean
 }
 
-const QueryCardCliGroupResult = (props: Props) => {
-  const { result = [], query } = props
+export const MIN_ROWS_COUNT = 11
+export const MAX_CARD_HEIGHT = 210
+
+const QueryCardCliDefaultResult = (props: Props) => {
+  const { items = [], isFullScreen } = props
 
   return (
-    <div data-testid="query-cli-group-result">
-      {result?.map(({ response, status }) =>
-        cliParseTextResponse(response || '(nil)', query, status, CliPrefix.QueryCard))}
+    <div
+      className={cx(
+        styles.container,
+        'query-card-output-response-success',
+        { fullscreen: isFullScreen },
+      )}
+      data-testid="query-cli-card-result"
+    >
+      <VirtualList
+        items={items}
+        dynamicHeight={!isFullScreen ? { itemsCount: MIN_ROWS_COUNT, maxHeight: MAX_CARD_HEIGHT } : undefined}
+      />
     </div>
   )
 }
 
-export default QueryCardCliGroupResult
+export default QueryCardCliDefaultResult

redisinsight/ui/src/components/query-card/QueryCardCliDefaultResult/styles.module.scss

@@ -0,0 +1,15 @@
+@import "@elastic/eui/src/global_styling/mixins/helpers";
+@import "@elastic/eui/src/components/table/mixins";
+@import "@elastic/eui/src/global_styling/index";
+
+.container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+
+.listContent {
+  @include euiScrollBar;
+}

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

@@ -1,18 +1,24 @@
+import { flatten } from 'lodash'
 import React from 'react'
 
 import { CommandExecutionResult } from 'uiSrc/slices/interfaces'
 import { cliParseCommandsGroupResult, Maybe } from 'uiSrc/utils'
+import QueryCardCliDefaultResult from '../QueryCardCliDefaultResult'
 
 export interface Props {
   result?: Maybe<CommandExecutionResult[]>
+  isFullScreen?: boolean
 }
 
 const QueryCardCliGroupResult = (props: Props) => {
-  const { result = [] } = props
+  const { result = [], isFullScreen } = props
   return (
     <div data-testid="query-cli-default-result" className="query-card-output-response-success">
-      {result[0]?.response.map((item: any, index: number) =>
-        cliParseCommandsGroupResult(item, index))}
+      <QueryCardCliDefaultResult
+        isFullScreen={isFullScreen}
+        items={flatten(result?.[0]?.response.map((item: any) =>
+          flatten(cliParseCommandsGroupResult(item))))}
+      />
     </div>
   )
 }

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

@@ -3,6 +3,7 @@ import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { cleanup, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import { ResultsMode } from 'uiSrc/slices/interfaces/workbench'
+import { CommandExecutionStatus } from 'uiSrc/slices/interfaces/cli'
 import QueryCardCliResultWrapper, { Props } from './QueryCardCliResultWrapper'
 import QueryCardCliDefaultResult, { Props as QueryCardCliDefaultResultProps } from '../QueryCardCliDefaultResult'
 import QueryCardCliGroupResult, { Props as QueryCardCliGroupResultProps } from '../QueryCardCliGroupResult'
@@ -28,13 +29,17 @@ jest.mock('uiSrc/services', () => ({
 
 describe('QueryCardCliResultWrapper', () => {
   it('should render', () => {
-    expect(render(<QueryCardCliResultWrapper {...instance(mockedProps)} />)).toBeTruthy()
+    const mockResult = [{
+      response: 'response',
+      status: CommandExecutionStatus.Success
+    }]
+    expect(render(<QueryCardCliResultWrapper {...instance(mockedProps)} result={mockResult} />)).toBeTruthy()
   })
 
   it('Result element should render with result prop', () => {
     const mockResult = [{
       response: 'response',
-      status: 'success'
+      status: CommandExecutionStatus.Success
     }]
 
     render(
@@ -78,7 +83,7 @@ describe('QueryCardCliResultWrapper', () => {
   it('should render QueryCardCliDefaultResult when result.response is not array', () => {
     const mockResult = [{
       response: 'response',
-      status: 'success'
+      status: CommandExecutionStatus.Success
     }]
 
     render(
@@ -97,10 +102,29 @@ describe('QueryCardCliResultWrapper', () => {
   })
 
   it('should render warning', () => {
+    const mockResult = [{
+      response: 'response',
+      status: CommandExecutionStatus.Success
+    }]
     render(
-      <QueryCardCliResultWrapper {...instance(mockedProps)} isNotStored />
+      <QueryCardCliResultWrapper {...instance(mockedProps)} result={mockResult} isNotStored />
     )
 
     expect(screen.queryByTestId('query-cli-warning')).toBeInTheDocument()
   })
+
+  it('Result element should render (nil) result', () => {
+    const mockResult = [{
+      response: '',
+      status: CommandExecutionStatus.Success
+    }]
+
+    const { queryByTestId } = render(
+      <QueryCardCliResultWrapper {...instance(mockedProps)} result={mockResult} />
+    )
+
+    const resultEl = queryByTestId('query-cli-card-result')
+
+    expect(resultEl).toHaveTextContent('(nil)')
+  })
 })

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

@@ -5,7 +5,7 @@ import { isArray } from 'lodash'
 
 import { CommandExecutionResult } from 'uiSrc/slices/interfaces'
 import { ResultsMode } from 'uiSrc/slices/interfaces/workbench'
-import { Maybe } from 'uiSrc/utils'
+import { formatToText, Maybe } from 'uiSrc/utils'
 
 import QueryCardCliDefaultResult from '../QueryCardCliDefaultResult'
 import QueryCardCliGroupResult from '../QueryCardCliGroupResult'
@@ -18,24 +18,30 @@ export interface Props {
   status?: string
   resultsMode?: ResultsMode
   isNotStored?: boolean
+  isFullScreen?: boolean
 }
 
 const QueryCardCliResultWrapper = (props: Props) => {
-  const { result = [], query, loading, resultsMode, isNotStored } = props
+  const { result = [], query, loading, resultsMode, isNotStored, isFullScreen } = props
 
   return (
     <div className={cx('queryResultsContainer', styles.container)}>
       {!loading && (
-        <div data-testid="query-cli-result">
+        <div data-testid="query-cli-result" style={{ height: '100%' }}>
           {isNotStored && (
             <EuiText className={styles.alert} data-testid="query-cli-warning">
               <EuiIcon type="alert" className={styles.alertIcon} />
               The result is too big to be saved. It will be deleted after the application is closed.
             </EuiText>
           )}
           {resultsMode === ResultsMode.GroupMode && isArray(result[0]?.response)
-            ? <QueryCardCliGroupResult result={result} />
-            : <QueryCardCliDefaultResult query={query} result={result} />}
+            ? <QueryCardCliGroupResult result={result} isFullScreen={isFullScreen} />
+            : (
+              <QueryCardCliDefaultResult
+                isFullScreen={isFullScreen}
+                items={formatToText(result[0].response || '(nil)', query).split('\n')}
+              />
+            )}
         </div>
       )}
       {loading && (

redisinsight/ui/src/components/query-card/QueryCardCliResultWrapper/styles.module.scss

@@ -9,6 +9,7 @@
   overflow: auto;
   white-space: pre-wrap;
   word-break: break-all;
+  position: relative;
 
   font: normal normal normal 14px/17px Inconsolata;
   text-align: left;

redisinsight/ui/src/components/query-card/styles.module.scss

@@ -1,6 +1,6 @@
-@import '@elastic/eui/src/global_styling/mixins/helpers';
-@import '@elastic/eui/src/components/table/mixins';
-@import '@elastic/eui/src/global_styling/index';
+@import "@elastic/eui/src/global_styling/mixins/helpers";
+@import "@elastic/eui/src/components/table/mixins";
+@import "@elastic/eui/src/global_styling/index";
 
 .containerWrapper {
   min-width: 420px;
@@ -38,6 +38,9 @@
 
     .container {
       border-color: var(--tableLightestBorderColor);
+      display: flex;
+      flex-direction: column;
+      height: 100%;
     }
 
     &.isOpen .container {
@@ -61,8 +64,9 @@
   color: var(--cliOutputResponseColor) !important;
 }
 
-:global(.fullscreen .query-card-output-response-success){
+:global(.fullscreen .query-card-output-response-success) {
   max-height: calc(100vh - 65px);
+  display: flex;
 }
 
 :global(.query-card-output-response-fail) {