[RI-7058] Replace EuiInMemoryTable with Table (#4640)

* RI-7058: expose redis ui Table component

* update Table for TopKeys

* use Table for TopNamespaces

* use Table for UserApiKeysTable

* use Table for TestConnectionsTable

* use Table for TableResult

* use Table for ClusterNodesTable

* update Table for TableInfoResult

* use Table for TableResult

* use Table for ShortcutsTable

* use Table for RedisClusterDatabasesPage

* use Table for SentinelDatabasesResultPage

* use Table for SentinelDatabasesPage

* use Table for RedisCloudSubscriptionsPage

* use Table for RedisCloudDatabasesResultPage

* use Table for RedisCloudDatabasesPage

* use Table for redisgraph

* use Table for TableView

* use Table for rdi tables

Author: KrumTy

jest.config.cjs

@@ -12,8 +12,10 @@ module.exports = {
     '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
     '\\.scss\\?inline$': '<rootDir>/redisinsight/__mocks__/scssRaw.js',
     'uiSrc/(.*)': '<rootDir>/redisinsight/ui/src/$1',
+    '@redislabsdev/redis-ui-components': '@redis-ui/components',
     '@redislabsdev/redis-ui-styles': '@redis-ui/styles',
     '@redislabsdev/redis-ui-icons': '@redis-ui/icons',
+    '@redislabsdev/redis-ui-table': '@redis-ui/table',
     'monaco-editor': '<rootDir>/redisinsight/__mocks__/monacoMock.js',
     'monaco-yaml': '<rootDir>/redisinsight/__mocks__/monacoYamlMock.js',
     unified: '<rootDir>/redisinsight/__mocks__/unified.js',

package.json

@@ -237,6 +237,7 @@
     "@redis-ui/components": "^38.1.3",
     "@redis-ui/icons": "^4.16.1",
     "@redis-ui/styles": "^11.0.2",
+    "@redis-ui/table": "^2.4.0",
     "@reduxjs/toolkit": "^1.6.2",
     "@stablelib/snappy": "^1.0.2",
     "ajv": "^8.17.1",

redisinsight/ui/src/components/base/layout/table/index.ts

@@ -0,0 +1 @@
+export * from '@redis-ui/table'

redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import cx from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
-import { EuiBasicTableColumn, EuiInMemoryTable } from '@elastic/eui'
 import { appInfoSelector, setShortcutsFlyoutState } from 'uiSrc/slices/app/info'
 import { KeyboardShortcut } from 'uiSrc/components'
 import { BuildType } from 'uiSrc/constants/env'
@@ -12,44 +10,42 @@ import {
   DrawerBody,
 } from 'uiSrc/components/base/layout/drawer'
 import { Title } from 'uiSrc/components/base/text/Title'
+import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table'
 
 import { SHORTCUTS, ShortcutGroup, separator } from './schema'
 
-import styles from './styles.module.scss'
-
 const ShortcutsFlyout = () => {
   const { isShortcutsFlyoutOpen, server } = useSelector(appInfoSelector)
 
   const dispatch = useDispatch()
 
-  const tableColumns: EuiBasicTableColumn<any>[] = [
+  const tableColumns: ColumnDefinition<any>[] = [
     {
-      name: '',
-      field: 'description',
-      width: '60%',
+      header: 'Description',
+      id: 'description',
+      accessorKey: 'description',
+      enableSorting: false,
     },
     {
-      name: '',
-      field: 'keys',
-      width: '40%',
-      render: (items: string[]) => (
-        <KeyboardShortcut items={items} separator={separator} transparent />
-      ),
+      header: 'Shortcut',
+      id: 'keys',
+      accessorKey: 'keys',
+      enableSorting: false,
+      cell: ({
+        row: {
+          original: { keys },
+        },
+      }) => <KeyboardShortcut items={keys} separator={separator} transparent />,
     },
   ]
 
   const ShortcutsTable = ({ name, items }: ShortcutGroup) => (
-    <div key={name}>
+    <div key={name} data-testid={`shortcuts-table-${name}`}>
       <Title size="XS" data-test-subj={`shortcuts-section-${name}`}>
         {name}
       </Title>
       <Spacer size="m" />
-      <EuiInMemoryTable
-        className={cx('inMemoryTableDefault', styles.table)}
-        columns={tableColumns}
-        items={items}
-        responsive={false}
-      />
+      <Table columns={tableColumns} data={items} defaultSorting={[]} />
       <Spacer size="xl" />
     </div>
   )

redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss

@@ -1,48 +1,36 @@
 import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
-import { EuiBasicTableColumn, EuiInMemoryTable } from '@elastic/eui'
+import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table'
 
 export interface Props {
   query: string
   result: any
-  matched?: number
 }
 
 const noResultMessage = 'No results'
 
 const TableView = React.memo(({ result, query }: Props) => {
-  const [columns, setColumns] = useState<EuiBasicTableColumn<any>[]>([])
+  const [columns, setColumns] = useState<ColumnDefinition<any>[]>([])
 
   useEffect(() => {
     if (!result?.length) {
       return
     }
 
     const newColumns = Object.keys(result[0]).map((item) => ({
-      field: item,
-      name: item,
-      truncateText: true,
+      header: item,
+      id: item,
+      accessorKey: item,
+      enableSorting: true,
     }))
 
     setColumns(newColumns)
   }, [result, query])
 
   return (
     <div className={cx('queryResultsContainer', 'container')}>
-      <EuiInMemoryTable
-        pagination
-        items={result ?? []}
-        loading={!result}
-        message={noResultMessage}
-        columns={columns}
-        className={cx({
-          table: true,
-          inMemoryTableDefault: true,
-          tableWithPagination: result?.length > 10,
-        })}
-        responsive={false}
-        data-testid={`query-table-result-${query}`}
-      />
+      <Table data={result ?? []} columns={columns} paginationEnabled />
+      {!result?.length && <span>{noResultMessage}</span>}
     </div>
   )
 })

redisinsight/ui/src/packages/clients-list/src/components/table-view/TableView.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/prop-types */
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
 import { toUpper, flatten, isArray, isEmpty, map, uniq } from 'lodash'
-import { EuiBasicTableColumn, EuiIcon, EuiInMemoryTable } from '@elastic/eui'
+import { EuiIcon } from '@elastic/eui'
+import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table'
 
 import { ColorText, Text } from '../../../../../components/base/text'
 import { LoadingContent } from '../../../../../components/base/layout'
@@ -14,15 +15,13 @@ export interface Props {
   result: any
 }
 
-const loadingMessage = 'loading...'
 const noResultsMessage = 'No results found.'
 const noOptionsMessage = 'No options found'
 
 const TableInfoResult = React.memo((props: Props) => {
   const { result: resultProp, query } = props
 
   const [result, setResult] = useState(resultProp)
-
   const [items, setItems] = useState([])
 
   useEffect(() => {
@@ -42,26 +41,24 @@ const TableInfoResult = React.memo((props: Props) => {
   const uniqColumns =
     uniq(flatten(map(items, (item) => Object.keys(item)))) ?? []
 
-  const columns: EuiBasicTableColumn<any>[] = uniqColumns.map(
+  const columns: ColumnDefinition<any>[] = uniqColumns.map(
     (title: string = ' ') => ({
-      field: title,
-      name: toUpper(title),
-      truncateText: true,
-      align: isBooleanColumn(title) ? 'center' : 'left',
-      'data-testid': `query-column-${title}`,
-      // sortable: (value) => (value[title] ? value[title].toLowerCase() : Infinity),
-      render: function Cell(initValue?: string): ReactElement | null {
+      header: toUpper(title),
+      id: title,
+      accessorKey: title,
+      enableSorting: false,
+      cell: ({ row: { original } }) => {
+        const initValue = original[title]
         if (isBooleanColumn(title)) {
           return (
-            <div className="icon">
+            <div className="icon" data-testid={`query-column-${title}`}>
               <EuiIcon
                 type={initValue ? 'check' : 'cross'}
                 color={initValue ? 'primary' : 'danger'}
               />
             </div>
           )
         }
-
         return <Text>{initValue}</Text>
       },
     }),
@@ -119,19 +116,9 @@ const TableInfoResult = React.memo((props: Props) => {
   return (
     <div className="container">
       {isDataArr && (
-        <div className="content">
+        <div className="content" data-testid={`query-table-result-${query}`}>
           {Header()}
-          <EuiInMemoryTable
-            items={items ?? []}
-            loading={!result}
-            message={loadingMessage}
-            columns={columns}
-            className={cx('inMemoryTableDefault', 'tableInfo', {
-              tableWithPagination: result?.length > 10,
-            })}
-            responsive={false}
-            data-testid={`query-table-result-${query}`}
-          />
+          <Table columns={columns} data={items ?? []} />
           {Footer()}
         </div>
       )}

redisinsight/ui/src/packages/clients-list/tsconfig.json

@@ -1,8 +1,9 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import parse from 'html-react-parser'
 import cx from 'classnames'
 import { flatten, isArray, isEmpty, map, uniq } from 'lodash'
-import { EuiBasicTableColumn, EuiInMemoryTable, EuiToolTip } from '@elastic/eui'
+import { EuiToolTip } from '@elastic/eui'
+import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table'
 
 import { ColorText } from '../../../../../components/base/text/ColorText'
 import { IconButton } from '../../../../../components/base/forms/buttons'
@@ -17,13 +18,12 @@ export interface Props {
   cursorId?: null | number
 }
 
-const loadingMessage = 'loading...'
 const noResultsMessage = 'No results found.'
 
 const TableResult = React.memo((props: Props) => {
   const { result, query, matched, cursorId } = props
 
-  const [columns, setColumns] = useState<EuiBasicTableColumn<any>[]>([])
+  const [columns, setColumns] = useState<ColumnDefinition<any>[]>([])
 
   const checkShouldParsedHTML = (query: string) => {
     const command = query.toUpperCase()
@@ -49,15 +49,13 @@ const TableResult = React.memo((props: Props) => {
     const uniqColumns =
       uniq(flatten(map(result, (doc) => Object.keys(doc)))) ?? []
 
-    const newColumns: EuiBasicTableColumn<any>[] = uniqColumns.map(
+    const newColumns: ColumnDefinition<any>[] = uniqColumns.map(
       (title: string = ' ') => ({
-        field: title,
-        name: title,
-        truncateText: true,
-        dataType: 'string',
-        'data-testid': `query-column-${title}`,
-        // sortable: (value) => (value[title] ? value[title].toLowerCase() : Infinity),
-        render: function Cell(initValue: string = ''): ReactElement | string {
+        header: title,
+        id: title,
+        accessorKey: title,
+        cell: ({ row: { original } }) => {
+          const initValue = original[title] || ''
           if (!initValue || (isArray(initValue) && isEmpty(initValue))) {
             return ''
           }
@@ -72,7 +70,11 @@ const TableResult = React.memo((props: Props) => {
           }
 
           return (
-            <div role="presentation" className={cx('tooltipContainer')}>
+            <div
+              role="presentation"
+              className={cx('tooltipContainer')}
+              data-testid={`query-column-${title}`}
+            >
               <EuiToolTip
                 position="bottom"
                 title={title}
@@ -118,20 +120,9 @@ const TableResult = React.memo((props: Props) => {
         )}
       </div>
       {isDataArr && (
-        <EuiInMemoryTable
-          pagination
-          items={result ?? []}
-          loading={!result}
-          message={loadingMessage}
-          columns={columns}
-          className={cx({
-            table: true,
-            inMemoryTableDefault: true,
-            tableWithPagination: result?.length > 10,
-          })}
-          responsive={false}
-          data-testid={`query-table-result-${query}`}
-        />
+        <div data-testid={`query-table-result-${query}`}>
+          <Table columns={columns} data={result ?? []} />
+        </div>
       )}
       {isDataEl && <div className={cx('resultEl')}>{result}</div>}
       {!isDataArr && !isDataEl && (