Migrate KSQL to RQ. Get rid of redux reducer (#3478)

* Migrate KSQL to RQ. Get rid of redux reducer

* refactor react-ace using

* get rid of deadcode

* ace

* Fix add/remove stream props

* ace

* Fix Clear result handler

* Fix error handler

* rollback removal of yup async validation helper

* reduce re-renders

* move ace to separate chunk

* upd KsqlQueryForm

* feedback

---------

Co-authored-by: VladSenyuta <[email protected]>

Author: workshur

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/ksqlDb/KsqlQueryForm.java

@@ -16,7 +16,6 @@
 import static com.codeborne.selenide.Selenide.$x;
 
 public class KsqlQueryForm extends BasePage {
-    protected SelenideElement pageTitle = $x("//h1[text()='Query']");
     protected SelenideElement clearBtn = $x("//div/button[text()='Clear']");
     protected SelenideElement executeBtn = $x("//div/button[text()='Execute']");
     protected SelenideElement stopQueryBtn = $x("//div/button[text()='Stop query']");
@@ -31,7 +30,7 @@ public class KsqlQueryForm extends BasePage {
     @Step
     public KsqlQueryForm waitUntilScreenReady() {
         waitUntilSpinnerDisappear();
-        pageTitle.shouldBe(Condition.visible);
+        executeBtn.shouldBe(Condition.visible);
         return this;
     }
 

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

@@ -30,6 +30,9 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       suspense: true,
+      onError(error) {
+        showServerError(error as Response);
+      },
     },
     mutations: {
       onError(error) {

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

@@ -1,15 +1,109 @@
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
-import { clusterKsqlDbQueryRelativePath } from 'lib/paths';
-import List from 'components/KsqlDb/List/List';
 import Query from 'components/KsqlDb/Query/Query';
+import useAppParams from 'lib/hooks/useAppParams';
+import * as Metrics from 'components/common/Metrics';
+import {
+  clusterKsqlDbQueryRelativePath,
+  clusterKsqlDbStreamsPath,
+  clusterKsqlDbStreamsRelativePath,
+  clusterKsqlDbTablesPath,
+  clusterKsqlDbTablesRelativePath,
+  ClusterNameRoute,
+} from 'lib/paths';
+import PageHeading from 'components/common/PageHeading/PageHeading';
+import { ActionButton } from 'components/common/ActionComponent';
+import Navbar from 'components/common/Navigation/Navbar.styled';
+import { Navigate, NavLink, Route, Routes } from 'react-router-dom';
+import { Action, ResourceType } from 'generated-sources';
+import { useKsqlkDb } from 'lib/hooks/api/ksqlDb';
+import 'ace-builds/src-noconflict/ace';
+
+import TableView from './TableView';
 
 const KsqlDb: React.FC = () => {
+  const { clusterName } = useAppParams<ClusterNameRoute>();
+
+  const [tables, streams] = useKsqlkDb(clusterName);
+
+  const isFetching = tables.isFetching || streams.isFetching;
+
   return (
-    <Routes>
-      <Route path="/*" element={<List />} />
-      <Route path={clusterKsqlDbQueryRelativePath} element={<Query />} />
-    </Routes>
+    <>
+      <PageHeading text="KSQL DB">
+        <ActionButton
+          to={clusterKsqlDbQueryRelativePath}
+          buttonType="primary"
+          buttonSize="M"
+          permission={{
+            resource: ResourceType.KSQL,
+            action: Action.EXECUTE,
+          }}
+        >
+          Execute KSQL Request
+        </ActionButton>
+      </PageHeading>
+      <Metrics.Wrapper>
+        <Metrics.Section>
+          <Metrics.Indicator
+            label="Tables"
+            title="Tables"
+            fetching={isFetching}
+          >
+            {tables.isSuccess ? tables.data.length : '-'}
+          </Metrics.Indicator>
+          <Metrics.Indicator
+            label="Streams"
+            title="Streams"
+            fetching={isFetching}
+          >
+            {streams.isSuccess ? streams.data.length : '-'}
+          </Metrics.Indicator>
+        </Metrics.Section>
+      </Metrics.Wrapper>
+      <div>
+        <Navbar role="navigation">
+          <NavLink
+            to={clusterKsqlDbTablesPath(clusterName)}
+            className={({ isActive }) => (isActive ? 'is-active' : '')}
+            end
+          >
+            Tables
+          </NavLink>
+          <NavLink
+            to={clusterKsqlDbStreamsPath(clusterName)}
+            className={({ isActive }) => (isActive ? 'is-active' : '')}
+            end
+          >
+            Streams
+          </NavLink>
+        </Navbar>
+        <Routes>
+          <Route
+            index
+            element={<Navigate to={clusterKsqlDbTablesRelativePath} />}
+          />
+          <Route
+            path={clusterKsqlDbTablesRelativePath}
+            element={
+              <TableView
+                fetching={tables.isFetching}
+                rows={tables.data || []}
+              />
+            }
+          />
+          <Route
+            path={clusterKsqlDbStreamsRelativePath}
+            element={
+              <TableView
+                fetching={streams.isFetching}
+                rows={streams.data || []}
+              />
+            }
+          />
+          <Route path={clusterKsqlDbQueryRelativePath} element={<Query />} />
+        </Routes>
+      </div>
+    </>
   );
 };