feat(web): upgrade nextjs to 15.0.3 (#633)

* feat(web): upgrade nextjs to 15.0.3 * chore(workers): fix annoying web worker error message in dev mode
latitude-dev · Nov 19, 2024 · bacfb4e · bacfb4e
1 parent 7618a70
commit bacfb4e
Show file tree

Hide file tree

Showing 44 changed files with 292 additions and 235 deletions.
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
@@ -11,7 +11,12 @@ const INTERNAL_PACKAGES = [
 const nextConfig = {
   output: 'standalone',
   transpilePackages: INTERNAL_PACKAGES,
-  serverExternalPackages: ['bullmq', 'jose', 'nodemailer-mailgun-transport'],
+  serverExternalPackages: [
+    'bullmq',
+    'jose',
+    'nodemailer-mailgun-transport',
+    '@sentry/nextjs',
+  ],
   experimental: {
     // Dear developer,
     //

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -43,7 +43,7 @@
     "lucia": "^3.2.0",
     "monaco-editor": "^0.50.0",
     "nanoid": "^5.0.7",
-    "next": "15.0.0-canary.168",
+    "next": "15.0.3",
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.12",
     "nprogress": "^0.2.0",

diff --git a/apps/web/src/actions/datasets/create.ts b/apps/web/src/actions/datasets/create.ts
@@ -38,16 +38,16 @@ export const createDatasetAction = authProcedure
           csvCustomDelimiter: z.string(),
           dataset_file: z
             .instanceof(File)
-            .refine((file) => {
+            .refine(async (file) => {
               return !file || file.size <= MAX_UPLOAD_SIZE_IN_MB
             }, `Your dataset must be less than ${MAX_SIZE}MB in size. You can split it into smaller files and upload them separately.`)
             .refine(
-              (file) => file.type === 'text/csv',
+              async (file) => file.type === 'text/csv',
               'Your dataset must be a CSV file',
             ),
         })
         .refine(
-          (schema) => {
+          async (schema) => {
             if (schema.csvDelimiter !== 'custom') return true
             return schema.csvCustomDelimiter.length > 0
           },

diff --git a/apps/web/src/actions/documentLogs/upload.ts b/apps/web/src/actions/documentLogs/upload.ts
@@ -20,11 +20,11 @@ export const uploadDocumentLogsAction = withDocument
       }),
       logsFile: z
         .instanceof(File)
-        .refine((file) => {
+        .refine(async (file) => {
           return !file || file.size <= MAX_UPLOAD_SIZE_IN_MB
         }, `Your file must be less than ${MAX_SIZE}MB in size`)
         .refine(
-          (file) => file.type === 'text/csv',
+          async (file) => file.type === 'text/csv',
           'Your file must be a CSV file',
         ),
     }),

diff --git a/apps/web/src/actions/user/logoutAction.ts b/apps/web/src/actions/user/logoutAction.ts
@@ -23,7 +23,7 @@ export const logoutAction = authProcedure
   .handler(async ({ ctx }) => {
     removeSession({ session: ctx.session })
 
-    const cookies = getCookies()
+    const cookies = await getCookies()
     removeSocketCookie({ name: 'websocket', cookies })
     removeSocketCookie({ name: 'websocketRefresh', cookies })
 

diff --git a/apps/web/src/actions/user/refreshWebsocketTokenAction.ts b/apps/web/src/actions/user/refreshWebsocketTokenAction.ts
@@ -9,7 +9,8 @@ import { authProcedure } from '../procedures'
 export const refreshWebesocketTokenAction = authProcedure
   .createServerAction()
   .handler(async ({ ctx: { user, workspace } }) => {
-    const refreshWebsocketCookie = cookies().get('websocketRefresh')
+    const cks = await cookies()
+    const refreshWebsocketCookie = cks.get('websocketRefresh')
     const refreshToken = refreshWebsocketCookie?.value
     const result = await verifyWebsocketToken({
       token: refreshToken,

diff --git a/apps/web/src/actions/user/setupAction.ts b/apps/web/src/actions/user/setupAction.ts
@@ -26,7 +26,7 @@ export const setupAction = errorHandlingProcedure
             { message: 'Email is already in use' },
           )
           .refine(
-            (email) =>
+            async (email) =>
               !email.match(/^[A-Z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Z0-9.-]+$/) &&
               !email.match(/^[^+]+\+\d+@[A-Z0-9.-]+$/i),
             { message: 'Email is not valid' },

diff --git a/apps/web/src/app/(private)/dashboard/projects/[projectId]/destroy/page.tsx b/apps/web/src/app/(private)/dashboard/projects/[projectId]/destroy/page.tsx
@@ -5,11 +5,12 @@ import { useNavigate } from '$/hooks/useNavigate'
 import { ROUTES } from '$/services/routes'
 import useProjects from '$/stores/projects'
 
-export default function DestroyProject({
-  params: { projectId },
+export default async function DestroyProject({
+  params,
 }: {
-  params: { projectId: string }
+  params: Promise<{ projectId: string }>
 }) {
+  const { projectId } = await params
   const navigate = useNavigate()
   const { data, destroy } = useProjects()
   const project = data.find((p) => p.id === Number(projectId))

diff --git a/apps/web/src/app/(private)/datasets/generate/page.tsx b/apps/web/src/app/(private)/datasets/generate/page.tsx
@@ -3,13 +3,13 @@ import { GenerateDatasetContent } from './GenerateDatasetContent'
 export default async function GenerateDatasetPage({
   searchParams,
 }: {
-  searchParams: {
+  searchParams: Promise<{
     parameters?: string
     name?: string
     backUrl?: string
-  }
+  }>
 }) {
-  const { parameters, name, backUrl } = searchParams
+  const { parameters, name, backUrl } = await searchParams
 
   let defaultParameters
   if (parameters) {

diff --git a/apps/web/src/app/(private)/datasets/preview/[datasetId]/page.tsx b/apps/web/src/app/(private)/datasets/preview/[datasetId]/page.tsx
@@ -5,9 +5,9 @@ import PreviewDatasetModal from './_components/PreviewDatasetModal'
 export default async function DatasetPreviewPage({
   params,
 }: {
-  params: { datasetId: string }
+  params: Promise<{ datasetId: string }>
 }) {
-  const dataset = await getDatasetCached(params.datasetId)
+  const dataset = await getDatasetCached((await params).datasetId)
 
   return <PreviewDatasetModal dataset={dataset} />
 }
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/dashboard/page.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/dashboard/page.tsx
@@ -18,9 +18,10 @@ import EvaluationStats from './_components/EvaluationStats'
 export default async function DashboardPage({
   params,
 }: {
-  params: { evaluationUuid: string }
+  params: Promise<{ evaluationUuid: string }>
 }) {
-  const evaluation = await getEvaluationByUuidCached(params.evaluationUuid)
+  const { evaluationUuid } = await params
+  const evaluation = await getEvaluationByUuidCached(evaluationUuid)
 
   // TODO: Use regular connectedDocuments. Metadata aggregations will be calculated automatically when using <EvaluationAggregatedResult /> component.
   const connectedDocumentsWithMetadata =

diff --git a/...b/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/import-logs/page.tsx b/...b/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/import-logs/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { Usable, use, useMemo, useState } from 'react'
 import { capitalize } from 'lodash-es'
 
 import { MessageContent, TextContent } from '@latitude-data/compiler'
@@ -27,10 +27,11 @@ import useDocumentsForImport from '$/stores/documentsForImport'
 import useProviderLogs from '$/stores/providerLogs'
 
 export default function ImportLogs({
-  params: { evaluationUuid },
+  params,
 }: {
-  params: { evaluationUuid: string }
+  params: Usable<{ evaluationUuid: string }>
 }) {
+  const { evaluationUuid } = use(params)
   const navigate = useNavigate()
   const [documentUuid, setDocumentUuid] = useState<string | undefined>()
   const [providerLogId, setProviderLogId] = useState<number | undefined>()

diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/layout.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/layout.tsx
@@ -18,10 +18,10 @@ export default async function DocumentPage({
   params,
 }: {
   children: ReactNode
-  params: { evaluationUuid: string }
+  params: Promise<{ evaluationUuid: string }>
 }) {
   const { workspace } = await getCurrentUser()
-  const evaluationUuid = params.evaluationUuid
+  const evaluationUuid = (await params).evaluationUuid
   const evaluation = await getEvaluationByUuidCached(evaluationUuid)
   const providerApiKeys = await getProviderApiKeysCached()
   const freeRunsCount = await getFreeRuns(workspace.id)

diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/page.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/page.tsx
@@ -2,9 +2,10 @@ import { ROUTES } from '$/services/routes'
 import { redirect } from 'next/navigation'
 
 export default async function DocumentPage({
-  params: { evaluationUuid },
+  params,
 }: {
-  params: { evaluationUuid: string }
+  params: Promise<{ evaluationUuid: string }>
 }) {
+  const { evaluationUuid } = await params
   redirect(ROUTES.evaluations.detail({ uuid: evaluationUuid }).dashboard.root)
 }
diff --git a/apps/web/src/app/(private)/evaluations/(root)/[evaluationUuid]/destroy/page.tsx b/apps/web/src/app/(private)/evaluations/(root)/[evaluationUuid]/destroy/page.tsx
@@ -1,16 +1,19 @@
 'use client'
 
+import { Usable, use } from 'react'
+
 import { EvaluationDto } from '@latitude-data/core/browser'
 import DestroyModal from '$/components/modals/DestroyModal'
 import { useNavigate } from '$/hooks/useNavigate'
 import { ROUTES } from '$/services/routes'
 import useEvaluations from '$/stores/evaluations'
 
 export default function DestroyEvaluation({
-  params: { evaluationUuid },
+  params,
 }: {
-  params: { evaluationUuid: string }
+  params: Usable<{ evaluationUuid: string }>
 }) {
+  const { evaluationUuid } = use(params)
   const navigate = useNavigate()
   const { data, destroy } = useEvaluations()
   const evaluation = data.find((e: EvaluationDto) => e.uuid === evaluationUuid)

diff --git a/apps/web/src/app/(private)/evaluations/_components/CreateEvaluationModal/index.tsx b/apps/web/src/app/(private)/evaluations/_components/CreateEvaluationModal/index.tsx
@@ -205,15 +205,13 @@ export default function CreateEvaluationModal({
                 type='number'
                 min={0}
                 value={configuration.detail?.range.from.toString() || 1}
-                defaultValue={1}
                 placeholder='From'
                 onChange={handleRangeFromChange}
               />
               <Input
                 type='number'
                 min={0}
                 value={configuration.detail?.range.to.toString() || 5}
-                defaultValue={5}
                 placeholder='To'
                 onChange={handleRangeToChange}
               />

diff --git a/apps/web/src/app/(private)/projects/[projectId]/page.tsx b/apps/web/src/app/(private)/projects/[projectId]/page.tsx
@@ -15,12 +15,13 @@ import { getRedirectUrl } from './utils'
 const PROJECT_ROUTE = ROUTES.projects.detail
 
 export type ProjectPageParams = {
-  params: { projectId: string }
+  params: Promise<{ projectId: string }>
 }
 
 export default async function ProjectPage({ params }: ProjectPageParams) {
+  const { projectId } = await params
   const { commitUuid: lastSeenCommitUuid, documentUuid: lastSeenDocumentUuid } =
-    getLastSeenDataFromCookie(params.projectId)
+    await getLastSeenDataFromCookie(projectId)
 
   let session: SessionData
   let project: Project
@@ -29,7 +30,7 @@ export default async function ProjectPage({ params }: ProjectPageParams) {
   try {
     session = await getCurrentUser()
     project = await findProjectCached({
-      projectId: Number(params.projectId),
+      projectId: Number(projectId),
       workspaceId: session.workspace.id,
     })
     const commits = await findCommitsByProjectCached({
@@ -54,8 +55,8 @@ export default async function ProjectPage({ params }: ProjectPageParams) {
   return redirect(url)
 }
 
-function getLastSeenDataFromCookie(projectId: string) {
-  const cookieStore = cookies()
+async function getLastSeenDataFromCookie(projectId: string) {
+  const cookieStore = await cookies()
   const data = cookieStore.get(lastSeenCommitCookieName(Number(projectId)))
   if (!data?.value) return {}
 

diff --git a/...private)/projects/[projectId]/versions/[commitUuid]/_components/DocumentsLayout/index.tsx b/...private)/projects/[projectId]/versions/[commitUuid]/_components/DocumentsLayout/index.tsx
@@ -53,7 +53,8 @@ export default async function DocumentsLayout({
   })
   const resizableId = ResizableGroups.DocumentSidebar
   const sidebarWidth =
-    getResizablePanelGroupData({ group: resizableId }) ?? MIN_SIDEBAR_WIDTH_PX
+    (await getResizablePanelGroupData({ group: resizableId })) ??
+    MIN_SIDEBAR_WIDTH_PX
 
   return (
     <DocumentDetailWrapper

diff --git a/...mmitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx b/...mmitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
@@ -67,7 +67,7 @@ export default function Playground({
 
   return (
     <div className='flex flex-col gap-2 max-h-full h-full'>
-      <Header title='Playground' />
+      <Header title='Variables' />
       {newParams ? (
         <div className='max-h-[33%] flex flex-col'>
           <DocumentParams commitVersionUuid={commit.uuid} document={document} />

diff --git a/...tId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/layout.tsx b/...tId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/layout.tsx
@@ -40,17 +40,18 @@ export default async function ConnectedEvaluationLayout({
   children,
 }: {
   children: ReactNode
-  params: {
+  params: Promise<{
+    evaluationId: string
     projectId: string
     commitUuid: string
     documentUuid: string
-    evaluationId: string
-  }
+  }>
 }) {
-  const evaluation = await fetchEvaluationCached(Number(params.evaluationId))
+  const { evaluationId, projectId, commitUuid, documentUuid } = await params
+  const evaluation = await fetchEvaluationCached(Number(evaluationId))
   const commit = await findCommitCached({
-    projectId: Number(params.projectId),
-    uuid: params.commitUuid,
+    projectId: Number(projectId),
+    uuid: commitUuid,
   })
 
   let provider
@@ -97,10 +98,9 @@ export default async function ConnectedEvaluationLayout({
                 name='Evaluations'
                 href={
                   ROUTES.projects
-                    .detail({ id: Number(params.projectId) })
-                    .commits.detail({ uuid: params.commitUuid })
-                    .documents.detail({ uuid: params.documentUuid }).evaluations
-                    .root
+                    .detail({ id: Number(projectId) })
+                    .commits.detail({ uuid: commitUuid })
+                    .documents.detail({ uuid: documentUuid }).evaluations.root
                 }
               />
             </BreadcrumbItem>
@@ -119,9 +119,9 @@ export default async function ConnectedEvaluationLayout({
                     <Link
                       href={`${evaluationRoute}?back=${
                         ROUTES.projects
-                          .detail({ id: Number(params.projectId) })
-                          .commits.detail({ uuid: params.commitUuid })
-                          .documents.detail({ uuid: params.documentUuid })
+                          .detail({ id: Number(projectId) })
+                          .commits.detail({ uuid: commitUuid })
+                          .documents.detail({ uuid: documentUuid })
                           .evaluations.detail(evaluation.id).root
                       }`}
                     >
@@ -143,17 +143,17 @@ export default async function ConnectedEvaluationLayout({
                 provider && provider.token === env.DEFAULT_PROVIDER_API_KEY
               }
               evaluation={evaluation}
-              projectId={params.projectId}
-              commitUuid={params.commitUuid}
-              documentUuid={params.documentUuid}
+              projectId={projectId}
+              commitUuid={commitUuid}
+              documentUuid={documentUuid}
             />
           )
         }
       />
       <MetricsSummary
         commit={commit}
         evaluation={evaluation}
-        documentUuid={params.documentUuid}
+        documentUuid={documentUuid}
       />
       {children}
     </div>

diff --git a/...ectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/page.tsx b/...ectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/page.tsx
@@ -9,26 +9,28 @@ export default async function ConnectedEvaluationPage({
   params,
   searchParams,
 }: {
-  params: {
+  params: Promise<{
     projectId: string
     commitUuid: string
     documentUuid: string
     evaluationId: string
-  }
-  searchParams: QueryParams
+  }>
+  searchParams: Promise<QueryParams>
 }) {
-  const evaluation = await fetchEvaluationCached(Number(params.evaluationId))
+  const { projectId, commitUuid, documentUuid, evaluationId } = await params
+  const { pageSize, page } = await searchParams
+  const evaluation = await fetchEvaluationCached(Number(evaluationId))
   const commit = await findCommitCached({
-    projectId: Number(params.projectId),
-    uuid: params.commitUuid,
+    projectId: Number(projectId),
+    uuid: commitUuid,
   })
   const rows = await computeEvaluationResultsWithMetadata({
     workspaceId: evaluation.workspaceId,
     evaluation,
-    documentUuid: params.documentUuid,
+    documentUuid: documentUuid,
     draft: commit,
-    page: searchParams.page as string | undefined,
-    pageSize: searchParams.pageSize as string | undefined,
+    page: page as string | undefined,
+    pageSize: pageSize as string | undefined,
   })
 
   return <EvaluationResults evaluation={evaluation} evaluationResults={rows} />