UI/ember upgrade to v4.12 #23070

rishabh-gupta-hashicorp · 2025-11-20T18:07:28Z

Description

This PR upgrades Ember from v3.28 to v4.12
Along with Ember upgrade, the PR upgrades multiple other packages and fixes some more deprecations.
Multiple Code Refactoring and Linting changes to follow best practices for v4.12 as well as paves the way for version upgrade to v5.

Testing & Reproduction steps

Links

PR Checklist

updated test coverage
external facing docs updated
appropriate backport labels added
not a security concern

PCI review checklist

I have documented a clear reason for, and description of, the change I am making.
If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
If applicable, I've documented the impact of any changes to security controls.

Examples of changes to security controls include using new access control methods, adding or removing logging pipelines, etc.

deanmarano · 2025-11-25T14:58:55Z

ui/packages/consul-ui/package.json

-    "ember-data": "~3.28.6",
-    "ember-data-model-fragments": "5.0.0-beta.8",
+    "ember-data": "~4.0.0",
+    "ember-data-model-fragments": "6.0.10",


I would recommend matching ember-data-model-fragments 6.0.10 with ember-data 4.6.7 - that is the intended pairing.

deanmarano · 2025-11-25T15:07:19Z

ui/packages/consul-lock-sessions/app/components/consul/lock-session/form/index.hbs

              @color='critical'
              data-test-delete
-              {{on 'click' (fn confirm )}}
+              {{on 'click' confirm }}


I think this should be this.confirm to reference the component. Also the same for the cancel below.

confirm is trickling down as return value from the wrapping BlockSlot. It's not part of this object.

it was confusing to me at first but I have looked at the file and it seems this are block arguments, which seems fine but does ask for some refactor in the future

deanmarano · 2025-11-25T15:21:09Z

ui/packages/consul-nspaces/app/components/consul/nspace/form/index.hbs

                      @color='critical'
                      @text='Delete'
-                      {{on "click" (fn confirm )}}
+                      {{on "click" confirm }}


I think this should be tied to the component action using this.

Suggested change

{{on "click" confirm }}

{{on "click" this.confirm }}

aklkv · 2025-12-01T10:12:35Z

ui/packages/consul-nspaces/app/templates/dc/nspaces/index.hbs

-          @search={{search}}
-          @onsearch={{action (mut search) value="target.value"}}
+          @search={{this.search}}
+          @onsearch={{action (mut this.search) value="target.value"}}


[note]: ideally we would address two items in the follow up as well, since it would help with the next steps:

remove all action helpers

remove all mut helpers

aklkv · 2025-12-01T10:13:35Z

ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs

  >

