Skip to content

Commit c6988ec

Browse files
hc-github-team-consul-corerishabh-gupta-hashicorp
hc-github-team-consul-core
and
rishabh-gupta-hashicorp
authored
Backport of UI/deprecation ember views partial into release/1.21.x (#22951)
backport of commit 2670cd6 Co-authored-by: Rishabh Gupta <[email protected]>
1 parent 92a822d commit c6988ec

File tree

19 files changed

+498
-100
lines changed

19 files changed

+498
-100
lines changed

‎.changelog/22888.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```release-note:improvement
2+
ui: replaced ember partials with components as an incremental step to upgrade to ember v4
3+
```

‎ui/packages/consul-ui/app/components/consul/policy/form/README.mdx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Consul::Policy::Form
2+
3+
A presentational component that renders the Policy edit/create form and the action buttons (Save / Cancel / Delete). It wraps the existing PolicyForm fieldset, conditionally loads tokens that use the policy, and delegates create/update/cancel/delete behavior to closure actions supplied by caller.
4+
5+
## Usage
6+
7+
```hbs
8+
<Consul::Policy::Form
9+
@form={{form}}
10+
@partition={{partition}}
11+
@nspace={{nspace}}
12+
@item={{item}}
13+
@create={{create}}
14+
@dc={{dc}}
15+
@id={{id}}
16+
@items={{items}}
17+
@onCreate={{route-action 'create' item}}
18+
@onUpdate={{route-action 'update' item}}
19+
@onCancel={{route-action 'cancel' item}}
20+
@onDelete={{route-action 'delete'}}
21+
@onItemsChange={{action (mut items) value="data"}}
22+
/>
23+
```
24+
25+
## Arguments
26+
27+
| Argument | Type | Required | Description |
28+
|---|---:|:---:|---|
29+
| `@form` | object | yes | Form builder / changeset used by PolicyForm. |
30+
| `@partition` | string | yes | Current partition. |
31+
| `@nspace` | string | yes | Current namespace. |
32+
| `@item` | object | yes | Policy model / changeset. |
33+
| `@create` | boolean | no | True when rendering the "create" flow. |
34+
| `@dc` | string | no | Datacenter identifier used to build DataSource URIs. |
35+
| `@id` | string | no | Policy id (used to fetch tokens for the policy). |
36+
| `@items` | array | no | Tokens currently associated with the policy (passed from caller). |
37+
| `@onCreate` | function | no | Closure invoked to create the policy (caller typically passes `route-action 'create' item`). |
38+
| `@onUpdate` | function | no | Closure invoked to update the policy (caller typically passes `route-action 'update' item`). |
39+
| `@onCancel` | function | no | Closure invoked when Cancel is clicked (caller typically passes `route-action 'cancel' item` or a transition). |
40+
| `@onDelete` | function | no | Closure invoked to delete the policy (caller typically passes `route-action 'delete'`). |
41+
| `@onItemsChange` | function | no | Handler for DataSource `onchange`; recommended: `action (mut items) value="data"`. |
42+
43+
## Behavior / Notes
44+
45+
- When not in create mode and the policy has an ID, the component loads related tokens via the DataSource:
46+
/{partition}/{nspace}/{dc}/tokens/for-policy/{id}. The caller should provide `@onItemsChange` to keep caller state in sync.
47+
- Save button:
48+
- If `@create` is true and caller has permission → invokes `@onCreate`.
49+
- Otherwise → invokes `@onUpdate` if provided.
50+
- Cancel button calls `@onCancel`. Pass a route-action (preferred) so route-level handlers (e.g. WithBlockingActions) are used, or pass a controller action if desired.
51+
- Delete button opens a confirmation dialog; actual delete is triggered by calling the provided `@onDelete` closure (confirmed via the dialog).
52+
- Keep argument names and usage consistent with existing callers. Pass route-action closures when the route/mixin provides the action (create/update/delete/cancel).
53+
54+
## See
55+
56+
- Component template: ./index.hbs
57+
- Component class: ./index.js
58+
59+
## Implementation hints
60+
61+
- Invoke closure args directly inside the component (use `{{on 'click' @onCreate}}`, `{{on 'click' @onCancel}}`, `{{on 'click' (fn confirm @onDelete @item)}}`) so the calling context (route or controller) receives the event.
62+
- Avoid reserved/uppercase argument names (e.g. use `@local` not `@Local`).

ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs renamed to ui/packages/consul-ui/app/components/consul/policy/form/index.hbs

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,74 +5,74 @@
55

66
<form>
77
<PolicyForm
8-
@form={{form}}
9-
@partition={{partition}}
10-
@nspace={{nspace}}
11-
@item={{item}}
8+
@form={{@form}}
9+
@partition={{@partition}}
10+
@nspace={{@nspace}}
11+
@item={{@item}}
1212
>
1313
{{!don't show template selection here, i.e. Service Identity}}
1414
<BlockSlot @name="template" />
1515
</PolicyForm>
16-
{{#if (not create) }}
16+
{{#if (and (not @create) @item @item.ID)}}
1717
<DataSource
1818
@src={{uri '/${partition}/${nspace}/${dc}/tokens/for-policy/${id}'
1919
(hash
20-
partition=partition
21-
nspace=nspace
22-
dc=dc
23-
id=(or id '')
20+
partition=@partition
21+
nspace=@nspace
22+
dc=@dc
23+
id=(or @id '')
2424
)
2525
}}
26-
@onchange={{action (mut items) value="data"}}
26+
@onchange={{@onItemsChange}}
2727
/>
28-
{{#if (gt items.length 0)}}
28+
{{#if (gt @items.length 0)}}
2929
<TokenList
3030
@caption="Applied to the following tokens:"
31-
@items={{items}}
31+
@items={{@items}}
3232
/>
3333
{{/if}}
3434
{{/if}}
3535
<div>
3636
<Hds::ButtonSet>
37-
{{#if (and create (can "create tokens")) }}
37+
{{#if (and @create (can "create tokens")) }}
3838
{{! we only need to check for an empty name here as ember munges autofocus, once we have autofocus back revisit this}}
3939
<Hds::Button
4040
@text='Save'
4141
type='submit'
42-
{{ on 'click' (route-action 'create' item)}}
43-
disabled={{if (or item.isPristine item.isInvalid (eq item.Name '')) 'disabled'}}
42+
{{ on 'click' @onCreate}}
43+
disabled={{if (or @item.isPristine @item.isInvalid (eq @item.Name '')) 'disabled'}}
4444
/>
4545
{{ else }}
46-
{{#if (can "write policy" item=item)}}
46+
{{#if (can "write policy" item=@item)}}
4747
<Hds::Button
4848
@text='Save'
4949
type='submit'
50-
{{ on 'click' (route-action 'update' item)}}
51-
disabled={{if item.isInvalid 'disabled'}}
50+
{{ on 'click' @onUpdate}}
51+
disabled={{if @item.isInvalid 'disabled'}}
5252
/>
5353
{{/if}}
5454
{{/if}}
5555
<Hds::Button
5656
@text='Cancel'
5757
@color='secondary'
5858
type='reset'
59-
{{ action "cancel" item}}
59+
{{ on 'click' @onCancel}}
6060
/>
61-
{{# if (and (not create) (can "delete policy" item=item) ) }}
61+
{{# if (and (not @create) (can "delete policy" item=@item) ) }}
6262
<ConfirmationDialog @message="Are you sure you want to delete this Policy?">
6363
<BlockSlot @name="action" as |confirm|>
6464
<Hds::Button
6565
@text='Delete'
6666
@color='critical'
67-
{{action confirm 'delete' item}}
67+
{{on 'click' (fn confirm @onDelete @item)}}
6868
data-test-delete
6969
/>
7070
</BlockSlot>
7171
<BlockSlot @name="dialog" as |execute cancel message|>
72-
{{#if (gt items.length 0)}}
72+
{{#if (gt @items.length 0)}}
7373
<ModalDialog
7474
data-test-delete-modal
75-
@onclose={{action cancel}}
75+
@onclose={{cancel}}
7676
@open={{true}}
7777
@aria={{hash
7878
label="Policy in Use"
@@ -84,9 +84,9 @@
8484
<BlockSlot @name="body">
8585
<p>
8686
This Policy is currently in use. If you choose to delete this Policy, it will be removed from the
87-
following <strong>{{items.length}} Tokens</strong>:
87+
following <strong>{{@items.length}} Tokens</strong>:
8888
</p>
89-
<TokenList @items={{items}} @target="_blank" />
89+
<TokenList @items={{@items}} @target="_blank" />
9090
<p>
9191
This action cannot be undone. {{message}}
9292
</p>
@@ -97,12 +97,12 @@
9797
@text='Yes, Delete'
9898
data-test-delete
9999
@color='critical'
100-
{{action execute}}
100+
{{on 'click' execute}}
101101
/>
102102
<Hds::Button
103103
@text='Cancel'
104104
@color='secondary'
105-
{{action close}}
105+
{{on 'click' close}}
106106
/>
107107
</Hds::ButtonSet>
108108
</BlockSlot>
@@ -115,4 +115,4 @@
115115
{{/if}}
116116
</Hds::ButtonSet>
117117
</div>
118-
</form>
118+
</form>

‎ui/packages/consul-ui/app/components/consul/role/form/README.mdx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Consul::Role::Form
2+
3+
A presentational component that renders the Role edit/create form, loads tokens that reference the role, and exposes Save / Cancel / Delete actions as closure args.
4+
5+
## Usage
6+
7+
```hbs
8+
<Consul::Role::Form
9+
@form={{form}}
10+
@item={{item}}
11+
@dc={{dc}}
12+
@nspace={{nspace}}
13+
@partition={{partition}}
14+
@create={{create}}
15+
@id={{id}}
16+
@items={{items}}
17+
@onCreate={{route-action 'create' item}}
18+
@onUpdate={{route-action 'update' item}}
19+
@onCancel={{route-action 'cancel' item}}
20+
@onDelete={{route-action 'delete'}}
21+
@onChange={{action 'change'}}
22+
/>
23+
```
24+
25+
## Arguments
26+
27+
| Arg | Type | Required | Description |
28+
|---|---:|:---:|---|
29+
| `@form` | object | yes | Form builder / changeset consumed by RoleForm. |
30+
| `@item` | object | yes | Role model / changeset. |
31+
| `@dc` | string | no | Datacenter id used to build DataSource URIs. |
32+
| `@nspace` | string | no | Namespace. |
33+
| `@partition` | string | no | Partition. |
34+
| `@create` | boolean | no | True when rendering create flow. |
35+
| `@id` | string | no | Role ID (used to fetch tokens for role). |
36+
| `@items` | array | no | Tokens associated with the role (caller state). |
37+
| `@onCreate` | function | no | Closure to invoke to create the role (usually `route-action 'create' item`). |
38+
| `@onUpdate` | function | no | Closure to invoke to update the role (usually `route-action 'update' item`). |
39+
| `@onCancel` | function | no | Closure invoked when Cancel is clicked (route-action recommended). |
40+
| `@onDelete` | function | no | Closure invoked to delete the role (route-action recommended). |
41+
| `@onChange` | function | no | Handler forwarded to child components for change events. |
42+
43+
## Behavior / Notes
44+
45+
- When not in `create` mode the component loads tokens that reference the role via a DataSource: /{partition}/{nspace}/{dc}/tokens/for-role/{id}. Use `@onChange` or `@onItemsChange` from caller to keep caller state in sync.
46+
- Save button:
47+
- If `@create` is true and caller has permission → calls `@onCreate`.
48+
- Otherwise → calls `@onUpdate` if provided.
49+
- Cancel calls `@onCancel`. Prefer passing `route-action 'cancel' item` so route-level handlers (e.g. WithBlockingActions) are used.
50+
- Delete opens a confirmation dialog and invokes `@onDelete` when confirmed.
51+
- Inside the component, invoke closures directly with `{{on 'click' @onCreate}}`, `{{on 'click' @onCancel}}`, and `{{on 'click' (fn confirm @onDelete @item)}}` to preserve original behavior.
52+
53+
## See
54+
55+
- Template: ./index.hbs
56+
- Component class: ./index.js

ui/packages/consul-ui/app/templates/dc/acls/roles/-form.hbs renamed to ui/packages/consul-ui/app/components/consul/role/form/index.hbs

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@
55

66
<form>
77
<RoleForm
8-
@form={{form}}
9-
@item={{item}}
10-
@dc={{dc}}
11-
@nspace={{nspace}}
12-
@partition={{partition}}
8+
@form={{@form}}
9+
@item={{@item}}
10+
@dc={{@dc}}
11+
@nspace={{@nspace}}
12+
@partition={{@partition}}
1313
/>
14-
{{#if (not create)}}
14+
{{#if (not @create)}}
1515
<DataSource
1616
@src={{uri '/${partition}/${nspace}/${dc}/tokens/for-role/${id}'
1717
(hash
18-
partition=partition
19-
nspace=nspace
20-
dc=dc
21-
id=(if item item.ID '')
18+
partition=@partition
19+
nspace=@nspace
20+
dc=@dc
21+
id=(if @item @item.ID '')
2222
)
23-
}}
23+
}}
2424
as |loader|>
2525
{{#if (gt loader.data.length 0)}}
2626
<h2>Where is this role used?</h2>
@@ -34,45 +34,44 @@
3434
{{/if}}
3535
<div>
3636
<Hds::ButtonSet>
37-
{{#if (and create (can "create roles")) }}
38-
{{! we only need to check for an empty name here as ember munges autofocus, once we have autofocus back revisit this}}
37+
{{#if (and @create (can "create roles")) }}
3938
<Hds::Button
4039
@text='Save'
4140
type='submit'
42-
{{ on 'click' (route-action 'create' item)}}
43-
disabled={{or item.isPristine item.isInvalid (eq item.Name '')}}
41+
{{on 'click' @onCreate}}
42+
disabled={{or @item.isPristine @item.isInvalid (eq @item.Name '')}}
4443
/>
4544
{{ else }}
46-
{{#if (can "write role" item=item)}}
45+
{{#if (can "write role" item=@item)}}
4746
<Hds::Button
4847
@text='Save'
4948
type='submit'
50-
{{ on 'click' (route-action 'update' item)}}
51-
disabled={{item.isInvalid}}
49+
{{on 'click' @onUpdate}}
50+
disabled={{@item.isInvalid}}
5251
/>
5352
{{/if}}
5453
{{/if}}
5554
<Hds::Button
5655
@text='Cancel'
5756
@color='secondary'
5857
type='reset'
59-
{{ action "cancel" item}}
58+
{{on 'click' @onCancel}}
6059
/>
6160

62-
{{# if (and (not create) (can "delete role" item=item) ) }}
61+
{{# if (and (not @create) (can "delete role" item=@item) ) }}
6362
<ConfirmationDialog @message="Are you sure you want to delete this Role?">
6463
<BlockSlot @name="action" as |confirm|>
6564
<Hds::Button
6665
@text='Delete'
6766
@color='critical'
68-
{{action confirm 'delete' item}}
67+
{{on 'click' (fn confirm @onDelete @item)}}
6968
data-test-delete
7069
/>
7170
</BlockSlot>
7271
<BlockSlot @name="dialog" as |execute cancel message|>
7372
{{#if (gt items.length 0)}}
7473
<ModalDialog
75-
@onclose={{action cancel}}
74+
@onclose={{cancel}}
7675
@aria={{hash
7776
label="Role in Use"
7877
}}
@@ -96,12 +95,12 @@
9695
@text='Yes, Delete'
9796
@color='critical'
9897
data-test-delete
99-
{{action execute}}
98+
{{on 'click' execute}}
10099
/>
101100
<Hds::Button
102101
@text='Cancel'
103102
@color='secondary'
104-
{{action close}}
103+
{{on 'click' close}}
105104
/>
106105
</Hds::ButtonSet>
107106
</BlockSlot>
@@ -114,4 +113,4 @@
114113
{{/if}}
115114
</Hds::ButtonSet>
116115
</div>
117-
</form>
116+
</form>

0 commit comments

Comments
 (0)