From 77c7f31880d58c8b81451eff4d8cadd30554b802 Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <chelshaw.dev@gmail.com>
Date: Tue, 2 Jun 2020 14:07:06 -0500
Subject: [PATCH] Refactor Replication Action: Promote to use modal flow
 (#9122)

---
 .../components/replication-action-promote.hbs | 172 +++++++-----------
 1 file changed, 70 insertions(+), 102 deletions(-)

diff --git a/ui/lib/core/addon/templates/components/replication-action-promote.hbs b/ui/lib/core/addon/templates/components/replication-action-promote.hbs
index 032acf2a867a..fc8a211ad5a2 100644
--- a/ui/lib/core/addon/templates/components/replication-action-promote.hbs
+++ b/ui/lib/core/addon/templates/components/replication-action-promote.hbs
@@ -1,28 +1,56 @@
-{{#if (and (eq replicationMode 'dr') (eq model.replicationAttrs.modeForUrl 'secondary'))}}
-  <div class="box is-marginless is-shadowless">
+<div class="action-block is-rounded">
+  <div class="action-block-info">
+    <h4 class="title is-5 is-marginless">
+      Promote cluster
+    </h4>
     <p>
-      This cluster is currently running as a DR Replication Secondary.
-      Promote the cluster to a primary by entering DR Operation Token.
+      Promote this cluster to a {{replicationDisplayMode}} primary
     </p>
-    <div class="field">
-      <label for="dr_operation_token" class="is-label">
-        DR Operation Token
-      </label>
-      <div class="control">
-        {{input class="input" id="dr_operation_token" name="dr_operation_token" value=dr_operation_token}}
-      </div>
-    </div>
-    <ToggleButton
-      @class="is-block"
-      @toggleAttr="showOptions"
-      @toggleTarget={{this}}
-      @openLabel="Hide options"
-      @closedLabel="Options"
-      />
-    {{#if showOptions}}
-      <div class="box is-marginless">
+  </div>
+
+  <div class="action-block-action">
+    <button
+      class="button is-tertiary"
+      onclick={{action (mut isModalActive) true}}
+      data-test-replication-action-trigger
+    >
+      Update
+    </button>
+  </div>
+</div>
+
+<Modal
+  @title="Promote cluster?"
+  @onClose={{action (mut isModalActive) false}}
+  @isActive={{isModalActive}}
+  @type="warning"
+  @showCloseButton={{true}}
+>
+  <section class="modal-card-body">
+    <div class="box is-shadowless is-fullwidth is-sideless">
+
+      {{#if (eq replicationMode "dr")}}
+      <p class="has-bottom-margin-m">
+        To promote this DR Replication Secondary to a primary, enter the DR Operation token.
+      </p>
+      {{/if}}
+      <p class="has-bottom-margin-m">
+        Vault Replication is not designed for active-active usage. Enabling two primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected. If the cluster has a primary, be sure to demote it before promoting a secondary.
+      </p>
+
+      <div data-test-promote-dr-inputs>
+        {{#if (eq replicationMode "dr")}}
+        <div class="field is-borderless">
+          <label for="dr_operation_token" class="is-label is-size-6">
+            DR Operation Token
+          </label>
+          <div class="control">
+            {{input class="input" id="dr_operation_token" name="dr_operation_token" value=dr_operation_token}}
+          </div>
+        </div>
+        {{/if}}
         <div class="field">
-          <label for="primary_cluster_addr" class="is-label">
+          <label for="primary_cluster_addr" class="is-label is-size-6">
             Primary cluster address <em class="is-optional">(optional)</em>
           </label>
           <div class="control">
@@ -41,89 +69,29 @@
             checked={{force}}
             onchange={{action (mut force) value="target.checked"}}
             />
-            <label for="forcePromote" class="is-label">
+            <label for="forcePromote" class="is-label is-size-6">
               Force promotion of this cluster
             </label>
+            <p>Promote the cluster even if certain safety checks fail. This could result in data loss of data isn't fully replicated</p>
           </div>
-          <AlertInline
-            @type="warning"
-            @message="Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
-            promotes the cluster even if certain safety checks fail."
-          />
         </div>
       </div>
-    {{/if}}
-  </div>
-  <div class="box is-marginless is-shadowless">
-   <div class="field">
-    <div class="control">
-      <ConfirmAction
-        @buttonClasses="button is-primary"
-        @confirmTitle="Promote this cluster?"
-        @confirmMessage="This will affect how your Vault data is replicated."
-        @confirmButtonText="Promote"
-        @horizontalPosition="auto-left"
-        @onConfirmAction={{action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token primary_cluster_addr=primary_cluster_addr force=force)}}
-      >
-        Promote cluster
-      </ConfirmAction>
-    </div>
-   </div>
- </div>
-{{else}}
-  <h4 class="title is-5 is-marginless">
-    Promote cluster
-  </h4>
-  <div class="content">
-    <p>Promote the cluster to primary.
-    <AlertInline
-      @type="warning"
-      @message="Vault Replication is not designed for active-active usage and enabling two primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected.
-        If the cluster has a primary, be sure to demote it before promoting a secondary."
-    />
-    </p>
-    <div class="field">
-      <label for="primary_cluster_addr" class="is-label">
-        Primary cluster address <em class="is-optional">(optional)</em>
-      </label>
-      <div class="control">
-        {{input class="input" id="primary_cluster_addr" name="primary_cluster_addr" value=primary_cluster_addr}}
-      </div>
-      <p class="help has-text-grey">
-        Overrides the cluster address that the primary gives to secondary nodes.
-      </p>
-    </div>
-    <div class="field">
-      <div class="b-checkbox">
-        <input type="checkbox"
-        id="forcePromote"
-        class="styled"
-        checked={{force}}
-        onchange={{action (mut force) value="target.checked"}}
-        />
-        <label for="forcePromote" class="is-label">
-          Force promotion of this cluster
-        </label>
-      </div>
-      <AlertInline
-        @type="warning"
-        @message="Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
-          promotes the cluster even if certain safety checks fail."
-      />
     </div>
-  </div>
-  <div class="field">
-    <div class="control">
-      <ConfirmAction
-        @buttonClasses="button is-primary"
-        @confirmTitle="Promote this cluster?"
-        @confirmMessage="This will affect how your Vault data is replicated."
-        @confirmButtonText="Promote"
-        @horizontalPosition="auto-left"
-        @onConfirmAction={{action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash primary_cluster_addr=primary_cluster_addr force=force)}}
-      >
-        Promote cluster
-      </ConfirmAction>
-    </div>
-  </div>
-{{/if}}
+  </section>
+  <footer class="modal-card-foot modal-card-foot-outlined">
+    <button
+      class="button is-primary"
+      disabled={{if (and (eq replicationMode "dr") (not dr_operation_token)) true}}
+      onclick={{action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token primary_cluster_addr=primary_cluster_addr force=force)}}
+      data-test-promote-confirm-button
+    >
+      Promote
+    </button>
+    <button
+      class="button is-secondary"
+      onclick={{action (mut isModalActive) false}}
+      data-test-promote-cancel-button>
+      Cancel
+    </button>
+  </footer>
+</Modal>