James c upgrade packages by James-Cocker · Pull Request #272 · galasa-dev/webui

James-Cocker · 2026-03-16T11:46:31Z

Why?

Closes galasa-dev/projectmanagement#2554.

Upgrades Next.js from v14 to 16, along with lots of other dependencies due to high level package vulnerabilities. Made a lot of changes outside of package.json to accommodate for this upgrade. Note: a new section has been added to the setup-locally.sh script to copy over font files to be statically served in the /public folder. If you have a local version running, you will need to run this script again in order to have those fonts appear as they were before the PR.

Changes

Updated Next.js
Updated high severity packages
Updated packages opened by bots and closed their respective PRs
Ensured all local scripts run
Unit tests (if applicable)

Signed-off-by: James Cocker <james.s.earth@gmail.com>

…hooks. Next now builds. Signed-off-by: James Cocker <james.s.earth@gmail.com>

….replace in tabs component Signed-off-by: James Cocker <james.s.earth@gmail.com>

eamansour

Not too confident with these changes - added some comments and suggestions. I haven't been able to build the project locally either (I'm getting the same error that the PR workflow is getting).

eamansour · 2026-03-16T17:08:45Z

build-locally.sh

+    # Fix module format in generated package.json
+    echo "Fixing module format in generated package.json..."
+    generatedPackageJson="${BASEDIR}/galasa-ui/src/generated/galasaapi/package.json"
+    if [ -f "${generatedPackageJson}" ]; then
+        sed -i.bak 's/"type": "commonjs"/"type": "module"/g' "${generatedPackageJson}"
+        rm -f "${generatedPackageJson}.bak"
+        echo "Module format fixed in generated package.json"
+    fi


Why is this needed? The package.json file isn't a generated file

eamansour · 2026-03-16T17:16:41Z

galasa-ui/src/tests/__snapshots__/mysettings.test.tsx.snap

