Index page fixed

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

@@ -1,10 +1,10 @@
+import { SchemaSubject } from 'generated-sources';
 import React from 'react';
-import { Schema } from 'redux/interfaces';
 import Breadcrumb from '../../common/Breadcrumb/Breadcrumb';
 import ListItem from './ListItem';
 
 interface ListProps {
-  schemas: Schema[];
+  schemas: SchemaSubject[];
 }
 
 const List: React.FC<ListProps> = ({ schemas }) => {
@@ -19,8 +19,8 @@ const List: React.FC<ListProps> = ({ schemas }) => {
             </tr>
           </thead>
           <tbody>
-            {schemas.map(({ name }) => (
-              <ListItem schemaName={name} />
+            {schemas.map(({ subject }) => (
+              <ListItem subject={subject} />
             ))}
           </tbody>
         </table>

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

@@ -1,13 +1,13 @@
 import React from 'react';
 
 interface ListItemProps {
-  schemaName: string;
+  subject?: string;
 }
 
-const ListItem: React.FC<ListItemProps> = ({ schemaName }) => {
+const ListItem: React.FC<ListItemProps> = ({ subject }) => {
   return (
     <tr>
-      <td>{schemaName}</td>
+      <td>{subject}</td>
     </tr>
   );
 };

kafka-ui-react-app/src/redux/actions/actions.ts

@@ -1,6 +1,6 @@
 import { createAsyncAction } from 'typesafe-actions';
 import ActionType from 'redux/actionType';
-import { TopicName, ConsumerGroupID, Schema } from 'redux/interfaces';
+import { TopicName, ConsumerGroupID } from 'redux/interfaces';
 
 import {
   Cluster,
@@ -14,6 +14,7 @@ import {
   TopicMessage,
   ConsumerGroup,
   ConsumerGroupDetails,
+  SchemaSubject,
 } from 'generated-sources';
 
 export const fetchClusterStatsAction = createAsyncAction(
@@ -102,4 +103,4 @@ export const fetchSchemasByClusterNameAction = createAsyncAction(
   ActionType.GET_CLUSTER_SCHEMAS__REQUEST,
   ActionType.GET_CLUSTER_SCHEMAS__SUCCESS,
   ActionType.GET_CLUSTER_SCHEMAS__FAILURE
-)<undefined, Schema[], undefined>();
+)<undefined, SchemaSubject[], undefined>();

kafka-ui-react-app/src/redux/actions/thunks.ts

@@ -1,3 +1,4 @@
+import { flatten } from 'lodash';
 import {
   ApiClustersApi,
   Configuration,
@@ -5,6 +6,7 @@ import {
   Topic,
   TopicFormData,
   TopicConfig,
+  SchemaSubject,
 } from 'generated-sources';
 import {
   ConsumerGroupID,
@@ -15,7 +17,6 @@ import {
   TopicMessageQueryParams,
   TopicFormFormattedParams,
   TopicFormDataRaw,
-  Schema,
 } from 'redux/interfaces';
 
 import { BASE_PARAMS } from 'lib/constants';
@@ -258,9 +259,15 @@ export const fetchSchemasByClusterName = (
   dispatch(actions.fetchSchemasByClusterNameAction.request());
   try {
     const schemaNames = await apiClient.getSchemas({ clusterName });
-    const schemas: Schema[] = schemaNames.map((name) => ({ name }));
 
-    dispatch(actions.fetchSchemasByClusterNameAction.success(schemas));
+    // TODO: Remove me after API refactoring
+    const schemas: SchemaSubject[][] = await Promise.all(
+      schemaNames.map((schemaName) =>
+        apiClient.getLatestSchema({ clusterName, schemaName })
+      )
+    );
+
+    dispatch(actions.fetchSchemasByClusterNameAction.success(flatten(schemas)));
   } catch (e) {
     dispatch(actions.fetchSchemasByClusterNameAction.failure());
   }

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

@@ -1,10 +1,6 @@
 import { SchemaSubject } from 'generated-sources';
 
-export interface Schema extends Partial<SchemaSubject> {
-  name: string;
-}
-
 export interface SchemasState {
-  byName: { [name: string]: Schema };
+  byName: { [name: string]: SchemaSubject };
   allNames: string[];
 }

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

@@ -1,5 +1,6 @@
+import { SchemaSubject } from 'generated-sources';
 import ActionType from 'redux/actionType';
-import { Action, Schema, SchemasState } from 'redux/interfaces';
+import { Action, SchemasState } from 'redux/interfaces';
 
 export const initialState: SchemasState = {
   byName: {},
@@ -8,27 +9,27 @@ export const initialState: SchemasState = {
 
 const updateSchemaList = (
   state: SchemasState,
-  payload: Schema[]
+  payload: SchemaSubject[]
 ): SchemasState => {
   const initialMemo: SchemasState = {
     ...state,
     allNames: [],
   };
 
-  return payload.reduce(
-    (memo: SchemasState, schema) => ({
+  return payload.reduce((memo: SchemasState, schema) => {
+    if (!schema.subject) return memo;
+    return {
       ...memo,
       byName: {
         ...memo.byName,
-        [schema.name]: {
-          ...memo.byName[schema.name],
-          name: schema.name,
+        [schema.subject]: {
+          ...memo.byName[schema.subject],
+          ...schema,
         },
       },
-      allNames: [...memo.allNames, schema.name],
-    }),
-    initialMemo
-  );
+      allNames: [...memo.allNames, schema.subject],
+    };
+  }, initialMemo);
 };
 
 const reducer = (state = initialState, action: Action): SchemasState => {

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

@@ -24,6 +24,6 @@ export const getSchemaList = createSelector(
     if (!isFetched) {
       return [];
     }
-    return allNames.map((schemaName) => byName[schemaName]);
+    return allNames.map((subject) => byName[subject]);
   }
 );