diff --git a/redisinsight/ui/src/components/base/layout/table/index.ts b/redisinsight/ui/src/components/base/layout/table/index.ts index 8bb5e30087..16c5584826 100644 --- a/redisinsight/ui/src/components/base/layout/table/index.ts +++ b/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 + 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/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..40db04c288 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/AliasCell/AliasCell.tsx @@ -0,0 +1,44 @@ +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 { getMetaProps } from '../../utils' + +import type { AliasCellRendererProps } from './AliasCell.types' +import { HandleChangedInputProps } from '../types' + +export const AliasCellRenderer = ({ + id, + alias, + name, + handleChangedInput, +}: AliasCellRendererProps) => ( +
+ +
+) + +export const AliasCell = ({ + row, + column, +}: CellContext) => { + const { id, alias, name } = row.original + const { handleChangedInput } = getMetaProps(column) + 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 56% 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..2952507073 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,16 @@ 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 { getMetaProps } from '../../utils' +import { HandleChangedInputProps } from '../types' -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 } = getMetaProps(column) + 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..9dcce46f49 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/PasswordCell/PasswordCell.tsx @@ -0,0 +1,40 @@ +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 { getMetaProps } from '../../utils' +import type { HandleChangedInputProps } from '../types' +import type { PasswordCellRendererProps } from './PasswordCell.types' + +export const PasswordCellRenderer = ({ + password, + id, + handleChangedInput, +}: PasswordCellRendererProps) => ( +
+ +
+) + +export const PasswordCell = ({ + row, + column, +}: CellContext) => { + const { password, id } = row.original + const { handleChangedInput } = getMetaProps(column) + 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 67% 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 index 7b312ae8ac..2e73049f5d 100644 --- 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 @@ -1,4 +1,4 @@ -export interface PasswordCellProps { +export interface PasswordCellRendererProps { password?: string id: string handleChangedInput: (name: string, value: string) => void 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..be2c398971 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/UsernameCell/UsernameCell.tsx @@ -0,0 +1,40 @@ +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 { getMetaProps } from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/components/utils' +import { HandleChangedInputProps } from '../types' + +export const UsernameCellRenderer = ({ + username, + id, + handleChangedInput, +}: UsernameCellRendererProps) => ( +
+ +
+) + +export const UsernameCell = ({ + row, + column, +}: CellContext) => { + const { username, id } = row.original + const { handleChangedInput } = getMetaProps(column) + 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..ae1770a0ab --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/columns/types.ts @@ -0,0 +1,17 @@ +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 + +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 new file mode 100644 index 0000000000..694c94ef69 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.spec.ts @@ -0,0 +1,87 @@ +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.props 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, + ) + 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.props 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?.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.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.ts new file mode 100644 index 0000000000..187cc8494a --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/getColumns.ts @@ -0,0 +1,85 @@ +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: { props: { 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: { props: { handleChangedInput } }, + }, + { + header: SentinelDatabaseTitles.Password, + id: SentinelDatabaseIds.Password, + accessorKey: SentinelDatabaseIds.Password, + cell: PasswordCell, + meta: { props: { handleChangedInput } }, + }, + { + header: SentinelDatabaseTitles.DatabaseIndex, + id: SentinelDatabaseIds.DatabaseIndex, + accessorKey: SentinelDatabaseIds.DatabaseIndex, + size: 140, + cell: DbIndexCell, + 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 new file mode 100644 index 0000000000..46ae70ef19 --- /dev/null +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/utils/index.ts @@ -0,0 +1,22 @@ +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.') + }) + ) +} + +export const getMetaProps = >( + column: Column, +): TProps => { + return (column.columnDef?.meta?.props as TProps) || ({} as TProps) +} \ No newline at end of file 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,