FE: Add server side sorting to Schemas (#1337)

Co-authored-by: German Osin <[email protected]>

Author: Vixtir

frontend/src/components/Schemas/List/List.tsx

@@ -13,7 +13,13 @@ import Search from 'components/common/Search/Search';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import Table, { LinkCell } from 'components/common/NewTable';
 import { ColumnDef } from '@tanstack/react-table';
-import { Action, SchemaSubject, ResourceType } from 'generated-sources';
+import {
+  Action,
+  SchemaSubject,
+  ResourceType,
+  SchemaColumnsToSort,
+  SortOrder,
+} from 'generated-sources';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { PER_PAGE } from 'lib/constants';
 import { useGetSchemas } from 'lib/hooks/api/schemas';
@@ -27,14 +33,18 @@ const List: React.FC = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const {
-    isFetching,
+    isInitialLoading,
     isError,
     data = { pageCount: 1, schemas: [] as SchemaSubject[] },
   } = useGetSchemas({
     clusterName,
     page: Number(searchParams.get('page') || 1),
     perPage: Number(searchParams.get('perPage') || PER_PAGE),
     search: searchParams.get('q') || '',
+    orderBy: (searchParams.get('sortBy') as SchemaColumnsToSort) ?? undefined,
+    sortOrder:
+      (searchParams.get('sortDirection')?.toUpperCase() as SortOrder) ||
+      undefined,
   });
 
   const columns = React.useMemo<ColumnDef<SchemaSubject>[]>(
@@ -53,7 +63,12 @@ const List: React.FC = () => {
       },
       { header: 'Id', accessorKey: 'id', size: 120 },
       { header: 'Type', accessorKey: 'schemaType', size: 120 },
-      { header: 'Version', accessorKey: 'version', size: 120 },
+      {
+        header: 'Version',
+        accessorKey: 'version',
+        size: 120,
+        enableSorting: false,
+      },
       {
         header: 'Compatibility',
         accessorKey: 'compatibilityLevel',
@@ -86,7 +101,7 @@ const List: React.FC = () => {
       <ControlPanelWrapper hasInput>
         <Search placeholder="Search by Schema Name" />
       </ControlPanelWrapper>
-      {isFetching || isError ? (
+      {isInitialLoading || isError ? (
         <PageLoader />
       ) : (
         <Table

frontend/src/components/Schemas/Schemas.tsx

@@ -1,26 +1,30 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import {
   clusterSchemaEditRelativePath,
   clusterSchemaNewRelativePath,
   clusterSchemaSchemaDiffRelativePath,
   RouteParams,
 } from 'lib/paths';
-import List from 'components/Schemas/List/List';
 import Details from 'components/Schemas/Details/Details';
 import New from 'components/Schemas/New/New';
 import Edit from 'components/Schemas/Edit/Edit';
 import Diff from 'components/Schemas/Diff/Diff';
+import PageLoader from 'components/common/PageLoader/PageLoader';
+
+const List = React.lazy(() => import('./List/List'));
 
 const Schemas: React.FC = () => {
   return (
-    <Routes>
-      <Route index element={<List />} />
-      <Route path={clusterSchemaNewRelativePath} element={<New />} />
-      <Route path={RouteParams.subject} element={<Details />} />
-      <Route path={clusterSchemaEditRelativePath} element={<Edit />} />
-      <Route path={clusterSchemaSchemaDiffRelativePath} element={<Diff />} />
-    </Routes>
+    <Suspense fallback={<PageLoader />}>
+      <Routes>
+        <Route index element={<List />} />
+        <Route path={clusterSchemaNewRelativePath} element={<New />} />
+        <Route path={RouteParams.subject} element={<Details />} />
+        <Route path={clusterSchemaEditRelativePath} element={<Edit />} />
+        <Route path={clusterSchemaSchemaDiffRelativePath} element={<Diff />} />
+      </Routes>
+    </Suspense>
   );
 };
 

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

@@ -45,15 +45,28 @@ export function useGetSchemas({
   page,
   perPage,
   search,
+  orderBy,
+  sortOrder,
 }: GetSchemasRequest) {
   return useQuery<SchemaSubjectsResponse>({
-    queryKey: [SCHEMA_QUERY_KEY, clusterName, page, perPage, search],
+    queryKey: [
+      SCHEMA_QUERY_KEY,
+      clusterName,
+      page,
+      perPage,
+      search,
+      sortOrder,
+      orderBy,
+    ],
+    keepPreviousData: true,
     queryFn: () =>
       schemasApiClient.getSchemas({
         clusterName,
         page,
         perPage,
         search: search || undefined,
+        sortOrder,
+        orderBy,
       }),
   });
 }