From 070fba4d08c7667b3b21bfb77a4ab3066c91fafb Mon Sep 17 00:00:00 2001
From: Robert Azizbekyan <103438454+rAzizbekyan@users.noreply.github.com>
Date: Mon, 6 Jun 2022 12:32:47 +0400
Subject: [PATCH] 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
---
 .../src/components/KsqlDb/List/List.tsx       |  9 ++++++++-
 .../src/components/KsqlDb/List/ListItem.tsx   |  8 +++++---
 .../KsqlDb/List/__test__/ListItem.spec.tsx    |  5 +++--
 .../src/redux/interfaces/ksqlDb.ts            | 19 ++++++++++++++++---
 .../src/redux/reducers/ksqlDb/ksqlDbSlice.ts  | 19 +++++++++++++------
 5 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
index 1c0d5ffcc1..8a0e2b42a9 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/List.tsx
+++ b/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' },
diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
index 65390caa2c..59ec84095e 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/ListItem.tsx
+++ b/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[];
-  data: Record<string, string>;
+  accessors: KsqlDescriptionAccessor[];
+  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>
diff --git a/kafka-ui-react-app/src/components/KsqlDb/List/__test__/ListItem.spec.tsx b/kafka-ui-react-app/src/components/KsqlDb/List/__test__/ListItem.spec.tsx
index 0942ee8918..9014d06d4f 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/List/__test__/ListItem.spec.tsx
+++ b/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' },
     });
 
diff --git a/kafka-ui-react-app/src/redux/interfaces/ksqlDb.ts b/kafka-ui-react-app/src/redux/interfaces/ksqlDb.ts
index 2290fb3ac8..93c5373368 100644
--- a/kafka-ui-react-app/src/redux/interfaces/ksqlDb.ts
+++ b/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>[];
-  streams: Dictionary<string>[];
+  tables: KsqlTableDescription[];
+  streams: KsqlStreamDescription[];
   executionResult: KsqlCommandV2Response | null;
 }
+
+export interface KsqlDescription {
+  type?: string;
+  name?: string;
+  topic?: string;
+  keyFormat?: string;
+  valueFormat?: string;
+  isWindowed?: boolean;
+}
diff --git a/kafka-ui-react-app/src/redux/reducers/ksqlDb/ksqlDbSlice.ts b/kafka-ui-react-app/src/redux/reducers/ksqlDb/ksqlDbSlice.ts
index 33f65a8175..84dd356606 100644
--- a/kafka-ui-react-app/src/redux/reducers/ksqlDb/ksqlDbSlice.ts
+++ b/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) : [],
-      streams: streams.data ? transformKsqlResponse(streams.data) : [],
+      tables: processedTables,
+      streams: processedStreams,
     };
   }
 );