-          "route": "/",
-          "title": "home",
+{
+  "$$typeof": Symbol(react.transitional.element),


This snapshot doesn't look right anymore. Snapshots should be readable to show us what the rendered element looks like (see the previous snapshot).

Is there a way that the snapshot could be rendered like it was before?

eamansour · 2026-03-16T17:52:41Z

.gitignore

+# Ignore copied font files from node_modules
+galasa-ui/public/fonts/


Can you explain why we're copying fonts? I thought the fonts come from the carbon design library.

eamansour · 2026-03-16T17:56:06Z

galasa-ui/src/app/auth/tokens/route.ts

  if (clientId) {
    // Store the client ID to be displayed to the user later
-    cookies().set(AuthCookies.CLIENT_ID, clientId, { httpOnly: true });
+    (await cookies()).set(AuthCookies.CLIENT_ID, clientId, { httpOnly: true });


Minor - can the result of await cookies() be stored in a const and then reused?
Like:

const cookiesStore = await cookies(); cookiesStore.set(...); cookiesStore.set(...);

This comment applies to all instances where cookies() is now (await cookies())

Happy for this to be done in a separate PR since this PR is already massive!

eamansour · 2026-03-16T18:01:35Z

galasa-ui/src/components/test-runs/results/TestRunsTable.tsx

+                      const { key, ...headerProps } = getHeaderProps({ header }) as any;
+                      return (
+                        <TableHeader key={header.key} {...headerProps}>
+                          {header.header}


Why is this change needed? It looks like it's bypassing the type checking by using as any and pulling a key const out, yet the key isn't used?

It would be great if we could avoid as any as much as possible since it defeats a big purpose of using TypeScript

eamansour · 2026-03-18T13:15:38Z

galasa-ui/src/components/users/UsersTable.tsx

-                    </TableHeader>
-                  ))}
+                  {headers.map((header) => {
+                    const { key, ...headerProps } = getHeaderProps({ header }) as any;


Why is this change needed? It looks like it's bypassing the type checking by using as any and pulling a key const out, yet the key isn't used?

It would be great if we could avoid as any as much as possible since it defeats a big purpose of using TypeScript

eamansour · 2026-03-18T13:15:46Z

galasa-ui/src/components/users/UsersTable.tsx

              </TableHead>
              <TableBody>
                {rows.map((row) => {
+                  const { key, ...rowProps } = getRowProps({ row }) as any;


Why is this change needed? It looks like it's bypassing the type checking by using as any and pulling a key const out, yet the key isn't used?

It would be great if we could avoid as any as much as possible since it defeats a big purpose of using TypeScript

eamansour · 2026-03-18T13:17:16Z

galasa-ui/src/styles/global.scss

+
+// Configure Carbon feature flags to include the missing flag
+@use '@carbon/styles/scss/feature-flags' with (
+  $feature-flags: (
+    'enable-css-custom-properties': true,
+    'enable-css-grid': true,
+    'enable-v11-release': true,
+    'enable-experimental-tile-contrast': false,
+    'enable-tile-contrast': false,
+    'enable-v12-tile-radio-icons': false,
+    'enable-v12-structured-list-visible-icons': false,
+    'enable-dialog-element': false,
+    'enable-v12-toggle-reduced-label-spacing': false,
+    'enable-presence': false,
+    'enable-focus-wrap-without-sentinels': false,
+  )
+);
+
+// Configure font path to use fonts from public directory
+@use '@carbon/styles/scss/config' with (
+  $font-path: '/fonts'
+);
+
 @use '@carbon/react';
 @use '@carbon/themes/scss/themes' as *;
 @use '@carbon/themes';
-@use '@carbon/styles';

 :root {
-  @include themes.theme($white); /*Set default to white theme*/
+  @include themes.theme($white);
+  /*Set default to white theme*/
  color-scheme: light;
 }
-@media (prefers-color-scheme: white) {
+
+@media (prefers-color-scheme: dark) {
  :root {
-    @include themes.theme($g100); /*Use dark theme for dark system preference*/
+    @include themes.theme($g100);
+    /*Use dark theme for dark system preference*/


Can you explain why these changes are needed? If not, could they be reverted to avoid additional CSS changes?

eamansour · 2026-03-18T13:21:57Z

galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap

+      <div
+        class="cds--g90 cds--layer-one"


Do we expect the layout to have these changes? I don't think an upgrade should affect the HTML document this much!

eamansour · 2026-03-18T13:23:14Z

galasa-ui/jest.config.cjs

  transformIgnorePatterns: [
-    '/node_modules/(?!(next-intl))', 
-    '^.+\\.module\\.(css|sass|scss)$'
+    '/node_modules/(?!(next-intl|@carbon)/)',


Can you explain why @carbon has been added here?

James-Cocker added 10 commits March 2, 2026 09:40

Uplift mimimatch

510f5fe

Signed-off-by: James Cocker <james.s.earth@gmail.com>

Uplift markdown-it

545df27

Signed-off-by: James Cocker <james.s.earth@gmail.com>

Uplifted react-query and next-intl, removed React imports

b5be399

Signed-off-by: James Cocker <james.s.earth@gmail.com>

Formatting

f6cc8e4

Signed-off-by: James Cocker <james.s.earth@gmail.com>

Before bob Changes

6c10712

Signed-off-by: James Cocker <james.s.earth@gmail.com>

Upgrading Next, does not build yet

129917c

Signed-off-by: James Cocker <james.s.earth@gmail.com>

Next upgraded successfully, but contains run-time errors

60e7dde

Signed-off-by: James Cocker <james.s.earth@gmail.com>

Remove next issues with the spread operator and tooltip alignment

8dc80ae

Signed-off-by: James Cocker <james.s.earth@gmail.com>

Fixed next errors such as font loading, translation errors and state …

038d552

…hooks. Next now builds. Signed-off-by: James Cocker <james.s.earth@gmail.com>

Small package upgrade, fixed tests, ran formatting and removed router…

5fddc06

….replace in tabs component Signed-off-by: James Cocker <james.s.earth@gmail.com>

eamansour requested changes Mar 18, 2026

View reviewed changes

		# Ignore copied font files from node_modules
		galasa-ui/public/fonts/

Conversation

James-Cocker commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why?

Changes

Uh oh!

eamansour left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eamansour Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

James-Cocker commented Mar 16, 2026 •

edited

Loading

eamansour Mar 16, 2026 •

edited

Loading