Feedback

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

@@ -26,7 +26,7 @@ const Details: React.FC<DetailsProps> = ({
   isFetched,
 }) => {
   React.useEffect(() => {
-    fetchSchemaVersions(clusterName, schema.subject);
+    fetchSchemaVersions(clusterName, schema.subject as SchemaName);
   }, [fetchSchemaVersions, clusterName]);
   return (
     <div className="section">

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

@@ -4,7 +4,7 @@ import { RouteComponentProps, withRouter } from 'react-router-dom';
 import {
   getIsSchemaVersionFetched,
   getSchema,
-  getSchemaVersions,
+  getSortedSchemaVersions,
 } from 'redux/reducers/schemas/selectors';
 import { fetchSchemaVersions } from 'redux/actions';
 import Details from './Details';
@@ -25,7 +25,7 @@ const mapStateToProps = (
   }: OwnProps
 ) => ({
   schema: getSchema(state, subject),
-  versions: getSchemaVersions(state),
+  versions: getSortedSchemaVersions(state),
   isFetched: getIsSchemaVersionFetched(state),
   clusterName,
 });

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

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

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

@@ -1,7 +1,6 @@
 import { createSelector } from 'reselect';
 import { RootState, SchemasState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
-import { SchemaSubject } from 'generated-sources';
 
 const schemasState = ({ schemas }: RootState): SchemasState => schemas;
 
@@ -30,12 +29,8 @@ export const getSchemaList = createSelector(
   getIsSchemaListFetched,
   getAllNames,
   getSchemaMap,
-  (isFetched, allNames, byName) => {
-    if (!isFetched) {
-      return [];
-    }
-    return allNames.map((subject) => byName[subject as string]);
-  }
+  (isFetched, allNames, byName) =>
+    isFetched ? allNames.map((subject) => byName[subject]) : []
 );
 
 const getSchemaName = (_: RootState, subject: string) => subject;
@@ -46,10 +41,8 @@ export const getSchema = createSelector(
   (schemas, subject) => schemas[subject]
 );
 
-export const getSchemaVersions = createSelector(
+export const getSortedSchemaVersions = createSelector(
   schemasState,
   ({ currentSchemaVersions }) =>
-    currentSchemaVersions.sort(
-      (a: SchemaSubject, b: SchemaSubject) => a.id - b.id
-    )
+    currentSchemaVersions.sort((a, b) => a.id - b.id)
 );