```release-note:improvement

ui: replaced ember partials with components as an incremental step to upgrade to ember v4

```

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.

| Argument| Type| Required| Description|

|---|---:|:---:|---|

|`@form`| object| yes| Form builder / changeset used by PolicyForm.|

|`@partition`| string| yes| Current partition.|

|`@nspace`| string| yes| Current namespace.|

|`@item`| object| yes| Policy model / changeset.|

|`@create`| boolean| no| True when rendering the "create" flow.|

|`@dc`| string| no| Datacenter identifier used to build DataSource URIs.|

|`@id`| string| no| Policy id (used to fetch tokens for the policy).|

|`@items`| array| no| Tokens currently associated with the policy (passed from caller).|

|`@onCreate`| function| no| Closure invoked to create the policy (caller typically passes`route-action 'create' item`).|

|`@onUpdate`| function| no| Closure invoked to update the policy (caller typically passes`route-action 'update' item`).|

|`@onCancel`| function| no| Closure invoked when Cancel is clicked (caller typically passes`route-action 'cancel' item` or a transition).|

|`@onDelete`| function| no| Closure invoked to delete the policy (caller typically passes`route-action 'delete'`).|

|`@onItemsChange`| function| no| Handler for DataSource`onchange`; recommended:`action (mut items) value="data"`.|

- When not in create mode and the policy has an ID, the component loads related tokens via the DataSource:

/{partition}/{nspace}/{dc}/tokens/for-policy/{id}. The caller should provide`@onItemsChange` to keep caller state in sync.

- Save button:

- If`@create` is true and caller has permission → invokes`@onCreate`.

- Otherwise → invokes`@onUpdate` if provided.

- 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.

- Delete button opens a confirmation dialog; actual delete is triggered by calling the provided`@onDelete` closure (confirmed via the dialog).

- Keep argument names and usage consistent with existing callers. Pass route-action closures when the route/mixin provides the action (create/update/delete/cancel).

- Component template: ./index.hbs

- Component class: ./index.js

- 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.

- Avoid reserved/uppercase argument names (e.g. use`@local` not`@Local`).

<form>

<PolicyForm

@form={{form}}

@partition={{partition}}

@nspace={{nspace}}

@item={{item}}

@form={{@form}}

@partition={{@partition}}

@nspace={{@nspace}}

@item={{@item}}

>

<BlockSlot @name="template" />

</PolicyForm>

