Upgrade Next version in Admin UI and Privacy Center #5111

gilluminate · 2024-07-19T20:34:09Z

Closes PROD-2077

Description Of Changes

Upgrades our clients to NextJS version 14. We need to upgrade to a later version to be able to use server-side props.

Code Changes

Fix instances of NextLink which had breaking changes
Update deployment configs now that next export is no longer available. Use output: "export" on the config instead.
Upgrade npm packages next and eslint-config-next to latest version (currently 14.2.5)

Steps to Confirm

General regression testing
Build/deploy success

Pre-Merge Checklist

All CI Pipelines Succeeded
Issue Requirements are Met
Update CHANGELOG.md

vercel · 2024-07-19T20:34:12Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 23, 2024 3:16pm

gilluminate · 2024-07-19T20:46:57Z

clients/admin-ui/.env.test

@@ -1,4 +1,3 @@
 NEXT_PUBLIC_FIDESOPS_API=http://0.0.0.0:8080
 NEXT_PUBLIC_FIDESCTL_API=/api/v1
-NEXT_PUBLIC_FIDESCTL_API_SERVER=http://0.0.0.0:8080


we never use NEXT_PUBLIC_FIDESCTL_API_SERVER in tests so I removed it.

gilluminate · 2024-07-19T20:49:41Z

clients/admin-ui/cypress/e2e/nav-bar.cy.ts

