chore: 5397 Upgrade Next.js from v12 to v14 (#6510)

chanzuckerberg · Jan 19, 2024 · 20c5864 · 20c5864
1 parent 0f05229
commit 20c5864
Show file tree

Hide file tree

Showing 51 changed files with 1,963 additions and 1,489 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",
     "@emotion/css": "^11.11.2",
@@ -38,8 +38,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",
@@ -65,7 +65,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",
@@ -76,12 +76,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",
@@ -90,7 +89,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",
@@ -100,7 +99,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",
@@ -120,10 +118,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
@@ -31,7 +31,7 @@ export const StyledBanner = styled(Banner)`
   color: black;
 
   /* Hide default svg icon in the Banner as it is not in figma */
-  :first-child > div:first-child > div:first-child {
+  :first-of-type > div:first-of-type > div:first-of-type {
     display: none;
   }
 
@@ -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
@@ -1,7 +1,6 @@
 import React from "react";
 import Link from "next/link";
 import { ROUTES } from "src/common/constants/routes";
-import { AnchorButton } from "@blueprintjs/core";
 import { track } from "src/common/analytics";
 import { EVENTS } from "src/common/analytics/events";
 import NavDivider from "src/components/Header/components/Nav/components/NavDivider";
@@ -24,58 +23,42 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
         <NavSection>
           <NavSectionTitle>Application</NavSectionTitle>
           <NavItemContainer>
-            <LinkWrapper>
-              <Link href={ROUTES.COLLECTIONS} passHref>
-                <AnchorButton
-                  active={isRouteActive(pathname, ROUTES.COLLECTIONS)}
-                  data-testid="collections-link"
-                  href="passHref"
-                  minimal
-                  onClick={() => {
-                    track(EVENTS.COLLECTIONS_CLICK_NAV);
-                  }}
-                  text="Collections"
-                />
-              </Link>
+            <LinkWrapper
+              isActive={isRouteActive(pathname, ROUTES.COLLECTIONS)}
+              data-testid="collections-link"
+              onClick={() => {
+                track(EVENTS.COLLECTIONS_CLICK_NAV);
+              }}
+            >
+              <Link href={ROUTES.COLLECTIONS}>Collections</Link>
             </LinkWrapper>
-            <LinkWrapper>
-              <Link href={ROUTES.DATASETS} passHref>
-                <AnchorButton
-                  active={isRouteActive(pathname, ROUTES.DATASETS)}
-                  href="passHref"
-                  minimal
-                  onClick={() => {
-                    track(EVENTS.DATASETS_CLICK_NAV);
-                  }}
-                  text="Datasets"
-                />
-              </Link>
+            <LinkWrapper
+              isActive={isRouteActive(pathname, ROUTES.DATASETS)}
+              onClick={() => {
+                track(EVENTS.DATASETS_CLICK_NAV);
+              }}
+            >
+              <Link href={ROUTES.DATASETS}>Datasets</Link>
             </LinkWrapper>
-            <LinkWrapper>
-              <Link href={ROUTES.WHERE_IS_MY_GENE} passHref>
-                <AnchorButton
-                  active={isRouteActive(pathname, ROUTES.WHERE_IS_MY_GENE)}
-                  href="passHref"
-                  minimal
-                  onClick={() => {
-                    track(EVENTS.WMG_CLICK_NAV);
-                  }}
-                  text="Gene Expression"
-                />
+            <LinkWrapper
+              isActive={isRouteActive(pathname, ROUTES.WHERE_IS_MY_GENE)}
+            >
+              <Link
+                href={ROUTES.WHERE_IS_MY_GENE}
+                onClick={() => {
+                  track(EVENTS.WMG_CLICK_NAV);
+                }}
+              >
+                Gene Expression
               </Link>
             </LinkWrapper>
-            <LinkWrapper>
-              <Link href={ROUTES.CELL_GUIDE} passHref>
-                <AnchorButton
-                  active={isRouteActive(pathname, ROUTES.CELL_GUIDE)}
-                  href="passHref"
-                  minimal
-                  onClick={() => {
-                    track(EVENTS.CELL_GUIDE_CLICK_NAV);
-                  }}
-                  text="Cell Guide"
-                />
-              </Link>
+            <LinkWrapper
+              isActive={isRouteActive(pathname, ROUTES.CELL_GUIDE)}
+              onClick={() => {
+                track(EVENTS.CELL_GUIDE_CLICK_NAV);
+              }}
+            >
+              <Link href={ROUTES.CELL_GUIDE}>Cell Guide</Link>
               <BetaChip label="Beta" size="small" />
             </LinkWrapper>
           </NavItemContainer>
@@ -84,30 +67,22 @@ export default function Nav({ className, pathname }: Props): JSX.Element {
         <NavSection>
           <NavSectionTitle>Census</NavSectionTitle>
           <NavItemContainer>
-            <LinkWrapper>
-              <AnchorButton
+            <LinkWrapper isActive={false}>
+              <a
+                onClick={() => track(EVENTS.CENSUS_DOCUMENTATION_CLICK_NAV)}
                 href={CENSUS_LINK}
-                minimal
-                onClick={() => {
-                  track(EVENTS.CENSUS_DOCUMENTATION_CLICK_NAV);
-                }}
-                rel="noopener"
-                target="_self"
-                text="API"
-              />
+                rel="noopener noreferrer"
+              >
+                API
+              </a>
             </LinkWrapper>
-            <LinkWrapper>
-              <Link href={ROUTES.CENSUS_DIRECTORY} passHref>
-                <AnchorButton
-                  active={isRouteActive(pathname, ROUTES.CENSUS_DIRECTORY)}
-                  href="passHref"
-                  minimal
-                  onClick={() => {
-                    track(EVENTS.CENSUS_DIRECTORY_CLICK_NAV);
-                  }}
-                  text="Models"
-                />
-              </Link>
+            <LinkWrapper
+              isActive={isRouteActive(pathname, ROUTES.CENSUS_DIRECTORY)}
+              onClick={() => {
+                track(EVENTS.CENSUS_DIRECTORY_CLICK_NAV);
+              }}
+            >
+              <Link href={ROUTES.CENSUS_DIRECTORY}>Models</Link>
             </LinkWrapper>
           </NavItemContainer>
         </NavSection>