nextjs 15

.github/workflows/ui-build.yml

@@ -28,3 +28,11 @@ jobs:
       - name: Build
         working-directory: ui
         run: npm run build
+
+      - name: Prettier
+        working-directory: ui
+        run: npx prettier --check .
+
+      - name: Lint
+        working-directory: ui
+        run: npm run lint

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

@@ -3,10 +3,10 @@ import { NextRequest } from 'next/server';
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { slug: string[] } }
+  { params }: { params: Promise<{ slug: string[] }> }
 ) {
   const flowServiceAddr = GetFlowHttpAddressFromEnv();
-  let url = `${flowServiceAddr}/v1/${params.slug
+  let url = `${flowServiceAddr}/v1/${(await params).slug
     .map((x) => encodeURIComponent(x))
     .join('/')}`;
   if (request.nextUrl.searchParams?.size) {
@@ -19,11 +19,11 @@ export async function GET(
 
 export async function POST(
   request: NextRequest,
-  { params }: { params: { slug: string[] } }
+  { params }: { params: Promise<{ slug: string[] }> }
 ) {
   const flowServiceAddr = GetFlowHttpAddressFromEnv();
   return fetch(
-    `${flowServiceAddr}/v1/${params.slug
+    `${flowServiceAddr}/v1/${(await params).slug
       .map((x) => encodeURIComponent(x))
       .join('/')}`,
     {
@@ -37,10 +37,10 @@ export async function POST(
 
 export async function DELETE(
   request: NextRequest,
-  { params }: { params: { slug: string[] } }
+  { params }: { params: Promise<{ slug: string[] }> }
 ) {
   const flowServiceAddr = GetFlowHttpAddressFromEnv();
-  let url = `${flowServiceAddr}/v1/${params.slug
+  let url = `${flowServiceAddr}/v1/${(await params).slug
     .map((x) => encodeURIComponent(x))
     .join('/')}`;
   if (request.nextUrl.searchParams?.size) {

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

@@ -18,7 +18,7 @@ import { ProgressCircle } from '@/lib/ProgressCircle';
 import { TextField } from '@/lib/TextField';
 import { Callout } from '@tremor/react';
 import { useRouter } from 'next/navigation';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ToastContainer } from 'react-toastify';
 import TablePicker from '../../create/cdc/tablemapping';
 import {
@@ -31,10 +31,11 @@ import * as styles from '../../create/styles';
 import { getMirrorState } from '../handlers';
 
 type EditMirrorProps = {
-  params: { mirrorId: string };
+  params: Promise<{ mirrorId: string }>;
 };
 
-export default function EditMirror({ params: { mirrorId } }: EditMirrorProps) {
+export default function EditMirror({ params }: EditMirrorProps) {
+  const { mirrorId } = React.use(params);
   const defaultBatchSize = blankCDCSetting.maxBatchSize;
   const defaultIdleTimeout = blankCDCSetting.idleTimeoutSeconds;
 

ui/app/mirrors/[mirrorId]/page.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';
@@ -18,10 +18,11 @@ import QRepStatusTable from './qrepStatusTable';
 import SyncStatus from './syncStatus';
 
 type EditMirrorProps = {
-  params: { mirrorId: string };
+  params: Promise<{ mirrorId: string }>;
 };
 
-export default function ViewMirror({ params: { mirrorId } }: EditMirrorProps) {
+export default function ViewMirror({ params }: EditMirrorProps) {
+  const { mirrorId } = React.use(params);
   const [mirrorState, setMirrorState] = useState<MirrorStatusResponse>();
   const [errorMessage, setErrorMessage] = useState('');
   const [mounted, setMounted] = useState(false);

ui/app/peers/[peerName]/page.tsx

@@ -1,14 +1,16 @@
 import { PeerInfo } from '@/components/PeerInfo';
 import ReloadButton from '@/components/ReloadButton';
+import React from 'react';
 import LagGraph from './lagGraph';
 import SlotTable from './slottable';
 import StatTable from './stattable';
 
 type DataConfigProps = {
-  params: { peerName: string };
+  params: Promise<{ peerName: string }>;
 };
 
-const PeerData = async ({ params: { peerName } }: DataConfigProps) => {
+export default function PeerData({ params }: DataConfigProps) {
+  const { peerName } = React.use(params);
   return (
     <div
       style={{
@@ -41,6 +43,4 @@ const PeerData = async ({ params: { peerName } }: DataConfigProps) => {
       </div>
     </div>
   );
-};
-
-export default PeerData;
+}

ui/app/peers/create/[peerType]/page.tsx

@@ -27,7 +27,7 @@ import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { ToastContainer } from 'react-toastify';
 import { handleCreate, handleValidate } from './handlers';
 import { clickhouseSetting } from './helpers/ch';
@@ -38,13 +38,12 @@ import { snowflakeSetting } from './helpers/sf';
 import { peerNameSchema } from './schema';
 
 type CreateConfigProps = {
-  params: { peerType: string };
+  params: Promise<{ peerType: string }>;
 };
 
 // when updating a peer we get ?update=<peer_name>
-export default function CreateConfig({
-  params: { peerType },
-}: CreateConfigProps) {
+export default function CreateConfig({ params }: CreateConfigProps) {
+  const { peerType } = React.use(params);
   const router = useRouter();
   const searchParams = useSearchParams();
   const peerName = searchParams.get('update');

ui/lib/Color/Color.tsx

@@ -44,7 +44,7 @@ export function Color<
 
   const childElement = Children.only(children);
   if (asChild && isValidElement<ComponentProps<any>>(childElement)) {
-    return cloneElement(childElement, {
+    return cloneElement(childElement as any, {
       style: { color: colorValue },
     });
   }

ui/lib/types.ts

@@ -3,8 +3,10 @@ import type { ReactElement } from 'react';
 export type RenderObject = ReactElement | string;
 
 type PropsOf<
-  E extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
-> = JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;
+  E extends
+    | keyof React.JSX.IntrinsicElements
+    | React.JSXElementConstructor<any>,
+> = React.JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;
 
 export interface AsProps<E extends React.ElementType = React.ElementType> {
   as?: E;

ui/middleware.ts

@@ -37,7 +37,7 @@ export default async function middleware(req: NextRequest, resp: NextResponse) {
 
   const res = NextResponse.next();
   console.log(
-    `[${req.method} ${req.url}] [${req.ip} ${xForwardedFor}] (${JSON.stringify(agent.device)} ${JSON.stringify(agent.os)} ${JSON.stringify(agent.browser)}) ${res.status}`
+    `[${req.method} ${req.url}] [${xForwardedFor}] (${JSON.stringify(agent.device)} ${JSON.stringify(agent.os)} ${JSON.stringify(agent.browser)}) ${res.status}`
   );
   return res;
 }

ui/next.config.js

@@ -13,7 +13,6 @@ const nextConfig = {
     ];
   },
   reactStrictMode: true,
-  swcMinify: true,
   output: 'standalone',
   images: {
     unoptimized: true,