#RI-3561 - fix pr comments

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/QueryCardCliDefaultResult/QueryCardCliDefaultResult.spec.tsx

@@ -1,42 +1,12 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { render } from 'uiSrc/utils/test-utils'
-import QueryCardCliDefaultResult, { MAX_CARD_HEIGHT, MIN_ROWS_COUNT, Props } from './QueryCardCliDefaultResult'
+import QueryCardCliDefaultResult, { Props } from './QueryCardCliDefaultResult'
 
 const mockedProps = mock<Props>()
 
 describe('QueryCardCliDefaultResult', () => {
   it('should render', () => {
     expect(render(<QueryCardCliDefaultResult {...instance(mockedProps)} />)).toBeTruthy()
   })
-
-  it(`container min-height should be ${MAX_CARD_HEIGHT} if items.length > ${MIN_ROWS_COUNT}`, () => {
-    const mockResult: string[] = Array.from({ length: MIN_ROWS_COUNT + 1 }).fill('123')
-
-    const { queryByTestId } = render(
-      <QueryCardCliDefaultResult {...instance(mockedProps)} items={mockResult} />
-    )
-
-    const resultEl = queryByTestId('query-cli-card-result')
-
-    expect(resultEl).toHaveStyle(`min-height: ${MAX_CARD_HEIGHT}px`)
-    expect(resultEl).toHaveTextContent(mockResult.join(''))
-  })
-
-  it(
-    `container min-height should be calculated  and less than ${MAX_CARD_HEIGHT} if items.length < ${MIN_ROWS_COUNT} `,
-    () => {
-      const mockResult: string[] = Array.from({ length: 5 }).fill('123')
-
-      const { queryByTestId } = render(
-        <QueryCardCliDefaultResult {...instance(mockedProps)} items={mockResult} />
-      )
-
-      const resultEl = queryByTestId('query-cli-card-result')
-
-      expect(resultEl).not.toHaveStyle(`min-height: ${MAX_CARD_HEIGHT}px`)
-      expect(resultEl).toHaveStyle('min-height: 90px')
-      expect(resultEl).toHaveTextContent(mockResult.join(''))
-    }
-  )
 })

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

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React from 'react'
 import cx from 'classnames'
 
 import VirtualList from 'uiSrc/components/virtual-list'
-import { getNodeText } from 'uiSrc/utils'
 
 import styles from './styles.module.scss'
 
@@ -11,50 +10,25 @@ export interface Props {
   isFullScreen?: boolean
 }
 
-export const MIN_ROW_HEIGHT = 18
 export const MIN_ROWS_COUNT = 11
 export const MAX_CARD_HEIGHT = 210
-export const SYMBOL_WIDTH = 4.5
 
 const QueryCardCliDefaultResult = (props: Props) => {
   const { items = [], isFullScreen } = props
 
-  const [windowDimensions, setWindowDimensions] = useState({ width: 0, height: 0 })
-
-  const calculateHeight = useCallback((sum: number, item: string | JSX.Element) => {
-    const itemLength = getNodeText(item)?.length || 0
-    const symbolsPerLine = (windowDimensions.width - 400) / SYMBOL_WIDTH
-
-    return sum + Math.ceil((itemLength / symbolsPerLine)) * MIN_ROW_HEIGHT
-  }, [windowDimensions.width])
-
-  const calculatedHeight = items.length > MIN_ROWS_COUNT && !isFullScreen
-    ? MAX_CARD_HEIGHT
-    : items.reduce(calculateHeight, 0)
-
-  useEffect(() => {
-    updateWindowDimensions()
-    globalThis.addEventListener('resize', updateWindowDimensions)
-    return () => {
-      globalThis.removeEventListener('resize', updateWindowDimensions)
-    }
-  }, [])
-
-  const updateWindowDimensions = () => {
-    setWindowDimensions({ height: globalThis.innerHeight, width: globalThis.innerWidth })
-  }
-
   return (
     <div
-      className={cx(styles.container, 'query-card-output-response-success')}
-      style={{
-        minHeight: isFullScreen
-          ? windowDimensions.height - 65
-          : Math.min(calculatedHeight, MAX_CARD_HEIGHT)
-      }}
+      className={cx(
+        styles.container,
+        'query-card-output-response-success',
+        { fullscreen: isFullScreen },
+      )}
       data-testid="query-cli-card-result"
     >
-      <VirtualList items={items} />
+      <VirtualList
+        items={items}
+        dynamicHeight={!isFullScreen ? { itemsCount: MIN_ROWS_COUNT, maxHeight: MAX_CARD_HEIGHT } : undefined}
+      />
     </div>
   )
 }

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

@@ -27,7 +27,7 @@ const QueryCardCliResultWrapper = (props: 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} />

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) {

redisinsight/ui/src/components/virtual-list/VirtualList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { ListChildComponentProps, VariableSizeList as List } from 'react-window'
 import AutoSizer from 'react-virtualized-auto-sizer'
 
@@ -8,23 +8,33 @@ export interface Props {
   items: (string | JSX.Element)[]
   overscanCount?: number
   minRowHeight?: number
+  dynamicHeight?: {
+    itemsCount: number,
+    maxHeight: number,
+  }
 }
 
 const PROTRUDING_OFFSET = 2
 const MIN_ROW_HEIGHT = 18
 const OVERSCAN_COUNT = 20
+const MAX_LIST_HEIGHT = globalThis.innerHeight
 
 const VirtualList = (props: Props) => {
   const {
     items = [],
+    dynamicHeight,
     overscanCount = OVERSCAN_COUNT,
     minRowHeight = MIN_ROW_HEIGHT,
   } = props
+  const { itemsCount: dynamicItemsCount = 0, maxHeight: dynamicMaxHeight = MAX_LIST_HEIGHT } = dynamicHeight || {}
 
   const listRef = useRef<List>(null)
   const rowHeights = useRef<{ [key: number]: number }>({})
   const outerRef = useRef<HTMLDivElement>(null)
 
+  const [listHeight, setListHeight] = useState(MIN_ROW_HEIGHT)
+  const [, forceRender] = useState({})
+
   const getRowHeight = (index: number) => (
     rowHeights.current[index] > minRowHeight ? (rowHeights.current[index] + 2) : minRowHeight
   )
@@ -34,12 +44,25 @@ const VirtualList = (props: Props) => {
     rowHeights.current = { ...rowHeights.current, [index]: size }
   }
 
+  const calculateHeight = () => {
+    listRef.current?.resetAfterIndex(0)
+    if (dynamicItemsCount && items.length > dynamicItemsCount) {
+      setListHeight(dynamicMaxHeight)
+    }
+
+    setListHeight(Math.min(
+      items.reduce((prev, _item, index) => getRowHeight(index) + prev, 0),
+      dynamicMaxHeight,
+    ))
+  }
+
   const Row = ({ index, style }: ListChildComponentProps) => {
     const rowRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
       if (rowRef.current) {
         setRowHeight(index, rowRef.current?.clientHeight)
+        calculateHeight()
       }
     }, [rowRef])
 
@@ -53,16 +76,16 @@ const VirtualList = (props: Props) => {
   }
 
   return (
-    <AutoSizer>
-      {({ width, height }) => (
+    <AutoSizer disableHeight={!!dynamicHeight} onResize={() => forceRender({})}>
+      {({ width, height = 0 }) => (
         <List
           itemCount={items.length}
           itemSize={getRowHeight}
           ref={listRef}
           className={styles.listContent}
           outerRef={outerRef}
           overscanCount={overscanCount}
-          height={height}
+          height={height || listHeight}
           width={width - PROTRUDING_OFFSET}
         >
           {Row}