From a3a9ca4132fdef15cf4c7611eebe30ff6cec1d5b Mon Sep 17 00:00:00 2001
From: Angel Garbarino <Monkeychip@users.noreply.github.com>
Date: Thu, 27 Aug 2020 15:23:24 -0600
Subject: [PATCH] Ui/transform delete v2 (#9842)

* first cherry pick

* fix cli clipboard copy text for masking vs fpe

* dynamically setup copy commands for cli copy button

* add backend to cli clipboard text

* add capabilities cherry pick

* setup modal

* handle error response in Modal

* pass in type to info table row so can handle array specific

* remove todo
---
 .../transform-show-transformation.hbs         | 18 ++++++---
 .../components/transformation-edit.hbs        | 37 ++++++++++++-------
 .../core/addon/components/info-table-row.js   |  2 +-
 .../templates/components/info-table-row.hbs   |  6 ++-
 4 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/ui/app/templates/components/transform-show-transformation.hbs b/ui/app/templates/components/transform-show-transformation.hbs
index 22a4ec8e4..72a68dbc8 100644
--- a/ui/app/templates/components/transform-show-transformation.hbs
+++ b/ui/app/templates/components/transform-show-transformation.hbs
@@ -3,7 +3,7 @@
     {{#if (eq attr.type "object")}}
       {{info-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(stringify (get model attr.name))}}
     {{else}}
-      {{info-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(get model attr.name)}}
+      {{info-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(get model attr.name) type=attr.type}}
     {{/if}}
   {{/each}}
 </div>
@@ -18,8 +18,12 @@
       </span>
     </div>
     <div class="copy-text level">
-      {{#let "vault write <backend>/encode/<your role name> value=<enter your value here> tweak=<base-64-string>" as |copyEncodeCommand|}}
-        <code>vault write &lt;backend&gt;/encode/&lt;your role name&gt; value=&lt;enter your value here&gt; tweak=&lt;base-64 string&gt;</code>
+      {{#let (concat 
+        "vault write " model.backend "/encode/" 
+        (if (and (take 1 model.allowed_roles) (eq model.allowed_roles.length 1)) (take 1 model.allowed_roles) "<choose a role>")
+        " value=<enter your value here>" 
+        (if (and (eq model.type 'fpe') (eq model.tweak_source "supplied")) " tweak_source=<enter your tweak>")) as |copyEncodeCommand|}}
+        <code>{{copyEncodeCommand}}</code>
         <CopyButton class="button is-transparent level-right" @clipboardText={{copyEncodeCommand}}
           @buttonType="button" @success={{action (set-flash-message 'Command copied!')}}>
           <Icon @size='l' @glyph="copy-action" aria-label="Copy" />
@@ -35,8 +39,12 @@
       </span>
     </div>
     <div class="copy-text level">
-      {{#let "vault write <backend>/decode/<your role name> value=<enter your value here> tweak=<base-64-string>" as |copyDecodeCommand|}}
-        <code>vault write &lt;backend&gt;/decode/&lt;your role name&gt; value=&lt;enter your value here&gt; tweak=&lt;base-64 string&gt;</code>
+      {{#let (concat 
+        "vault write " model.backend "/decode/" 
+        (if (and (take 1 model.allowed_roles) (eq model.allowed_roles.length 1)) (take 1 model.allowed_roles) "<choose a role>")
+        " value=<enter your value here>" 
+        (if (and (eq model.type 'fpe') (eq model.tweak_source "supplied")) " tweak_source=<enter your tweak>")) as |copyDecodeCommand|}}
+        <code>{{copyDecodeCommand}}</code>
         <CopyButton class="button is-transparent level-right" @clipboardText={{copyDecodeCommand}}
           @buttonType="button" @success={{action (set-flash-message 'Command copied!')}}>
           <Icon @size='l' @glyph="copy-action" aria-label="Copy" />
diff --git a/ui/app/templates/components/transformation-edit.hbs b/ui/app/templates/components/transformation-edit.hbs
index a09314927..8566b42aa 100644
--- a/ui/app/templates/components/transformation-edit.hbs
+++ b/ui/app/templates/components/transformation-edit.hbs
@@ -11,9 +11,9 @@
   <p.levelLeft>
     <h1 class="title is-3" data-test-secret-header="true">
       {{#if (eq mode "create") }}
-        Create Transformation
+        Create transformation
       {{else if (eq mode 'edit')}}
-        Edit Transformation
+        Edit transformation
       {{else}}
         Transformation <code>{{model.id}}</code>
       {{/if}}
@@ -24,22 +24,19 @@
 {{#if (eq mode "show")}}
   <Toolbar>
     <ToolbarActions>
-      {{!-- TODO: update these actions, show delete grey out if not allowed --}}
-      {{#if (or model.canUpdate model.canDelete)}}
+      {{#if (or capabilities.canUpdate capabilities.canDelete)}}
         <div class="toolbar-separator" />
       {{/if}}
-      {{#if model.canDelete}}
-      {{!-- TODO only allow deletion when not in use by a role --}}
-        <ConfirmAction
-          @buttonClasses="toolbar-link"
-          @onConfirmAction={{action "delete"}}
-          @confirmTitle="Are you sure?"
-          @confirmMessage="This transformation is not in use by a role and can be deleted."
+      {{#if capabilities.canDelete}}
+        <a
+          class="toolbar-link"
+          onclick={{action (mut isModalActive) true}}
+          data-test-replication-action-trigger
         >
           Delete transformation
-        </ConfirmAction>
+        </a>
       {{/if}}
-      {{#if model.canUpdate }}
+      {{#if capabilities.canUpdate }}
         <ToolbarSecretLink
           @secret={{model.id}}
           @mode="edit"
@@ -62,3 +59,17 @@
     @model={{model}}
   />
 {{/if}}
+
+<ConfirmationModal
+  @title="Delete transformation"
+  @onClose={{action (mut isModalActive) false}}
+  @isActive={{isModalActive}}
+  @confirmText={{model.name}}
+  @toConfirmMsg="Type {{model.name}} to confirm deleting the transformation."
+  @onConfirm={{action "delete"}}
+>
+  <p class="has-bottom-margin-m">
+    Deleting the <strong>{{model.name}}</strong> transformation means that the underlying keys are lost and the data encoded by the transformation are unrecoverable and cannot be decoded.
+  </p>
+  <MessageError @model={{model}} @errorMessage={{error}} />
+</ConfirmationModal>
diff --git a/ui/lib/core/addon/components/info-table-row.js b/ui/lib/core/addon/components/info-table-row.js
index 2fadd1fa4..4f1a84b21 100644
--- a/ui/lib/core/addon/components/info-table-row.js
+++ b/ui/lib/core/addon/components/info-table-row.js
@@ -18,7 +18,7 @@ import layout from '../templates/components/info-table-row';
  * @param label=null {string} - The display name for the value.
  * @param helperText=null {string} - Text to describe the value displayed beneath the label.
  * @param alwaysRender=false {Boolean} - Indicates if the component content should be always be rendered.  When false, the value of `value` will be used to determine if the component should render.
- *
+ * @param [type=array] {string} - The type of value being passed in.  This is used for when you want to trim an array.  For example, if you have an array value that can equal length 15+ this will trim to show 5 and count how many more are there
  */
 export default Component.extend({
   layout,
diff --git a/ui/lib/core/addon/templates/components/info-table-row.hbs b/ui/lib/core/addon/templates/components/info-table-row.hbs
index bd7f3afcd..0e290980b 100644
--- a/ui/lib/core/addon/templates/components/info-table-row.hbs
+++ b/ui/lib/core/addon/templates/components/info-table-row.hbs
@@ -29,7 +29,11 @@
         /> No
       {{/if}}
     {{else}}
-      <code class="is-word-break has-text-black" data-test-row-value="{{label}}">{{value}}</code>
+      {{#if (eq type 'array')}}
+        <code class="is-word-break has-text-black" data-test-row-value="{{label}}">{{if (gte value.length 10) (concat (take 5 value) ", and " (dec 5 value.length) " more.") value}}</code>
+      {{else}}
+        <code class="is-word-break has-text-black" data-test-row-value="{{label}}">{{value}}</code>
+      {{/if}}
     {{/if}}
   </div>
 {{/if}}