{{#if (notcreate)}}

{{#if (and (not@create)@item @item.ID)}}

<DataSource

@src={{uri'/${partition}/${nspace}/${dc}/tokens/for-policy/${id}'

(hash

id=(orid'')

id=(or@id'')

)

@onchange={{action (mutitems)value="data"}}

@onchange={{@onItemsChange}}

/>

{{#if (gtitems.length0)}}

{{#if (gt@items.length0)}}

<TokenList

@caption="Applied to the following tokens:"

@items={{items}}

@items={{@items}}

/>

<div>

<Hds::ButtonSet>

{{#if (andcreate (can"create tokens"))}}

{{#if (and@create (can"create tokens"))}}

<Hds::Button

@text='Save'

disabled={{if (oritem.isPristineitem.isInvalid (eqitem.Name''))'disabled'}}

disabled={{if (or@item.isPristine@item.isInvalid (eq@item.Name''))'disabled'}}

/>

{{#if (can"write policy"item=item)}}

{{#if (can"write policy"item=@item)}}

<Hds::Button

@text='Save'

/>

<Hds::Button

@text='Cancel'

@color='secondary'

/>

{{#if (and (notcreate) (can"delete policy"item=item) )}}

{{#if (and (not@create) (can"delete policy"item=@item) )}}

<ConfirmationDialog @message="Are you sure you want to delete this Policy?">

<BlockSlot @name="action" as |confirm|>

<Hds::Button

@text='Delete'

@color='critical'

data-test-delete

/>

</BlockSlot>

<BlockSlot @name="dialog" as |execute cancel message|>

{{#if (gtitems.length0)}}

{{#if (gt@items.length0)}}

<ModalDialog

data-test-delete-modal

@onclose={{actioncancel}}

@onclose={{cancel}}

@open={{true}}

@aria={{hash

<BlockSlot @name="body">

<p>

This Policy is currently in use. If you choose to delete this Policy, it will be removed from the

following <strong>{{items.length}} Tokens</strong>:

following <strong>{{@items.length}} Tokens</strong>:

</p>

<TokenList @items={{items}} @target="_blank" />

<TokenList @items={{@items}} @target="_blank" />

<p>

This action cannot be undone.{{message}}

</p>

@text='Yes, Delete'

data-test-delete

@color='critical'

/>

<Hds::Button

@text='Cancel'

@color='secondary'

/>

</Hds::ButtonSet>

</BlockSlot>

</Hds::ButtonSet>

</div>

</form>

</form>

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.

| Arg| Type| Required| Description|

|---|---:|:---:|---|

|`@form`| object| yes| Form builder / changeset consumed by RoleForm.|

|`@item`| object| yes| Role model / changeset.|

|`@dc`| string| no| Datacenter id used to build DataSource URIs.|

|`@nspace`| string| no| Namespace.|

|`@partition`| string| no| Partition.|

|`@create`| boolean| no| True when rendering create flow.|

|`@id`| string| no| Role ID (used to fetch tokens for role).|

|`@items`| array| no| Tokens associated with the role (caller state).|

|`@onCreate`| function| no| Closure to invoke to create the role (usually`route-action 'create' item`).|

|`@onUpdate`| function| no| Closure to invoke to update the role (usually`route-action 'update' item`).|

|`@onCancel`| function| no| Closure invoked when Cancel is clicked (route-action recommended).|

|`@onDelete`| function| no| Closure invoked to delete the role (route-action recommended).|

|`@onChange`| function| no| Handler forwarded to child components for change events.|

- 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.

- Save button:

- If`@create` is true and caller has permission → calls`@onCreate`.

- Otherwise → calls`@onUpdate` if provided.

- Cancel calls`@onCancel`. Prefer passing`route-action 'cancel' item` so route-level handlers (e.g. WithBlockingActions) are used.

- Delete opens a confirmation dialog and invokes`@onDelete` when confirmed.

- Inside the component, invoke closures directly with`{{on 'click' @onCreate}}`,`{{on 'click' @onCancel}}`, and`{{on 'click' (fn confirm @onDelete @item)}}` to preserve original behavior.

- Template: ./index.hbs

- Component class: ./index.js

<form>

<RoleForm

@form={{form}}

@item={{item}}

@dc={{dc}}

@nspace={{nspace}}

@partition={{partition}}

@form={{@form}}

@item={{@item}}

@dc={{@dc}}

@nspace={{@nspace}}

@partition={{@partition}}

/>

{{#if (notcreate)}}

{{#if (not@create)}}

<DataSource

@src={{uri'/${partition}/${nspace}/${dc}/tokens/for-role/${id}'

(hash

id=(ifitemitem.ID'')

id=(if@item@item.ID'')

)

as |loader|>

{{#if (gtloader.data.length0)}}

<h2>Where is this role used?</h2>

<div>

<Hds::ButtonSet>

{{#if (andcreate (can"create roles"))}}

{{#if (and @create (can"create roles"))}}

<Hds::Button

@text='Save'

disabled={{oritem.isPristineitem.isInvalid (eqitem.Name'')}}

disabled={{or@item.isPristine@item.isInvalid (eq@item.Name'')}}

/>

{{#if (can"write role"item=item)}}

{{#if (can"write role"item=@item)}}

<Hds::Button

@text='Save'

/>

<Hds::Button

@text='Cancel'

@color='secondary'

/>

{{#if (and (notcreate) (can"delete role"item=item) )}}

{{#if (and (not@create) (can"delete role"item=@item) )}}

<ConfirmationDialog @message="Are you sure you want to delete this Role?">

<BlockSlot @name="action" as |confirm|>

<Hds::Button

@text='Delete'

@color='critical'

data-test-delete

/>

</BlockSlot>

<BlockSlot @name="dialog" as |execute cancel message|>

{{#if (gtitems.length0)}}

<ModalDialog

@onclose={{actioncancel}}

@onclose={{cancel}}

@aria={{hash

@text='Yes, Delete'

@color='critical'

data-test-delete

/>

<Hds::Button

@text='Cancel'

@color='secondary'

/>

</Hds::ButtonSet>

</BlockSlot>

</Hds::ButtonSet>

</div>

</form>

</form>