-    {{#let (unique-id) as |id reset|}}
+    {{#let (dom-guid) as |id reset|}}


is this a custom helper?

Yeah, unique-id was a custom helper we were using. Ember 4 provides its own helper by the same name. Changed our helpers name to dom-guid to avoid conflicts.

aklkv · 2025-12-01T10:14:58Z

ui/packages/consul-peerings/app/components/consul/peer/form/token/actions/index.hbs

 }}

-<div
-  ...attributes


it a good idea to keep splatributes on component level, maybe move it a level if this wrapping div is just a leftover from ember component migration

aklkv · 2025-12-01T10:17:30Z

ui/packages/consul-peerings/app/templates/dc/peers/show/index.hbs

-<Route @name={{routeName}} as |route|>
-  {{did-insert this.transitionToImported}}
+<Route @name={{this.routeName}} as |route|>
+  {{did-insert-helper this.transitionToImported}}


as far as I know did-insert-helper set of helpers are deprecated in favour of did-insert etc., maybe be out of scope of this PR to refactor but it as well just keep did-insert

aklkv · 2025-12-01T10:20:31Z

ui/packages/consul-ui/app/components/data-source/index.hbs

    />
  {{else}}
-    {{did-insert this.connect}}
+    {{did-insert-helper this.connect}}


as mantioned above, I now wonder what prompted this refactor

aklkv · 2025-12-01T10:21:56Z

ui/packages/consul-ui/app/controllers/dc/services/show/instance.js

+export default class InstancesController extends Controller {
+  @tracked proxies = [];
+
+  @action setProxies(data) {


Suggested change

@action setProxies(data) {

@action

setProxies(data) {

aklkv · 2025-12-01T10:23:11Z

ui/packages/consul-ui/app/helpers/dom-guid.js

 import { inject as service } from '@ember/service';

-export default class UniqueIdHelper extends Helper {
+export default class DomGuidHelper extends Helper {


I wonder if now we can just use builtin helper https://rfcs.emberjs.com/id/0659-unique-id-helper/

maybe not because of that custom dom service

Our custom helper has some additional things going on.

aklkv · 2025-12-01T10:29:05Z

ui/packages/consul-ui/config/deprecation-workflow.js

-    { handler: 'silence', matchId: 'ember-component.send-action' },
-    { handler: 'silence', matchId: 'ember-cli-page-object.multiple' },
-    { handler: 'silence', matchId: 'computed-property.override' },
+    { handler: 'log', matchId: 'ember-cli-page-object.string-properties-on-definition' },


we tend to set to throw for some time till we upgrade past deprecation in order to catch deprecations more effectively

aklkv · 2025-12-01T10:36:44Z

ui/packages/consul-ui/.eslintrc.js

    'ember/no-new-mixins': ['warn'],
-    'ember/no-jquery': 'warn',
-    'ember/no-global-jquery': 'warn',
+    'ember/no-jquery': 'error',


this should be default now, so it might be safe to remove as as the one below

rishabh-gupta-hashicorp added 4 commits November 20, 2025 22:16

all tests fixed

c50fe62

code cleanup

3a4f72e

Merge branch 'main' into rishabh-gupta/ui/fix-tests

a6118a5

fix minor issue

1142d80

rishabh-gupta-hashicorp requested review from a team as code owners November 20, 2025 18:07

github-actions bot added the theme/ui Anything related to the UI label Nov 20, 2025

rishabh-gupta-hashicorp added the backport/all Apply backports for all active releases per .release/versions.hcl label Nov 20, 2025

rishabh-gupta-hashicorp added 11 commits November 20, 2025 23:42

adds changelog

0ca7d80

remove redundant fn usage

3673e3d

fixes assert equal issues

15876bb

Merge branch 'main' into rishabh-gupta/ui/ember-upgrade-to-v4.12

fcddf87

ppnpm lock update

05a6667

avoid crashing on error

8d673eb

fixes lint issue

69d92c9

revert

2155bce

test change

763ceaf

fix torii provider baseUrl assertion without changing SSO flow

283836f

linting fix

f00268f

rishabh-gupta-hashicorp changed the title ~~Rishabh gupta/UI/ember upgrade to v4.12~~ UI/ember upgrade to v4.12 Nov 24, 2025

route import change

d32d729

deanmarano reviewed Nov 25, 2025

View reviewed changes

suresh-hashicorp assigned rishabh-gupta-hashicorp Nov 28, 2025

aklkv reviewed Dec 1, 2025

View reviewed changes

aklkv previously approved these changes Dec 1, 2025

View reviewed changes

minor fixes

54ea162

rishabh-gupta-hashicorp dismissed aklkv’s stale review via 54ea162 December 3, 2025 11:07

Merge branch 'main' into rishabh-gupta/ui/ember-upgrade-to-v4.12

bf6aad2

aklkv previously approved these changes Dec 3, 2025

View reviewed changes

added required parameter @type to hds:alert

eb23bad

rishabh-gupta-hashicorp dismissed aklkv’s stale review via eb23bad December 4, 2025 12:07

rishabh-gupta-hashicorp added 2 commits December 8, 2025 10:14

fixes some browser error logs

8587dc8

lint fixes

8bc9c4c

rishabh-gupta-hashicorp requested a review from suresh-hashicorp December 8, 2025 04:57

suresh-hashicorp approved these changes Dec 8, 2025

View reviewed changes

rishabh-gupta-hashicorp merged commit 335b379 into main Dec 8, 2025
74 checks passed

hc-github-team-consul-core added backport/1.22 Changes are backported to 1.22 backport/ent/1.18 Changes are backported to 1.18 ent backport/ent/1.20 backport to ent 1.20 backport/ent/1.21 changes are backported to 1.21 ent labels Dec 8, 2025

hc-github-team-consul-core mentioned this pull request Dec 8, 2025

Backport of UI/ember upgrade to v4.12 into release/1.22.x #23098

Merged

7 tasks

UI/ember upgrade to v4.12 #23070

UI/ember upgrade to v4.12 #23070

Conversation

rishabh-gupta-hashicorp commented Nov 20, 2025

Description

Testing & Reproduction steps

Links

PR Checklist

PCI review checklist

Uh oh!

deanmarano Nov 25, 2025 • 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!

rishabh-gupta-hashicorp Dec 3, 2025 • 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!

aklkv Dec 1, 2025 • 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

deanmarano Nov 25, 2025 •

edited

Loading

rishabh-gupta-hashicorp Dec 3, 2025 •

edited

Loading

aklkv Dec 1, 2025 •

edited

Loading