chore: 5397 Upgrade Next.js from v12 to v14

chanzuckerberg · Jan 17, 2024 · 0275cad · 0275cad
1 parent 1f7aff2
commit 0275cad
Show file tree

Hide file tree

Showing 46 changed files with 1,873 additions and 1,378 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -100,3 +100,5 @@ src/views/CellGuide/common/fixtures/allTissues.json
 src/views/CellGuide/common/fixtures/ontologyTree.json
 src/views/CellGuide/common/fixtures/ontologyTreeStatePerCellType.json
 src/views/CellGuide/common/fixtures/ontologyTreeStatePerTissue.json
+
+certificates
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,9 +5,9 @@
   "version": "0.1.0",
   "author": "Chan Zuckerberg Initiative",
   "dependencies": {
-    "@blueprintjs/core": "^4.20.2",
-    "@blueprintjs/icons": "^4.16.0",
-    "@blueprintjs/select": "^4.9.24",
+    "@blueprintjs/core": "^5.8.2",
+    "@blueprintjs/icons": "^5.7.0",
+    "@blueprintjs/select": "^5.0.23",
     "@czi-sds/components": "^18.1.2",
     "@czi-sds/data-viz": "^0.3.0",
     "@datadog/browser-rum": "^5.1.0",
@@ -39,8 +39,8 @@
     "jschardet": "^2.3.0",
     "lodash": "^4.17.21",
     "ml-hclust": "^3.1.0",
-    "next": "^12.3.4",
-    "next-mdx-remote": "^4.1.0",
+    "next": "^14.0.4",
+    "next-mdx-remote": "^4.4.1",
     "next-secure-headers": "^2.2.0",
     "next-sitemap": "^3.1.55",
     "pako": "^2.1.0",
@@ -66,7 +66,7 @@
     "@babel/core": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@blueprintjs/eslint-plugin": "^2.9.1",
+    "@blueprintjs/eslint-plugin": "^6.1.0",
     "@next/eslint-plugin-next": "^11.1.4",
     "@types/adm-zip": "^0.5.5",
     "@types/downloadjs": "^1.4.3",
@@ -77,12 +77,11 @@
     "@types/papaparse": "^5.3.7",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
-    "@types/react": "^18.2.42",
+    "@types/react": "18.2.42",
     "@types/react-dom": "^18.2.18",
     "@types/react-highlight": "^0.12.8",
     "@types/react-table": "^7.7.14",
     "@types/react-window": "^1.8.5",
-    "@types/sharp": "^0.32.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "adm-zip": "^0.5.10",
@@ -91,7 +90,7 @@
     "babel-eslint": "^10.1.0",
     "concurrently": "^6.5.1",
     "eslint": "^8.53.0",
-    "eslint-config-next": "^12.3.4",
+    "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-jsx-expressions": "^1.3.1",
@@ -101,7 +100,6 @@
     "eslint-plugin-sonarjs": "^0.19.0",
     "expect-playwright": "^0.8.0",
     "gray-matter": "^4.0.3",
-    "next-dev-https": "0.2.1",
     "pixelmatch": "^5.3.0",
     "prettier": "^3.0.2",
     "prettier-plugin-organize-imports": "^2.3.4",
@@ -121,10 +119,10 @@
   ],
   "license": "MIT",
   "scripts": {
-    "dev": "next-dev-https --https --port 3000",
+    "dev": "next dev --experimental-https",
     "build": "NODE_OPTIONS=\"--max_old_space_size=2048\" next build",
     "start": "next start",
-    "develop": "next dev",
+    "develop": "next dev --experimental-https",
     "format": "concurrently \"npx prettier --write .\" \"node_modules/.bin/next lint --fix\" \"node_modules/.bin/stylelint --fix '**/*.{js,ts,tsx,css}'\"",
     "serve": "next start",
     "test": "playwright test",

diff --git a/frontend/src/components/BottomBanner/style.ts b/frontend/src/components/BottomBanner/style.ts
@@ -85,7 +85,7 @@ export const StyledCloseButtonIcon = styled(ButtonIcon, {
 `;
 
 export const NewsletterModal = styled(Modal)`
-  .bp4-dialog-header {
+  .bp5-dialog-header {
     display: none !important;
   }
 

diff --git a/...onDatasetsGrid/components/Row/DatsetRow/components/MoreDropdown/components/Menu/index.tsx b/...onDatasetsGrid/components/Row/DatsetRow/components/MoreDropdown/components/Menu/index.tsx
@@ -1,5 +1,5 @@
 import {
-  IMenuItemProps,
+  MenuItemProps,
   Intent,
   Menu as RawMenu,
   MenuItem,
@@ -12,7 +12,7 @@ import DropboxChooser, {
 import DeleteDataset from "../../../DeleteDataset";
 import { Collection } from "src/common/entities";
 
-const DeleteButton = (props: IMenuItemProps) => {
+const DeleteButton = (props: MenuItemProps) => {
   return (
     <MenuItem
       {...props}
@@ -24,7 +24,7 @@ const DeleteButton = (props: IMenuItemProps) => {
   );
 };
 
-const UpdateButton = (props: Partial<IMenuItemProps>) => {
+const UpdateButton = (props: Partial<MenuItemProps>) => {
   return (
     <MenuItem
       {...props}

diff --git a/...omponents/Collection/components/CollectionDatasetsGrid/components/Row/DatsetRow/index.tsx b/...omponents/Collection/components/CollectionDatasetsGrid/components/Row/DatsetRow/index.tsx
@@ -236,7 +236,6 @@ const DatasetRow: FC<Props> = ({
           />
           {hasCXGFile(dataset) && (
             <Tooltip
-              boundary="viewport"
               content={OVER_MAX_CELL_COUNT_TOOLTIP}
               disabled={!isOverMaxCellCount}
               intent={Intent.DANGER}

diff --git a/frontend/src/components/Collection/components/CollectionMetadata/index.tsx b/frontend/src/components/Collection/components/CollectionMetadata/index.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import React from "react";
 import {
   CollectionMetadata as Metadata,
@@ -25,16 +24,14 @@ export default function CollectionMetadata({
       {collectionMetadataLinks.map(({ label, testId, url, value }, i) => (
         <React.Fragment key={`${value}${i}`}>
           <MetadataLabel>{label}</MetadataLabel>
-          <Link href={url} passHref>
-            <MetadataValue
-              data-testid={testId}
-              href="passHref"
-              rel="noopener"
-              target="_blank"
-            >
-              {value}
-            </MetadataValue>
-          </Link>
+          <MetadataValue
+            href={url}
+            data-testid={testId}
+            rel="noopener"
+            target="_blank"
+          >
+            {value}
+          </MetadataValue>
         </React.Fragment>
       ))}
     </Metadata>

diff --git a/frontend/src/components/Collection/components/CollectionMetadata/style.ts b/frontend/src/components/Collection/components/CollectionMetadata/style.ts
@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { fontBodyS } from "@czi-sds/components";
 import { gray500, primary400, spacesS, spacesXl } from "src/common/theme";
+import Link from "next/link";
 
 export const CollectionMetadata = styled.div`
   display: grid;
@@ -16,7 +17,7 @@ export const MetadataLabel = styled.span`
   color: ${gray500};
 `;
 
-export const MetadataValue = styled.a`
+export const MetadataValue = styled(Link)`
   color: ${primary400};
   word-break: break-word;
 

diff --git a/frontend/src/components/Collection/components/CollectionRevisionStatusCallout/index.tsx b/frontend/src/components/Collection/components/CollectionRevisionStatusCallout/index.tsx
@@ -18,15 +18,17 @@ export default function CollectionRevisionStatusCallout({
         {!!revising_in && (
           <span>
             This public collection has a pending revision.{" "}
-            <Link href={`/collections/${revising_in}`} passHref>
+            {/* (thuang): use `legacyBehavior` prop, since `<TextLink />` is `<a />` */}
+            <Link href={`/collections/${revising_in}`} legacyBehavior passHref>
               <TextLink href="passHref">Continue Revision</TextLink>
             </Link>
           </span>
         )}
         {!!revision_of && (
           <span>
             This is a private revision of a published collection.{" "}
-            <Link href={`/collections/${revision_of}`} passHref>
+            {/* (thuang): use `legacyBehavior` prop, since `<TextLink />` is `<a />` */}
+            <Link href={`/collections/${revision_of}`} legacyBehavior passHref>
               <TextLink href="passHref">Open Published Collection</TextLink>
             </Link>
           </span>

diff --git a/frontend/src/components/Collections/components/PublishCollection/components/Policy/style.ts b/frontend/src/components/Collections/components/PublishCollection/components/Policy/style.ts
@@ -34,7 +34,7 @@ export const ContentWrapper = styled.div`
 `;
 
 export const ButtonWrapper = styled.span`
-  .bp4-button.bp4-small {
+  .bp5-button.bp5-small {
     padding: 0;
   }
 `;

diff --git a/frontend/src/components/CreateCollectionModal/index.tsx b/frontend/src/components/CreateCollectionModal/index.tsx
@@ -1,4 +1,4 @@
-import { Dialog, IButtonProps } from "@blueprintjs/core";
+import { Dialog } from "@blueprintjs/core";
 import loadable from "@loadable/component";
 import * as React from "react";
 import { FC, useState } from "react";
@@ -11,6 +11,7 @@ import { useUserInfo } from "src/common/queries/auth";
 import { removeParams } from "src/common/utils/removeParams";
 import { StyledButton } from "./style";
 import { useRouter } from "next/router";
+import { ButtonProps } from "@czi-sds/components";
 
 const AsyncContent = loadable(
   () =>
@@ -24,7 +25,7 @@ const AsyncCTA = loadable(
     /*webpackChunkName: 'CreateCollectionModalCTA' */ import("./components/CTA")
 );
 
-const CreateCollectionButton = (props: Partial<IButtonProps>) => (
+const CreateCollectionButton = (props: Partial<ButtonProps>) => (
   <StyledButton sdsStyle="square" sdsType="primary" {...props}>
     Create Collection
   </StyledButton>

diff --git a/frontend/src/components/Datasets/components/Grid/components/DatasetActionsCell/index.tsx b/frontend/src/components/Datasets/components/Grid/components/DatasetActionsCell/index.tsx
@@ -34,7 +34,6 @@ export default function DatasetsActionsCell({
         name={name}
       />
       <Tooltip
-        boundary="viewport"
         content={OVER_MAX_CELL_COUNT_TOOLTIP}
         disabled={!isOverMaxCellCount}
         intent={Intent.DANGER}

diff --git a/frontend/src/components/Header/components/Nav/index.tsx b/frontend/src/components/Header/components/Nav/index.tsx
@@ -25,7 +25,8 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
           <NavSectionTitle>Application</NavSectionTitle>
           <NavItemContainer>
             <LinkWrapper>
-              <Link href={ROUTES.COLLECTIONS} passHref>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
+              <Link href={ROUTES.COLLECTIONS} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.COLLECTIONS)}
                   data-testid="collections-link"
@@ -39,7 +40,8 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
               </Link>
             </LinkWrapper>
             <LinkWrapper>
-              <Link href={ROUTES.DATASETS} passHref>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
+              <Link href={ROUTES.DATASETS} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.DATASETS)}
                   href="passHref"
@@ -52,7 +54,8 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
               </Link>
             </LinkWrapper>
             <LinkWrapper>
-              <Link href={ROUTES.WHERE_IS_MY_GENE} passHref>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
+              <Link href={ROUTES.WHERE_IS_MY_GENE} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.WHERE_IS_MY_GENE)}
                   href="passHref"
@@ -65,7 +68,8 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
               </Link>
             </LinkWrapper>
             <LinkWrapper>
-              <Link href={ROUTES.CELL_GUIDE} passHref>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
+              <Link href={ROUTES.CELL_GUIDE} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.CELL_GUIDE)}
                   href="passHref"
@@ -97,7 +101,8 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
               />
             </LinkWrapper>
             <LinkWrapper>
-              <Link href={ROUTES.CENSUS_DIRECTORY} passHref>
+              {/* (thuang): use `legacyBehavior` prop, since `<AnchorButton />` is `<a />` */}
+              <Link href={ROUTES.CENSUS_DIRECTORY} passHref legacyBehavior>
                 <AnchorButton
                   active={isRouteActive(pathname, ROUTES.CENSUS_DIRECTORY)}
                   href="passHref"

diff --git a/frontend/src/components/common/Form/TextArea/index.tsx b/frontend/src/components/common/Form/TextArea/index.tsx
@@ -1,6 +1,6 @@
 import {
   Intent,
-  ITextAreaProps,
+  TextAreaProps,
   TextArea as RawTextArea,
 } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
@@ -17,7 +17,7 @@ const ErrorIcon = () => {
   return <StyledDangerIcon icon={IconNames.ISSUE} intent={Intent.DANGER} />;
 };
 
-interface Props extends ITextAreaProps {
+interface Props extends TextAreaProps {
   isValid?: boolean;
   syncValidation?: Array<(value: string) => boolean>;
   handleChange?: ({ isValid, value, name }: Value) => void;

diff --git a/frontend/src/components/common/Grid/components/LinkCell/index.tsx b/frontend/src/components/common/Grid/components/LinkCell/index.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import React from "react";
 import { StyledAnchor } from "src/components/common/Grid/components/LinkCell/style";
 
@@ -13,10 +12,8 @@ export default function LinkCell({
   ...props /* Spread props to allow for data-testid. */
 }: Props): JSX.Element {
   return (
-    <Link href={url} passHref>
-      <StyledAnchor href="passHref" {...props}>
-        {value}
-      </StyledAnchor>
-    </Link>
+    <StyledAnchor href={url} {...props}>
+      {value}
+    </StyledAnchor>
   );
 }
diff --git a/frontend/src/components/common/Grid/components/LinkCell/style.ts b/frontend/src/components/common/Grid/components/LinkCell/style.ts
@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
+import Link from "next/link";
 import { primary400, primary500 } from "src/common/theme";
 
-export const StyledAnchor = styled.a`
+export const StyledAnchor = styled(Link)`
   color: ${primary400};
   display: block;
 

diff --git a/frontend/src/components/common/Grid/components/NTag/index.tsx b/frontend/src/components/common/Grid/components/NTag/index.tsx
@@ -16,7 +16,6 @@ export default function NTag({ label, values }: Props): JSX.Element {
     .map((begin) => values.slice(begin, begin + CHUNK_SIZE));
   return (
     <Popover
-      boundary="viewport"
       content={
         <ContentWrapper>
           {chunkedValues.map((chunk, index) => (

diff --git a/frontend/src/components/common/HomepageLink/index.tsx b/frontend/src/components/common/HomepageLink/index.tsx
@@ -9,10 +9,8 @@ interface Props {
 
 export const HomepageLink: FC<Props> = ({ homeUrl }) => {
   return (
-    <Link href={homeUrl || ROUTES.HOMEPAGE} passHref>
-      <a href="passHref">
-        <Logo />
-      </a>
+    <Link href={homeUrl || ROUTES.HOMEPAGE}>
+      <Logo />
     </Link>
   );
 };
diff --git a/frontend/src/components/common/Modal/style.ts b/frontend/src/components/common/Modal/style.ts
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 
 export const StyledDialog = styled(Dialog)`
   && {
-    .bp4-heading {
+    .bp5-heading {
       font-size: 16px;
       height: 57px;
       display: flex;

diff --git a/frontend/src/components/common/MoreDropdown/index.tsx b/frontend/src/components/common/MoreDropdown/index.tsx
@@ -1,14 +1,15 @@
-import { IButtonProps, IPopoverProps, Popover } from "@blueprintjs/core";
+import { PopoverProps, Popover } from "@blueprintjs/core";
+import { ButtonIconProps } from "@czi-sds/components";
 import { MoreButton } from "src/components/common/MoreDropdown/style";
 
 interface Props {
-  popoverProps?: IPopoverProps;
-  buttonProps?: IButtonProps;
+  popoverProps?: PopoverProps;
+  buttonProps?: Partial<ButtonIconProps<"dotsHorizontal", "small">>;
 }
 
 const MoreDropdown = ({
   popoverProps = {},
-  buttonProps = {},
+  buttonProps = {} as Props["buttonProps"],
 }: Props): JSX.Element => {
   return (
     <Popover {...popoverProps}>