Latest version added

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

@@ -0,0 +1,46 @@
+import { SchemaSubject } from 'generated-sources';
+import React from 'react';
+import { ClusterName } from 'redux/interfaces';
+import Breadcrumb from '../../common/Breadcrumb/Breadcrumb';
+import DetailsItem from './DetailsItem';
+import { clusterSchemasPath } from '../../../lib/paths';
+
+interface DetailsProps {
+  schema: SchemaSubject;
+  clusterName: ClusterName;
+}
+
+const Details: React.FC<DetailsProps> = ({ schema, clusterName }) => {
+  return (
+    <div className="section">
+      <div className="level">
+        <div className="level-item level-left">
+          <Breadcrumb
+            links={[
+              {
+                href: clusterSchemasPath(clusterName),
+                label: 'Schema Registry',
+              },
+            ]}
+          >
+            {schema.subject}
+          </Breadcrumb>
+        </div>
+      </div>
+      <div className="box">
+        <table className="table is-striped is-fullwidth">
+          <thead>
+            <tr>
+              <th>Latest Version</th>
+            </tr>
+          </thead>
+          <tbody>
+            <DetailsItem schema={schema} />
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Details;

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

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { ClusterName, RootState, TopicName } from 'redux/interfaces';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { getSchema, getSchemaList } from 'redux/reducers/schemas/selectors';
+import Details from './Details';
+
+interface RouteProps {
+  clusterName: ClusterName;
+  subject: string;
+}
+
+type OwnProps = RouteComponentProps<RouteProps>;
+
+const mapStateToProps = (
+  state: RootState,
+  {
+    match: {
+      params: { clusterName, subject },
+    },
+  }: OwnProps
+) => ({
+  schema: getSchema(state, subject),
+  clusterName,
+  subject,
+});
+
+export default withRouter(connect(mapStateToProps)(Details));

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { SchemaSubject } from 'generated-sources';
+
+interface DetailsItemProps {
+  schema: SchemaSubject;
+}
+
+const DetailsItem: React.FC<DetailsItemProps> = ({ schema }) => {
+  return (
+    <tr>
+      <td>{JSON.stringify(schema)}</td>
+    </tr>
+  );
+};
+
+export default DetailsItem;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 
 interface ListItemProps {
   subject?: string;
@@ -7,7 +8,16 @@ interface ListItemProps {
 const ListItem: React.FC<ListItemProps> = ({ subject }) => {
   return (
     <tr>
-      <td>{subject}</td>
+      <td>
+        <NavLink
+          exact
+          to={`schemas/${subject}/latest`}
+          activeClassName="is-active"
+          className="title is-6"
+        >
+          {subject}
+        </NavLink>
+      </td>
     </tr>
   );
 };

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

@@ -3,6 +3,7 @@ import { ClusterName } from 'redux/interfaces';
 import { Switch, Route, useParams } from 'react-router-dom';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import ListContainer from './List/ListContainer';
+import DetailsContainer from './Details/DetailsContainer';
 
 interface SchemasProps {
   isFetched: boolean;
@@ -31,6 +32,11 @@ const Schemas: React.FC<SchemasProps> = ({
           path="/ui/clusters/:clusterName/schemas"
           component={ListContainer}
         />
+        <Route
+          exact
+          path="/ui/clusters/:clusterName/schemas/:subject/latest"
+          component={DetailsContainer}
+        />
       </Switch>
     );
   }

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

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
-import { RootState } from '../../redux/interfaces';
-import { fetchSchemasByClusterName } from '../../redux/actions';
+import { RootState } from 'redux/interfaces';
+import { fetchSchemasByClusterName } from 'redux/actions';
+import { getIsSchemaListFetched } from 'redux/reducers/schemas/selectors';
 import Schemas from './Schemas';
-import { getIsSchemaListFetched } from '../../redux/reducers/schemas/selectors';
 
 const mapStateToProps = (state: RootState) => ({
   isFetched: getIsSchemaListFetched(state),

kafka-ui-react-app/src/lib/paths.ts

@@ -1,4 +1,5 @@
 import { ClusterName, TopicName } from 'redux/interfaces';
+import { SchemaSubject } from '../generated-sources';
 
 const clusterPath = (clusterName: ClusterName) => `/ui/clusters/${clusterName}`;
 
@@ -12,6 +13,10 @@ export const clusterConsumerGroupsPath = (clusterName: ClusterName) =>
   `${clusterPath(clusterName)}/consumer-groups`;
 export const clusterSchemasPath = (clusterName: ClusterName) =>
   `${clusterPath(clusterName)}/schemas`;
+// export const clusterSchemaPath = (
+//   clusterName: ClusterName,
+//   schemaName: string
+// ) => `${clusterSchemaPath(clusterName)}/${schemaName}/latest`;
 
 export const clusterTopicPath = (
   clusterName: ClusterName,

kafka-ui-react-app/src/redux/interfaces/schema.ts

@@ -1,6 +1,6 @@
 import { SchemaSubject } from 'generated-sources';
 
 export interface SchemasState {
-  byName: { [name: string]: SchemaSubject };
+  byName: { [subject: string]: SchemaSubject };
   allNames: string[];
 }

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

@@ -1,5 +1,10 @@
 import { createSelector } from 'reselect';
-import { FetchStatus, RootState, SchemasState } from 'redux/interfaces';
+import {
+  FetchStatus,
+  RootState,
+  SchemasState,
+  TopicName,
+} from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 
 const schemasState = ({ schemas }: RootState): SchemasState => schemas;
@@ -27,3 +32,11 @@ export const getSchemaList = createSelector(
     return allNames.map((subject) => byName[subject]);
   }
 );
+
+const getSchemaName = (_: RootState, subject: string) => subject;
+
+export const getSchema = createSelector(
+  getSchemaMap,
+  getSchemaName,
+  (schemas, subject) => schemas[subject]
+);