Using new API endpoint for KSQLDB instead of deprecated one (#2098)

* using new API endpoint for KSQLDB instead of deprecated one

* adding type and interface for header and accessors

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

@@ -11,8 +11,15 @@ import PageHeading from 'components/common/PageHeading/PageHeading';
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { Button } from 'components/common/Button/Button';
+import { KsqlDescription } from 'redux/interfaces/ksqlDb';
 
-const headers = [
+export type KsqlDescriptionAccessor = keyof KsqlDescription;
+
+interface HeadersType {
+  Header: string;
+  accessor: KsqlDescriptionAccessor;
+}
+const headers: HeadersType[] = [
   { Header: 'Type', accessor: 'type' },
   { Header: 'Name', accessor: 'name' },
   { Header: 'Topic', accessor: 'topic' },

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

@@ -1,14 +1,16 @@
 import React from 'react';
+import { KsqlDescription } from 'redux/interfaces/ksqlDb';
+import { KsqlDescriptionAccessor } from 'components/KsqlDb/List/List';
 
 interface Props {
-  accessors: string[];
+  accessors: KsqlDescriptionAccessor[];
-  data: Record<string, string>;
+  data: KsqlDescription;
 }
 
 const ListItem: React.FC<Props> = ({ accessors, data }) => {
   return (
     <tr>
-      {accessors.map((accessor: string) => (
+      {accessors.map((accessor) => (
         <td key={accessor}>{data[accessor]}</td>
       ))}
     </tr>

kafka-ui-react-app/src/components/KsqlDb/List/__test__/ListItem.spec.tsx

@@ -3,6 +3,7 @@ import { clusterKsqlDbPath } from 'lib/paths';
 import { render, WithRoute } from 'lib/testHelpers';
 import { screen } from '@testing-library/dom';
 import ListItem from 'components/KsqlDb/List/ListItem';
+import { KsqlDescription } from 'redux/interfaces/ksqlDb';
 
 const clusterName = 'local';
 
@@ -10,7 +11,7 @@ const renderComponent = ({
   accessors,
   data,
 }: {
-  accessors: string[];
+  accessors: (keyof KsqlDescription)[];
   data: Record<string, string>;
 }) => {
   render(
@@ -24,7 +25,7 @@ const renderComponent = ({
 describe('KsqlDb List Item', () => {
   it('renders placeholder on one data', async () => {
     renderComponent({
-      accessors: ['accessors'],
+      accessors: ['accessors' as keyof KsqlDescription],
       data: { accessors: 'accessors text' },
     });
 

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

@@ -1,4 +1,8 @@
-import { KsqlCommandV2Response } from 'generated-sources';
+import {
+  KsqlCommandV2Response,
+  KsqlStreamDescription,
+  KsqlTableDescription,
+} from 'generated-sources';
 
 export interface KsqlTables {
   data: {
@@ -8,7 +12,16 @@ export interface KsqlTables {
 }
 
 export interface KsqlState {
-  tables: Dictionary<string>[];
+  tables: KsqlTableDescription[];
-  streams: Dictionary<string>[];
+  streams: KsqlStreamDescription[];
   executionResult: KsqlCommandV2Response | null;
 }
+
+export interface KsqlDescription {
+  type?: string;
+  name?: string;
+  topic?: string;
+  keyFormat?: string;
+  valueFormat?: string;
+  isWindowed?: boolean;
+}

kafka-ui-react-app/src/redux/reducers/ksqlDb/ksqlDbSlice.ts

@@ -26,15 +26,13 @@ export const transformKsqlResponse = (
   );
 
 const getTables = (clusterName: ClusterName) =>
-  ksqlDbApiClient.executeKsqlCommand({
+  ksqlDbApiClient.listTables({
     clusterName,
-    ksqlCommand: { ksql: 'SHOW TABLES;' },
   });
 
 const getStreams = (clusterName: ClusterName) =>
-  ksqlDbApiClient.executeKsqlCommand({
+  ksqlDbApiClient.listStreams({
     clusterName,
-    ksqlCommand: { ksql: 'SHOW STREAMS;' },
   });
 
 export const fetchKsqlDbTables = createAsyncThunk(
@@ -45,9 +43,18 @@ export const fetchKsqlDbTables = createAsyncThunk(
       getStreams(clusterName),
     ]);
 
+    const processedTables = tables.map((table) => ({
+      type: 'TABLE',
+      ...table,
+    }));
+    const processedStreams = streams.map((stream) => ({
+      type: 'STREAM',
+      ...stream,
+    }));
+
     return {
-      tables: tables.data ? transformKsqlResponse(tables.data) : [],
+      tables: processedTables,
-      streams: streams.data ? transformKsqlResponse(streams.data) : [],
+      streams: processedStreams,
     };
   }
 );