From 861998f66ef37186c8faf23f8b021f0925888570 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 20 Nov 2025 19:49:16 +0200 Subject: [PATCH 1/3] refactor: convert sentinel column definitions from factory functions to static objects - Move column definitions from column-definitions/ to components/columns/ - Convert factory functions to static ColumnDef objects - Refactor cell components to use meta.action pattern with getMetaAction helper - Add ColumnMeta.action type augmentation for dynamic callbacks - Simplify getColumns by inlining column definitions --- .../src/components/base/layout/table/index.ts | 11 +++ .../SentinelDatabases.stories.tsx | 42 ++++++++- .../SentinelDatabases/SentinelDatabases.tsx | 4 +- .../column-definitions/columns/address.tsx | 24 ----- .../column-definitions/columns/alias.tsx | 33 ------- .../column-definitions/columns/dbIndex.tsx | 27 ------ .../columns/numberOfReplicas.ts | 17 ---- .../column-definitions/columns/password.tsx | 31 ------- .../columns/primaryGroup.tsx | 25 ----- .../column-definitions/columns/selection.ts | 6 -- .../column-definitions/columns/username.tsx | 31 ------- .../AddressCell/AddressCell.types.ts | 4 - .../components/AliasCell/AliasCell.tsx | 18 ---- .../components/PasswordCell/PasswordCell.tsx | 17 ---- .../PrimaryGroupCell/PrimaryGroupCell.tsx | 8 -- .../PrimaryGroupCell.types.ts | 3 - .../components/UsernameCell/UsernameCell.tsx | 17 ---- .../components/column-definitions/index.ts | 8 -- .../AddressCell/AddressCell.tsx | 16 +++- .../columns/AddressCell/AddressCell.types.ts | 4 + .../columns/AliasCell/AliasCell.tsx | 46 +++++++++ .../AliasCell/AliasCell.types.ts | 2 +- .../DbIndexCell/DbIndexCell.tsx | 27 +++++- .../DbIndexCell/DbIndexCell.types.ts | 0 .../columns/PasswordCell/PasswordCell.tsx | 42 +++++++++ .../PasswordCell/PasswordCell.types.ts | 0 .../PrimaryGroupCell/PrimaryGroupCell.tsx | 19 ++++ .../PrimaryGroupCell.types.ts | 3 + .../columns/UsernameCell/UsernameCell.tsx | 42 +++++++++ .../UsernameCell/UsernameCell.types.ts | 2 +- .../components => columns}/index.ts | 1 + .../selection/SentinelMasterSelection.tsx | 19 ++++ .../components/columns/types.ts | 12 +++ .../components/utils/getColumns.tsx | 93 +++++++++++++++++++ .../components/utils/index.ts | 17 ++++ .../useSentinelDatabasesConfig.tsx | 46 ++------- 36 files changed, 402 insertions(+), 315 deletions(-) delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/address.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/alias.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/dbIndex.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/numberOfReplicas.ts delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/password.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/primaryGroup.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/selection.ts delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/username.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AddressCell/AddressCell.types.ts delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AliasCell/AliasCell.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PasswordCell/PasswordCell.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PrimaryGroupCell/PrimaryGroupCell.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PrimaryGroupCell/PrimaryGroupCell.types.ts delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/UsernameCell/UsernameCell.tsx delete mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/index.ts rename redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/{column-definitions/components => columns}/AddressCell/AddressCell.tsx (59%) create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AddressCell/AddressCell.types.ts create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.tsx rename redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/{column-definitions/components => columns}/AliasCell/AliasCell.types.ts (72%) rename redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/{column-definitions/components => columns}/DbIndexCell/DbIndexCell.tsx (57%) rename redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/{column-definitions/components => columns}/DbIndexCell/DbIndexCell.types.ts (100%) create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PasswordCell/PasswordCell.tsx rename redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/{column-definitions/components => columns}/PasswordCell/PasswordCell.types.ts (100%) create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PrimaryGroupCell/PrimaryGroupCell.tsx create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PrimaryGroupCell/PrimaryGroupCell.types.ts create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.tsx rename redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/{column-definitions/components => columns}/UsernameCell/UsernameCell.types.ts (67%) rename redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/{column-definitions/components => columns}/index.ts (87%) create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/selection/SentinelMasterSelection.tsx create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/types.ts create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.tsx create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/index.ts diff --git a/redisinsight/ui/src/components/base/layout/table/index.ts b/redisinsight/ui/src/components/base/layout/table/index.ts index 8bb5e30087..6b1c8c91f5 100644 --- a/redisinsight/ui/src/components/base/layout/table/index.ts +++ b/redisinsight/ui/src/components/base/layout/table/index.ts @@ -1 +1,12 @@ +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 { + action?: AnyFunction + } +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.stories.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.stories.tsx index 8c7561348e..9c7082bdf9 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.stories.tsx +++ b/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 = { component: SentinelDatabases, @@ -42,7 +43,7 @@ const DefaultRender = () => { alias: 'mymaster3', }), ] - let columnsMock = colFactory(mastersMock, () => {}) + let columnsMock = getColumns(mastersMock, () => {}) const [rowSelection, setSelection] = useState({}) 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({}) + const selection = Object.keys(rowSelection) + .map((key) => mastersMock.find((master) => getRowId(master) === key)) + .filter((item): item is ModifiedSentinelMaster => Boolean(item)) + + return ( + { + setSelection(sel) + }} + /> + ) +} + +export const With1000Items: Story = { + render: () => , +} + export const Empty: Story = { play: async ({ canvas }) => { await expect( diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx index b6ce70c3fa..d1eb7f8f93 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx +++ b/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) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/address.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/address.tsx deleted file mode 100644 index 7677da0aa4..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/address.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' - -import type { ColumnDef } from 'uiSrc/components/base/layout/table' -import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' -import { - SentinelDatabaseIds, - SentinelDatabaseTitles, -} from 'uiSrc/pages/autodiscover-sentinel/constants/constants' - -import { AddressCell } from '../components' - -export const addressColumn = (): ColumnDef => { - return { - header: SentinelDatabaseTitles.Address, - id: SentinelDatabaseIds.Address, - accessorKey: SentinelDatabaseIds.Address, - enableSorting: true, - cell: ({ - row: { - original: { host, port }, - }, - }) => , - } -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/alias.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/alias.tsx deleted file mode 100644 index 53945db9ff..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/alias.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' -import type { ColumnDef } from 'uiSrc/components/base/layout/table' -import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' - -import { AliasCell } from '../components' -import { - SentinelDatabaseIds, - SentinelDatabaseTitles, -} from 'uiSrc/pages/autodiscover-sentinel/constants/constants' - -export const aliasColumn = ( - handleChangedInput: (name: string, value: string) => void, -): ColumnDef => { - return { - header: SentinelDatabaseTitles.Alias, - id: SentinelDatabaseIds.Alias, - accessorKey: SentinelDatabaseIds.Alias, - enableSorting: true, - size: 200, - cell: ({ - row: { - original: { id, alias, name }, - }, - }) => ( - - ), - } -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/dbIndex.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/dbIndex.tsx deleted file mode 100644 index 344e9f0c5b..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/dbIndex.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import type { ColumnDef } from 'uiSrc/components/base/layout/table' -import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' - -import { DbIndexCell } from '../components' -import { - SentinelDatabaseIds, - SentinelDatabaseTitles, -} from 'uiSrc/pages/autodiscover-sentinel/constants/constants' - -export const dbIndexColumn = ( - handleChangedInput: (name: string, value: string) => void, -): ColumnDef => { - return { - header: SentinelDatabaseTitles.DatabaseIndex, - id: SentinelDatabaseIds.DatabaseIndex, - accessorKey: SentinelDatabaseIds.DatabaseIndex, - size: 140, - cell: ({ - row: { - original: { db = 0, id }, - }, - }) => ( - - ), - } -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/numberOfReplicas.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/numberOfReplicas.ts deleted file mode 100644 index 9837bd82dd..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/numberOfReplicas.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { ColumnDef } from 'uiSrc/components/base/layout/table' -import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' - -import { - SentinelDatabaseIds, - SentinelDatabaseTitles, -} from 'uiSrc/pages/autodiscover-sentinel/constants/constants' - -export const numberOfReplicasColumn = (): ColumnDef => { - return { - header: SentinelDatabaseTitles.NumberOfReplicas, - id: SentinelDatabaseIds.NumberOfReplicas, - accessorKey: SentinelDatabaseIds.NumberOfReplicas, - enableSorting: true, - size: 120, - } -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/password.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/password.tsx deleted file mode 100644 index adbdd33ba0..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/password.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import type { ColumnDef } from 'uiSrc/components/base/layout/table' -import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' - -import { - SentinelDatabaseIds, - SentinelDatabaseTitles, -} from 'uiSrc/pages/autodiscover-sentinel/constants/constants' - -import { PasswordCell } from '../components' - -export const passwordColumn = ( - handleChangedInput: (name: string, value: string) => void, -): ColumnDef => { - return { - header: SentinelDatabaseTitles.Password, - id: SentinelDatabaseIds.Password, - accessorKey: SentinelDatabaseIds.Password, - cell: ({ - row: { - original: { password, id }, - }, - }) => ( - - ), - } -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/primaryGroup.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/primaryGroup.tsx deleted file mode 100644 index 3998a347f4..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/primaryGroup.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' - -import type { ColumnDef } from 'uiSrc/components/base/layout/table' -import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' - -import { - SentinelDatabaseIds, - SentinelDatabaseTitles, -} from 'uiSrc/pages/autodiscover-sentinel/constants/constants' -import { PrimaryGroupCell } from '../components' - -export const primaryGroupColumn = (): ColumnDef => { - return { - header: SentinelDatabaseTitles.PrimaryGroup, - id: SentinelDatabaseIds.PrimaryGroup, - accessorKey: SentinelDatabaseIds.PrimaryGroup, - enableSorting: true, - size: 200, - cell: ({ - row: { - original: { name }, - }, - }) => , - } -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/selection.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/selection.ts deleted file mode 100644 index f1797d5ab7..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/selection.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' -import { getSelectionColumn } from 'uiSrc/pages/autodiscover-cloud/utils' - -export const selectionColumn = () => { - return getSelectionColumn() -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/username.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/username.tsx deleted file mode 100644 index b12b298aa0..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/columns/username.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' - -import type { ColumnDef } from 'uiSrc/components/base/layout/table' -import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' -import { - SentinelDatabaseIds, - SentinelDatabaseTitles, -} from 'uiSrc/pages/autodiscover-sentinel/constants/constants' - -import { UsernameCell } from '../components' - -export const usernameColumn = ( - handleChangedInput: (name: string, value: string) => void, -): ColumnDef => { - return { - header: SentinelDatabaseTitles.Username, - id: SentinelDatabaseIds.Username, - accessorKey: SentinelDatabaseIds.Username, - cell: ({ - row: { - original: { username, id }, - }, - }) => ( - - ), - } -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AddressCell/AddressCell.types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AddressCell/AddressCell.types.ts deleted file mode 100644 index 9b94eba763..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AddressCell/AddressCell.types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface AddressCellProps { - host?: string - port?: string -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AliasCell/AliasCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AliasCell/AliasCell.tsx deleted file mode 100644 index e3a17f6337..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AliasCell/AliasCell.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import { InputFieldSentinel } from 'uiSrc/components' -import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel' - -import type { AliasCellProps } from './AliasCell.types' - -export const AliasCell = ({ id, alias, name, handleChangedInput }: AliasCellProps) => ( -
- -
-) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PasswordCell/PasswordCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PasswordCell/PasswordCell.tsx deleted file mode 100644 index 72281b3383..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PasswordCell/PasswordCell.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import { InputFieldSentinel } from 'uiSrc/components' -import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel' - -import type { PasswordCellProps } from './PasswordCell.types' - -export const PasswordCell = ({ password, id, handleChangedInput }: PasswordCellProps) => ( -
- -
-) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PrimaryGroupCell/PrimaryGroupCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PrimaryGroupCell/PrimaryGroupCell.tsx deleted file mode 100644 index 3ef0a2c646..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PrimaryGroupCell/PrimaryGroupCell.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import { CellText } from 'uiSrc/components/auto-discover' - -import type { PrimaryGroupCellProps } from './PrimaryGroupCell.types' - -export const PrimaryGroupCell = ({ name }: PrimaryGroupCellProps) => ( - {name} -) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PrimaryGroupCell/PrimaryGroupCell.types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PrimaryGroupCell/PrimaryGroupCell.types.ts deleted file mode 100644 index 9bb7481055..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PrimaryGroupCell/PrimaryGroupCell.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface PrimaryGroupCellProps { - name: string -} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/UsernameCell/UsernameCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/UsernameCell/UsernameCell.tsx deleted file mode 100644 index 86e9faae11..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/UsernameCell/UsernameCell.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import { InputFieldSentinel } from 'uiSrc/components' -import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel' - -import type { UsernameCellProps } from './UsernameCell.types' - -export const UsernameCell = ({ username, id, handleChangedInput }: UsernameCellProps) => ( -
- -
-) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/index.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/index.ts deleted file mode 100644 index 7962da0f32..0000000000 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export * from './columns/primaryGroup' -export * from './columns/alias' -export * from './columns/address' -export * from './columns/numberOfReplicas' -export * from './columns/username' -export * from './columns/password' -export * from './columns/dbIndex' -export * from './columns/selection' diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AddressCell/AddressCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AddressCell/AddressCell.tsx similarity index 59% rename from redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AddressCell/AddressCell.tsx rename to redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AddressCell/AddressCell.tsx index 8c9437cc84..4bb0e0c84b 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AddressCell/AddressCell.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AddressCell/AddressCell.tsx @@ -7,9 +7,14 @@ import { import { RiTooltip } from 'uiSrc/components' import { handleCopy } from 'uiSrc/utils' -import type { AddressCellProps } from './AddressCell.types' +import type { AddressCellRendererProps } from './AddressCell.types' +import { CellContext } from 'uiSrc/components/base/layout/table' +import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' -export const AddressCell = ({ host, port }: AddressCellProps) => { +export const AddressCellRenderer = ({ + host, + port, +}: AddressCellRendererProps) => { if (!host || !port) { return null } @@ -32,3 +37,10 @@ export const AddressCell = ({ host, port }: AddressCellProps) => { ) } + +export const AddressCell = ({ + row, +}: CellContext) => { + const { host, port } = row.original + return +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AddressCell/AddressCell.types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AddressCell/AddressCell.types.ts new file mode 100644 index 0000000000..1e175ed244 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AddressCell/AddressCell.types.ts @@ -0,0 +1,4 @@ +export interface AddressCellRendererProps { + host?: string + port?: string +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.tsx new file mode 100644 index 0000000000..b6eb503ed2 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import { InputFieldSentinel } from 'uiSrc/components' +import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel' + +import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' +import { CellContext } from 'uiSrc/components/base/layout/table' +import { getMetaAction } from '../../utils' + +import type { AliasCellRendererProps } from './AliasCell.types' + +export const AliasCellRenderer = ({ + id, + alias, + name, + handleChangedInput, +}: AliasCellRendererProps) => ( +
+ +
+) + +export const AliasCell = ({ + row, + column, +}: CellContext) => { + const { id, alias, name } = row.original + const handleChangedInput = getMetaAction(column) as ( + name: string, + value: string, + ) => void + return ( + + ) +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AliasCell/AliasCell.types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.types.ts similarity index 72% rename from redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AliasCell/AliasCell.types.ts rename to redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.types.ts index 63318fb22f..29802ef3a0 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/AliasCell/AliasCell.types.ts +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.types.ts @@ -1,4 +1,4 @@ -export interface AliasCellProps { +export interface AliasCellRendererProps { id?: string alias?: string name?: string diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/DbIndexCell/DbIndexCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/DbIndexCell/DbIndexCell.tsx similarity index 57% rename from redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/DbIndexCell/DbIndexCell.tsx rename to redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/DbIndexCell/DbIndexCell.tsx index c739ea81ab..a30e1e6426 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/DbIndexCell/DbIndexCell.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/DbIndexCell/DbIndexCell.tsx @@ -4,8 +4,15 @@ import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/In import { RiIcon } from 'uiSrc/components/base/icons' import type { DbIndexCellProps } from './DbIndexCell.types' +import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' +import { CellContext } from 'uiSrc/components/base/layout/table' +import { getMetaAction } from '../../utils' -export const DbIndexCell = ({ db = 0, id, handleChangedInput }: DbIndexCellProps) => ( +export const DbIndexCellRenderer = ({ + db = 0, + id, + handleChangedInput, +}: DbIndexCellProps) => (
) + +export const DbIndexCell = ({ + row, + column, +}: CellContext) => { + const { db = 0, id } = row.original + const handleChangedInput = getMetaAction(column) as ( + name: string, + value: string, + ) => void + return ( + + ) +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/DbIndexCell/DbIndexCell.types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/DbIndexCell/DbIndexCell.types.ts similarity index 100% rename from redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/DbIndexCell/DbIndexCell.types.ts rename to redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/DbIndexCell/DbIndexCell.types.ts diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PasswordCell/PasswordCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PasswordCell/PasswordCell.tsx new file mode 100644 index 0000000000..c256b2cd17 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PasswordCell/PasswordCell.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { InputFieldSentinel } from 'uiSrc/components' +import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel' + +import type { PasswordCellProps } from './PasswordCell.types' +import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' +import { CellContext } from 'uiSrc/components/base/layout/table' +import { getMetaAction } from '../../utils' + +export const PasswordCellRenderer = ({ + password, + id, + handleChangedInput, +}: PasswordCellProps) => ( +
+ +
+) + +export const PasswordCell = ({ + row, + column, +}: CellContext) => { + const { password, id } = row.original + const handleChangedInput = getMetaAction(column) as ( + name: string, + value: string, + ) => void + return ( + + ) +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PasswordCell/PasswordCell.types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PasswordCell/PasswordCell.types.ts similarity index 100% rename from redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/PasswordCell/PasswordCell.types.ts rename to redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PasswordCell/PasswordCell.types.ts diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PrimaryGroupCell/PrimaryGroupCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PrimaryGroupCell/PrimaryGroupCell.tsx new file mode 100644 index 0000000000..0dafef9638 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PrimaryGroupCell/PrimaryGroupCell.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { CellText } from 'uiSrc/components/auto-discover' +import { type CellContext } from 'uiSrc/components/base/layout/table' +import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' + +import type { PrimaryGroupCellRendererProps } from './PrimaryGroupCell.types' + +export const PrimaryGroupRenderer = ({ + name, +}: PrimaryGroupCellRendererProps) => ( + {name} +) + +export const PrimaryGroupCell = ( + props: CellContext, +) => { + const { name } = props.row.original + return +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PrimaryGroupCell/PrimaryGroupCell.types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PrimaryGroupCell/PrimaryGroupCell.types.ts new file mode 100644 index 0000000000..4921e395d6 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PrimaryGroupCell/PrimaryGroupCell.types.ts @@ -0,0 +1,3 @@ +export interface PrimaryGroupCellRendererProps { + name: string +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.tsx new file mode 100644 index 0000000000..a9986c229d --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { InputFieldSentinel } from 'uiSrc/components' +import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel' + +import type { UsernameCellRendererProps } from './UsernameCell.types' +import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' +import { CellContext } from 'uiSrc/components/base/layout/table' +import { getMetaAction } from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/components/utils' + +export const UsernameCellRenderer = ({ + username, + id, + handleChangedInput, +}: UsernameCellRendererProps) => ( +
+ +
+) + +export const UsernameCell = ({ + row, + column, +}: CellContext) => { + const { username, id } = row.original + const handleChangedInput = getMetaAction(column) as ( + name: string, + value: string, + ) => void + return ( + + ) +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/UsernameCell/UsernameCell.types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.types.ts similarity index 67% rename from redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/UsernameCell/UsernameCell.types.ts rename to redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.types.ts index f7d9f65014..531ee180a7 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/UsernameCell/UsernameCell.types.ts +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.types.ts @@ -1,4 +1,4 @@ -export interface UsernameCellProps { +export interface UsernameCellRendererProps { username: string id: string handleChangedInput: (name: string, value: string) => void diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/index.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/index.ts similarity index 87% rename from redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/index.ts rename to redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/index.ts index 345db77581..e78bd88f53 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/components/index.ts +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/index.ts @@ -4,3 +4,4 @@ export { DbIndexCell } from './DbIndexCell/DbIndexCell' export { PasswordCell } from './PasswordCell/PasswordCell' export { PrimaryGroupCell } from './PrimaryGroupCell/PrimaryGroupCell' export { UsernameCell } from './UsernameCell/UsernameCell' +export * from './selection/SentinelMasterSelection' diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/selection/SentinelMasterSelection.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/selection/SentinelMasterSelection.tsx new file mode 100644 index 0000000000..4270b8d02d --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/selection/SentinelMasterSelection.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { Table, type HeaderContext } from 'uiSrc/components/base/layout/table' +import { SentinelMasterListCellType } from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/components/columns/types' +import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' + +export const SentinelMasterSelectionRow: SentinelMasterListCellType = ({ + row, +}) => ( + +) + +export const SentinelMasterSelectionHeader = ({ + table, +}: HeaderContext) => ( + +) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/types.ts new file mode 100644 index 0000000000..d40cf9a45e --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/types.ts @@ -0,0 +1,12 @@ +import type { ReactElement } from 'react' + +import type { CellContext } from 'uiSrc/components/base/layout/table' +import type { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' + +export type SentinelMasterListCellTypeProps = CellContext< + ModifiedSentinelMaster, + unknown +> +export type SentinelMasterListCellType = ( + props: SentinelMasterListCellTypeProps, +) => ReactElement | null diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.tsx new file mode 100644 index 0000000000..158d38f503 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.tsx @@ -0,0 +1,93 @@ +import { ColumnDef } from 'uiSrc/components/base/layout/table' +import { type ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' +import { + SentinelDatabaseIds, + SentinelDatabaseTitles, +} from 'uiSrc/pages/autodiscover-sentinel/constants/constants' + +import { + AddressCell, + AliasCell, + DbIndexCell, + PasswordCell, + PrimaryGroupCell, + SentinelMasterSelectionHeader, + SentinelMasterSelectionRow, + UsernameCell, +} from '../columns' + +export const getColumns = ( + handleChangedInput: (name: string, value: string) => void, +): ColumnDef[] => { + return [ + { + id: 'row-selection', + maxSize: 50, + size: 50, + isHeaderCustom: true, + header: SentinelMasterSelectionHeader, + cell: SentinelMasterSelectionRow, + }, + { + header: SentinelDatabaseTitles.PrimaryGroup, + id: SentinelDatabaseIds.PrimaryGroup, + accessorKey: SentinelDatabaseIds.PrimaryGroup, + enableSorting: true, + size: 200, + cell: PrimaryGroupCell, + }, + { + header: SentinelDatabaseTitles.Alias, + id: SentinelDatabaseIds.Alias, + accessorKey: SentinelDatabaseIds.Alias, + enableSorting: true, + size: 200, + cell: AliasCell, + meta: { + action: handleChangedInput, + }, + }, + { + header: SentinelDatabaseTitles.Address, + id: SentinelDatabaseIds.Address, + accessorKey: SentinelDatabaseIds.Address, + enableSorting: true, + cell: AddressCell, + }, + { + header: SentinelDatabaseTitles.NumberOfReplicas, + id: SentinelDatabaseIds.NumberOfReplicas, + accessorKey: SentinelDatabaseIds.NumberOfReplicas, + enableSorting: true, + size: 120, + }, + { + header: SentinelDatabaseTitles.Username, + id: SentinelDatabaseIds.Username, + accessorKey: SentinelDatabaseIds.Username, + cell: UsernameCell, + meta: { + action: handleChangedInput, + }, + }, + { + header: SentinelDatabaseTitles.Password, + id: SentinelDatabaseIds.Password, + accessorKey: SentinelDatabaseIds.Password, + cell: PasswordCell, + meta: { + action: handleChangedInput, + }, + }, + { + header: SentinelDatabaseTitles.DatabaseIndex, + id: SentinelDatabaseIds.DatabaseIndex, + accessorKey: SentinelDatabaseIds.DatabaseIndex, + size: 140, + cell: DbIndexCell, + meta: { + action: handleChangedInput, + }, + }, + ] +} diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/index.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/index.ts new file mode 100644 index 0000000000..44d757b37f --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/index.ts @@ -0,0 +1,17 @@ +import { + type AnyFunction, + type Column, +} from 'uiSrc/components/base/layout/table' + +export const getMetaAction = ( + column: Column, +): AnyFunction => { + const action = column.columnDef?.meta?.action as AnyFunction | undefined + return ( + action || + (() => { + console.warn('Trying to use column.meta.action, but one is not defined.') + }) + ) +} + diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig.tsx index f69847971f..15231340a8 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig.tsx @@ -15,20 +15,8 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { Pages } from 'uiSrc/constants' import { setTitle } from 'uiSrc/utils' import { CreateSentinelDatabaseDto } from 'apiSrc/modules/redis-sentinel/dto/create.sentinel.database.dto' -import { - ColumnDef, - RowSelectionState, -} from 'uiSrc/components/base/layout/table' -import { - primaryGroupColumn, - aliasColumn, - addressColumn, - numberOfReplicasColumn, - usernameColumn, - passwordColumn, - dbIndexColumn, - selectionColumn, -} from './components/column-definitions' +import { RowSelectionState } from 'uiSrc/components/base/layout/table' +import { getColumns } from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns' const updateSelection = ( selected: ModifiedSentinelMaster[], @@ -46,24 +34,6 @@ const sendCancelEvent = () => { TelemetryEvent.CONFIG_DATABASES_REDIS_SENTINEL_AUTODISCOVERY_CANCELLED, }) } -export const colFactory = ( - items: ModifiedSentinelMaster[], - handleChangedInput: (name: string, value: string) => void, -) => { - const cols: ColumnDef[] = [ - primaryGroupColumn(), - aliasColumn(handleChangedInput), - addressColumn(), - numberOfReplicasColumn(), - usernameColumn(handleChangedInput), - passwordColumn(handleChangedInput), - dbIndexColumn(handleChangedInput), - ] - if (items.length > 0) { - cols.unshift(selectionColumn()) - } - return cols -} export const getRowId = (row: ModifiedSentinelMaster) => row.id || '' @@ -156,10 +126,14 @@ export const useSentinelDatabasesConfig = () => { [setItems], ) - const columns: ColumnDef[] = useMemo( - () => colFactory(items, handleChangedInput), - [handleChangedInput, items.length], - ) + const shouldRenderSelection = items.length > 0 + const columns = useMemo(() => { + const cols = getColumns(handleChangedInput) + if (!shouldRenderSelection) { + cols.splice(0, 1) + } + return cols + }, [handleChangedInput, shouldRenderSelection]) return { columns, From 4cf61280b2e85d8af646de9ae49dcc79644df132 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 20 Nov 2025 20:00:02 +0200 Subject: [PATCH 2/3] added test for getColumns.spec.ts --- .../components/utils/getColumns.spec.ts | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.spec.ts diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.spec.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.spec.ts new file mode 100644 index 0000000000..78da6b4603 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.spec.ts @@ -0,0 +1,79 @@ +import { getColumns } from './getColumns' +import { SentinelDatabaseIds } from 'uiSrc/pages/autodiscover-sentinel/constants/constants' + +describe('getColumns', () => { + const mockHandleChangedInput = jest.fn((_name: string, _value: string) => { + // Mock implementation + }) + + beforeEach(() => { + jest.clearAllMocks() + }) + + it('should return all required column definitions in correct order', () => { + const columns = getColumns(mockHandleChangedInput) + + const columnIds = columns.map((col) => col.id) + + expect(columnIds).toEqual([ + 'row-selection', + SentinelDatabaseIds.PrimaryGroup, + SentinelDatabaseIds.Alias, + SentinelDatabaseIds.Address, + SentinelDatabaseIds.NumberOfReplicas, + SentinelDatabaseIds.Username, + SentinelDatabaseIds.Password, + SentinelDatabaseIds.DatabaseIndex, + ]) + }) + + it('should include selection column as first column', () => { + const columns = getColumns(mockHandleChangedInput) + + expect(columns).toHaveLength(8) + expect(columns[0].id).toBe('row-selection') + expect(columns[0].isHeaderCustom).toBe(true) + expect(columns[0].maxSize).toBe(50) + expect(columns[0].size).toBe(50) + }) + + it('should pass handleChangedInput via meta.action for columns that need it', () => { + const columns = getColumns(mockHandleChangedInput) + + const aliasColumn = columns.find( + (col) => col.id === SentinelDatabaseIds.Alias, + ) + const usernameColumn = columns.find( + (col) => col.id === SentinelDatabaseIds.Username, + ) + const passwordColumn = columns.find( + (col) => col.id === SentinelDatabaseIds.Password, + ) + const dbIndexColumn = columns.find( + (col) => col.id === SentinelDatabaseIds.DatabaseIndex, + ) + + expect(aliasColumn?.meta?.action).toBe(mockHandleChangedInput) + expect(usernameColumn?.meta?.action).toBe(mockHandleChangedInput) + expect(passwordColumn?.meta?.action).toBe(mockHandleChangedInput) + expect(dbIndexColumn?.meta?.action).toBe(mockHandleChangedInput) + }) + + it('should not include meta.action for columns that do not need it', () => { + const columns = getColumns(mockHandleChangedInput) + + const primaryGroupColumn = columns.find( + (col) => col.id === SentinelDatabaseIds.PrimaryGroup, + ) + const addressColumn = columns.find( + (col) => col.id === SentinelDatabaseIds.Address, + ) + const numberOfReplicasColumn = columns.find( + (col) => col.id === SentinelDatabaseIds.NumberOfReplicas, + ) + + expect(primaryGroupColumn?.meta?.action).toBeUndefined() + expect(addressColumn?.meta?.action).toBeUndefined() + expect(numberOfReplicasColumn?.meta?.action).toBeUndefined() + }) +}) From 4840922d7bfa8f3f952c20cd0689115f2d2cd158 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Thu, 20 Nov 2025 21:17:04 +0200 Subject: [PATCH 3/3] changed meta shape --- .../src/components/base/layout/table/index.ts | 5 +- .../column-definitions/columns/result.tsx | 1 + .../components/ResultCell/ResultCell.tsx | 19 +++++-- .../components/ResultCell/ResultCell.types.ts | 2 +- .../useSentinelDatabasesResultConfig.tsx | 52 +------------------ .../columns/AliasCell/AliasCell.tsx | 8 ++- .../columns/DbIndexCell/DbIndexCell.tsx | 8 ++- .../columns/PasswordCell/PasswordCell.tsx | 12 ++--- .../PasswordCell/PasswordCell.types.ts | 2 +- .../columns/UsernameCell/UsernameCell.tsx | 8 ++- .../components/columns/types.ts | 5 ++ .../components/utils/getColumns.spec.ts | 28 ++++++---- .../utils/{getColumns.tsx => getColumns.ts} | 16 ++---- .../components/utils/index.ts | 5 ++ 14 files changed, 68 insertions(+), 103 deletions(-) rename redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/{getColumns.tsx => getColumns.ts} (90%) diff --git a/redisinsight/ui/src/components/base/layout/table/index.ts b/redisinsight/ui/src/components/base/layout/table/index.ts index 6b1c8c91f5..16c5584826 100644 --- a/redisinsight/ui/src/components/base/layout/table/index.ts +++ b/redisinsight/ui/src/components/base/layout/table/index.ts @@ -6,7 +6,6 @@ export * from '@redis-ui/table' export type AnyFunction = (...args: any[]) => any declare module '@tanstack/react-table' { - interface ColumnMeta { - action?: AnyFunction - } + interface ColumnMeta + extends Record {} } diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/columns/result.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/columns/result.tsx index 243a19c47d..4946b8acc5 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/columns/result.tsx +++ b/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 }, diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/components/ResultCell/ResultCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/components/ResultCell/ResultCell.tsx index 49cb5a01ed..74ee3c4a4c 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/components/ResultCell/ResultCell.tsx +++ b/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 ( ) } + +export const ResultCell = ({ + row, + column, +}: CellContext) => { + return +} \ No newline at end of file diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/components/ResultCell/ResultCell.types.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/components/ResultCell/ResultCell.types.ts index 74cc5137bb..24fc65fb15 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/components/ResultCell/ResultCell.types.ts +++ b/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 diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/useSentinelDatabasesResultConfig.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/useSentinelDatabasesResultConfig.tsx index 6739bf7367..acb4d9b8af 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/useSentinelDatabasesResultConfig.tsx +++ b/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[] = [ - 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([]) @@ -148,7 +100,7 @@ export const useSentinelDatabasesResultConfig = () => { ) const columns: ColumnDef[] = useMemo(() => { - return colFactory( + return getColumns( handleChangedInput, handleAddInstance, isInvalid, diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.tsx index b6eb503ed2..40db04c288 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.tsx @@ -4,9 +4,10 @@ import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/In import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' import { CellContext } from 'uiSrc/components/base/layout/table' -import { getMetaAction } from '../../utils' +import { getMetaProps } from '../../utils' import type { AliasCellRendererProps } from './AliasCell.types' +import { HandleChangedInputProps } from '../types' export const AliasCellRenderer = ({ id, @@ -31,10 +32,7 @@ export const AliasCell = ({ column, }: CellContext) => { const { id, alias, name } = row.original - const handleChangedInput = getMetaAction(column) as ( - name: string, - value: string, - ) => void + const { handleChangedInput } = getMetaProps(column) return ( ) => { const { db = 0, id } = row.original - const handleChangedInput = getMetaAction(column) as ( - name: string, - value: string, - ) => void + const { handleChangedInput } = getMetaProps(column) return ( ( +}: PasswordCellRendererProps) => (
) => { const { password, id } = row.original - const handleChangedInput = getMetaAction(column) as ( - name: string, - value: string, - ) => void + const { handleChangedInput } = getMetaProps(column) return ( void diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.tsx index a9986c229d..be2c398971 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.tsx @@ -5,7 +5,8 @@ import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/In import type { UsernameCellRendererProps } from './UsernameCell.types' import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces' import { CellContext } from 'uiSrc/components/base/layout/table' -import { getMetaAction } from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/components/utils' +import { getMetaProps } from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/components/utils' +import { HandleChangedInputProps } from '../types' export const UsernameCellRenderer = ({ username, @@ -28,10 +29,7 @@ export const UsernameCell = ({ column, }: CellContext) => { const { username, id } = row.original - const handleChangedInput = getMetaAction(column) as ( - name: string, - value: string, - ) => void + const { handleChangedInput } = getMetaProps(column) return ( + export type SentinelMasterListCellType = ( props: SentinelMasterListCellTypeProps, ) => ReactElement | null + +export type HandleChangedInputProps = { + handleChangedInput: (name: string, value: string) => void +} \ No newline at end of file diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.spec.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.spec.ts index 78da6b4603..694c94ef69 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.spec.ts +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.spec.ts @@ -37,7 +37,7 @@ describe('getColumns', () => { expect(columns[0].size).toBe(50) }) - it('should pass handleChangedInput via meta.action for columns that need it', () => { + it('should pass handleChangedInput via meta.props for columns that need it', () => { const columns = getColumns(mockHandleChangedInput) const aliasColumn = columns.find( @@ -52,14 +52,22 @@ describe('getColumns', () => { const dbIndexColumn = columns.find( (col) => col.id === SentinelDatabaseIds.DatabaseIndex, ) - - expect(aliasColumn?.meta?.action).toBe(mockHandleChangedInput) - expect(usernameColumn?.meta?.action).toBe(mockHandleChangedInput) - expect(passwordColumn?.meta?.action).toBe(mockHandleChangedInput) - expect(dbIndexColumn?.meta?.action).toBe(mockHandleChangedInput) + debugger + expect(usernameColumn?.meta?.props.handleChangedInput).toBe( + mockHandleChangedInput, + ) + expect(passwordColumn?.meta?.props.handleChangedInput).toBe( + mockHandleChangedInput, + ) + expect(dbIndexColumn?.meta?.props.handleChangedInput).toBe( + mockHandleChangedInput, + ) + expect(aliasColumn?.meta?.props.handleChangedInput).toBe( + mockHandleChangedInput, + ) }) - it('should not include meta.action for columns that do not need it', () => { + it('should not include meta.props for columns that do not need it', () => { const columns = getColumns(mockHandleChangedInput) const primaryGroupColumn = columns.find( @@ -72,8 +80,8 @@ describe('getColumns', () => { (col) => col.id === SentinelDatabaseIds.NumberOfReplicas, ) - expect(primaryGroupColumn?.meta?.action).toBeUndefined() - expect(addressColumn?.meta?.action).toBeUndefined() - expect(numberOfReplicasColumn?.meta?.action).toBeUndefined() + expect(primaryGroupColumn?.meta?.props).toBeUndefined() + expect(addressColumn?.meta?.props).toBeUndefined() + expect(numberOfReplicasColumn?.meta?.props).toBeUndefined() }) }) diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.ts similarity index 90% rename from redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.tsx rename to redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.ts index 158d38f503..187cc8494a 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.ts @@ -43,9 +43,7 @@ export const getColumns = ( enableSorting: true, size: 200, cell: AliasCell, - meta: { - action: handleChangedInput, - }, + meta: { props: { handleChangedInput } }, }, { header: SentinelDatabaseTitles.Address, @@ -66,18 +64,14 @@ export const getColumns = ( id: SentinelDatabaseIds.Username, accessorKey: SentinelDatabaseIds.Username, cell: UsernameCell, - meta: { - action: handleChangedInput, - }, + meta: { props: { handleChangedInput } }, }, { header: SentinelDatabaseTitles.Password, id: SentinelDatabaseIds.Password, accessorKey: SentinelDatabaseIds.Password, cell: PasswordCell, - meta: { - action: handleChangedInput, - }, + meta: { props: { handleChangedInput } }, }, { header: SentinelDatabaseTitles.DatabaseIndex, @@ -85,9 +79,7 @@ export const getColumns = ( accessorKey: SentinelDatabaseIds.DatabaseIndex, size: 140, cell: DbIndexCell, - meta: { - action: handleChangedInput, - }, + meta: { props: { handleChangedInput } }, }, ] } diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/index.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/index.ts index 44d757b37f..46ae70ef19 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/index.ts +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/index.ts @@ -15,3 +15,8 @@ export const getMetaAction = ( ) } +export const getMetaProps = >( + column: Column, +): TProps => { + return (column.columnDef?.meta?.props as TProps) || ({} as TProps) +} \ No newline at end of file