Repository: provectus/kafka-ui
Issue: SR: Display additional fields in the table and overview
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

SR table: display schema type and id as a separate columns
SR subject overview: display type

Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx b/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
index 847079f3da7..fb27336493a 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
+++ b/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>
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.tsx b/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.tsx
index 5cc472d9f0f..21d443a68c8 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.tsx
+++ b/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>
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion/SchemaVersion.tsx b/kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion/SchemaVersion.tsx
index 875627d452c..1a729a6eaec 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion/SchemaVersion.tsx
+++ b/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>
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx b/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx
index 617c8cc4259..ccd50cd957f 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx
+++ b/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'));
   });
diff --git a/kafka-ui-react-app/src/components/Schemas/List/List.tsx b/kafka-ui-react-app/src/components/Schemas/List/List.tsx
index 8a1344f55e6..1baae27347e 100644
--- a/kafka-ui-react-app/src/components/Schemas/List/List.tsx
+++ b/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' },
     ],
diff --git a/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx b/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx
index cefb32819ac..a6636e5d876 100644
--- a/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx
+++ b/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);


Test patch: