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
Show file tree
Hide file tree
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
Expand Up @@ -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
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/BottomBanner/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}

Expand Down
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,
Expand All @@ -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}
Expand All @@ -24,7 +24,7 @@ const DeleteButton = (props: IMenuItemProps) => {
);
};

const UpdateButton = (props: Partial<IMenuItemProps>) => {
const UpdateButton = (props: Partial<MenuItemProps>) => {
return (
<MenuItem
{...props}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
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,
Expand All @@ -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>
Expand Down
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;
Expand All @@ -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;

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

export const ButtonWrapper = styled.span`
.bp4-button.bp4-small {
.bp5-button.bp5-small {
padding: 0;
}
`;
Expand Down
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";
Expand All @@ -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(
() =>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export default function DatasetsActionsCell({
name={name}
/>
<Tooltip
boundary="viewport"
content={OVER_MAX_CELL_COUNT_TOOLTIP}
disabled={!isOverMaxCellCount}
intent={Intent.DANGER}
Expand Down
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";
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading
Loading