refactor: convert sentinel column definitions to "static" definition

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

@@ -1 +1,11 @@
+import '@tanstack/react-table'
+import { RowData } from '@redis-ui/table'
+
 export * from '@redis-ui/table'
+
+export type AnyFunction = (...args: any[]) => any
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends RowData, TValue>
+    extends Record<string, any> {}
+}

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/columns/result.tsx

@@ -18,6 +18,7 @@ export const resultColumn = (
     accessorKey: SentinelDatabaseIds.Message,
     enableSorting: true,
     minSize: addActions ? 250 : 110,
+    meta: {},
     cell: ({
       row: {
         original: { status, message, name, error, alias, loading = false },

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/components/ResultCell/ResultCell.tsx

@@ -2,17 +2,21 @@ import React from 'react'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Loader } from 'uiSrc/components/base/display'
-import { AddRedisDatabaseStatus } from 'uiSrc/slices/interfaces'
+import {
+  AddRedisDatabaseStatus,
+  ModifiedSentinelMaster,
+} from 'uiSrc/slices/interfaces'
 import { CellText } from 'uiSrc/components/auto-discover'
 import { RiTooltip } from 'uiSrc/components'
 import { ColorText } from 'uiSrc/components/base/text'
 import { Spacer } from 'uiSrc/components/base/layout'
 import { RiIcon } from 'uiSrc/components/base/icons'
+import { CellContext } from 'uiSrc/components/base/layout/table'
 
 import { AddErrorButton } from '../AddErrorButton/AddErrorButton'
-import type { ResultCellProps } from './ResultCell.types'
+import type { ResultCellRendererProps } from './ResultCell.types'
 
-export const ResultCell = ({
+export const ResultCellRenderer = ({
   status,
   message = '',
   name,
@@ -21,7 +25,7 @@ export const ResultCell = ({
   loading = false,
   addActions,
   onAddInstance,
-}: ResultCellProps) => {
+}: ResultCellRendererProps) => {
   return (
     <Row
       data-testid={`status_${name}_${status}`}
@@ -56,3 +60,10 @@ export const ResultCell = ({
     </Row>
   )
 }
+
+export const ResultCell = ({
+  row,
+  column,
+}: CellContext<ModifiedSentinelMaster, unknown>) => {
+  return <ResultCellRenderer {...row.original} />
+}

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/components/ResultCell/ResultCell.types.ts

@@ -1,6 +1,6 @@
 import type { AddRedisDatabaseStatus } from 'uiSrc/slices/interfaces'
 
-export interface ResultCellProps {
+export interface ResultCellRendererProps {
   status?: AddRedisDatabaseStatus
   message?: string
   name: string

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/useSentinelDatabasesResultConfig.tsx

@@ -18,55 +18,7 @@ import {
 import { removeEmpty, setTitle } from 'uiSrc/utils'
 import { pick } from 'lodash'
 import { ColumnDef } from 'uiSrc/components/base/layout/table'
-import {
-  aliasColumn,
-  dbColumn,
-  addressColumn,
-  numberOfReplicasColumn,
-  passwordColumn,
-  primaryGroupColumn,
-  resultColumn,
-  usernameColumn,
-} from './components/column-definitions'
-
-// Define an interface for the error object
-interface ErrorWithStatusCode {
-  statusCode?: number
-  name?: string
-  [key: string]: any
-}
-
-function errorNotAuth(
-  error?: string | ErrorWithStatusCode | null,
-  status?: AddRedisDatabaseStatus,
-) {
-  return (
-    (typeof error === 'object' &&
-      error?.statusCode !== ApiStatusCode.Unauthorized) ||
-    status === AddRedisDatabaseStatus.Success
-  )
-}
-
-export const colFactory = (
-  handleChangedInput: (name: string, value: string) => void,
-  handleAddInstance: (masterName: string) => void,
-  isInvalid: boolean,
-  countSuccessAdded: number,
-  itemsLength: number,
-) => {
-  const cols: ColumnDef<ModifiedSentinelMaster>[] = [
-    resultColumn(countSuccessAdded !== itemsLength, handleAddInstance),
-    primaryGroupColumn(),
-    aliasColumn(handleChangedInput, errorNotAuth),
-    addressColumn(),
-    numberOfReplicasColumn(),
-    usernameColumn(handleChangedInput, isInvalid, errorNotAuth),
-    passwordColumn(handleChangedInput, isInvalid, errorNotAuth),
-    dbColumn(handleChangedInput),
-  ]
-
-  return cols
-}
+import { getColumns } from './components/utils/getColumns'
 
 export const useSentinelDatabasesResultConfig = () => {
   const [items, setItems] = useState<ModifiedSentinelMaster[]>([])
@@ -148,7 +100,7 @@ export const useSentinelDatabasesResultConfig = () => {
   )
 
   const columns: ColumnDef<ModifiedSentinelMaster>[] = useMemo(() => {
-    return colFactory(
+    return getColumns(
       handleChangedInput,
       handleAddInstance,
       isInvalid,

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.stories.tsx

@@ -6,9 +6,10 @@ import { SentinelMasterFactory } from 'uiSrc/mocks/factories/sentinel/SentinelMa
 import SentinelDatabases from './SentinelDatabases'
 import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
 import { RowSelectionState } from '@redis-ui/table'
-import { colFactory, getRowId } from '../../useSentinelDatabasesConfig'
+import { getColumns } from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns'
+import { getRowId } from '../../useSentinelDatabasesConfig'
 
-const emptyColumnsMock = colFactory([], () => {})
+const emptyColumnsMock = getColumns(fn())
 
 const meta: Meta<typeof SentinelDatabases> = {
   component: SentinelDatabases,
@@ -42,7 +43,7 @@ const DefaultRender = () => {
       alias: 'mymaster3',
     }),
   ]
-  let columnsMock = colFactory(mastersMock, () => {})
+  let columnsMock = getColumns(mastersMock, () => {})
   const [rowSelection, setSelection] = useState<RowSelectionState>({})
   const selection = Object.keys(rowSelection)
     .map((key) => mastersMock.find((master) => getRowId(master) === key))
@@ -102,6 +103,41 @@ export const Default: Story = {
   },
 }
 
+const With1000ItemsRender = () => {
+  const mastersMock: ModifiedSentinelMaster[] = Array.from(
+    { length: 1000 },
+    (_, index) =>
+      SentinelMasterFactory.build({
+        id: String(index + 1),
+        name: `mymaster${index + 1}`,
+        alias: `mymaster${index + 1}`,
+      }),
+  )
+  let columnsMock = getColumns(fn())
+  const [rowSelection, setSelection] = useState<RowSelectionState>({})
+  const selection = Object.keys(rowSelection)
+    .map((key) => mastersMock.find((master) => getRowId(master) === key))
+    .filter((item): item is ModifiedSentinelMaster => Boolean(item))
+
+  return (
+    <SentinelDatabases
+      selection={selection || []}
+      columns={columnsMock}
+      masters={mastersMock}
+      onClose={meta.args?.onClose!}
+      onBack={meta.args?.onBack!}
+      onSubmit={meta.args?.onSubmit!}
+      onSelectionChange={(sel) => {
+        setSelection(sel)
+      }}
+    />
+  )
+}
+
+export const With1000Items: Story = {
+  render: () => <With1000ItemsRender />,
+}
+
 export const Empty: Story = {
   play: async ({ canvas }) => {
     await expect(

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { memo, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 
 import { sentinelSelector } from 'uiSrc/slices/instances/sentinel'
@@ -163,4 +163,4 @@ const SentinelDatabases = ({
   )
 }
 
-export default SentinelDatabases
+export default memo(SentinelDatabases)