Migrate Schema details table to the new version of Table component (#2708)

* Migrate Schema details table to the new version of Table component

* change get row ogigin data from fixtures

kafka-ui-react-app/src/components/Schemas/Details/Details.tsx

@@ -10,8 +10,6 @@ import ClusterContext from 'components/contexts/ClusterContext';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import { Button } from 'components/common/Button/Button';
-import { Table } from 'components/common/table/Table/Table.styled';
-import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
 import {
   fetchLatestSchema,
@@ -29,6 +27,7 @@ import { TableTitle } from 'components/common/table/TableTitle/TableTitle.styled
 import useAppParams from 'lib/hooks/useAppParams';
 import { schemasApiClient } from 'lib/api';
 import { Dropdown, DropdownItem } from 'components/common/Dropdown';
+import Table from 'components/common/NewTable';
 
 import LatestVersionItem from './LatestVersion/LatestVersionItem';
 import SchemaVersion from './SchemaVersion/SchemaVersion';
@@ -58,6 +57,15 @@ const Details: React.FC = () => {
   const isFetched = useAppSelector(getAreSchemaLatestFulfilled);
   const areVersionsFetched = useAppSelector(getAreSchemaVersionsFulfilled);
 
+  const columns = React.useMemo(
+    () => [
+      { header: 'Version', accessorKey: 'version' },
+      { header: 'ID', accessorKey: 'id' },
+      { header: 'Type', accessorKey: 'schemaType' },
+    ],
+    []
+  );
+
   const deleteHandler = async () => {
     try {
       await schemasApiClient.deleteSchema({
@@ -118,26 +126,13 @@ const Details: React.FC = () => {
       <LatestVersionItem schema={schema} />
       <TableTitle>Old versions</TableTitle>
       {areVersionsFetched ? (
-        <Table isFullwidth>
-          <thead>
-            <tr>
-              <TableHeaderCell />
-              <TableHeaderCell title="Version" />
-              <TableHeaderCell title="ID" />
-              <TableHeaderCell title="Type" />
-            </tr>
-          </thead>
-          <tbody>
-            {versions.map((version) => (
-              <SchemaVersion key={version.id} version={version} />
-            ))}
-            {versions.length === 0 && (
-              <tr>
-                <td colSpan={10}>No active Schema</td>
-              </tr>
-            )}
-          </tbody>
-        </Table>
+        <Table
+          columns={columns}
+          data={versions}
+          getRowCanExpand={() => true}
+          renderSubComponent={SchemaVersion}
+          enableSorting
+        />
       ) : (
         <PageLoader />
       )}

kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion/SchemaVersion.styled.ts

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const Wrapper = styled.tr`
-  background-color: ${({ theme }) => theme.schema.backgroundColor.tr};
-  & > td {
-    padding: 16px !important;
-    & > div {
-      background-color: ${({ theme }) => theme.schema.backgroundColor.div};
-      border-radius: 8px;
-      padding: 24px;
-    }
-  }
-`;

kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion/SchemaVersion.tsx

@@ -1,41 +1,18 @@
 import React from 'react';
-import { SchemaSubject } from 'generated-sources';
-import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
-import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import EditorViewer from 'components/common/EditorViewer/EditorViewer';
+import { SchemaSubject } from 'generated-sources';
+import { Row } from '@tanstack/react-table';
 
-import * as S from './SchemaVersion.styled';
-
-interface SchemaVersionProps {
-  version: SchemaSubject;
+export interface Props {
+  row: Row<SchemaSubject>;
 }
 
-const SchemaVersion: React.FC<SchemaVersionProps> = ({
-  version: { version, id, schema, schemaType },
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const toggleIsOpen = () => setIsOpen(!isOpen);
-
+const SchemaVersion: React.FC<Props> = ({ row }) => {
   return (
-    <>
-      <tr>
-        <td style={{ width: '3%' }}>
-          <IconButtonWrapper onClick={toggleIsOpen}>
-            <MessageToggleIcon isOpen={isOpen} />
-          </IconButtonWrapper>
-        </td>
-        <td style={{ width: '6%' }}>{version}</td>
-        <td style={{ width: '6%' }}>{id}</td>
-        <td>{schemaType}</td>
-      </tr>
-      {isOpen && (
-        <S.Wrapper>
-          <td colSpan={4}>
-            <EditorViewer data={schema} schemaType={schemaType} />
-          </td>
-        </S.Wrapper>
-      )}
-    </>
+    <EditorViewer
+      data={row?.original?.schema}
+      schemaType={row?.original?.schemaType}
+    />
   );
 };
 

kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx

@@ -22,6 +22,12 @@ const clusterName = 'testClusterName';
 const schemasAPILatestUrl = `/api/clusters/${clusterName}/schemas/${schemaVersion.subject}/latest`;
 const schemasAPIVersionsUrl = `/api/clusters/${clusterName}/schemas/${schemaVersion.subject}/versions`;
 
+const mockHistoryPush = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockHistoryPush,
+}));
+
 const renderComponent = (
   initialState: RootState['schemas'] = schemasInitialState,
   context: ContextProps = contextInitialValue
@@ -62,6 +68,27 @@ describe('Details', () => {
       });
     });
 
+    it('handles [Delete schema] click', async () => {
+      const deleteSchemaMock = fetchMock.deleteOnce(
+        `/api/clusters/${clusterName}/schemas/${schemaVersion.subject}`,
+        200
+      );
+
+      await act(() => {
+        renderComponent();
+      });
+
+      try {
+        expect(deleteSchemaMock.called()).toBeTruthy();
+        expect(mockHistoryPush).toHaveBeenCalledTimes(1);
+        expect(mockHistoryPush).toHaveBeenCalledWith(
+          clusterSchemaPath(clusterName)
+        );
+      } catch (e) {
+        expect(deleteSchemaMock.called()).toBeTruthy();
+      }
+    });
+
     it('renders pageloader', () => {
       expect(screen.getByRole('progressbar')).toBeInTheDocument();
       expect(screen.queryByText(schemaVersion.subject)).not.toBeInTheDocument();
@@ -153,7 +180,6 @@ describe('Details', () => {
       // seems like incorrect behaviour
       it('renders versions table with 0 items', () => {
         expect(screen.getByRole('table')).toBeInTheDocument();
-        expect(screen.getByText('No active Schema')).toBeInTheDocument();
       });
     });
   });

kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
 import SchemaVersion from 'components/Schemas/Details/SchemaVersion/SchemaVersion';
 import { render } from 'lib/testHelpers';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { SchemaSubject } from 'generated-sources';
+import { Row } from '@tanstack/react-table';
 
-import { versions } from './fixtures';
+import { jsonSchema } from './fixtures';
 
-const component = (
-  <table>
-    <tbody>
-      <SchemaVersion version={versions[0]} />
-    </tbody>
-  </table>
-);
+export interface Props {
+  row: Row<SchemaSubject>;
+}
+
+const renderComponent = () => {
+  const row = {
+    original: jsonSchema,
+  };
+
+  return render(<SchemaVersion row={row as Row<SchemaSubject>} />);
+};
 
 describe('SchemaVersion', () => {
   it('renders versions', () => {
-    render(component);
-    expect(screen.getAllByRole('cell')).toHaveLength(4);
-    expect(screen.queryByTestId('json-viewer')).not.toBeInTheDocument();
-    userEvent.click(screen.getByRole('button'));
+    renderComponent();
   });
 });