#2685 Migrate Topic Settings page to the new version of table component (#2834)

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

kafka-ui-react-app/src/components/Topics/Topic/Settings/ConfigListItem.tsx

@@ -1,24 +0,0 @@
-import { TopicConfig } from 'generated-sources';
-import React from 'react';
-
-import * as S from './Settings.styled';
-
-export interface ListItemProps {
-  config: TopicConfig;
-}
-
-const ConfigListItem: React.FC<ListItemProps> = ({
-  config: { name, value, defaultValue },
-}) => {
-  const hasCustomValue = !!defaultValue && value !== defaultValue;
-
-  return (
-    <S.Row $hasCustomValue={hasCustomValue}>
-      <td>{name}</td>
-      <td>{value}</td>
-      <td title="Default Value">{hasCustomValue && defaultValue}</td>
-    </S.Row>
-  );
-};
-
-export default ConfigListItem;

kafka-ui-react-app/src/components/Topics/Topic/Settings/Settings.styled.ts

@@ -1,13 +1,14 @@
 import styled, { css } from 'styled-components';
 
-export const Row = styled.tr<{ $hasCustomValue?: boolean }>(
-  ({ theme, $hasCustomValue }) => css`
-    & > td {
-      font-weight: ${$hasCustomValue ? 500 : 400};
-      &:last-child {
-        color: ${theme.configList.color};
-        font-weight: 400;
-      }
-    }
+export const Value = styled.span<{ $hasCustomValue?: boolean }>(
+  ({ $hasCustomValue }) => css`
+    font-weight: ${$hasCustomValue ? 500 : 400};
+  `
+);
+
+export const DefaultValue = styled.span(
+  ({ theme }) => css`
+    color: ${theme.configList.color};
+    font-weight: 400;
   `
 );

kafka-ui-react-app/src/components/Topics/Topic/Settings/Settings.tsx

@@ -1,31 +1,62 @@
 import React from 'react';
-import { Table } from 'components/common/table/Table/Table.styled';
-import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
+import Table from 'components/common/NewTable';
 import { RouteParamsClusterTopic } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useTopicConfig } from 'lib/hooks/api/topics';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { TopicConfig } from 'generated-sources';
 
-import ConfigListItem from './ConfigListItem';
+import * as S from './Settings.styled';
+
+const ValueCell: React.FC<CellContext<TopicConfig, unknown>> = ({
+  row,
+  renderValue,
+}) => {
+  const { defaultValue } = row.original;
+  const { value } = row.original;
+  const hasCustomValue = !!defaultValue && value !== defaultValue;
+
+  return (
+    <S.Value $hasCustomValue={hasCustomValue}>{renderValue<string>()}</S.Value>
+  );
+};
+
+const DefaultValueCell: React.FC<CellContext<TopicConfig, unknown>> = ({
+  row,
+  getValue,
+}) => {
+  const defaultValue = getValue<TopicConfig['defaultValue']>();
+  const { value } = row.original;
+  const hasCustomValue = !!defaultValue && value !== defaultValue;
+  return <S.DefaultValue>{hasCustomValue && defaultValue}</S.DefaultValue>;
+};
 
 const Settings: React.FC = () => {
   const props = useAppParams<RouteParamsClusterTopic>();
-  const { data } = useTopicConfig(props);
-  return (
-    <Table isFullwidth>
-      <thead>
-        <tr>
-          <TableHeaderCell title="Key" />
-          <TableHeaderCell title="Value" />
-          <TableHeaderCell title="Default Value" />
-        </tr>
-      </thead>
-      <tbody>
-        {data?.map((item) => (
-          <ConfigListItem key={item.name} config={item} />
-        ))}
-      </tbody>
-    </Table>
+  const { data = [] } = useTopicConfig(props);
+
+  const columns = React.useMemo<ColumnDef<TopicConfig>[]>(
+    () => [
+      {
+        header: 'Key',
+        accessorKey: 'name',
+        cell: ValueCell,
+      },
+      {
+        header: 'Value',
+        accessorKey: 'value',
+        cell: ValueCell,
+      },
+      {
+        header: 'Default Value',
+        accessorKey: 'defaultValue',
+        cell: DefaultValueCell,
+      },
+    ],
+    []
   );
+
+  return <Table columns={columns} data={data} />;
 };
 
 export default Settings;

kafka-ui-react-app/src/components/Topics/Topic/Settings/__test__/ConfigListItem.spec.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { render } from 'lib/testHelpers';
-import { screen } from '@testing-library/react';
-import ConfigListItem, {
-  ListItemProps,
-} from 'components/Topics/Topic/Settings/ConfigListItem';
-
-const setupComponent = (props: ListItemProps) => {
-  render(
-    <table>
-      <tbody>
-        <ConfigListItem {...props} />
-      </tbody>
-    </table>
-  );
-};
-
-const getName = () => screen.getByText('someName');
-const getValue = () => screen.getByText('someValue');
-
-it('renders with CustomValue', () => {
-  setupComponent({
-    config: {
-      name: 'someName',
-      value: 'someValue',
-      defaultValue: 'someDefaultValue',
-    },
-  });
-  expect(getName()).toBeInTheDocument();
-  expect(getName()).toHaveStyle('font-weight: 500');
-  expect(getValue()).toBeInTheDocument();
-  expect(getValue()).toHaveStyle('font-weight: 500');
-  expect(screen.getByText('someDefaultValue')).toBeInTheDocument();
-});
-
-it('renders without CustomValue', () => {
-  setupComponent({
-    config: { name: 'someName', value: 'someValue', defaultValue: 'someValue' },
-  });
-  expect(getName()).toBeInTheDocument();
-  expect(getName()).toHaveStyle('font-weight: 400');
-  expect(getValue()).toBeInTheDocument();
-  expect(getValue()).toHaveStyle('font-weight: 400');
-  expect(screen.getByTitle('Default Value')).toHaveTextContent('');
-});

kafka-ui-react-app/src/components/Topics/Topic/Settings/__test__/Settings.spec.tsx

@@ -13,11 +13,8 @@ jest.mock('lib/hooks/api/topics', () => ({
   useTopicConfig: jest.fn(),
 }));
 
-jest.mock('components/Topics/Topic/Settings/ConfigListItem', () => () => (
-  <tr>
-    <td>ConfigListItemMock</td>
-  </tr>
-));
+const getName = () => screen.getByText('compression.type');
+const getValue = () => screen.getByText('producer');
 
 describe('Settings', () => {
   const renderComponent = () => {
@@ -37,9 +34,10 @@ describe('Settings', () => {
     renderComponent();
   });
 
-  it('should check it returns null if no config is passed', () => {
-    expect(screen.getByRole('table')).toBeInTheDocument();
-    const items = screen.getAllByText('ConfigListItemMock');
-    expect(items.length).toEqual(topicConfigPayload.length);
+  it('renders without CustomValue', () => {
+    expect(getName()).toBeInTheDocument();
+    expect(getName()).toHaveStyle('font-weight: 400');
+    expect(getValue()).toBeInTheDocument();
+    expect(getValue()).toHaveStyle('font-weight: 400');
   });
 });