Upgrade next to 14.2.16 (#5756)

Upgrading cuz I think it's a good idea to be on a more recent version.
idk what the consequences will be

Theres also next 15.something but that came out really recently and
next-auth doesn't list it as a compatible version

octokit types changed which is why webhookToDyanamo looks different.
Functionality should be the same, mostly just type changes + casting,
and we have tests after #5869

Cousin to #5862 but does both
slightly less and slightly more

torchci/components/NavBar.tsx

@@ -163,10 +163,9 @@ function NavBar() {
             <Link
               href="https://github.com/pytorch/test-infra/tree/main/torchci"
               passHref
+              style={{ color: "black" }}
             >
-              <a style={{ color: "black" }}>
-                <AiFillGithub />
-              </a>
+              <AiFillGithub />
             </Link>
           </li>
           <li style={{ padding: "0 1rem" }}>

torchci/jest.config.js

@@ -12,6 +12,7 @@ const customJestConfig = {
     "@opensearch-project/opensearch/aws":
       "@opensearch-project/opensearch/lib/aws/index.js",
   },
+  setupFilesAfterEnv: ["<rootDir>/test/setup.ts"],
 };
 
 module.exports = createJestConfig(customJestConfig);

torchci/lib/bot/webhookToDynamo.ts

@@ -1,35 +1,26 @@
-import {
-  EmitterWebhookEvent as WebhookEvent,
-  EmitterWebhookEventName as WebhookEvents,
-} from "@octokit/webhooks";
 import { getDynamoClient } from "lib/dynamo";
-import { Probot } from "probot";
+import { Context, Probot } from "probot";
 import { v4 as uuidv4 } from "uuid";
 
-function narrowType<E extends WebhookEvents>(
-  event: E,
-  context: WebhookEvent
-): context is WebhookEvent<E> {
-  return context.name === event;
-}
-
 async function handleWorkflowJob(
-  event: WebhookEvent<"workflow_run" | "workflow_job">
+  event: Context<"workflow_run" | "workflow_job">
 ) {
   // Thre is the chance that job ids from different repos could collide. To
   // prevent this, prefix the object key with the repo that they come from.
   const key_prefix = event.payload.repository.full_name + "/";
 
   let key;
-  let payload;
   let table;
-  if (narrowType("workflow_job", event)) {
-    key = `${key_prefix}${event.payload.workflow_job.id}`;
-    payload = event.payload.workflow_job;
+  let payload;
+  if (event.name === "workflow_job") {
+    payload = (event as unknown as Context<"workflow_job">).payload
+      .workflow_job;
+    key = `${key_prefix}${payload.id}`;
     table = "torchci-workflow-job";
-  } else if (narrowType("workflow_run", event)) {
-    key = `${key_prefix}${event.payload.workflow_run.id}`;
-    payload = event.payload.workflow_run;
+  } else if (event.name === "workflow_run") {
+    payload = (event as unknown as Context<"workflow_run">).payload
+      .workflow_run;
+    key = `${key_prefix}${payload.id}`;
     table = "torchci-workflow-run";
   }
 
@@ -43,7 +34,7 @@ async function handleWorkflowJob(
   });
 }
 
-async function handleIssues(event: WebhookEvent<"issues">) {
+async function handleIssues(event: Context<"issues">) {
   const key_prefix = event.payload.repository.full_name + "/";
   const client = getDynamoClient();
 
@@ -56,7 +47,7 @@ async function handleIssues(event: WebhookEvent<"issues">) {
   });
 }
 
-async function handleIssueComment(event: WebhookEvent<"issue_comment">) {
+async function handleIssueComment(event: Context<"issue_comment">) {
   const key_prefix = event.payload.repository.full_name;
   const client = getDynamoClient();
 
@@ -69,7 +60,7 @@ async function handleIssueComment(event: WebhookEvent<"issue_comment">) {
   });
 }
 
-async function handlePullRequest(event: WebhookEvent<"pull_request">) {
+async function handlePullRequest(event: Context<"pull_request">) {
   const key_prefix = event.payload.repository.full_name + "/";
   const client = getDynamoClient();
 
@@ -82,7 +73,7 @@ async function handlePullRequest(event: WebhookEvent<"pull_request">) {
   });
 }
 
-async function handlePush(event: WebhookEvent<"push">) {
+async function handlePush(event: Context<"push">) {
   const key_prefix = event.payload.repository.full_name + "/";
   const client = getDynamoClient();
 
@@ -95,9 +86,7 @@ async function handlePush(event: WebhookEvent<"push">) {
   });
 }
 
-async function handlePullRequestReview(
-  event: WebhookEvent<"pull_request_review">
-) {
+async function handlePullRequestReview(event: Context<"pull_request_review">) {
   const key_prefix = event.payload.repository.full_name;
   const client = getDynamoClient();
 
@@ -111,7 +100,7 @@ async function handlePullRequestReview(
 }
 
 async function handlePullRequestReviewComment(
-  event: WebhookEvent<"pull_request_review_comment">
+  event: Context<"pull_request_review_comment">
 ) {
   const key_prefix = event.payload.repository.full_name;
   const client = getDynamoClient();

torchci/lib/useGroupingPreference.tsx

@@ -27,7 +27,7 @@ export function usePreference(
   // Gets around hydration errors?
   useEffect(() => {
     setState(initialVal);
-  }, []);
+  }, [initialVal]);
 
   return [state, setStatePersist];
 }

torchci/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

torchci/package.json

@@ -26,8 +26,8 @@
     "@mui/material": "^5.14.1",
     "@mui/x-data-grid": "^5.9.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.1",
-    "@octokit/webhooks": "^9.26.3",
-    "@octokit/webhooks-types": "^6.5.0",
+    "@octokit/webhooks": "^13.3.0",
+    "@octokit/webhooks-types": "^7.6.1",
     "@opensearch-project/opensearch": "^2.3.1",
     "@rockset/client": "^0.8.9",
     "@types/minimist": "^1.2.2",
@@ -42,12 +42,12 @@
     "lodash": "^4.17.21",
     "minimatch": "^9.0.3",
     "minimist": "^1.2.6",
-    "next": "12.1.5",
+    "next": "14.2.16",
     "next-auth": "^4.24.5",
     "octokit": "^1.7.1",
     "probot": "^12.3.3",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
     "react-icons": "^4.3.1",
     "react-linkify-it": "1.0.7",
@@ -65,7 +65,7 @@
   "devDependencies": {
     "@types/argparse": "^2.0.10",
     "@types/echarts": "^4.9.14",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^29.5.14",
     "@types/jsdom": "^16.2.14",
     "@types/lodash": "^4.14.182",
     "@types/node": "^17.0.40",
@@ -78,11 +78,12 @@
     "dotenv": "^16.0.0",
     "eslint": "8.13.0",
     "eslint-config-next": "12.1.5",
-    "jest": "^27.5.0",
+    "jest": "^29.7.0",
     "monaco-editor": "^0.33.0",
     "nock": "^13.2.6",
     "prettier": "2.6.2",
     "prettier-plugin-organize-imports": "^3.2.4",
+    "ts-jest": "^29.2.5",
     "typescript": "4.6.3"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

torchci/pages/api/log_annotation/[repoOwner]/[repoName]/[annotation].ts

@@ -19,8 +19,8 @@ export default async function handler(
   }
 
   const { repoOwner, repoName, annotation } = req.query;
-  const repoOwnerStr = Array.isArray(repoOwner) ? repoOwner[0] : repoOwner;
-  const repoNameStr = Array.isArray(repoName) ? repoName[0] : repoName;
+  const repoOwnerStr = Array.isArray(repoOwner) ? repoOwner[0] : repoOwner!;
+  const repoNameStr = Array.isArray(repoName) ? repoName[0] : repoName!;
   const octokit = await getOctokit(repoOwnerStr, repoNameStr);
   const user = await octokit.rest.users.getAuthenticated();
   const hasPermission = hasWritePermissionsUsingOctokit(

torchci/test/setup.ts

@@ -0,0 +1,18 @@
+// Taken from https://stackoverflow.com/a/77157708 to get around errors like
+// `TypeError: Cannot redefine property: searchSimilarFailures` when using
+// jest.spyOn when upgrading to node 14.2.16.
+// The following Object.defineProperty wrapper will ensure that all esModule exports
+// are configurable and can be mocked by Jest.
+const objectDefineProperty = Object.defineProperty;
+Object.defineProperty = function <T>(
+  obj: T,
+  propertyName: PropertyKey,
+  attributes: PropertyDescriptor & ThisType<any>
+): T {
+  if ((obj as { __esModule?: true })["__esModule"]) {
+    attributes = { ...attributes, configurable: true };
+  }
+  return objectDefineProperty(obj, propertyName, attributes);
+};
+
+export {};