Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: update nextjs to v15 #2513

Closed
wants to merge 8 commits into from
Closed

chore: update nextjs to v15 #2513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9cae809
chore: update nextjs to v15, using codemod
Kiryous Nov 17, 2024
5ff2b44
merge: main
Kiryous Nov 18, 2024
00c7ca8
fix: update nextjs version
Kiryous Nov 19, 2024
9cf449f
refactor: extend headers in fetcher
Kiryous Nov 19, 2024
5cb47d3
fix: enable cache for incidents api
Kiryous Nov 19, 2024
5704fc0
chore: bump dependencies
Kiryous Nov 19, 2024
f21d1b5
chore: remove unused function
Kiryous Nov 19, 2024
246b714
chore: remove deprecated <Combobox /> prop
Kiryous Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions keep-ui/app/alerts/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import AlertsPage from "../alerts.client";

type PageProps = {
params: { id: string };
searchParams: { [key: string]: string | string[] | undefined };
params: Promise<{ id: string }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};

export default function Page({ params }: PageProps) {
export default async function Page(props: PageProps) {
const params = await props.params;
return <AlertsPage presetName={params.id} />;
}

Expand Down
27 changes: 17 additions & 10 deletions keep-ui/app/incidents/[id]/activity/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,17 @@ import { getIncidentWithErrorHandling } from "../getIncidentWithErrorHandling";
import { IncidentActivity } from "./incident-activity";
import { getIncidentName } from "@/entities/incidents/lib/utils";

export default async function IncidentActivityPage({
params: { id },
}: {
params: { id: string };
}) {
export default async function IncidentActivityPage(
props: {
params: Promise<{ id: string }>;
}
) {
const params = await props.params;

const {
id
} = params;

const incident = await getIncidentWithErrorHandling(id);
return (
<Card>
Expand All @@ -17,11 +23,12 @@ export default async function IncidentActivityPage({
);
}

export async function generateMetadata({
params,
}: {
params: { id: string };
}): Promise<Metadata> {
export async function generateMetadata(
props: {
params: Promise<{ id: string }>;
}
): Promise<Metadata> {
const params = await props.params;
const incident = await getIncidentWithErrorHandling(params.id);
const incidentName = getIncidentName(incident);
return {
Expand Down
15 changes: 10 additions & 5 deletions keep-ui/app/incidents/[id]/alerts/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,22 @@ import { getIncidentWithErrorHandling } from "../getIncidentWithErrorHandling";
import { getIncidentName } from "@/entities/incidents/lib/utils";

type PageProps = {
params: { id: string };
params: Promise<{ id: string }>;
};

export default async function IncidentAlertsPage({
params: { id },
}: PageProps) {
export default async function IncidentAlertsPage(props: PageProps) {
const params = await props.params;

const {
id
} = params;

const incident = await getIncidentWithErrorHandling(id);
return <IncidentAlerts incident={incident} />;
}

export async function generateMetadata({ params }: PageProps) {
export async function generateMetadata(props: PageProps) {
const params = await props.params;
const incident = await getIncidentWithErrorHandling(params.id);
const incidentName = getIncidentName(incident);
const incidentDescription =
Expand Down
13 changes: 10 additions & 3 deletions keep-ui/app/incidents/[id]/chat/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,22 @@ import { getIncidentWithErrorHandling } from "../getIncidentWithErrorHandling";
import { getIncidentName } from "@/entities/incidents/lib/utils";

type PageProps = {
params: { id: string };
params: Promise<{ id: string }>;
};

export default async function IncidentChatPage({ params: { id } }: PageProps) {
export default async function IncidentChatPage(props: PageProps) {
const params = await props.params;

const {
id
} = params;

const incident = await getIncidentWithErrorHandling(id);
return <IncidentChatClientPage incident={incident} />;
}

export async function generateMetadata({ params }: PageProps) {
export async function generateMetadata(props: PageProps) {
const params = await props.params;
const incident = await getIncidentWithErrorHandling(params.id);
const incidentName = getIncidentName(incident);
const incidentDescription =
Expand Down
19 changes: 12 additions & 7 deletions keep-ui/app/incidents/[id]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,18 @@ import { IncidentHeader } from "./incident-header";
import { getIncidentWithErrorHandling } from "./getIncidentWithErrorHandling";
import { IncidentHeaderSkeleton } from "./incident-header-skeleton";

export default async function Layout({
children,
params: serverParams,
}: {
children: ReactNode;
params: { id: string };
}) {
export default async function Layout(
props: {
children: ReactNode;
params: Promise<{ id: string }>;
}
) {
const serverParams = await props.params;

const {
children
} = props;
Kiryous marked this conversation as resolved.
Show resolved Hide resolved

// TODO: check if this request duplicated
try {
const incident = await getIncidentWithErrorHandling(serverParams.id, false);
Expand Down
8 changes: 4 additions & 4 deletions keep-ui/app/incidents/[id]/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { redirect } from "next/navigation";

type PageProps = {
params: { id: string };
searchParams: { [key: string]: string | string[] | undefined };
params: Promise<{ id: string }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};

// This is just a redirect from legacy route
export function GET(request: Request, props: PageProps) {
redirect(`/incidents/${props.params.id}/alerts`);
export async function GET(request: Request, props: PageProps) {
redirect(`/incidents/${(await props.params).id}/alerts`);
}
15 changes: 10 additions & 5 deletions keep-ui/app/incidents/[id]/timeline/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,22 @@ import { getIncidentWithErrorHandling } from "../getIncidentWithErrorHandling";
import IncidentTimeline from "./incident-timeline";

type PageProps = {
params: { id: string };
params: Promise<{ id: string }>;
};

export default async function IncidentTimelinePage({
params: { id },
}: PageProps) {
export default async function IncidentTimelinePage(props: PageProps) {
const params = await props.params;

const {
id
} = params;

const incident = await getIncidentWithErrorHandling(id);
return <IncidentTimeline incident={incident} />;
}

export async function generateMetadata({ params }: PageProps) {
export async function generateMetadata(props: PageProps) {
const params = await props.params;
const incident = await getIncidentWithErrorHandling(params.id);
const incidentName = getIncidentName(incident);
const incidentDescription =
Expand Down
15 changes: 10 additions & 5 deletions keep-ui/app/incidents/[id]/topology/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@ import { getIncidentWithErrorHandling } from "../getIncidentWithErrorHandling";
import { getIncidentName } from "@/entities/incidents/lib/utils";

type PageProps = {
params: { id: string };
params: Promise<{ id: string }>;
};

export default async function IncidentTopologyPage({
params: { id },
}: PageProps) {
export default async function IncidentTopologyPage(props: PageProps) {
const params = await props.params;

const {
id
} = params;

const incident = await getIncidentWithErrorHandling(id);
return (
<main className="h-[calc(100vh-12rem)]">
Expand All @@ -20,7 +24,8 @@ export default async function IncidentTopologyPage({
);
}

export async function generateMetadata({ params }: PageProps) {
export async function generateMetadata(props: PageProps) {
const params = await props.params;
const incident = await getIncidentWithErrorHandling(params.id);
const incidentName = getIncidentName(incident);
const incidentDescription =
Expand Down
15 changes: 10 additions & 5 deletions keep-ui/app/incidents/[id]/workflows/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,22 @@ import { getIncidentWithErrorHandling } from "../getIncidentWithErrorHandling";
import IncidentWorkflowTable from "./incident-workflow-table";

type PageProps = {
params: { id: string };
params: Promise<{ id: string }>;
};

export default async function IncidentWorkflowsPage({
params: { id },
}: PageProps) {
export default async function IncidentWorkflowsPage(props: PageProps) {
const params = await props.params;

const {
id
} = params;

const incident = await getIncidentWithErrorHandling(id);
return <IncidentWorkflowTable incident={incident} />;
}

export async function generateMetadata({ params }: PageProps) {
export async function generateMetadata(props: PageProps) {
const params = await props.params;
const incident = await getIncidentWithErrorHandling(params.id);
const incidentName = getIncidentName(incident);
const incidentDescription =
Expand Down
6 changes: 1 addition & 5 deletions keep-ui/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,8 @@ import { ConfigProvider } from "./config-provider";
import "./globals.css";
import "react-toastify/dist/ReactToastify.css";
import { PHProvider } from "./posthog-provider";
import dynamic from "next/dynamic";
import ReadOnlyBanner from "./read-only-banner";

const PostHogPageView = dynamic(() => import("@/shared/ui/PostHogPageView"), {
ssr: false,
});
import PostHogPageView from "@/shared/ui/PostHogPageView.client";

// If loading a variable font, you don't need to specify the font weight
const mulish = Mulish({
Expand Down
17 changes: 9 additions & 8 deletions keep-ui/app/providers/oauth2/[providerType]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,18 @@ import { getApiURL } from "@/utils/apiUrl";
import { redirect } from "next/navigation";
import { cookies } from "next/headers";

export default async function InstallFromOAuth({
params,
searchParams,
}: {
params: { providerType: string };
searchParams: { [key: string]: string };
}) {
export default async function InstallFromOAuth(
props: {
params: Promise<{ providerType: string }>;
searchParams: Promise<{ [key: string]: string }>;
}
) {
const searchParams = await props.searchParams;
const params = await props.params;
const accessToken = await getServerSession(authOptions);
// this is server so we can use the old getApiURL
const apiUrl = getApiURL();
const cookieStore = cookies();
const cookieStore = await cookies();
const verifier = cookieStore.get("verifier");
const installWebhook = cookieStore.get("oauth2_install_webhook");
const pullingEnabled = cookieStore.get("oauth2_pulling_enabled");
Expand Down
11 changes: 6 additions & 5 deletions keep-ui/app/providers/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import ProvidersPage from "./page.client";

export default async function Page({
searchParams,
}: {
searchParams?: { [key: string]: string };
}) {
export default async function Page(
props: {
searchParams?: Promise<{ [key: string]: string }>;
}
) {
const searchParams = await props.searchParams;
return <ProvidersPage searchParams={searchParams} />;
Comment on lines +8 to 9
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add error handling and optimize Promise resolution

The current implementation could be improved with proper error handling and optimization:

  1. Missing error handling for Promise rejection
  2. Unnecessary Promise resolution when searchParams is undefined

Consider this implementation:

-  const searchParams = await props.searchParams;
-  return <ProvidersPage searchParams={searchParams} />;
+  try {
+    const searchParams = props.searchParams ? await props.searchParams : undefined;
+    return <ProvidersPage searchParams={searchParams} />;
+  } catch (error) {
+    console.error('Failed to resolve search parameters:', error);
+    // Handle error appropriately
+    return <ProvidersPage searchParams={undefined} />;
+  }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const searchParams = await props.searchParams;
return <ProvidersPage searchParams={searchParams} />;
try {
const searchParams = props.searchParams ? await props.searchParams : undefined;
return <ProvidersPage searchParams={searchParams} />;
} catch (error) {
console.error('Failed to resolve search parameters:', error);
// Handle error appropriately
return <ProvidersPage searchParams={undefined} />;
}

}

Expand Down
7 changes: 4 additions & 3 deletions keep-ui/app/topology/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,15 @@ export const metadata = {
};

type PageProps = {
searchParams: {
searchParams: Promise<{
providerIds?: string[];
services?: string[];
environment?: string;
};
}>;
};

export default async function Page({ searchParams }: PageProps) {
export default async function Page(props: PageProps) {
const searchParams = await props.searchParams;
const session = await getServerSession(authOptions);
const apiUrl = getApiURL();

Expand Down
6 changes: 4 additions & 2 deletions keep-ui/app/workflows/[workflow_id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
'use client'
'use client';
import { use } from "react";
import WorkflowDetailPage from "./executions";

export default function Page({params}:{params: { workflow_id: string }}) {
export default function Page(props:{params: Promise<{ workflow_id: string }>}) {
const params = use(props.params);
return <WorkflowDetailPage params={params}/>;
}
Comment on lines +5 to 8
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Promise-based params handling is inconsistent across route handlers

The verification reveals inconsistent patterns in handling route parameters across the codebase:

  • Some pages use the use hook with Promise-based params:

    • /workflows/[workflow_id]/page.tsx
    • /workflows/[workflow_id]/runs/[workflow_execution_id]/page.tsx
    • /workflows/preview/[workflowId]/page.tsx
    • /workflows/preview/page.tsx

  • While others use async/await pattern:

    • /workflows/builder/[workflowId]/page.tsx
    • /incidents/[id]/* pages
    • /dashboard/[id]/page.tsx
    • Several other route handlers

For consistency, consider standardizing the approach across all route handlers, preferably using the async/await pattern which is more commonly used in the codebase.

🔗 Analysis chain

Verify consistent implementation across route handlers

Let's verify that this pattern of handling promise-based params is consistently implemented across other route handlers in the application.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for consistent implementation of promise-based params across route handlers
# Expected: All page components should handle Promise<params> similarly

# Search for page components with params prop type
ast-grep --pattern 'export default function Page($props: { params: $type }) {
  $$$
}'

# Search for usage of the 'use' hook with params
rg "const params = use\(.*params.*\)" -t tsx

Length of output: 163

Script:

#!/bin/bash
# Let's try a different approach to find route handlers and their params handling

# Find all page.tsx files in the app directory
fd page.tsx

# Then let's examine their content
fd page.tsx --exec cat {}

# Also search for use of the 'use' hook without file type restriction
rg "const params = use\("

Length of output: 20371

13 changes: 7 additions & 6 deletions keep-ui/app/workflows/[workflow_id]/runs/[workflow_execution_id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
"use client";
import React from "react";
import React, { use } from "react";
import WorkflowExecutionResults from "app/workflows/builder/workflow-execution-results";

export default function WorkflowExecutionPage({
params,
}: {
params: { workflow_id: string; workflow_execution_id: string };
}) {
export default function WorkflowExecutionPage(
props: {
params: Promise<{ workflow_id: string; workflow_execution_id: string }>;
}
) {
const params = use(props.params);
return (
<WorkflowExecutionResults workflow_id={params.workflow_id} workflow_execution_id={params.workflow_execution_id} />
);
Expand Down
11 changes: 6 additions & 5 deletions keep-ui/app/workflows/builder/[workflowId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import { authOptions } from "pages/api/auth/[...nextauth]";
import { getApiURL } from "utils/apiUrl";
import PageClient from "../page.client";

export default async function PageWithId({
params,
}: {
params: { workflowId: string };
}) {
export default async function PageWithId(
props: {
params: Promise<{ workflowId: string }>;
}
) {
const params = await props.params;
const accessToken = await getServerSession(authOptions);
// server so we can use getApiUrl
const apiUrl = getApiURL();
Expand Down
7 changes: 4 additions & 3 deletions keep-ui/app/workflows/builder/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import { Suspense } from "react";
import Loading from "../../loading";

type PageProps = {
params: { workflow: string; workflowId: string };
searchParams: { [key: string]: string | string[] | undefined };
params: Promise<{ workflow: string; workflowId: string }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};

export default function Page({ params, searchParams }: PageProps) {
export default async function Page(props: PageProps) {
const params = await props.params;
return (
<Suspense fallback={<Loading />}>
<PageClient workflow={params.workflow} workflowId={params.workflowId} />
Expand Down
Loading