ui: update component api to accept callback fns to be fired on cancel/prompt (#13414)

* ui:  update  component api to accept callback fns to be fired on cancel/prompt

* refact:  cancel callback should fire with outside click handler not on idle

* refact:  rename action to be more specific

ui/app/components/two-step-button.js

@@ -24,6 +24,7 @@ export default class TwoStepButton extends Component {
   inlineText = false;
   onConfirm() {}
   onCancel() {}
+  onPrompt() {}
 
   state = 'idle';
   @equal('state', 'idle') isIdle;
@@ -33,6 +34,9 @@ export default class TwoStepButton extends Component {
     while (true) {
       let ev = yield waitForEvent(document.body, 'click');
       if (!this.element.contains(ev.target) && !this.awaitingConfirmation) {
+        if (this.onCancel) {
+          this.onCancel();
+        }
         this.send('setToIdle');
       }
     }
@@ -47,6 +51,9 @@ export default class TwoStepButton extends Component {
 
   @action
   promptForConfirmation() {
+    if (this.onPrompt) {
+      this.onPrompt();
+    }
     this.set('state', 'prompt');
     next(() => {
       this.cancelOnClickOutside.perform();

ui/app/controllers/variables/variable/index.js

@@ -1,4 +1,5 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
 import messageForError from '../../../utils/message-from-adapter-error';
 import { inject as service } from '@ember/service';
@@ -10,6 +11,18 @@ export default class VariablesVariableIndexController extends Controller {
   @tracked
   error = null;
 
+  @tracked isDeleting = false;
+
+  @action
+  onDeletePrompt() {
+    this.isDeleting = true;
+  }
+
+  @action
+  onDeleteCancel() {
+    this.isDeleting = false;
+  }
+
   @task(function* () {
     try {
       yield this.model.deleteRecord();

ui/app/templates/variables/variable/index.hbs

@@ -22,23 +22,23 @@
     </div>
   </div>
 {{/if}}
-
 <h1 class="title with-flex">
   <div>
     <FlightIcon @name="file-text" />
     {{this.model.path}}
   </div>
   <div>
-    <div class="two-step-button">
-    <LinkTo
-      class="button is-info is-inverted is-small"
-      @model={{this.model}}
-      @route="variables.variable.edit"
-    >
-      Edit
-    </LinkTo>
-    </div>
-
+    {{#unless this.isDeleting}}
+      <div class="two-step-button">
+        <LinkTo
+          class="button is-info is-inverted is-small"
+          @model={{this.model}}
+          @route="variables.variable.edit"
+        >
+          Edit
+        </LinkTo>
+      </div>
+    {{/unless}}
     <TwoStepButton
       data-test-delete-button
       @alignRight={{true}}
@@ -47,15 +47,21 @@
       @confirmText="Yes, delete"
       @confirmationMessage="Are you sure you want to delete this variable and all its items?"
       @awaitingConfirmation={{this.deleteVariableFile.isRunning}}
-      @onConfirm={{perform this.deleteVariableFile}} />
+      @onConfirm={{perform this.deleteVariableFile}}
+      @onPrompt={{this.onDeletePrompt}}
+      @onCancel={{this.onDeleteCancel}}
+    />
   </div>
 </h1>
-
 <ListTable data-test-eval-table @source={{this.model.keyValues}} as |t|>
   <t.body as |row|>
     <tr>
-    <td>{{row.model.key}}</td>
-    <td>{{row.model.value}}</td>
+      <td>
+        {{row.model.key}}
+      </td>
+      <td>
+        {{row.model.value}}
+      </td>
     </tr>
   </t.body>
-</ListTable>
+</ListTable>