Details component and packages updated

kafka-ui-react-app/package-lock.json

@@ -11697,11 +11697,6 @@
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true
     },
-    "json-formatter-js": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/json-formatter-js/-/json-formatter-js-2.3.4.tgz",
-      "integrity": "sha512-gmAzYRtPRmYzeAT4T7+t3NhTF89JOAIioCVDddl9YDb3ls3kWcskirafw/MZGJaRhEU6fRimGJHl7CC7gaAI2Q=="
-    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",

kafka-ui-react-app/package.json

@@ -10,7 +10,6 @@
     "eslint-import-resolver-node": "^0.3.4",
     "eslint-import-resolver-typescript": "^2.3.0",
     "immer": "^8.0.1",
-    "json-formatter-js": "^2.3.4",
     "lodash": "^4.17.20",
     "pretty-ms": "^6.0.1",
     "react": "^17.0.1",

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

@@ -5,12 +5,13 @@ import { clusterSchemasPath } from 'lib/paths';
 import Breadcrumb from '../../common/Breadcrumb/Breadcrumb';
 import SchemaVersion from './SchemaVersion';
 import LatestVersionItem from './LatestVersionItem';
+import PageLoader from '../../common/PageLoader/PageLoader';
 
 interface DetailsProps {
   schema: SchemaSubject;
   clusterName: ClusterName;
-  subject: SchemaName;
   versions: SchemaSubject[];
+  isFetched: boolean;
   fetchSchemaVersions: (
     clusterName: ClusterName,
     schemaName: SchemaName
@@ -21,13 +22,12 @@ const Details: React.FC<DetailsProps> = ({
   schema,
   clusterName,
   fetchSchemaVersions,
-  subject,
   versions,
+  isFetched,
 }) => {
   React.useEffect(() => {
-    fetchSchemaVersions(clusterName, subject);
+    fetchSchemaVersions(clusterName, schema.subject);
   }, [fetchSchemaVersions, clusterName]);
-
   return (
     <div className="section">
       <div className="level">
@@ -58,7 +58,7 @@ const Details: React.FC<DetailsProps> = ({
             <button
               className="button is-primary is-small level-item"
               type="button"
-              title="work in progress"
+              title="in development"
               disabled
             >
               Create Schema
@@ -66,7 +66,7 @@ const Details: React.FC<DetailsProps> = ({
             <button
               className="button is-warning is-small level-item"
               type="button"
-              title="work in progress"
+              title="in development"
               disabled
             >
               Update Schema
@@ -74,7 +74,7 @@ const Details: React.FC<DetailsProps> = ({
             <button
               className="button is-danger is-small level-item"
               type="button"
-              title="work in progress"
+              title="in development"
               disabled
             >
               Delete
@@ -83,22 +83,26 @@ const Details: React.FC<DetailsProps> = ({
         </div>
         <LatestVersionItem schema={schema} />
       </div>
-      <div className="box">
-        <table className="table is-striped is-fullwidth">
-          <thead>
-            <tr>
-              <th>Version</th>
-              <th>ID</th>
-              <th>Schema</th>
-            </tr>
-          </thead>
-          <tbody>
-            {versions.map((version) => (
-              <SchemaVersion key={version.id} version={version} />
-            ))}
-          </tbody>
-        </table>
-      </div>
+      {isFetched ? (
+        <div className="box">
+          <table className="table is-striped is-fullwidth">
+            <thead>
+              <tr>
+                <th>Version</th>
+                <th>ID</th>
+                <th>Schema</th>
+              </tr>
+            </thead>
+            <tbody>
+              {versions.map((version) => (
+                <SchemaVersion key={version.id} version={version} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <PageLoader />
+      )}
     </div>
   );
 };

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

@@ -1,7 +1,11 @@
 import { connect } from 'react-redux';
 import { ClusterName, RootState } from 'redux/interfaces';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { getSchema, getSchemaVersions } from 'redux/reducers/schemas/selectors';
+import {
+  getIsSchemaVersionFetched,
+  getSchema,
+  getSchemaVersions,
+} from 'redux/reducers/schemas/selectors';
 import { fetchSchemaVersions } from 'redux/actions';
 import Details from './Details';
 
@@ -22,8 +26,8 @@ const mapStateToProps = (
 ) => ({
   schema: getSchema(state, subject),
   versions: getSchemaVersions(state),
+  isFetched: getIsSchemaVersionFetched(state),
   clusterName,
-  subject,
 });
 
 const mapDispatchToProps = {

kafka-ui-react-app/src/redux/reducers/schemas/selectors.ts

@@ -12,11 +12,20 @@ const getSchemaListFetchingStatus = createFetchingSelector(
   'GET_CLUSTER_SCHEMAS'
 );
 
+const getSchemaVersionsFetchingStatus = createFetchingSelector(
+  'GET_SCHEMA_VERSIONS'
+);
+
 export const getIsSchemaListFetched = createSelector(
   getSchemaListFetchingStatus,
   (status) => status === 'fetched'
 );
 
+export const getIsSchemaVersionFetched = createSelector(
+  getSchemaVersionsFetchingStatus,
+  (status) => status === 'fetched'
+);
+
 export const getSchemaList = createSelector(
   getIsSchemaListFetched,
   getAllNames,