#RI-3304, #RI-3308, #RI-3170, #RI-3304, #RI-3311

redisinsight/ui/src/components/multi-search/MultiSearch.tsx

@@ -78,7 +78,7 @@ const MultiSearch = (props: Props) => {
         color="primary"
         aria-label="Search"
         className={styles.searchButton}
-        onClick={onSubmit}
+        onClick={() => onSubmit()}
         data-testid="search-btn"
       />
     </div>

redisinsight/ui/src/components/virtual-grid/VirtualGrid.tsx

@@ -10,7 +10,7 @@ import { Maybe, Nullable } from 'uiSrc/utils'
 import { SortOrder } from 'uiSrc/constants'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { IProps } from './interfaces'
-import { columnWidth, useInnerElementType } from './utils'
+import { getColumnWidth, useInnerElementType } from './utils'
 
 import styles from './styles.module.scss'
 
@@ -46,14 +46,23 @@ const VirtualGrid = (props: IProps) => {
   const [expandedRows, setExpandedRows] = useState<number[]>([])
 
   const gridRef = useRef<Nullable<Grid>>()
-  const sizeMap = useRef<{ [key: number]: number }>({})
-  const setSize = useCallback((index, size) => {
-    sizeMap.current = { ...sizeMap.current, [index]: size }
+  const rowHeightsMap = useRef<{ [key: number]: { [key: number]: number } }>({})
+  const setRowHeight = useCallback((rowIndex: number, columnIndex:number, size:number) => {
+    rowHeightsMap.current = {
+      ...rowHeightsMap.current,
+      [rowIndex]: {
+        ...(rowHeightsMap.current[rowIndex] || {}),
+        [columnIndex]: size
+      }
+    }
 
-    gridRef.current?.resetAfterRowIndex?.(index)
+    gridRef.current?.resetAfterRowIndex?.(rowIndex)
   }, [])
-  const getSize = (index: number) =>
-    (expandedRows.indexOf(index) !== -1 ? sizeMap.current[index] : rowHeight)
+
+  const getRowHeight = (index: number) =>
+    (expandedRows.indexOf(index) !== -1
+      ? Math.max(...Object.values(rowHeightsMap.current[index]))
+      : rowHeight)
 
   useEffect(() =>
     () => {
@@ -63,7 +72,7 @@ const VirtualGrid = (props: IProps) => {
 
   useEffect(() => {
     setExpandedRows([])
-    sizeMap.current = {}
+    rowHeightsMap.current = {}
     gridRef.current?.resetAfterRowIndex?.(0)
   }, [totalItemsCount])
 
@@ -137,11 +146,11 @@ const VirtualGrid = (props: IProps) => {
         const paddingSize = 24
         const cellHeight = cellRef.current?.children?.[0]?.getBoundingClientRect?.().height + paddingSize
 
-        if (cellHeight > getSize(rowIndex) && rowIndex !== 0) {
-          setSize(rowIndex, cellHeight)
+        if (rowIndex !== 0) {
+          setRowHeight(rowIndex, columnIndex, cellHeight)
         }
       }
-    }, [setSize, rowIndex, expanded, width])
+    }, [setRowHeight, rowIndex, expanded])
 
     if (rowIndex === 0) {
       return (
@@ -176,7 +185,9 @@ const VirtualGrid = (props: IProps) => {
     }
     if (columnIndex === 0) {
       const lastColumn = columns[columns.length - 1]
-      const allDynamicRowsHeight: number[] = Object.values(sizeMap.current)
+      const allDynamicRowsHeight: number[] = Object.values(rowHeightsMap.current)
+        .map((row) => Math.max(...Object.values(row)))
+
       const allRowsHeight = allDynamicRowsHeight.reduce((a, b) => a + b, 0)
        + (items.length - allDynamicRowsHeight.length) * rowHeight
 
@@ -201,7 +212,7 @@ const VirtualGrid = (props: IProps) => {
                 : styles.gridItemEven)}
             style={{
               width: lastColumn?.minWidth,
-              height: getSize(rowIndex),
+              height: getRowHeight(rowIndex),
               marginLeft: width - lastColumn?.minWidth - (hasHorizontalScrollOffset ? 29 : 13)
             }}
           >
@@ -228,10 +239,11 @@ const VirtualGrid = (props: IProps) => {
 
   const innerElementType = useInnerElementType(
     Cell,
-    (i) => columnWidth(i, width, columns),
-    getSize,
+    getColumnWidth,
+    getRowHeight,
     columns.length - 1,
-    width,
+    Math.max(maxTableWidth, width),
+    columns,
   )
 
   return (
@@ -274,10 +286,10 @@ const VirtualGrid = (props: IProps) => {
                     })}
                   className={styles.grid}
                   columnCount={columns.length}
-                  columnWidth={(i) => columnWidth(i, width, columns)}
+                  columnWidth={(i) => getColumnWidth(i, width, columns)}
                   height={height}
                   rowCount={items.length}
-                  rowHeight={getSize}
+                  rowHeight={getRowHeight}
                   width={width}
                   innerElementType={innerElementType}
                   onScroll={onScroll}

redisinsight/ui/src/components/virtual-grid/utils.tsx

@@ -33,10 +33,11 @@ export const getShownIndicies = (children: typeof React.Children) => {
 
 export const useInnerElementType = (
   Cell: GridChildComponentProps<null>,
-  columnWidth:(index: number) => number,
+  columnWidth:(index: number, width: number, columns: ITableColumn[]) => number,
   rowHeight:(index: number) => number,
   columnCount: number,
-  width: number,
+  tableWidth: number,
+  columns: ITableColumn[],
 ) => React.useMemo(
   () =>
     React.forwardRef((props:ReactNode, ref) => {
@@ -55,7 +56,7 @@ export const useInnerElementType = (
         let sum = 0
 
         while (index > 1) {
-          sum += columnWidth(index - 1)
+          sum += columnWidth(index - 1, tableWidth, columns)
           index -= 1
         }
 
@@ -64,25 +65,58 @@ export const useInnerElementType = (
 
       const shownIndecies = getShownIndicies(props.children)
 
-      const children = React.Children.map(props.children, (child) => {
+      let children = React.Children.map(props.children, (child, index) => {
         const { column, row } = getCellIndicies(child)
 
         // do not show non-sticky cell
         if (column === 0 || row === 0 || column === columnCount) {
           return null
         }
 
-        return child
+        return {
+          ...child,
+          props: {
+            ...child.props,
+            style: {
+              ...child.props.style,
+              width: columnWidth(column, tableWidth, columns),
+            }
+          }
+        }
       })
 
+      children = React.Children.toArray(children)
+
+      for (let i = 1; i < children.length; i++) {
+        const child = children[i]
+        const prevChild = children[i - 1]
+        const { row } = getCellIndicies(child)
+        const { row: prevRow } = getCellIndicies(prevChild)
+
+        if (prevRow !== row) {
+          children[i] = child
+        } else {
+          children[i] = {
+            ...child,
+            props: {
+              ...child.props,
+              style: {
+                ...child.props.style,
+                left: prevChild.props.style.left + prevChild.props.style.width,
+              }
+            }
+          }
+        }
+      }
+
       children.push(
         React.createElement(Cell, {
           key: '0:0',
           rowIndex: 0,
           columnIndex: 0,
           style: {
             display: 'inline-flex',
-            width: columnWidth(0),
+            width: columnWidth(0, tableWidth, columns),
             height: rowHeight(0),
             position: 'sticky',
             top: 0,
@@ -98,7 +132,7 @@ export const useInnerElementType = (
       for (let i = 1; i <= shownColumnsCount; i += 1) {
         const columnIndex = i + shownIndecies.from.column
         const rowIndex = 0
-        const width = columnWidth(columnIndex)
+        const width = columnWidth(columnIndex, tableWidth, columns)
         const height = rowHeight(rowIndex)
 
         const marginLeft = i === 1 ? sumColumnWidths(columnIndex) : undefined
@@ -126,7 +160,7 @@ export const useInnerElementType = (
       for (let i = 1; i <= shownRowsCount; i += 1) {
         const columnIndex = 0
         const rowIndex = i + shownIndecies.from.row
-        const width = columnWidth(columnIndex)
+        const width = columnWidth(columnIndex, tableWidth, columns)
         const height = rowHeight(rowIndex)
 
         const marginTop = i === 1 ? sumRowsHeights(rowIndex) : undefined
@@ -150,16 +184,15 @@ export const useInnerElementType = (
       }
 
       return (
-        <div ref={ref} {...props}>
+        <div ref={ref} {...props} style={{ ...props?.style, width: tableWidth }}>
           {children}
         </div>
       )
     }),
-  [Cell, columnWidth, rowHeight, columnCount, width]
+  [Cell, columnWidth, rowHeight, columnCount, tableWidth]
 )
 
-export const columnWidth = (i: number, width: number, columns: ITableColumn[], minColumnWidth: number = 190) => {
-  const scrollWidth = 16
+export const getColumnWidth = (i: number, width: number, columns: ITableColumn[], minColumnWidth: number = 190) => {
   const maxTableWidth = columns.reduce((a, { maxWidth = minColumnWidth }) => a + maxWidth, 0)
 
   if (maxTableWidth < width) {

redisinsight/ui/src/constants/cliOutput.tsx

@@ -10,19 +10,29 @@ export enum CliOutputFormatterType {
   Raw = 'RAW',
 }
 
-export const InitOutputText = (host: string = '', port: number = 0, dbIndex: number = 0, onClick: () => void) => [
-  <span className="color-green" key={Math.random()}>
-    {'Try '}
-    <EuiLink
-      onClick={onClick}
-      className="color-green"
-      style={{ fontSize: 'inherit', fontFamily: 'inherit' }}
-      data-test-subj="cli-workbench-page-btn"
-    >
-      Workbench
-    </EuiLink>
-    , our advanced CLI. Check out our Quick Guides to learn more about Redis capabilities.
-  </span>,
+export const InitOutputText = (
+  host: string = '',
+  port: number = 0,
+  dbIndex: number = 0,
+  emptyOutput: boolean,
+  onClick: () => void,
+) => [
+  <>
+    { emptyOutput && (
+      <span className="color-green" key={Math.random()}>
+        {'Try '}
+        <EuiLink
+          onClick={onClick}
+          className="color-green"
+          style={{ fontSize: 'inherit', fontFamily: 'inherit' }}
+          data-test-subj="cli-workbench-page-btn"
+        >
+          Workbench
+        </EuiLink>
+        , our advanced CLI. Check out our Quick Guides to learn more about Redis capabilities.
+      </span>
+    )}
+  </>,
   '\n\n',
   'Connecting...',
   '\n\n',

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx

@@ -54,7 +54,7 @@ const BulkActionsInfo = (props: Props) => {
         )}
         {status === BulkActionsStatus.Completed && (
           <EuiText className={cx(styles.progress, styles.progressCompleted)}>
-            Action complete
+            Action completed
           </EuiText>
         )}
       </div>

redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx

@@ -28,7 +28,7 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import HelpTexts from 'uiSrc/constants/help-texts'
 import { KeyTypes, TableCellAlignment } from 'uiSrc/constants'
-import { columnWidth } from 'uiSrc/components/virtual-grid'
+import { getColumnWidth } from 'uiSrc/components/virtual-grid'
 import { StopPropagation } from 'uiSrc/components/virtual-table'
 import {
   GetHashFieldsResponse,
@@ -369,7 +369,7 @@ const HashDetails = (props: Props) => {
           onChangeWidth={setWidth}
           columns={columns.map((column, i, arr) => ({
             ...column,
-            width: columnWidth(i, width, arr)
+            width: getColumnWidth(i, width, arr)
           }))}
           footerHeight={0}
           loadMoreItems={loadMoreItems}

redisinsight/ui/src/pages/browser/components/key-details/KeyDetailsWrapper.tsx

@@ -112,7 +112,7 @@ const KeyDetailsWrapper = (props: Props) => {
         break
       }
       case KeyTypes.ReJSON: {
-        dispatch(fetchReJSON(key, '.', resetData))
+        dispatch(fetchReJSON(key, '.', true))
         break
       }
       case KeyTypes.Stream: {

redisinsight/ui/src/pages/browser/components/list-details/ListDetails.tsx

@@ -28,7 +28,7 @@ import { NoResultsFoundText } from 'uiSrc/constants/texts'
 import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
 import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEditor'
 import { StopPropagation } from 'uiSrc/components/virtual-table'
-import { columnWidth } from 'uiSrc/components/virtual-grid'
+import { getColumnWidth } from 'uiSrc/components/virtual-grid'
 import {
   SetListElementDto,
   SetListElementResponse,
@@ -323,7 +323,7 @@ const ListDetails = (props: Props) => {
         onChangeWidth={setWidth}
         columns={columns.map((column, i, arr) => ({
           ...column,
-          width: columnWidth(i, width, arr)
+          width: getColumnWidth(i, width, arr)
         }))}
         loadMoreItems={loadMoreItems}
         loading={loading}

redisinsight/ui/src/pages/browser/components/set-details/SetDetails.tsx

@@ -25,7 +25,7 @@ import HelpTexts from 'uiSrc/constants/help-texts'
 import { NoResultsFoundText } from 'uiSrc/constants/texts'
 import VirtualTable from 'uiSrc/components/virtual-table'
 import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
-import { columnWidth } from 'uiSrc/components/virtual-grid'
+import { getColumnWidth } from 'uiSrc/components/virtual-grid'
 import { IColumnSearchState, ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
 import { GetSetMembersResponse } from 'apiSrc/modules/browser/dto/set.dto'
 import styles from './styles.module.scss'
@@ -256,7 +256,7 @@ const SetDetails = (props: Props) => {
         onSearch={handleSearch}
         columns={columns.map((column, i, arr) => ({
           ...column,
-          width: columnWidth(i, width, arr)
+          width: getColumnWidth(i, width, arr)
         }))}
         onChangeWidth={setWidth}
         cellCache={cellCache}

redisinsight/ui/src/pages/browser/components/zset-details/ZSetDetails.tsx

@@ -28,7 +28,7 @@ import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
 import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEditor'
 import { IColumnSearchState, ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
 import { StopPropagation } from 'uiSrc/components/virtual-table'
-import { columnWidth } from 'uiSrc/components/virtual-grid'
+import { getColumnWidth } from 'uiSrc/components/virtual-grid'
 import { AddMembersToZSetDto, SearchZSetMembersResponse, ZSetMemberDto } from 'apiSrc/modules/browser/dto'
 import PopoverDelete from '../popover-delete/PopoverDelete'
 
@@ -389,7 +389,7 @@ const ZSetDetails = (props: Props) => {
           onChangeWidth={setWidth}
           columns={columns.map((column, i, arr) => ({
             ...column,
-            width: columnWidth(i, width, arr)
+            width: getColumnWidth(i, width, arr)
           }))}
           footerHeight={0}
           loadMoreItems={loadMoreItems}

redisinsight/ui/src/slices/cli/cli-settings.ts

@@ -4,7 +4,7 @@ import { CreateCliClientResponse, DeleteClientResponse } from 'apiSrc/modules/cl
 import { apiService, sessionStorageService } from 'uiSrc/services'
 import { ApiEndpoints, BrowserStorageItem } from 'uiSrc/constants'
 import { getApiErrorMessage, getUrl, isStatusSuccessful } from 'uiSrc/utils'
-import { concatToOutput, setCliDbIndex } from 'uiSrc/slices/cli/cli-output'
+import { outputSelector, concatToOutput, setCliDbIndex } from 'uiSrc/slices/cli/cli-output'
 import { cliTexts, ConnectionSuccessOutputText, InitOutputText } from 'uiSrc/constants/cliOutput'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 
@@ -182,8 +182,9 @@ export function createCliClientAction(
   return async (dispatch: AppDispatch, stateInit: () => RootState) => {
     const state = stateInit()
     const { host, port, db } = connectedInstanceSelector(state)
+    const { data = [] } = outputSelector?.(state) ?? {}
     dispatch(processCliClient())
-    dispatch(concatToOutput(InitOutputText(host, port, db, onWorkbenchClick)))
+    dispatch(concatToOutput(InitOutputText(host, port, db, !data.length, onWorkbenchClick)))
 
     try {
       const { data, status } = await apiService.post<CreateCliClientResponse>(