nanoid code replacement, schema code replacement fixes.

frontend/src/components/KsqlDb/Query/renderer/TableRenderer/TableRenderer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { KsqlTableResponse } from 'generated-sources';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
-import { nanoid } from '@reduxjs/toolkit';
 import { TableTitle } from 'components/common/table/TableTitle/TableTitle.styled';
+import { nanoid } from 'lib/functions/nanoid';
 
 import * as S from './TableRenderer.styled';
 
@@ -15,17 +15,13 @@ function hasJsonStructure(str: string | Record<string, unknown>): boolean {
     return true;
   }
 
-  if (typeof str === 'string') {
-    try {
-      const result = JSON.parse(str);
-      const type = Object.prototype.toString.call(result);
-      return type === '[object Object]' || type === '[object Array]';
-    } catch (err) {
-      return false;
-    }
+  try {
+    const result = JSON.parse(str);
+    const type = Object.prototype.toString.call(result);
+    return type === '[object Object]' || type === '[object Array]';
+  } catch (err) {
+    return false;
   }
-
-  return false;
 }
 
 const TableRenderer: React.FC<TableRendererProps> = ({ table }) => {

frontend/src/lib/functions/nanoid.ts

@@ -0,0 +1,22 @@
+// Borrowed from https://github.com/ai/nanoid/blob/3.0.2/non-secure/index.js
+// This alphabet uses `A-Za-z0-9_-` symbols. A genetic algorithm helped
+// optimize the gzip compression for this alphabet.
+const urlAlphabet =
+  'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW';
+
+/**
+ *
+ * @public
+ */
+export function nanoid(size = 21) {
+  let id = '';
+  // A compact alternative for `for (var i = 0; i < step; i++)`.
+  let i = size;
+  // eslint-disable-next-line no-plusplus
+  while (i--) {
+    // `| 0` is more compact and faster than `Math.floor()`.
+    // eslint-disable-next-line no-bitwise
+    id += urlAlphabet[(Math.random() * 64) | 0];
+  }
+  return id;
+}

frontend/src/lib/hooks/api/schemas.ts

@@ -0,0 +1,115 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  LATEST_SCHEMA_QUERY_KEY,
+  SCHEMA_QUERY_KEY,
+  SCHEMAS_VERSION_QUERY_KEY,
+} from 'lib/queries';
+import {
+  GetAllVersionsBySubjectRequest,
+  GetLatestSchemaRequest,
+  GetSchemasRequest,
+  NewSchemaSubject,
+  SchemaSubject,
+  UpdateGlobalSchemaCompatibilityLevelRequest,
+  UpdateSchemaCompatibilityLevelRequest,
+} from 'generated-sources';
+import { schemasApiClient } from 'lib/api';
+import { ClusterName } from 'redux/interfaces';
+
+export function useGetLatestSchemas(param: GetLatestSchemaRequest) {
+  return useQuery({
+    queryKey: [
+      SCHEMA_QUERY_KEY,
+      LATEST_SCHEMA_QUERY_KEY,
+      param.clusterName,
+      param.subject,
+    ],
+    queryFn: () => schemasApiClient.getLatestSchema(param),
+  });
+}
+
+export function useGetSchemas({
+  clusterName,
+  page,
+  perPage,
+  search,
+}: GetSchemasRequest) {
+  return useQuery({
+    queryKey: [SCHEMA_QUERY_KEY, clusterName, page, perPage, search],
+    queryFn: () =>
+      schemasApiClient.getSchemas({
+        clusterName,
+        page,
+        perPage,
+        search: search || undefined,
+      }),
+  });
+}
+
+export function useGetSchemasVersions({
+  clusterName,
+  subject,
+}: GetAllVersionsBySubjectRequest) {
+  return useQuery({
+    queryKey: [SCHEMAS_VERSION_QUERY_KEY, clusterName, subject],
+    queryFn: () =>
+      schemasApiClient.getAllVersionsBySubject({
+        clusterName,
+        subject,
+      }),
+  });
+}
+
+export function useCreateSchema(clusterName: ClusterName) {
+  const queryClient = useQueryClient();
+  return useMutation<SchemaSubject, void, NewSchemaSubject>({
+    mutationFn: ({ subject, schema, schemaType }) =>
+      schemasApiClient.createNewSchema({
+        clusterName,
+        newSchemaSubject: { subject, schema, schemaType },
+      }),
+    onSuccess: () => {
+      return queryClient.invalidateQueries();
+    },
+  });
+}
+
+export function useUpdateSchemaCompatibilityLayer(clusterName: ClusterName) {
+  const queryClient = useQueryClient();
+  return useMutation<
+    void,
+    void,
+    Omit<UpdateSchemaCompatibilityLevelRequest, 'clusterName'>
+  >({
+    mutationFn: ({ subject, compatibilityLevel }) =>
+      schemasApiClient.updateSchemaCompatibilityLevel({
+        clusterName,
+        subject,
+        compatibilityLevel,
+      }),
+    onSuccess: () => {
+      return queryClient.invalidateQueries();
+    },
+  });
+}
+
+export function useUpdateGlobalSchemaCompatibilityLevel(
+  clusterName: ClusterName
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation<
+    void,
+    void,
+    Omit<UpdateGlobalSchemaCompatibilityLevelRequest, 'clusterName'>
+  >({
+    mutationFn: ({ compatibilityLevel }) =>
+      schemasApiClient.updateGlobalSchemaCompatibilityLevel({
+        clusterName,
+        compatibilityLevel,
+      }),
+    onSuccess: () => {
+      return queryClient.invalidateQueries();
+    },
+  });
+}

frontend/src/lib/queries.ts

@@ -0,0 +1,6 @@
+// TODO all the other query key should be transferred here
+
+// SCHEMAS
+export const SCHEMA_QUERY_KEY = 'schemas';
+export const LATEST_SCHEMA_QUERY_KEY = 'latest_schemas';
+export const SCHEMAS_VERSION_QUERY_KEY = 'schemas_version';