#18: add tables list page

AGENTS.md

@@ -0,0 +1,17 @@
+## Development
+
+### Running checks
+
+To check the code against static checks, run:
+
+```shell
+make check
+```
+
+Sometimes errors this command produces (such as import sorting) can be fixed automatically using:
+
+```shell
+make fix
+```
+
+If the check command fails, make sure to always run the fix command first prior to trying to fix changes yourself.

configs/config.js

@@ -1,4 +1,4 @@
 window.__APP_CONFIG__ = {
-    backendBaseUrl: "http://leda.kraysent.dev",
-    adminBaseUrl: "http://leda.kraysent.dev"
+    backendBaseUrl: "http://leda.sao.ru",
+    adminBaseUrl: "http://leda.sao.ru"
 };

src/App.tsx

@@ -6,6 +6,7 @@ import { NotFoundPage } from "./pages/NotFound";
 import { TableDetailsPage } from "./pages/TableDetails";
 import { CrossmatchResultsPage } from "./pages/CrossmatchResults";
 import { RecordCrossmatchDetailsPage } from "./pages/RecordCrossmatchDetails";
+import { TablesPage } from "./pages/Tables";
 import { Layout } from "./components/ui/layout";
 import { SearchBar } from "./components/ui/searchbar";
 
@@ -48,6 +49,15 @@ function App() {
             </Layout>
           }
         />
+        <Route
+          path="/tables"
+          element={
+            <Layout>
+              <SearchBar />
+              <TablesPage />
+            </Layout>
+          }
+        />
         <Route
           path="/crossmatch"
           element={

src/components/ui/common-table.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, ReactNode } from "react";
 import classNames from "classnames";
 import { Hint } from "./hint";
+import { Loading } from "./loading";
 
 export type CellPrimitive = ReactElement | string | number;
 
