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

tihuan · 2024-01-12T22:48:31Z

Reason for Change

Upgrade to Next.js 14 #5397
If the reason for this PR's code changes are not clear in the issue, state value/impact

Changes

Upgrade Next.js from 12 to 14
Upgrade Blueprintjs from 4 to 5
Update code to use the new next/image and next/link
See inline PR comments for details
Remove package next-dev-https, since Next.js now has their own dev server https mode
Some Census Directory changes that might need @seve to review to make sure the code changes are good
Some Blueprint Tooltip changes that might need @MillenniumFalconMechanic and @frano-m to take a look to make sure they're good

Known Issues

Our Blueprint Popover usage will still cause React to throw Legacy Context API error, which I think is because Blueprint v5 Portal still supports the Legacy Context API and will only remove the support in v6

Testing steps

The whole app should work as before

Checklist 🛎️

Add product, design, and eng as reviewers for rdev review
For UI changes, add screenshots/videos, so the reviewers know what you expect them to see
For UI changes, add e2e tests to prevent regressions

Notes for Reviewer

github-actions · 2024-01-12T22:48:45Z

Deployment Summary

backend_url: https://pr-6510-backend.rdev.single-cell.czi.technology
frontend_url: https://pr-6510-frontend.rdev.single-cell.czi.technology
delete_db_task_definition_arn: arn:aws:ecs:us-west-2:***:task-definition/dp-rdev-pr-6510-deletion:1
migrate_db_task_definition_arn: arn:aws:ecs:us-west-2:***:task-definition/dp-rdev-pr-6510-migration:1

codecov · 2024-01-12T22:56:07Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (0f05229) 92.12% compared to head (0ca8504) 92.12%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6510   +/-   ##
=======================================
  Coverage   92.12%   92.12%           
=======================================
  Files         180      180           
  Lines       14849    14849           
=======================================
  Hits        13679    13679           
  Misses       1170     1170

Flag	Coverage Δ
unittests	`92.12% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

tihuan · 2024-01-17T18:30:54Z

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


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

tihuan · 2024-01-17T18:31:06Z

frontend/package.json

+    "@blueprintjs/core": "^5.8.2",
+    "@blueprintjs/icons": "^5.7.0",
+    "@blueprintjs/select": "^5.0.23",


Blueprint upgraded from v4 to v5

tihuan · 2024-01-17T18:32:27Z

frontend/package.json

@@ -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",


Nexstjs now has built in https dev server mode

tihuan · 2024-01-17T18:32:45Z

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 {


lots of bp4 -> bp5 changes. Here and throughout

tihuan · 2024-01-17T18:32:57Z

...ctionDatasetsGrid/components/Row/DatsetRow/components/MoreDropdown/components/Menu/index.tsx

@@ -1,5 +1,5 @@
 import {
-  IMenuItemProps,
+  MenuItemProps,


Blueprint js API changes

tihuan · 2024-01-17T22:29:42Z

frontend/tests/utils/wmgUtils.ts

+  const sourceDataButton = page.getByTestId(SOURCE_DATA_BUTTON_ID);
+  const sourceDataList = page.getByTestId(SOURCE_DATA_LIST_ID);


use the constants as single source of truth

tihuan · 2024-01-17T22:30:12Z

frontend/tests/utils/wmgUtils.ts

-      await page.keyboard.press("Escape");
-


update test steps here, since the new version of Blueprint doesn't work with Escape reliably

tihuan · 2024-01-17T22:30:39Z

frontend/tsconfig.json

+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]


actual change from Next.js upgrade

tihuan · 2024-01-17T22:30:48Z

frontend/tsconfig.json

+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    ".next/types/**/*.ts"


actual change from Next.js upgrade

tihuan · 2024-01-17T22:30:54Z

frontend/tsconfig.json

@@ -5,24 +5,48 @@
    "esModuleInterop": true,


lots of prettier changes

frano-m · 2024-01-18T04:48:43Z

frontend/src/components/CreateCollectionModal/index.tsx

@@ -24,7 +25,7 @@ const AsyncCTA = loadable(
    /*webpackChunkName: 'CreateCollectionModalCTA' */ import("./components/CTA")
 );

-const CreateCollectionButton = (props: Partial<IButtonProps>) => (
+const CreateCollectionButton = (props: Partial<ButtonProps>) => (


Nice pick up thanks @tihuan! ⭐

frano-m · 2024-01-18T05:05:57Z

frontend/src/components/common/MoreDropdown/index.tsx

-  popoverProps?: IPopoverProps;
-  buttonProps?: IButtonProps;
+  popoverProps?: PopoverProps;
+  buttonProps?: Partial<ButtonIconProps<"dotsHorizontal", "small">>;


@tihuan thank you 🎆

frano-m · 2024-01-18T05:42:13Z

Hi @tihuan, I'm seeing a new warnings in my terminal. Are you seeing these too?

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

And The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". (home page only)?

tihuan · 2024-01-18T15:53:53Z

Thanks so much for the thorough testing, @frano-m ! Sorry that I missed those warnings 🙏 I'll fix them today!

I can repro the NTag warning too 🙆‍♂️

tihuan · 2024-01-18T18:39:48Z

@frano-m I fixed the layout effect error (caused by using Blueprint AnchorButton) and replaced :first-childwith:first-of-type`, and the errors seemed to go away now!

