feat(FE): Add schema registry page

src/App.tsx

@@ -2,7 +2,7 @@ import { AppShell, MantineProvider } from "@mantine/core";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { useAppState } from "./providers/app-state-provider";
 import { SideBar } from "./components";
-import { Clusters, Settings, TopicsPage } from "./pages";
+import { Clusters, Settings, TopicsPage, SchemasPage } from "./pages";
 import { ModalsProvider } from "@mantine/modals";
 import { NotificationsProvider } from "@mantine/notifications";
 
@@ -27,8 +27,18 @@ export const App = () => {
             <Routes>
               <Route index element={<Navigate to="/clusters/" replace />} />
               <Route path="clusters/*" element={<Clusters />} />
-              <Route path="settings" element={<Settings />} />
               <Route path="topics" element={<TopicsPage />} />
+              <Route path="schemas" element={<SchemasPage />} />
+              <Route
+                path="consumers"
+                element={
+                  <div>
+                    {" "}
+                    <h1>WIP</h1>
+                  </div>
+                }
+              />
+              <Route path="settings" element={<Settings />} />
             </Routes>
           </AppShell>
         </ModalsProvider>

src/components/sidebar.tsx

@@ -41,13 +41,13 @@ export const SideBar = ({ clusterName }: { clusterName?: string }) => (
               label={"Topics"}
             />
             <SidebarItem
-              url={"schema-registry"}
+              url={"schemas"}
               icon={<IconSatellite size={16} />}
               color={"green"}
               label={"Schema Registry"}
             />
             <SidebarItem
-              url={"consumer-groups"}
+              url={"consumers"}
               icon={<IconCircleDashed size={16} />}
               color={"violet"}
               label={"Consumer groups"}

src/pages/index.ts

@@ -1,3 +1,4 @@
 export * from "./settings/settings";
 export * from "./clusters/routes";
 export * from "./topics/main";
+export * from "./schema-registry/main";

src/pages/schema-registry/main.tsx

@@ -0,0 +1,19 @@
+import { Group } from "@mantine/core";
+import { useState } from "react";
+import { Schema } from "./schema";
+import { SchemaList } from "./schema-list";
+
+export const SchemasPage = () => {
+  const [state, setState] = useState<{ activeSchema?: string }>({});
+  const { activeSchema } = state;
+  return (
+    <Group grow={true} align={"stretch"} position={"center"} noWrap={true}>
+      <SchemaList
+        onTopicSelected={(activeSchema) => {
+          setState({ ...state, activeSchema: activeSchema });
+        }}
+      />
+      {activeSchema && <Schema schemaName={activeSchema} />}
+    </Group>
+  );
+};

src/pages/schema-registry/schema-list.tsx

@@ -0,0 +1,50 @@
+import { useMemo, useState } from "react";
+import { Cluster } from "../../models/kafka";
+import { useAppState, notifyAlert, notifySuccess } from "../../providers";
+import { ItemList } from "../common";
+
+function getSchemaNamesList(_: Cluster): Promise<string[]> {
+  return Promise.resolve([]);
+  //todo: return invoke<TopicInfo[]>("list_schemas", { cluster });
+}
+
+export const SchemaList = ({
+  onTopicSelected,
+}: {
+  onTopicSelected: (topicName: string) => void;
+}) => {
+  const { appState } = useAppState();
+  const [state, setState] = useState<{ schemas: string[]; search?: string; loading: boolean }>({
+    schemas: [],
+    loading: true,
+  });
+
+  const updateSchemasList = () => {
+    if (appState.activeCluster) {
+      setState({ ...state, loading: true });
+      getSchemaNamesList(appState.activeCluster)
+        .then((schemas) => setState({ schemas, loading: false }))
+        .then((_) => notifySuccess("List of schemas successfully retrieved"))
+        .catch((err) => {
+          notifyAlert(
+            `Unable to retrieve the list of schemas for cluster "${appState.activeCluster?.name}"`,
+            err
+          );
+          setState({ schemas: [], loading: false });
+        });
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useMemo(() => updateSchemasList(), [appState.activeCluster]);
+
+  return (
+    <ItemList
+      title="Schemas"
+      loading={state.loading}
+      items={state.schemas}
+      onItemSelected={onTopicSelected}
+      onRefreshList={updateSchemasList}
+    />
+  );
+};

src/pages/schema-registry/schema.tsx

@@ -0,0 +1,18 @@
+import { ActionIcon, Container, Divider, Group, Title, Tooltip } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons";
+
+export const Schema = ({ schemaName }: { schemaName: string }) => (
+  <Container style={{ width: "100%" }}>
+    <Group position={"apart"}>
+      <Title>{schemaName}</Title>
+      <Group>
+        <Tooltip label="Topic info">
+          <ActionIcon>
+            <IconInfoCircle />
+          </ActionIcon>
+        </Tooltip>
+      </Group>
+    </Group>
+    <Divider mt={10} />
+  </Container>
+);