Refactor Sentinel databases column definitions

- Extracted column definitions to separate files
- Updated useSentinelDatabasesConfig.tsx with new structure

Author: pd-redis

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import {
+  CopyTextContainer,
+  CopyPublicEndpointText,
+  CopyBtn,
+} from 'uiSrc/components/auto-discover'
+import { RiTooltip } from 'uiSrc/components'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+const handleCopy = (text = '') => {
+  return navigator.clipboard.writeText(text)
+}
+
+export const AddressColumn = (): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Address',
+    id: 'host',
+    accessorKey: 'host',
+    enableSorting: true,
+    cell: ({
+      row: {
+        original: { host, port },
+      },
+    }) => {
+      const text = `${host}:${port}`
+      return (
+        <CopyTextContainer>
+          <CopyPublicEndpointText>{text}</CopyPublicEndpointText>
+          <RiTooltip
+            position="right"
+            content="Copy"
+            anchorClassName="copyPublicEndpointTooltip"
+          >
+            <CopyBtn
+              aria-label="Copy public endpoint"
+              onClick={() => handleCopy(text)}
+              tabIndex={-1}
+            />
+          </RiTooltip>
+        </CopyTextContainer>
+      )
+    },
+  }
+}

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const AliasColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Database Alias*',
+    id: 'alias',
+    accessorKey: 'alias',
+    enableSorting: true,
+    size: 200,
+    cell: ({
+      row: {
+        original: { id, alias, name },
+      },
+    }) => (
+      <div role="presentation">
+        <InputFieldSentinel
+          name={`alias-${id}`}
+          value={alias || name}
+          placeholder="Enter Database Alias"
+          inputType={SentinelInputFieldType.Text}
+          onChangedInput={handleChangedInput}
+          maxLength={500}
+        />
+      </div>
+    ),
+  }
+}

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import { InputFieldSentinel, RiTooltip } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+import { RiIcon } from 'uiSrc/components/base/icons'
+
+export const DbIndexColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Database Index',
+    id: 'db',
+    accessorKey: 'db',
+    size: 140,
+    cell: ({
+      row: {
+        original: { db = 0, id },
+      },
+    }) => (
+      <div role="presentation">
+        <InputFieldSentinel
+          min={0}
+          value={`${db}` || '0'}
+          name={`db-${id}`}
+          placeholder="Enter Index"
+          inputType={SentinelInputFieldType.Number}
+          onChangedInput={handleChangedInput}
+          append={
+            <RiTooltip
+              anchorClassName="inputAppendIcon"
+              position="left"
+              content="Select the Redis logical database to work with in Browser and Workbench."
+            >
+              <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
+            </RiTooltip>
+          }
+        />
+      </div>
+    ),
+  }
+}

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/NumberOfReplicasColumn.ts

@@ -0,0 +1,12 @@
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const NumberOfReplicasColumn = (): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: '# of replicas',
+    id: 'numberOfSlaves',
+    accessorKey: 'numberOfSlaves',
+    enableSorting: true,
+    size: 120,
+  }
+}

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const PasswordColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Password',
+    id: 'password',
+    accessorKey: 'password',
+    cell: ({
+      row: {
+        original: { password, id },
+      },
+    }) => (
+      <div role="presentation">
+        <InputFieldSentinel
+          value={password}
+          name={`password-${id}`}
+          placeholder="Enter Password"
+          inputType={SentinelInputFieldType.Password}
+          onChangedInput={handleChangedInput}
+        />
+      </div>
+    ),
+  }
+}

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { CellText } from 'uiSrc/components/auto-discover'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const PrimaryGroupColumn = (): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Primary Group',
+    id: 'name',
+    accessorKey: 'name',
+    enableSorting: true,
+    size: 200,
+    cell: ({
+      row: {
+        original: { name },
+      },
+    }) => <CellText data-testid={`primary-group_${name}`}>{name}</CellText>,
+  }
+}

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/SelectionColumn.ts

@@ -0,0 +1,6 @@
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+import { getSelectionColumn } from 'uiSrc/pages/autodiscover-cloud/utils'
+
+export const SelectionColumn = () => {
+  return getSelectionColumn<ModifiedSentinelMaster>()
+}

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const UsernameColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Username',
+    id: 'username',
+    accessorKey: 'username',
+    cell: ({
+      row: {
+        original: { username, id },
+      },
+    }) => (
+      <div role="presentation">
+        <InputFieldSentinel
+          value={username}
+          name={`username-${id}`}
+          placeholder="Enter Username"
+          inputType={SentinelInputFieldType.Text}
+          onChangedInput={handleChangedInput}
+        />
+      </div>
+    ),
+  }
+}

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/index.ts

@@ -0,0 +1,8 @@
+export * from './PrimaryGroupColumn'
+export * from './AliasColumn'
+export * from './AddressColumn'
+export * from './NumberOfReplicasColumn'
+export * from './UsernameColumn'
+export * from './PasswordColumn'
+export * from './DbIndexColumn'
+export * from './SelectionColumn'