@@ -13,6 +14,7 @@ export interface Column {
 interface CommonTableProps {
   columns: Column[];
   data: Record<string, CellPrimitive>[];
+  loading?: boolean;
   className?: string;
   tableClassName?: string;
   headerClassName?: string;
@@ -25,6 +27,7 @@ interface CommonTableProps {
 export function CommonTable({
   columns,
   data,
+  loading = false,
   className = "",
   tableClassName = "",
   headerClassName = "bg-gray-700 border-gray-600",
@@ -62,58 +65,71 @@ export function CommonTable({
         </div>
       )}
 
-      <div className={classNames("overflow-x-auto", tableClassName)}>
-        <table className="w-full border-collapse border border-gray-300 rounded-sm">
-          <thead>
-            <tr className="bg-gray-100">
-              {columns.map((column) => (
-                <th
-                  key={column.name}
+      <div className="relative">
+        <div
+          className={classNames(
+            "overflow-x-auto",
+            tableClassName,
+            loading && "opacity-50 pointer-events-none",
+          )}
+        >
+          <table className="w-full border-collapse border border-gray-300 rounded-sm">
+            <thead>
+              <tr className="bg-gray-100">
+                {columns.map((column) => (
+                  <th
+                    key={column.name}
+                    className={classNames(
+                      "border border-gray-300 px-2 py-1 text-center font-semibold text-gray-700",
+                      columnHeaderClassName,
+                    )}
+                  >
+                    {column.hint ? (
+                      <Hint hintContent={column.hint}>
+                        <span>{column.name}</span>
+                      </Hint>
+                    ) : (
+                      column.name
+                    )}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+
+            <tbody>
+              {data.map((row, rowIndex) => (
+                <tr
+                  key={rowIndex}
                   className={classNames(
-                    "border border-gray-300 px-2 py-1 text-center font-semibold text-gray-700",
-                    columnHeaderClassName,
+                    "bg-gray-700 hover:bg-gray-800 transition-colors duration-150",
+                    onRowClick && "cursor-pointer",
                   )}
+                  onClick={() => onRowClick?.(row, rowIndex)}
                 >
-                  {column.hint ? (
-                    <Hint hintContent={column.hint}>
-                      <span>{column.name}</span>
-                    </Hint>
-                  ) : (
-                    column.name
-                  )}
-                </th>
+                  {columns.map((column) => {
+                    const cellValue = row[column.name];
+                    return (
+                      <td
+                        key={column.name}
+                        className={classNames(
+                          "border border-gray-300 px-2 py-1",
+                          cellClassName,
+                        )}
+                      >
+                        {renderCell(cellValue, column)}
+                      </td>
+                    );
+                  })}
+                </tr>
               ))}
-            </tr>
-          </thead>
-
-          <tbody>
-            {data.map((row, rowIndex) => (
-              <tr
-                key={rowIndex}
-                className={classNames(
-                  "bg-gray-700 hover:bg-gray-800 transition-colors duration-150",
-                  onRowClick && "cursor-pointer",
-                )}
-                onClick={() => onRowClick?.(row, rowIndex)}
-              >
-                {columns.map((column) => {
-                  const cellValue = row[column.name];
-                  return (
-                    <td
-                      key={column.name}
-                      className={classNames(
-                        "border border-gray-300 px-2 py-1",
-                        cellClassName,
-                      )}
-                    >
-                      {renderCell(cellValue, column)}
-                    </td>
-                  );
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
+            </tbody>
+          </table>
+        </div>
+        {loading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-gray-900/60">
+            <Loading />
+          </div>
+        )}
       </div>
     </div>
   );

src/config.ts

@@ -10,7 +10,17 @@ declare global {
 }
 
 function getConfig(): AppConfig {
-  if (typeof window === "undefined" || !window.__APP_CONFIG__) {
+  if (typeof window === "undefined") {
+    throw new Error(
+      "App configuration is required. Please set window.__APP_CONFIG__",
+    );
+  }
+
+  if (import.meta.env.DEV) {
+    return { backendBaseUrl: "", adminBaseUrl: "" };
+  }
+
+  if (!window.__APP_CONFIG__) {
     throw new Error(
       "App configuration is required. Please set window.__APP_CONFIG__",
     );

src/hooks/useDataFetching.ts

@@ -15,6 +15,8 @@ export function useDataFetching<T>(
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    setLoading(true);
+    setError(null);
     async function fetchData(): Promise<void> {
       try {
         const result = await fetcher();

src/pages/CrossmatchResults.tsx

@@ -8,7 +8,7 @@ import {
 import { Badge } from "../components/ui/badge";
 import { DropdownFilter } from "../components/ui/dropdown-filter";
 import { TextFilter } from "../components/ui/text-filter";
-import { getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet } from "../clients/admin/sdk.gen";
+import { getCrossmatchRecords } from "../clients/admin/sdk.gen";
 import type {
   GetRecordsCrossmatchResponse,
   RecordCrossmatch,
@@ -93,9 +93,13 @@ function CrossmatchFilters({
 
 interface CrossmatchResultsProps {
   data: GetRecordsCrossmatchResponse | null;
+  loading?: boolean;
 }
 
-function CrossmatchResults({ data }: CrossmatchResultsProps): ReactElement {
+function CrossmatchResults({
+  data,
+  loading,
+}: CrossmatchResultsProps): ReactElement {
   function getRecordName(record: RecordCrossmatch): ReactElement {
     const displayName = record.catalogs.designation?.name || record.record_id;
     return (
@@ -158,7 +162,7 @@ function CrossmatchResults({ data }: CrossmatchResultsProps): ReactElement {
       Candidates: index,
     })) || [];
 
-  return <CommonTable columns={columns} data={tableData} />;
+  return <CommonTable columns={columns} data={tableData} loading={loading} />;
 }
 
 async function fetcher(
@@ -171,7 +175,7 @@ async function fetcher(
     throw new Error("Table name is required");
   }
 
-  const response = await getCrossmatchRecordsAdminApiV1RecordsCrossmatchGet({
+  const response = await getCrossmatchRecords({
     client: adminClient,
     query: {
       table_name: tableName,
@@ -245,13 +249,13 @@ export function CrossmatchResultsPage(): ReactElement {
   }
 
   function Content(): ReactElement {
-    if (loading) return <Loading />;
-    if (error) return <ErrorPage title="Error" message={error} />;
+    if (error && !data) return <ErrorPage title="Error" message={error} />;
+    if (!data?.records && loading) return <Loading />;
     if (!data?.records) return <ErrorPage title="Error" message="No records" />;
 
     return (
       <>
-        <CrossmatchResults data={data} />
+        <CrossmatchResults data={data} loading={loading} />
         <Pagination
           page={page}
           pageSize={pageSize}

src/pages/ObjectDetails.tsx

@@ -5,7 +5,7 @@ import { Loading } from "../components/ui/loading";
 import { ErrorPage } from "../components/ui/error-page";
 import { CatalogData } from "../components/ui/catalog-data";
 import { Link } from "../components/ui/link";
-import { querySimpleApiV1QuerySimpleGet } from "../clients/backend/sdk.gen";
+import { querySimple } from "../clients/backend/sdk.gen";
 import { PgcObject, Schema } from "../clients/backend/types.gen";
 import { useDataFetching } from "../hooks/useDataFetching";
 import { backendClient } from "../clients/config";
@@ -55,7 +55,7 @@ async function fetcher(
     throw new Error(`Invalid PGC number: ${pgcId}`);
   }
 
-  const response = await querySimpleApiV1QuerySimpleGet({
+  const response = await querySimple({
     client: backendClient,
     query: {
       pgcs: [Number(pgcId)],

src/pages/RecordCrossmatchDetails.tsx

@@ -4,7 +4,7 @@ import { AladinViewer } from "../components/ui/aladin";
 import { Loading } from "../components/ui/loading";
 import { ErrorPage } from "../components/ui/error-page";
 import { CatalogData } from "../components/ui/catalog-data";
-import { getRecordCrossmatchAdminApiV1RecordCrossmatchGet } from "../clients/admin/sdk.gen";
+import { getRecordCrossmatch } from "../clients/admin/sdk.gen";
 import {
   GetRecordCrossmatchResponse,
   RecordCrossmatch,
@@ -188,7 +188,7 @@ async function fetcher(
     throw new Error("Record ID is required");
   }
 
-  const response = await getRecordCrossmatchAdminApiV1RecordCrossmatchGet({
+  const response = await getRecordCrossmatch({
     client: adminClient,
     query: {
       record_id: recordId,

src/pages/SearchResults.tsx

@@ -9,7 +9,7 @@ import { CommonTable, Column } from "../components/ui/common-table";
 import { Loading } from "../components/ui/loading";
 import { ErrorPage, ErrorPageHomeButton } from "../components/ui/error-page";
 import { useDataFetching } from "../hooks/useDataFetching";
-import { querySimpleApiV1QuerySimpleGet } from "../clients/backend/sdk.gen";
+import { querySimple } from "../clients/backend/sdk.gen";
 import { QuerySimpleResponse } from "../clients/backend/types.gen";
 import { Link } from "../components/ui/link";
 import { Declination, RightAscension } from "../components/ui/astronomy";
@@ -125,7 +125,7 @@ async function fetcher(
     throw new Error("Empty query");
   }
 
-  const response = await querySimpleApiV1QuerySimpleGet({
+  const response = await querySimple({
     client: backendClient,
     query: {
       name: query,

src/pages/TableDetails.tsx

@@ -4,7 +4,7 @@ import {
   GetTableResponse,
   RecordCrossmatchStatus,
 } from "../clients/admin/types.gen";
-import { getTableAdminApiV1TableGet } from "../clients/admin/sdk.gen";
+import { getTable } from "../clients/admin/sdk.gen";
 import { useNavigate, useParams } from "react-router-dom";
 import {
   CellPrimitive,
@@ -267,7 +267,7 @@ async function fetcher(
     throw new Error("No table name provided");
   }
 
-  const response = await getTableAdminApiV1TableGet({
+  const response = await getTable({
     client: backendClient,
     query: { table_name: tableName },
   });