Merge pull request #2982 from RedisInsight/fe/bugfix/capability-promotion

#RI-5348 - change logic to hide columns

Author: rsergeenko

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -252,7 +252,6 @@ const HomePage = () => {
                                 hidden: !instances.length && !loading,
                                 fullWidth: !openRightPanel,
                                 openedRightPanel: !!openRightPanel,
-                                [styles.contentActive]: openRightPanel === RightPanelName.EditDatabase,
                               })
                             }}
                           >
@@ -282,7 +281,6 @@ const HomePage = () => {
                               className: cx('home__resizePanelRight', {
                                 hidden: !openRightPanel,
                                 fullWidth: !instances.length,
-                                [styles.contentActive]: openRightPanel === RightPanelName.EditDatabase,
                               })
                             }}
                             id="form"

redisinsight/ui/src/pages/home/components/databases-list-component/DatabasesListWrapper.tsx

@@ -53,6 +53,7 @@ export interface Props {
 }
 
 const suffix = '_db_instance'
+const COLS_TO_HIDE = ['connectionType', 'modules', 'lastConnection']
 
 const DatabasesListWrapper = ({
   width,
@@ -300,7 +301,6 @@ const DatabasesListWrapper = ({
       sortable: true,
       width: '180px',
       truncateText: true,
-      hideForMobile: true,
       render: (cellData: ConnectionType) =>
         CONNECTION_TYPE_DISPLAY[cellData] || capitalize(cellData),
     },
@@ -409,7 +409,7 @@ const DatabasesListWrapper = ({
         width={width}
         editedInstance={editedInstance}
         columns={columns}
-        columnsToHide={['connectionType', 'modules', 'lastConnection']}
+        columnsToHide={COLS_TO_HIDE}
         onDelete={handleDeleteInstances}
         onExport={handleExportInstances}
         onWheel={closePopover}
@@ -418,4 +418,4 @@ const DatabasesListWrapper = ({
   )
 }
 
-export default DatabasesListWrapper
+export default React.memo(DatabasesListWrapper)

redisinsight/ui/src/pages/home/components/databases-list-component/databases-list/DatabasesList.tsx

@@ -7,7 +7,6 @@ import {
   PropertySort,
 } from '@elastic/eui'
 import cx from 'classnames'
-import { find } from 'lodash'
 import React, { useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { instancesSelector } from 'uiSrc/slices/instances/instances'
@@ -18,6 +17,7 @@ import { localStorageService } from 'uiSrc/services'
 import { BrowserStorageItem } from 'uiSrc/constants'
 
 import { ActionBar, DeleteAction, ExportAction } from './components'
+import { findColumn, getColumnWidth, hideColumn } from './utils'
 
 import styles from '../styles.module.scss'
 
@@ -31,7 +31,6 @@ export interface Props {
   onWheel: () => void
 }
 
-const MIN_COLUMN_LENGTH = 180
 const loadingMsg = 'loading...'
 
 function DatabasesList({
@@ -50,13 +49,20 @@ function DatabasesList({
 
   const tableRef = useRef<EuiInMemoryTable<Instance>>(null)
   const containerTableRef = useRef<HTMLDivElement>(null)
+  const hiddenCols = useRef<Set<string>>(new Set([]))
+  const lastHiddenColumn = useRef<EuiTableFieldDataColumnType<Instance>>()
 
   useEffect(() => {
-    if (containerTableRef.current) {
+    if (columnsToHide?.length && containerTableRef.current) {
       const { offsetWidth } = containerTableRef.current
-      const columnsResults = adjustColumns(columns, offsetWidth)
-      if (columnsResults?.length !== columns?.length) {
-        setColumns(columnsResults)
+      const beforeAdjustHiddenCols = hiddenCols.current.size
+      try {
+        const columnsResults = adjustColumns(columns, offsetWidth)
+        if (beforeAdjustHiddenCols !== hiddenCols.current.size) {
+          setColumns(columnsResults)
+        }
+      } catch (_) {
+        // ignore
       }
     }
   }, [width])
@@ -70,41 +76,53 @@ function DatabasesList({
     onSelectionChange: (selected: Instance[]) => setSelection(selected),
   }
 
-  const getColumnWidth = (width?: string) => (width && /^[0-9]+px/.test(width) ? parseInt(width, 10) : MIN_COLUMN_LENGTH)
-
   const adjustColumns = (
     cols: EuiTableFieldDataColumnType<Instance>[],
     offsetWidth: number,
-    numberOfChangedColumns: number = 0
   ): EuiTableFieldDataColumnType<Instance>[] => {
-    const sum = cols?.reduce((prev, next) => {
-      const columnWidth = getColumnWidth(next.width)
-      return prev + columnWidth
-    }, 0)
-
-    // remove columns
-    if (sum > offsetWidth && columnsProp.length < columnsToHide.length + cols.length) {
-      return adjustColumns(
-        cols.filter(({ field }) => !columnsToHide.slice(0, numberOfChangedColumns + 1).includes(field)),
-        offsetWidth,
-        numberOfChangedColumns + 1
-      )
+    let sum = cols?.reduce((prev, next) => prev + getColumnWidth(next.width), 0)
+    const visibleColumnsLength = cols.length - hiddenCols.current.size
+
+    // hide columns
+    if (sum > offsetWidth && columnsToHide.length + visibleColumnsLength) {
+      let resultsCol = [...cols]
+      while (sum > offsetWidth) {
+        const colToHide = columnsToHide[hiddenCols.current.size]
+        const initialCol = findColumn(columnsProp, colToHide)
+        if (!initialCol) return resultsCol
+
+        sum -= getColumnWidth(initialCol?.width)
+        hiddenCols.current.add(colToHide)
+        lastHiddenColumn.current = initialCol
+        resultsCol = resultsCol.map((item) => (item.field === colToHide ? hideColumn(item) : item))
+      }
+
+      return resultsCol
     }
 
-    // recover columns
-    if (columnsProp.length > cols.length) {
-      const lastRemovedColumnName = columnsToHide[columnsProp.length - cols.length - 1]
-      if (lastRemovedColumnName) {
-        const lastRemovedColumn = find(columnsProp, ({ field }) => field === lastRemovedColumnName)
-        const lastRemovedColumnWidth = getColumnWidth(lastRemovedColumn?.width)
-
-        if (lastRemovedColumnWidth + sum < offsetWidth) {
-          return adjustColumns(
-            columnsProp.filter(({ field }) => find([...cols, lastRemovedColumn], (item) => item?.field === field)),
-            offsetWidth,
-          )
-        }
+    // show columns
+    if (columnsProp.length > visibleColumnsLength) {
+      // early return to not calculate other columns
+      const lastHiddenColWidth = getColumnWidth(lastHiddenColumn.current?.width)
+      if (sum + lastHiddenColWidth > offsetWidth) {
+        return cols
       }
+
+      let resultsCol = [...cols]
+      Array.from(hiddenCols.current).reverse().forEach((hiddenCol) => {
+        const initialCol = findColumn(columnsProp, hiddenCol)
+        if (!initialCol) return
+
+        const hiddenColWidth = getColumnWidth(initialCol.width)
+        if (hiddenColWidth + sum < offsetWidth) {
+          hiddenCols.current.delete(hiddenCol)
+          sum += hiddenColWidth
+          lastHiddenColumn.current = initialCol
+          resultsCol = resultsCol.map((item) => (item.field === hiddenCol ? initialCol : item))
+        }
+      })
+
+      return resultsCol
     }
 
     return cols

redisinsight/ui/src/pages/home/components/databases-list-component/databases-list/utils.spec.ts

@@ -0,0 +1,56 @@
+import { getColumnWidth, findColumn, hideColumn, MIN_COLUMN_WIDTH } from './utils'
+
+const getColumnWidthTests: any[] = [
+  ['10px', 10],
+  ['350px', 350],
+  ['100', MIN_COLUMN_WIDTH],
+  ['x', MIN_COLUMN_WIDTH],
+]
+
+describe('getColumnWidth', () => {
+  it.each(getColumnWidthTests)('for input: %s (input), should be output: %s',
+    (input, expected) => {
+      const result = getColumnWidth(input)
+      expect(result).toBe(expected)
+    })
+})
+
+const findColumnTests: any[] = [
+  [
+    [
+      [{ field: '1' }, { field: '2' }],
+      '1'
+    ],
+    { field: '1' }
+  ],
+  [
+    [
+      [{ field: '1' }, { field: '2' }],
+      '3'
+    ],
+    undefined
+  ]
+]
+
+describe('findColumn', () => {
+  it.each(findColumnTests)('for input: %s (input), should be output: %s',
+    (input, expected) => {
+      const result = findColumn(...input as [any, string])
+      expect(result).toEqual(expected)
+    })
+})
+
+const hideColumnTests: any[] = [
+  [
+    { field: '1' },
+    { field: '1', width: '0px', className: 'hiddenColumn' }
+  ],
+]
+
+describe('hideColumn', () => {
+  it.each(hideColumnTests)('for input: %s (input), should be output: %s',
+    (input, expected) => {
+      const result = hideColumn(input)
+      expect(result).toEqual(expected)
+    })
+})

redisinsight/ui/src/pages/home/components/databases-list-component/databases-list/utils.ts

@@ -0,0 +1,20 @@
+import { EuiTableFieldDataColumnType } from '@elastic/eui'
+import { find } from 'lodash'
+import { Instance } from 'uiSrc/slices/interfaces'
+
+const MIN_COLUMN_WIDTH = 180
+const getColumnWidth = (width?: string) => (width && /^[0-9]+px/.test(width) ? parseInt(width, 10) : MIN_COLUMN_WIDTH)
+const hideColumn = (column: EuiTableFieldDataColumnType<Instance>) => ({
+  ...column,
+  width: '0px',
+  className: 'hiddenColumn',
+})
+const findColumn = (columns: EuiTableFieldDataColumnType<Instance>[], colName: string) =>
+  find(columns, ({ field }) => field === colName)
+
+export {
+  MIN_COLUMN_WIDTH,
+  getColumnWidth,
+  hideColumn,
+  findColumn,
+}

redisinsight/ui/src/pages/home/components/databases-list-component/styles.module.scss

@@ -46,6 +46,13 @@ $breakpoint-l: 1400px;
   margin-right: 5px;
 }
 
+:global {
+  .hiddenColumn {
+    width: 0 !important;
+    display: none !important;
+  }
+}
+
 .columnModules {
   height: 40px;
   padding-right: 0 !important;

redisinsight/ui/src/pages/home/components/welcome-component/WelcomeComponent.tsx

@@ -228,6 +228,7 @@ const WelcomeComponent = ({ onAddInstance }: Props) => {
               </EuiTitle>
               <CapabilityPromotion wrapperClassName={cx(styles.section, styles.capabilityPromotion)} mode="reduced" />
             </div>
+            <EuiTitle className={styles.addDbTitle} size="s"><span>Add Redis databases</span></EuiTitle>
             <div className={styles.controlsGroup}>
               <EuiTitle className={styles.controlsGroupTitle} size="s">
                 <h5>Redis Cloud Database</h5>

redisinsight/ui/src/pages/home/components/welcome-component/styles.module.scss

@@ -33,16 +33,26 @@
 }
 
 .controls {
-  margin-top: 40px;
+  margin-top: 32px;
   text-align: left;
 }
 
 .controlsGroup {
-  margin-bottom: 40px;
+  margin-bottom: 32px;
+}
+
+.addDbTitle {
+  display: inline-block;
+  width: 100%;
+
+  font-size: 18px !important;
+  text-align: center;
+  margin-bottom: 32px;
 }
 
 .controlsGroupTitle {
   margin-bottom: 12px;
+  font-size: 18px !important;
 }
 
 .section {
@@ -131,7 +141,6 @@
 
 .links {
   font-size: 14px;
-  margin-top: 60px;
 
   a {
     color: var(--euiTextColor);

redisinsight/ui/src/pages/home/styles.module.scss

@@ -1,10 +1,6 @@
 @import "@elastic/eui/src/global_styling/index";
 @import "uiSrc/styles/mixins/_global.scss";
 
-.contentActive {
-  border: 1px solid var(--euiColorPrimary);
-}
-
 .pageHeader {
   min-height: 56px;
 }