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.

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

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

Merged
merged 5 commits into from
Jan 19, 2024
Merged
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions frontend/.gitignore
Original file line number Diff line number Diff line change
@@ -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
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nextjs built in https local FE server creates certs in this directory

2,785 changes: 1,622 additions & 1,163 deletions frontend/package-lock.json

Large diffs are not rendered by default.

22 changes: 10 additions & 12 deletions frontend/package.json
Original file line number Diff line number Diff line change
@@ -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",
Comment on lines +8 to +10
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Blueprint upgraded from v4 to v5

"@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",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nexstjs now has built in https dev server mode

"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",
4 changes: 2 additions & 2 deletions frontend/src/components/BottomBanner/style.ts
Original file line number Diff line number Diff line change
@@ -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 {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

lots of bp4 -> bp5 changes. Here and throughout

display: none !important;
}

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {
IMenuItemProps,
MenuItemProps,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Blueprint js API changes

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}
Original file line number Diff line number Diff line change
@@ -236,7 +236,6 @@ const DatasetRow: FC<Props> = ({
/>
{hasCXGFile(dataset) && (
<Tooltip
boundary="viewport"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@MillenniumFalconMechanic @frano-m it doesn't seem like we need to specify viewport anymore and the tooltip seems to still work as expected?

PTAL if I missed anything lol 🙏

Thank you!

Screenshot 2024-01-16 at 9 09 30 AM Screenshot 2024-01-17 at 10 34 28 AM

Copy link
Collaborator

@frano-m frano-m Jan 18, 2024

Choose a reason for hiding this comment

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

Hi @tihuan, this looks good to me! As a side note, I am seeing a warning in the console - when hovering over the NTag and Explore button. Are you seeing this as well?

client.js:1 Warning: Legacy context API has been detected within a strict-mode tree. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Please update the following components: Blueprint5.Portal

content={OVER_MAX_CELL_COUNT_TOOLTIP}
disabled={!isOverMaxCellCount}
intent={Intent.DANGER}
Original file line number Diff line number Diff line change
@@ -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}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

New next/link doesn't need to nest a <a /> anymore!

data-testid={testId}
rel="noopener"
target="_blank"
>
{value}
</MetadataValue>
</React.Fragment>
))}
</Metadata>
Original file line number Diff line number Diff line change
@@ -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;

Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@ export const ContentWrapper = styled.div`
`;

export const ButtonWrapper = styled.span`
.bp4-button.bp4-small {
.bp5-button.bp5-small {
padding: 0;
}
`;
5 changes: 3 additions & 2 deletions frontend/src/components/CreateCollectionModal/index.tsx
Original file line number Diff line number Diff line change
@@ -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}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Nice pick up thanks @tihuan! ⭐

Create Collection
</StyledButton>
Original file line number Diff line number Diff line change
@@ -34,7 +34,6 @@ export default function DatasetsActionsCell({
name={name}
/>
<Tooltip
boundary="viewport"
content={OVER_MAX_CELL_COUNT_TOOLTIP}
disabled={!isOverMaxCellCount}
intent={Intent.DANGER}
117 changes: 46 additions & 71 deletions frontend/src/components/Header/components/Nav/index.tsx
Original file line number Diff line number Diff line change
@@ -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
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@seve I removed AnchorButton usage since it violates React 18 usage. I think the nav link still works after I updated the style. But PTAL in case I missed anything 🙏 Thank you!

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>
Loading
Loading