Skip to content

UI/ember upgrade to v4.12 #23070

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.

Sign up for GitHub

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

Merged
rishabh-gupta-hashicorp merged 21 commits into from
Dec 8, 2025
Merged

UI/ember upgrade to v4.12 #23070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c50fe62
all tests fixed
rishabh-gupta-hashicorp Nov 20, 2025
3a4f72e
code cleanup
rishabh-gupta-hashicorp Nov 20, 2025
a6118a5
Merge branch 'main' into rishabh-gupta/ui/fix-tests
rishabh-gupta-hashicorp Nov 20, 2025
1142d80
fix minor issue
rishabh-gupta-hashicorp Nov 20, 2025
0ca7d80
adds changelog
rishabh-gupta-hashicorp Nov 20, 2025
3673e3d
remove redundant fn usage
rishabh-gupta-hashicorp Nov 20, 2025
15876bb
fixes assert equal issues
rishabh-gupta-hashicorp Nov 21, 2025
fcddf87
Merge branch 'main' into rishabh-gupta/ui/ember-upgrade-to-v4.12
rishabh-gupta-hashicorp Nov 21, 2025
05a6667
ppnpm lock update
rishabh-gupta-hashicorp Nov 21, 2025
8d673eb
avoid crashing on error
rishabh-gupta-hashicorp Nov 21, 2025
69d92c9
fixes lint issue
rishabh-gupta-hashicorp Nov 21, 2025
2155bce
revert
rishabh-gupta-hashicorp Nov 21, 2025
763ceaf
test change
rishabh-gupta-hashicorp Nov 21, 2025
283836f
fix torii provider baseUrl assertion without changing SSO flow
rishabh-gupta-hashicorp Nov 24, 2025
f00268f
linting fix
rishabh-gupta-hashicorp Nov 24, 2025
d32d729
route import change
rishabh-gupta-hashicorp Nov 25, 2025
54ea162
minor fixes
rishabh-gupta-hashicorp Dec 3, 2025
bf6aad2
Merge branch 'main' into rishabh-gupta/ui/ember-upgrade-to-v4.12
rishabh-gupta-hashicorp Dec 3, 2025
eb23bad
added required parameter @type to hds:alert
rishabh-gupta-hashicorp Dec 4, 2025
8587dc8
fixes some browser error logs
rishabh-gupta-hashicorp Dec 8, 2025
8bc9c4c
lint fixes
rishabh-gupta-hashicorp Dec 8, 2025
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
3 changes: 3 additions & 0 deletions .changelog/23070.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:improvement
ui: upgraded Ember framework from v3.28 to v4.12, improving performance and stability. Upgrades multiple other packages which support Ember v4.
```
8 changes: 4 additions & 4 deletions ui/packages/consul-lock-sessions/app/components/consul/lock-session/form/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
dc=@item.Datacenter
)
}}
@type={{'session'}}
@label={{'Lock Session'}}
@type='session'
@label='Lock Session'
@ondelete={{fn (if @ondelete @ondelete @onsubmit) @item}}
@onchange={{fn (optional @onsubmit) @item}}
as |writer|>
Expand Down Expand Up @@ -86,7 +86,7 @@
@text='Invalidate Session'
@color='critical'
data-test-delete
{{on 'click' (fn confirm )}}
{{on 'click' confirm }}
Copy link

@deanmarano deanmarano Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@suresh-hashicorp suresh-hashicorp Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

@aklkv aklkv Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

/>
</BlockSlot>
<BlockSlot @name="dialog" as |execute cancel message|>
Expand All @@ -103,7 +103,7 @@
<Hds::Button
@text='Cancel'
@color='secondary'
{{on 'click' (fn cancel)}}
{{on 'click' cancel}}
/>
</Hds::ButtonSet>
</BlockSlot>
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/consul-lock-sessions/app/components/consul/lock-session/list/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ as |item index|>
<Hds::Button
@text='Cancel'
@color='secondary'
{{on 'click' (fn cancel)}}
{{on 'click' cancel}}
/>
</Hds::ButtonSet>
</BlockSlot>
Expand Down
6 changes: 3 additions & 3 deletions ui/packages/consul-nspaces/app/components/consul/nspace/form/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"/${partition}/${nspace}/${dc}/nspace"
(hash partition="" nspace="" dc=@item.Datacenter)
}}
@type={{"nspace"}}
@label={{"Namespace"}}
@type="nspace"
@label="Namespace"
@ondelete={{fn this.onDelete @item}}
@onchange={{fn this.onSubmit @item}}
as |writer|
Expand Down Expand Up @@ -145,7 +145,7 @@
data-test-delete
@color='critical'
@text='Delete'
{{on "click" (fn confirm )}}
{{on "click" confirm }}
Copy link

@deanmarano deanmarano Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Suggested change
{{on "click" confirm }}
{{on "click" this.confirm }}

/>
</BlockSlot>
<BlockSlot @name="dialog" as |execute cancel message|>
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/consul-nspaces/app/templates/dc/nspaces/edit.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}}

<Route
@name={{routeName}}
@name={{this.routeName}}
as |route|>
<DataLoader @src={{
uri '/${partition}/${nspace}/${dc}/namespace/${id}'
Expand Down
22 changes: 11 additions & 11 deletions ui/packages/consul-nspaces/app/templates/dc/nspaces/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}}

<Route
@name={{routeName}}
@name={{this.routeName}}
as |route|>
<DataLoader
@src={{
Expand All @@ -27,18 +27,18 @@ as |route|>
{{#let

(hash
value=(or sortBy "Name:asc")
change=(action (mut sortBy) value="target.selected")
value=(or this.sortBy "Name:asc")
change=(action (mut this.sortBy) value="target.selected")
)

(hash
searchproperty=(hash
value=(if (not-eq searchproperty undefined)
(split searchproperty ',')
searchProperties
value=(if (not-eq this.searchproperty undefined)
(split this.searchproperty ',')
this.searchProperties
)
change=(action (mut searchproperty) value="target.selectedItems")
default=searchProperties
change=(action (mut this.searchproperty) value="target.selectedItems")
default=this.searchProperties
)
)

Expand All @@ -64,8 +64,8 @@ as |route|>
<BlockSlot @name="toolbar">
{{#if (gt items.length 0)}}
<Consul::Nspace::SearchBar
@search={{search}}
@onsearch={{action (mut search) value="target.value"}}
@search={{this.search}}
@onsearch={{action (mut this.search) value="target.value"}}
Copy link
Collaborator

@aklkv aklkv Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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


@sort={{sort}}

Expand Down Expand Up @@ -100,7 +100,7 @@ as |route|>
@type="nspace"
@sort={{sort.value}}
@filters={{filters}}
@search={{search}}
@search={{this.search}}
@items={{items}}
as |collection|>
<collection.Collection>
Expand Down
4 changes: 2 additions & 2 deletions ui/packages/consul-partitions/app/components/consul/partition/form/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
[email protected]
)
}}
@type={{'partition'}}
@label={{'Partition'}}
@type='partition'
@label='Partition'
@ondelete={{fn (if @ondelete @ondelete @onsubmit) @item}}
@onchange={{fn (optional @onsubmit) @item}}
as |writer|>
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/consul-partitions/app/templates/dc/partitions/edit.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}}

<Route
@name={{routeName}}
@name={{this.routeName}}
as |route|>
<DataLoader @src={{
uri '/${partition}/${nspace}/${dc}/partition/${id}'
Expand Down
22 changes: 11 additions & 11 deletions ui/packages/consul-partitions/app/templates/dc/partitions/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}}

<Route
@name={{routeName}}
@name={{this.routeName}}
as |route|>
<DataLoader
@src={{
Expand All @@ -27,18 +27,18 @@ as |route|>
{{#let

(hash
value=(or sortBy "Name:asc")
change=(action (mut sortBy) value="target.selected")
value=(or this.sortBy "Name:asc")
change=(action (mut this.sortBy) value="target.selected")
)

(hash
searchproperty=(hash
value=(if (not-eq searchproperty undefined)
(split searchproperty ',')
searchProperties
value=(if (not-eq this.searchproperty undefined)
(split this.searchproperty ',')
this.searchProperties
)
change=(action (mut searchproperty) value="target.selectedItems")
default=searchProperties
change=(action (mut this.searchproperty) value="target.selectedItems")
default=this.searchProperties
)
)

Expand All @@ -64,8 +64,8 @@ as |route|>
<BlockSlot @name="toolbar">
{{#if (gt items.length 0)}}
<Consul::Partition::SearchBar
@search={{search}}
@onsearch={{action (mut search) value="target.value"}}
@search={{this.search}}
@onsearch={{action (mut this.search) value="target.value"}}

@sort={{sort}}

Expand Down Expand Up @@ -100,7 +100,7 @@ as |route|>
@type="nspace"
@sort={{sort.value}}
@filters={{filters}}
@search={{search}}
@search={{this.search}}
@items={{items}}
as |collection|>
<collection.Collection>
Expand Down
10 changes: 5 additions & 5 deletions ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@
as |fsm|
>

{{#let (unique-id) as |id reset|}}
{{#let (dom-guid) as |id reset|}}
Copy link
Collaborator

@aklkv aklkv Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this a custom helper?

Copy link
Contributor Author

@rishabh-gupta-hashicorp rishabh-gupta-hashicorp Dec 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<form {{on "submit" (fn fsm.dispatch "LOAD")}} id={{id}}>

<fsm.State @matches={{array "idle" "error"}}>
<fsm.State @matches={{"error"}}>
<Hds::Alert @color='critical' class='mb-3 mt-2' as |A|>
<fsm.State @matches="error">
<Hds::Alert @type="inline" @color='critical' class='mb-3 mt-2' as |A|>
<A.Title>Error</A.Title>
<A.Description>{{fsm.state.context.error.message}}</A.Description>
</Hds::Alert>
Expand All @@ -35,7 +35,7 @@
}}
</fsm.State>

<fsm.State @matches={{"loading"}}>
<fsm.State @matches="loading">
<DataSource
@src={{uri
"/${partition}/${nspace}/${dc}/peering/token-for/${name}/${externalAddresses}"
Expand All @@ -55,7 +55,7 @@
/>
</fsm.State>

<fsm.State @matches={{"success"}}>
<fsm.State @matches="success">
{{yield
(hash
Fieldsets=(component
Expand Down
8 changes: 4 additions & 4 deletions ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@
dc=(or @item.Datacenter "")
)
}}
@type={{"peer"}}
@label={{"peer"}}
@type="peer"
@label="peer"
@onchange={{fn (optional @onsubmit) @item}}
as |writer|
>
<BlockSlot @name="error" as |after error|>
<Hds::Alert @color='critical' class='mb-3 mt-2' as |A|>
<Hds::Alert @type="inline" @color='critical' class='mb-3 mt-2' as |A|>
<A.Title>Error</A.Title>
<A.Description>{{error.message}}</A.Description>
</Hds::Alert>
</BlockSlot>
<BlockSlot @name="content">
{{#let (unique-id) as |id|}}
{{#let (dom-guid) as |id|}}
<form id={{id}} {{on "submit" (fn writer.persist @item)}}>
{{yield
(hash
Expand Down
5 changes: 1 addition & 4 deletions ui/packages/consul-peerings/app/components/consul/peer/form/token/actions/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,11 @@
SPDX-License-Identifier: BUSL-1.1
}}

<div
...attributes
Copy link
Collaborator

@aklkv aklkv Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

>
<div ...attributes>
<Hds::ButtonSet>
<Hds::Button
@text='Copy token'
@color='primary'
...attributes
{{with-copyable @token}}
/>
<Hds::Button
Expand Down
6 changes: 1 addition & 5 deletions ui/packages/consul-peerings/app/controllers/dc/peers/show/exported.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,7 @@ import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

export default class PeersEditExportedController extends Controller {
queryParams = {
search: {
as: "filter",
},
};
queryParams = ['search'];

@tracked search = "";

Expand Down
14 changes: 14 additions & 0 deletions ui/packages/consul-peerings/app/routes/dc/peers/show/exported.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/

import Route from 'consul-ui/routing/route';

export default class PeersShowExportedRoute extends Route {
queryParams = {
search: {
as: 'filter',
},
}; // Object format in route with configuration
}
Loading
Loading