Display additional fields in the table and overview (#2608)

* Display additional fields in the table and overview

* fix test errors

Co-authored-by: Oleg Shur <workshur@gmail.com>

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

@@ -124,6 +124,7 @@ const Details: React.FC = () => {
               <TableHeaderCell />
               <TableHeaderCell title="Version" />
               <TableHeaderCell title="ID" />
+              <TableHeaderCell title="Type" />
             </tr>
           </thead>
           <tbody>

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

@@ -26,6 +26,10 @@ const LatestVersionItem: React.FC<LatestVersionProps> = ({
         <S.MetaDataLabel>ID</S.MetaDataLabel>
         <p>{id}</p>
       </div>
+      <div>
+        <S.MetaDataLabel>Type</S.MetaDataLabel>
+        <p>{schemaType}</p>
+      </div>
       <div>
         <S.MetaDataLabel>Subject</S.MetaDataLabel>
         <p>{subject}</p>

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

@@ -25,7 +25,8 @@ const SchemaVersion: React.FC<SchemaVersionProps> = ({
           </IconButtonWrapper>
         </td>
         <td style={{ width: '6%' }}>{version}</td>
-        <td>{id}</td>
+        <td style={{ width: '6%' }}>{id}</td>
+        <td>{schemaType}</td>
       </tr>
       {isOpen && (
         <S.Wrapper>

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

@@ -17,7 +17,7 @@ const component = (
 describe('SchemaVersion', () => {
   it('renders versions', () => {
     render(component);
-    expect(screen.getAllByRole('cell')).toHaveLength(3);
+    expect(screen.getAllByRole('cell')).toHaveLength(4);
     expect(screen.queryByTestId('json-viewer')).not.toBeInTheDocument();
     userEvent.click(screen.getByRole('button'));
   });

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

@@ -57,6 +57,8 @@ const List: React.FC = () => {
   const columns = React.useMemo<ColumnDef<SchemaSubject>[]>(
     () => [
       { header: 'Subject', accessorKey: 'subject', cell: LinkCell },
+      { header: 'Id', accessorKey: 'id' },
+      { header: 'Type', accessorKey: 'schemaType' },
       { header: 'Version', accessorKey: 'version' },
       { header: 'Compatibility', accessorKey: 'compatibilityLevel' },
     ],

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

@@ -110,9 +110,10 @@ describe('List', () => {
         expect(screen.getByText(schemaVersion2.subject)).toBeInTheDocument();
       });
       it('handles onRowClick', () => {
-        const { subject, version, compatibilityLevel } = schemaVersion2;
+        const { id, schemaType, subject, version, compatibilityLevel } =
+          schemaVersion2;
         const row = screen.getByRole('row', {
-          name: `${subject} ${version} ${compatibilityLevel}`,
+          name: `${subject} ${id} ${schemaType} ${version} ${compatibilityLevel}`,
         });
         expect(row).toBeInTheDocument();
         userEvent.click(row);