@@ -8,7 +8,7 @@ describe("Nav Bar", () => {
  it("renders all navigation groups with links inside", () => {
    cy.visit("/");

-    cy.get("nav button").should("have.length", 7);
+    cy.get("[id^='accordion-button']").should("have.length", 4);


After updating uses of NextLinks, some of the elements are an <a> now depending on what they do. So this update is for testing for the actual group headings instead, as the test name suggests.

gilluminate · 2024-07-19T20:51:34Z

clients/admin-ui/next.config.js

+// Export the static site for production.
+// Rewrites are not supported in static sites.
+if (process.env.PROD_EXPORT === "true") {
+  delete nextConfig.rewrites;
+  nextConfig.output = "export";
+}


these changes are needed because next export has been removed in favor of output: "export".

gilluminate · 2024-07-19T20:55:39Z

clients/admin-ui/src/features/common/table/v2/cells.tsx

@@ -203,7 +203,7 @@ export const DefaultHeaderCell = <T,>({
  </Text>
 );

-interface EnableCellProps extends Omit<SwitchProps, "value"> {
+interface EnableCellProps extends Omit<SwitchProps, "value" | "onToggle"> {


updated type definition means these onToggle types are no longer compatible so we needed to omit here in favor of our own definition for this use case.

Nice usage of Omit! I'll keep this in mind for later

gilluminate · 2024-07-19T20:57:57Z

clients/package.json

@@ -1,4 +1,5 @@
 {
+  "private": true,


eliminates build warnings about missing "license"

gilluminate · 2024-07-19T20:58:32Z

clients/privacy-center/.babelrc

-{
-  "presets": ["next/babel"]
-}


next no longer uses babel

gilluminate · 2024-07-19T20:59:20Z

clients/privacy-center/tsconfig.json

+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.d.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.d.ts",
+    ".next/types/**/*.ts"
+  ],


these changes were added automatically after upgrading next and I didn't argue.

cypress · 2024-07-19T21:20:15Z

Passing run #9097 ↗︎

0	4	0	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Merge `b043a90` into `62e7013`...
Project: fides	Commit: `95a51f4505 ℹ️`
Status: Passed	Duration: 00:36 💡
Started: Jul 23, 2024 3:25 PM	Ended: Jul 23, 2024 3:26 PM

Review all test suite changes for PR #5111 ↗︎

galvana

Nice work with this migration, I know it wasn't as straightforward as it sounds! I just left a few comments, one for my understanding, and one for a minor label change. Otherwise, this worked as expected, I was able to build it locally and navigate around the app just fine

galvana · 2024-07-22T18:11:08Z

clients/admin-ui/package.json

@@ -50,7 +50,7 @@
    "lodash.snakecase": "^4.1.1",
    "msw": "^1.2.1",
    "narrow-minded": "^1.2.1",
-    "next": "^12.3.4",
+    "next": "^14.2.5",


galvana · 2024-07-22T18:15:10Z

clients/admin-ui/src/features/common/table/v2/cells.tsx

@@ -203,7 +203,7 @@ export const DefaultHeaderCell = <T,>({
  </Text>
 );

-interface EnableCellProps extends Omit<SwitchProps, "value"> {
+interface EnableCellProps extends Omit<SwitchProps, "value" | "onToggle"> {


Nice usage of Omit! I'll keep this in mind for later

galvana · 2024-07-22T18:18:20Z

clients/admin-ui/src/features/common/table/v2/column-settings/DraggableColumnList.tsx

-      ref={preview}
+      ref={(element) => {
+        preview(element);
+      }}


Can you explain this change?

Resolving kind of a weird Type issue here.

React's ref expects to be passed a React.ReactNode object or to be undefined. On the other hand, preview is returning a React.ReactNode object or null. By explicitly creating an arrow function here, ref no longer expects undefined and the Types are compatible, since ref passes the element as React.ReactNode or null.

I'm assuming this popped up because upgrading eslint-config-next is slightly more strict than before.

Thanks for the explanation!

clients/admin-ui/src/features/user-management/UserManagementTableActions.tsx

see https://nextjs.org/docs/app/building-your-application/upgrading/version-14#v14-summary

cypress · 2024-07-23T15:43:14Z

Passing run #9099 ↗︎

0	4	0	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Upgrade Next version in Admin UI and Privacy Center (#5111)
Project: fides	Commit: `bc61a97ce9`
Status: Passed	Duration: 00:36 💡
Started: Jul 23, 2024 3:42 PM	Ended: Jul 23, 2024 3:43 PM

Review all test suite changes for PR #5111 ↗︎

vercel bot deployed to Preview July 19, 2024 20:44 View deployment

gilluminate force-pushed the gill/PROD-2077_upgrade-next-version-in-all branch from 15a9dd6 to 258adda Compare July 19, 2024 20:45

vercel bot deployed to Preview July 19, 2024 20:48 View deployment

gilluminate commented Jul 19, 2024

View reviewed changes

vercel bot deployed to Preview July 19, 2024 21:10 View deployment

gilluminate requested a review from galvana July 22, 2024 15:14

galvana reviewed Jul 22, 2024

View reviewed changes

vercel bot deployed to Preview July 22, 2024 20:03 View deployment

gilluminate force-pushed the gill/PROD-2077_upgrade-next-version-in-all branch from fc20e10 to 1806e72 Compare July 22, 2024 20:34

vercel bot deployed to Preview July 22, 2024 20:37 View deployment

gilluminate force-pushed the gill/PROD-2077_upgrade-next-version-in-all branch from 1806e72 to 96e026f Compare July 22, 2024 22:41

gilluminate requested a review from galvana July 22, 2024 22:41

vercel bot deployed to Preview July 22, 2024 22:44 View deployment

gilluminate force-pushed the gill/PROD-2077_upgrade-next-version-in-all branch from 7d3d01e to 96e026f Compare July 22, 2024 22:50

galvana approved these changes Jul 23, 2024

View reviewed changes

gilluminate added 9 commits July 23, 2024 09:12

Prep links for upgrade

45a69a4

upgrade privacy center to Next v13

c54bb18

upgrade admin to Next v13

755fcd1

upgrade privacy center to Next v14

f1604ce

deprecated next export as output: "export"

bd8cdd4

see https://nextjs.org/docs/app/building-your-application/upgrading/version-14#v14-summary

upgrade admin to Next v14

db533cc

changelog and prettier update

05f1ee2

fix deployment scripts

8198a04

fix sentence case

b043a90

gilluminate force-pushed the gill/PROD-2077_upgrade-next-version-in-all branch from 96e026f to b043a90 Compare July 23, 2024 15:13

vercel bot deployed to Preview July 23, 2024 15:16 View deployment

gilluminate merged commit bc61a97 into main Jul 23, 2024
13 checks passed

gilluminate deleted the gill/PROD-2077_upgrade-next-version-in-all branch July 23, 2024 15:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade Next version in Admin UI and Privacy Center #5111

Upgrade Next version in Admin UI and Privacy Center #5111

gilluminate commented Jul 19, 2024 •

edited

Loading

vercel bot commented Jul 19, 2024 •

edited

Loading

gilluminate Jul 19, 2024

gilluminate Jul 19, 2024

gilluminate Jul 19, 2024

gilluminate Jul 19, 2024

galvana Jul 22, 2024

gilluminate Jul 19, 2024

gilluminate Jul 19, 2024

gilluminate Jul 19, 2024

cypress bot commented Jul 19, 2024 •

edited

Loading

galvana left a comment

galvana Jul 22, 2024

galvana Jul 22, 2024

galvana Jul 22, 2024

gilluminate Jul 22, 2024 •

edited

Loading

galvana Jul 23, 2024

cypress bot commented Jul 23, 2024

Upgrade Next version in Admin UI and Privacy Center #5111

Upgrade Next version in Admin UI and Privacy Center #5111

Conversation

gilluminate commented Jul 19, 2024 • edited Loading

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

vercel bot commented Jul 19, 2024 • edited Loading

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

cypress bot commented Jul 19, 2024 • edited Loading

Passing run #9097 ↗︎

Review all test suite changes for PR #5111 ↗︎

galvana left a 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

gilluminate Jul 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cypress bot commented Jul 23, 2024

Passing run #9099 ↗︎

Review all test suite changes for PR #5111 ↗︎

gilluminate commented Jul 19, 2024 •

edited

Loading

vercel bot commented Jul 19, 2024 •

edited

Loading

cypress bot commented Jul 19, 2024 •

edited

Loading

gilluminate Jul 22, 2024 •

edited

Loading