adds divider to toolbars with destructive actions (#12895)

* adds divider to toolbars with destructive actions

* adds changelog

changelog/12895.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Standardizes toolbar presentation of destructive actions 
+```

ui/app/templates/components/alphabet-edit.hbs

@@ -33,6 +33,7 @@
         >
           Delete alphabet
         </button>
+        <div class="toolbar-separator" />
       {{/if}}
       {{#if capabilities.canUpdate }}
         <ToolbarSecretLink

ui/app/templates/components/database-role-edit.hbs

@@ -19,38 +19,38 @@
   <Toolbar>
     <ToolbarActions>
       {{#if @model.canDelete}}
-      <ConfirmAction
+        <ConfirmAction
-        @buttonClasses="toolbar-link"
+          @buttonClasses="toolbar-link"
-        @onConfirmAction={{action 'delete'}}
+          @onConfirmAction={{action 'delete'}}
-        @confirmTitle="Delete role?"
+          @confirmTitle="Delete role?"
-        @confirmMessage="This role will be permanently deleted. You will need to recreate it to use it again."
+          @confirmMessage="This role will be permanently deleted. You will need to recreate it to use it again."
-        @confirmButtonText="Delete"
+          @confirmButtonText="Delete"
-        data-test-database-role-delete
+          data-test-database-role-delete
-      >
+        >
-        Delete role
+          Delete role
-      </ConfirmAction>
+        </ConfirmAction>
-      <div class="toolbar-separator" />
+        <div class="toolbar-separator" />
       {{/if}}
       {{#if @model.canGenerateCredentials}}
-      <button
+        <button
-        type="button"
+          type="button"
-        class="toolbar-link"
+          class="toolbar-link"
-        {{on 'click' (fn this.generateCreds @model.id @model.type)}}
+          {{on 'click' (fn this.generateCreds @model.id @model.type)}}
-        data-test-database-role-generate-creds
+          data-test-database-role-generate-creds
-      >
+        >
-        {{if (eq @model.type "static") "Get credentials" "Generate credentials"}}
+          {{if (eq @model.type "static") "Get credentials" "Generate credentials"}}
-      </button>
+        </button>
       {{/if}}
       {{#if @model.canEditRole}}
-      <ToolbarSecretLink
+        <ToolbarSecretLink
-        @secret={{concat 'role/' @model.id}}
+          @secret={{concat 'role/' @model.id}}
-        @mode="edit"
+          @mode="edit"
-        @replace=true
+          @replace=true
-        @queryParams={{query-params itemType="role"}}
+          @queryParams={{query-params itemType="role"}}
-        @data-test-edit-link=true
+          @data-test-edit-link=true
-      >
+        >
-        Edit role
+          Edit role
-      </ToolbarSecretLink>
+        </ToolbarSecretLink>
       {{/if}}
     </ToolbarActions>
   </Toolbar>

ui/app/templates/components/generated-item.hbs

@@ -32,14 +32,21 @@
 {{#if (eq mode "show")}}
   <Toolbar>
     <ToolbarActions>
-      <ConfirmAction @buttonClasses="toolbar-link" @onConfirmAction={{action "deleteItem"}}
+      <ConfirmAction
-        @confirmMessage={{concat "Are you sure you want to delete " itemType " " model.id "?"}} @cancelButtonText="Cancel"
+        @buttonClasses="toolbar-link"
-        data-test-secret-delete="true">
+        @onConfirmAction={{action "deleteItem"}}
+        @confirmMessage={{concat "Are you sure you want to delete " itemType " " model.id "?"}}
+        @cancelButtonText="Cancel"
+        data-test-secret-delete="true"
+      >
         Delete
         {{itemType}}
       </ConfirmAction>
-      <ToolbarLink @params={{array "vault.cluster.access.method.item.edit" itemType model.id}}
+      <div class="toolbar-separator" />
-        @data-test-configure-link="true">
+      <ToolbarLink
+        @params={{array "vault.cluster.access.method.item.edit" itemType model.id}}
+        @data-test-configure-link="true"
+      >
         Edit {{singularize itemType}}
       </ToolbarLink>
     </ToolbarActions>

ui/app/templates/components/role-aws-edit.hbs

@@ -18,6 +18,15 @@
 {{#if (eq mode "show")}}
   <Toolbar>
     <ToolbarActions>
+      {{#if model.canDelete}}
+        <ConfirmAction
+          @buttonClasses="toolbar-link"
+          @onConfirmAction={{action "delete"}}
+        >
+          Delete role
+        </ConfirmAction>
+        <div class="toolbar-separator" />
+      {{/if}}
       {{#if model.canGenerate}}
         <ToolbarSecretLink
           @secret={{model.id}}
@@ -27,17 +36,6 @@
           Generate credentials
         </ToolbarSecretLink>
       {{/if}}
-      {{#if (and model.canGenerate (or model.canDelete model.canEdit))}}
-        <div class="toolbar-separator" />
-      {{/if}}
-      {{#if model.canDelete}}
-        <ConfirmAction
-          @buttonClasses="toolbar-link"
-          @onConfirmAction={{action "delete"}}
-        >
-          Delete role
-        </ConfirmAction>
-      {{/if}}
       {{#if model.canEdit}}
         <ToolbarSecretLink
           @secret={{model.id}}

ui/app/templates/components/role-pki-edit.hbs

@@ -18,6 +18,16 @@
 {{#if (eq mode "show") }}
   <Toolbar>
     <ToolbarActions>
+      {{#if model.canDelete}}
+        <ConfirmAction
+          @buttonClasses="toolbar-link"
+          @onConfirmAction={{action "delete"}}
+          data-test-role-delete="true"
+        >
+          Delete role
+        </ConfirmAction>
+        <div class="toolbar-separator" />
+      {{/if}}
       {{#if model.canGenerate}}
         <ToolbarSecretLink
           @secret={{model.id}}
@@ -38,18 +48,6 @@
           Sign Certificate
         </ToolbarSecretLink>
       {{/if}}
-      {{#if (and (or model.canGenerate model.canSign) (or model.canDelete model.canEdit))}}
-        <div class="toolbar-separator" />
-      {{/if}}
-      {{#if model.canDelete}}
-        <ConfirmAction
-          @buttonClasses="toolbar-link"
-          @onConfirmAction={{action "delete"}}
-          data-test-role-delete="true"
-        >
-          Delete role
-        </ConfirmAction>
-      {{/if}}
       {{#if model.canEdit}}
         <ToolbarSecretLink
           @secret={{model.id}}

ui/app/templates/components/role-ssh-edit.hbs

@@ -18,6 +18,15 @@
 {{#if (eq mode "show")}}
   <Toolbar>
     <ToolbarActions>
+      {{#if model.canDelete}}
+        <ConfirmAction
+          @buttonClasses="toolbar-link"
+          @onConfirmAction={{action "delete"}}
+        >
+          Delete role
+        </ConfirmAction>
+        <div class="toolbar-separator" />
+      {{/if}}
       {{#if (eq model.keyType "otp")}}
         <ToolbarSecretLink
           @secret={{model.id}}
@@ -37,17 +46,6 @@
           Sign Keys
         </ToolbarSecretLink>
       {{/if}}
-      {{#if (or model.canUpdate model.canDelete)}}
-        <div class="toolbar-separator" />
-      {{/if}}
-      {{#if model.canDelete}}
-        <ConfirmAction
-          @buttonClasses="toolbar-link"
-          @onConfirmAction={{action "delete"}}
-        >
-          Delete role
-        </ConfirmAction>
-      {{/if}}
       {{#if (or model.canUpdate model.canDelete)}}
         <ToolbarSecretLink
           @secret={{model.id}}

ui/app/templates/components/secret-delete-menu.hbs

@@ -9,6 +9,7 @@
     >
       Delete
     </ConfirmAction>
+    <div class="toolbar-separator" />
   {{/if}}
 {{else}}
   {{#if (and this.canUndeleteVersion @modelForData.deleted)}}
@@ -26,7 +27,7 @@
       <button
         type="button"
         class="toolbar-link"
-        {{on "click" (fn (mut this.showDeleteModal false))}}
+        {{on "click" (fn (mut this.showDeleteModal) false)}}
         data-test-delete-open-modal
       >
         {{if (and (not @modelForData.deleted) (not @modelForData.destroyed)) "Delete" "Destroy"}}

ui/app/templates/components/transform-role-edit.hbs

@@ -29,6 +29,7 @@
         >
           Delete role
         </ConfirmAction>
+        <div class="toolbar-separator" />
       {{/if}}
       {{#if capabilities.canUpdate }}
         <ToolbarSecretLink

ui/app/templates/components/transform-template-edit.hbs

@@ -33,6 +33,7 @@
         >
           Delete template
         </button>
+        <div class="toolbar-separator" />
       {{/if}}
       {{#if capabilities.canUpdate }}
         <ToolbarSecretLink

ui/app/templates/components/transformation-edit.hbs

@@ -18,9 +18,6 @@
 {{#if (eq mode "show")}}
   <Toolbar>
     <ToolbarActions>
-      {{#if (or capabilities.canUpdate capabilities.canDelete)}}
-        <div class="toolbar-separator" />
-      {{/if}}
       {{#if capabilities.canDelete}}
         {{#if (gt model.allowed_roles.length 0)}}
           <ToolTip
@@ -52,6 +49,7 @@
           Delete transformation
         </button>
         {{/if}}
+        <div class="toolbar-separator" />
       {{/if}}
       {{#if capabilities.canUpdate }}
         {{#if (gt model.allowed_roles.length 0)}}

ui/app/templates/vault/cluster/policy/edit.hbs

@@ -23,13 +23,6 @@
 {{#if (and (not-eq model.id "root") (or capabilities.canUpdate capabilities.canDelete))}}
   <Toolbar>
     <ToolbarActions>
-      <ToolbarLink
-        @params={{array 'vault.cluster.policy.show' model.id}}
-        @data-test-policy-edit-toggle=true
-      >
-        Back to policy
-      </ToolbarLink>
-      <div class="toolbar-separator" />
       {{#if (and (not-eq model.id "default") capabilities.canDelete)}}
         <ConfirmAction
           @buttonClasses="toolbar-link"
@@ -39,7 +32,14 @@
         >
           Delete
         </ConfirmAction>
+        <div class="toolbar-separator" />
       {{/if}}
+      <ToolbarLink
+        @params={{array 'vault.cluster.policy.show' model.id}}
+        @data-test-policy-edit-toggle=true
+      >
+        Back to policy
+      </ToolbarLink>
     </ToolbarActions>
   </Toolbar>
 {{/if}}

ui/lib/kmip/addon/templates/credentials/show.hbs

@@ -10,12 +10,6 @@
 </PageHeader>
 <Toolbar>
   <ToolbarActions>
-    <ToolbarLink
-      @params={{array "credentials.index" this.scope this.role}}
-      data-test-kmip-link-back-to-role
-    >
-      Back to role
-    </ToolbarLink>
     {{#if model.deletePath.canDelete}}
       <ModelWrap as |m|>
         <ConfirmAction
@@ -38,7 +32,14 @@
             Revoke credentials
         </ConfirmAction>
       </ModelWrap>
+      <div class="toolbar-separator" />
     {{/if}}
+    <ToolbarLink
+      @params={{array "credentials.index" this.scope this.role}}
+      data-test-kmip-link-back-to-role
+    >
+      Back to role
+    </ToolbarLink>
     <CopyButton
       class="toolbar-link"
       @clipboardText={{model.certificate}}

ui/lib/kmip/addon/templates/role.hbs

@@ -21,6 +21,7 @@
             Delete role
         </ConfirmAction>
       </ModelWrap>
+      <div class="toolbar-separator" />
     {{/if}}
     {{#if model.updatePath.canUpdate}}
       <ToolbarLink