fix error on details page of schema reg section load

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

@@ -8,6 +8,7 @@ import LatestVersionItem from './LatestVersionItem';
 import PageLoader from '../../common/PageLoader/PageLoader';
 
 export interface DetailsProps {
+  subject: SchemaName;
   schema: SchemaSubject;
   clusterName: ClusterName;
   versions: SchemaSubject[];
@@ -19,6 +20,7 @@ export interface DetailsProps {
 }
 
 const Details: React.FC<DetailsProps> = ({
+  subject,
   schema,
   clusterName,
   fetchSchemaVersions,
@@ -26,8 +28,9 @@ const Details: React.FC<DetailsProps> = ({
   isFetched,
 }) => {
   React.useEffect(() => {
-    fetchSchemaVersions(clusterName, schema.subject as SchemaName);
+    fetchSchemaVersions(clusterName, subject);
   }, [fetchSchemaVersions, clusterName]);
+
   return (
     <div className="section">
       <div className="level">
@@ -39,9 +42,11 @@ const Details: React.FC<DetailsProps> = ({
             },
           ]}
         >
-          {schema.subject}
+          {subject}
         </Breadcrumb>
       </div>
+      {isFetched ? (
+        <>
           <div className="box">
             <div className="level">
               <div className="level-left">
@@ -75,7 +80,6 @@ const Details: React.FC<DetailsProps> = ({
             </div>
             <LatestVersionItem schema={schema} />
           </div>
-      {isFetched ? (
           <div className="box">
             <table className="table is-striped is-fullwidth">
               <thead>
@@ -92,6 +96,7 @@ const Details: React.FC<DetailsProps> = ({
               </tbody>
             </table>
           </div>
+        </>
       ) : (
         <PageLoader />
       )}

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

@@ -24,6 +24,7 @@ const mapStateToProps = (
     },
   }: OwnProps
 ) => ({
+  subject,
   schema: getSchema(state, subject),
   versions: getSortedSchemaVersions(state),
   isFetched: getIsSchemaVersionFetched(state),

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

@@ -16,9 +16,7 @@ exports[`Details View Initial state matches snapshot 1`] = `
           },
         ]
       }
-    >
+    />
-      test
-    </Breadcrumb>
   </div>
   <div
     className="box"
@@ -123,70 +121,6 @@ exports[`Details View when page with schema versions is loading matches snapshot
           },
         ]
       }
-    >
-      test
-    </Breadcrumb>
-  </div>
-  <div
-    className="box"
-  >
-    <div
-      className="level"
-    >
-      <div
-        className="level-left"
-      >
-        <div
-          className="level-item"
-        >
-          <div
-            className="mr-1"
-          >
-            <b>
-              Latest Version
-            </b>
-          </div>
-          <div
-            className="tag is-info is-light"
-            title="Version"
-          >
-            #
-            1
-          </div>
-        </div>
-      </div>
-      <div
-        className="level-right"
-      >
-        <button
-          className="button is-warning is-small level-item"
-          disabled={true}
-          title="in development"
-          type="button"
-        >
-          Update Schema
-        </button>
-        <button
-          className="button is-danger is-small level-item"
-          disabled={true}
-          title="in development"
-          type="button"
-        >
-          Delete
-        </button>
-      </div>
-    </div>
-    <LatestVersionItem
-      schema={
-        Object {
-          "compatibilityLevel": "BACKWARD",
-          "id": 1,
-          "schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
-          "schemaType": "JSON",
-          "subject": "test",
-          "version": "1",
-        }
-      }
     />
   </div>
   <PageLoader />
@@ -209,9 +143,7 @@ exports[`Details View when page with schema versions loaded when schema has vers
           },
         ]
       }
-    >
+    />
-      test
-    </Breadcrumb>
   </div>
   <div
     className="box"
@@ -343,9 +275,7 @@ exports[`Details View when page with schema versions loaded when versions are em
           },
         ]
       }
-    >
+    />
-      test
-    </Breadcrumb>
   </div>
   <div
     className="box"