The Blueprint5.Portal error I think it's because Blueprintv5 is still supporting React Legacy Context API and only marking it as deprecated. So I think the error naturally go away once Blueprint removes the support in v6!

tihuan · 2024-01-18T18:41:03Z

frontend/src/components/Header/components/Nav/index.tsx

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


@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!

tihuan · 2024-01-18T21:50:05Z

Thanks so much for the review, @seve ! Will wait for @frano-m to approve before merging 👍 !

frano-m

LGTM @tihuan! Nice work and thank you 🚀

tihuan · 2024-01-19T16:20:47Z

Amazing! Thanks so much again for catching the errors, @frano-m 🤩 🙏 !

tihuan force-pushed the thuang-5397-next-upgrade branch 4 times, most recently from d059e32 to 247b739 Compare January 17, 2024 19:01

tihuan commented Jan 17, 2024

View reviewed changes

tihuan force-pushed the thuang-5397-next-upgrade branch from 970aa5d to 0275cad Compare January 17, 2024 22:32

tihuan changed the title ~~chore: Upgrade Next.js from v12 to v14~~ chore: 5397 Upgrade Next.js from v12 to v14 Jan 17, 2024

tihuan requested review from seve, kaloster and frano-m January 17, 2024 22:54

tihuan marked this pull request as ready for review January 17, 2024 22:54

tihuan requested review from MillenniumFalconMechanic and removed request for kaloster January 17, 2024 22:58

frano-m reviewed Jan 18, 2024

View reviewed changes

tihuan added 3 commits January 18, 2024 10:19

chore: 5397 Upgrade Next.js from v12 to v14

014c639

update nav link style

b0c26a8

replace first-child usage

5ce5bfe

tihuan force-pushed the thuang-5397-next-upgrade branch from 68108ef to 5ce5bfe Compare January 18, 2024 18:19

fix lint

b439453

tihuan commented Jan 18, 2024

View reviewed changes

seve approved these changes Jan 18, 2024

View reviewed changes

Merge branch 'main' into thuang-5397-next-upgrade

0ca8504

frano-m approved these changes Jan 19, 2024

View reviewed changes

tihuan merged commit 20c5864 into main Jan 19, 2024
40 checks passed

tihuan deleted the thuang-5397-next-upgrade branch January 19, 2024 16:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tihuan commented Jan 12, 2024 •

edited

github-actions bot commented Jan 12, 2024

codecov bot commented Jan 12, 2024 •

edited

tihuan Jan 17, 2024

tihuan Jan 17, 2024

tihuan Jan 17, 2024

tihuan Jan 17, 2024

tihuan Jan 17, 2024

tihuan Jan 17, 2024

tihuan Jan 17, 2024

tihuan Jan 17, 2024

tihuan Jan 17, 2024

tihuan Jan 17, 2024

frano-m Jan 18, 2024

frano-m Jan 18, 2024

frano-m commented Jan 18, 2024 •

edited

tihuan commented Jan 18, 2024

tihuan commented Jan 18, 2024

tihuan Jan 18, 2024

tihuan commented Jan 18, 2024

frano-m left a comment

tihuan commented Jan 19, 2024

		const sourceDataButton = page.getByTestId(SOURCE_DATA_BUTTON_ID);
		const sourceDataList = page.getByTestId(SOURCE_DATA_LIST_ID);

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

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

Conversation

tihuan commented Jan 12, 2024 • edited

Reason for Change

Changes

Known Issues

Testing steps

Checklist 🛎️

Notes for Reviewer

github-actions bot commented Jan 12, 2024

Deployment Summary

codecov bot commented Jan 12, 2024 • edited

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frano-m commented Jan 18, 2024 • edited

tihuan commented Jan 18, 2024

tihuan commented Jan 18, 2024

Choose a reason for hiding this comment

tihuan commented Jan 18, 2024

frano-m left a comment

Choose a reason for hiding this comment

tihuan commented Jan 19, 2024

tihuan commented Jan 12, 2024 •

edited

codecov bot commented Jan 12, 2024 •

edited

frano-m commented Jan 18, 2024 •

edited