UI: Upgrade to Next 16, React 19 and aggressive linting (#3634)

Upgrades NextJS and React, also sets in place a few scripts for linting.
`next lint` has been removed in NextJS 16, so I've replaced that script
with eslint directly.

CI failing due to next-auth not supporting Next 16, which should be
[fixed
soon](nextauthjs/next-auth#13302 (comment))

Author: Amogh-Bharadwaj

ui/.eslintignore

@@ -3,8 +3,9 @@ import { NextRequest } from 'next/server';
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { slug: string[] } }
+  context: { params: Promise<{ slug: string[] }> }
 ) {
+  const params = await context.params;
   const flowServiceAddr = GetFlowHttpAddressFromEnv();
   let url = `${flowServiceAddr}/v1/${params.slug
     .map((x) => encodeURIComponent(x))
@@ -19,8 +20,9 @@ export async function GET(
 
 export async function POST(
   request: NextRequest,
-  { params }: { params: { slug: string[] } }
+  context: { params: Promise<{ slug: string[] }> }
 ) {
+  const params = await context.params;
   const flowServiceAddr = GetFlowHttpAddressFromEnv();
   return fetch(
     `${flowServiceAddr}/v1/${params.slug
@@ -37,8 +39,9 @@ export async function POST(
 
 export async function DELETE(
   request: NextRequest,
-  { params }: { params: { slug: string[] } }
+  context: { params: Promise<{ slug: string[] }> }
 ) {
+  const params = await context.params;
   const flowServiceAddr = GetFlowHttpAddressFromEnv();
   let url = `${flowServiceAddr}/v1/${params.slug
     .map((x) => encodeURIComponent(x))

ui/.eslintrc.json

@@ -6,13 +6,13 @@ export const metadata: Metadata = {
   title: 'Peerdb UI',
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   // Read theme from cookie during SSR
-  const cookieStore = cookies();
+  const cookieStore = await cookies();
   const themeCookie = cookieStore.get('peerdb-theme');
   const initialTheme = themeCookie?.value === 'dark' ? 'dark' : 'light';
   return (

ui/app/api/v1/[...slug]/route.ts

@@ -18,7 +18,7 @@ import { RowWithTextField } from '@/lib/Layout';
 import { ProgressCircle } from '@/lib/ProgressCircle';
 import { TextField } from '@/lib/TextField';
 import { useRouter } from 'next/navigation';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { ToastContainer } from 'react-toastify';
 import TablePicker from '../../create/cdc/tablemapping';
 import {
@@ -37,7 +37,7 @@ import {
 } from '../styles/edit.styles';
 
 type EditMirrorProps = {
-  params: { mirrorId: string };
+  params: Promise<{ mirrorId: string }>;
 };
 
 const defaultBatchSize = blankCDCSetting.maxBatchSize;
@@ -51,7 +51,8 @@ const defaultSnapshotMaxParallelWorkers =
 const defaultSnapshotNumTablesInParallel =
   blankCDCSetting.snapshotNumTablesInParallel;
 
-export default function EditMirror({ params: { mirrorId } }: EditMirrorProps) {
+export default function EditMirror({ params }: EditMirrorProps) {
+  const { mirrorId } = React.use(params);
   const theme = useTheme();
   const [rows, setRows] = useState<TableMapRow[]>([]);
   const [loading, setLoading] = useState(false);
@@ -71,41 +72,47 @@ export default function EditMirror({ params: { mirrorId } }: EditMirrorProps) {
   });
   const { push } = useRouter();
 
-  const fetchStateAndUpdateDeps = useCallback(async () => {
-    const res = await getMirrorState(mirrorId);
-    setMirrorState(res);
+  useEffect(() => {
+    const fetchStateAndUpdateDeps = async () => {
+      try {
+        const res = await getMirrorState(mirrorId);
+        setMirrorState(res);
 
-    setConfig({
-      batchSize:
-        (res as MirrorStatusResponse).cdcStatus?.config?.maxBatchSize ||
-        defaultBatchSize,
-      idleTimeout:
-        (res as MirrorStatusResponse).cdcStatus?.config?.idleTimeoutSeconds ||
-        defaultIdleTimeout,
-      additionalTables: [],
-      removedTables: [],
-      numberOfSyncs: 0,
-      updatedEnv: {},
-      snapshotNumRowsPerPartition:
-        (res as MirrorStatusResponse).cdcStatus?.config
-          ?.snapshotNumRowsPerPartition || defaultSnapshotNumRowsPerPartition,
-      snapshotNumPartitionsOverride:
-        (res as MirrorStatusResponse).cdcStatus?.config
-          ?.snapshotNumPartitionsOverride ||
-        defaultSnapshotNumPartitionsOverride,
-      snapshotMaxParallelWorkers:
-        (res as MirrorStatusResponse).cdcStatus?.config
-          ?.snapshotMaxParallelWorkers || defaultSnapshotMaxParallelWorkers,
-      snapshotNumTablesInParallel:
-        (res as MirrorStatusResponse).cdcStatus?.config
-          ?.snapshotNumTablesInParallel || defaultSnapshotNumTablesInParallel,
-      skipInitialSnapshotForTableAdditions: false,
-    });
-  }, [mirrorId]);
+        setConfig({
+          batchSize:
+            (res as MirrorStatusResponse).cdcStatus?.config?.maxBatchSize ||
+            defaultBatchSize,
+          idleTimeout:
+            (res as MirrorStatusResponse).cdcStatus?.config
+              ?.idleTimeoutSeconds || defaultIdleTimeout,
+          additionalTables: [],
+          removedTables: [],
+          numberOfSyncs: 0,
+          updatedEnv: {},
+          snapshotNumRowsPerPartition:
+            (res as MirrorStatusResponse).cdcStatus?.config
+              ?.snapshotNumRowsPerPartition ||
+            defaultSnapshotNumRowsPerPartition,
+          snapshotNumPartitionsOverride:
+            (res as MirrorStatusResponse).cdcStatus?.config
+              ?.snapshotNumPartitionsOverride ||
+            defaultSnapshotNumPartitionsOverride,
+          snapshotMaxParallelWorkers:
+            (res as MirrorStatusResponse).cdcStatus?.config
+              ?.snapshotMaxParallelWorkers || defaultSnapshotMaxParallelWorkers,
+          snapshotNumTablesInParallel:
+            (res as MirrorStatusResponse).cdcStatus?.config
+              ?.snapshotNumTablesInParallel ||
+            defaultSnapshotNumTablesInParallel,
+          skipInitialSnapshotForTableAdditions: false,
+        });
+      } catch (error) {
+        notifyErr('Failed to fetch mirror state');
+      }
+    };
 
-  useEffect(() => {
     fetchStateAndUpdateDeps();
-  }, [fetchStateAndUpdateDeps]);
+  }, [mirrorId]);
 
   const alreadySelectedTablesMapping: Map<string, TableMapping[]> =
     useMemo(() => {

ui/app/layout.tsx

@@ -8,7 +8,7 @@ import { Badge } from '@/lib/Badge';
 import { Header } from '@/lib/Header';
 import { Label } from '@/lib/Label';
 import { LayoutMain } from '@/lib/Layout';
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { CDCMirror } from './cdc';
 import { getMirrorState } from './handlers';
 import NoMirror from './nomirror';
@@ -17,11 +17,12 @@ import QRepStatusButtons from './qrepStatusButtons';
 import QRepStatusTable from './qrepStatusTable';
 import SyncStatus from './syncStatus';
 
-type EditMirrorProps = {
-  params: { mirrorId: string };
+type ViewMirrorProps = {
+  params: Promise<{ mirrorId: string }>;
 };
 
-export default function ViewMirror({ params: { mirrorId } }: EditMirrorProps) {
+export default function ViewMirror({ params }: ViewMirrorProps) {
+  const { mirrorId } = React.use(params);
   const [mirrorState, setMirrorState] = useState<MirrorStatusResponse>();
   const [errorMessage, setErrorMessage] = useState('');
   const [mounted, setMounted] = useState(false);

ui/app/mirrors/[mirrorId]/edit/page.tsx

@@ -12,7 +12,7 @@ import {
   Title,
   Tooltip,
 } from 'chart.js';
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Bar } from 'react-chartjs-2';
 import ReactSelect from 'react-select';
 import aggregateCountsByInterval from './aggregatedCountsByInterval';
@@ -25,8 +25,7 @@ function QrepGraph({ syncs }: QRepGraphProps) {
   const [aggregateType, setAggregateType] = useState<TimeAggregateType>(
     TimeAggregateType.TIME_AGGREGATE_TYPE_ONE_HOUR
   );
-  const initialCount: [string, number][] = [];
-  const [counts, setCounts] = useState(initialCount);
+
   ChartJS.register(
     BarElement,
     CategoryScale,
@@ -43,14 +42,15 @@ function QrepGraph({ syncs }: QRepGraphProps) {
       },
     },
   };
-  useEffect(() => {
+
+  const counts = useMemo(() => {
     const rows = syncs.map((sync) => ({
       timestamp: sync.startTime!,
       count: Number(sync.rowsInPartition) ?? 0,
     }));
 
-    const counts = aggregateCountsByInterval(rows, aggregateType);
-    setCounts(counts.slice(0, 29).reverse());
+    const aggregatedCounts = aggregateCountsByInterval(rows, aggregateType);
+    return aggregatedCounts.slice(0, 29).reverse();
   }, [aggregateType, syncs]);
 
   const qrepData = {

ui/app/mirrors/[mirrorId]/page.tsx

@@ -206,19 +206,27 @@ export default function CDCConfigForm({
   };
 
   useEffect(() => {
-    setLoading(true);
-    const promises = [];
-    if (sourceType.toString() === DBType[DBType.POSTGRES]) {
-      promises.push(
-        fetchPublications(mirrorConfig.sourceName ?? '').then((pubs) =>
-          setPublications(pubs)
-        )
-      );
-    }
-    promises.push(getScriptingEnabled());
-    Promise.all(promises).then(() => setLoading(false));
-    // ClickHouse has soft-delete as default and hard-delete as opt-in.
-    // It is the opposite for SF,BQ and PQ target peers.
+    const fetchData = async () => {
+      setLoading(true);
+
+      try {
+        const promises = [];
+        if (sourceType.toString() === DBType[DBType.POSTGRES]) {
+          promises.push(
+            fetchPublications(mirrorConfig.sourceName ?? '').then((pubs) =>
+              setPublications(pubs)
+            )
+          );
+        }
+        promises.push(getScriptingEnabled());
+
+        await Promise.all(promises);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    // Set soft delete configuration synchronously
     if (IsClickHousePeer(destinationType)) {
       setter((curr) => ({
         ...curr,
@@ -230,6 +238,9 @@ export default function CDCConfigForm({
         softDeleteColName: curr.softDeleteColName || SOFT_DELETE_COLUMN_NAME,
       }));
     }
+
+    // Fetch data asynchronously
+    fetchData();
   }, [
     sourceType,
     mirrorConfig.sourceName,

ui/app/mirrors/[mirrorId]/qrepGraph.tsx

@@ -49,9 +49,6 @@ export default function CustomColumnType({
     const columnsWithDstTypes = selectedColumns.filter(
       (col) => destinationTypeMapping[col.name] !== undefined
     );
-    if (columnsWithDstTypes.length === 0) {
-      setUseCustom(false);
-    }
     return columnsWithDstTypes;
   }, [selectedColumns, destinationTypeMapping]);
 

ui/app/mirrors/create/cdc/cdc.tsx

@@ -204,15 +204,18 @@ export default function SchemaBox({
   };
 
   const fetchTablesForSchema = useCallback(
-    (schemaName: string) => {
+    async (schemaName: string) => {
       setTablesLoading(true);
-      fetchTables(
-        sourcePeer,
-        schemaName,
-        defaultTargetSchema,
-        peerType,
-        initialLoadOnly
-      ).then((newRows) => {
+
+      try {
+        const newRows = await fetchTables(
+          sourcePeer,
+          schemaName,
+          defaultTargetSchema,
+          peerType,
+          initialLoadOnly
+        );
+
         if (alreadySelectedTables) {
           for (const row of newRows) {
             const existingRow = alreadySelectedTables.find(
@@ -232,23 +235,28 @@ export default function SchemaBox({
             }
           }
         }
+
         setRows((oldRows) => {
           const filteredRows = oldRows.filter(
             (oldRow) => oldRow.schema !== schemaName
           );
           return [...filteredRows, ...newRows];
         });
+      } catch (error) {
+        // Handle error if needed
+        console.error('Error fetching tables:', error);
+      } finally {
         setTablesLoading(false);
-      });
+      }
     },
     [
-      setRows,
       sourcePeer,
       defaultTargetSchema,
       peerType,
       alreadySelectedTables,
       addTableColumns,
       initialLoadOnly,
+      setRows,
     ]
   );