From 28104eea476235deee4e507634fda02e75ce04a5 Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <chelshaw.dev@gmail.com>
Date: Tue, 2 Jun 2020 11:08:24 -0500
Subject: [PATCH 1/4] Refactor Replication Action: Promote to use modal flow

---
 .../components/replication-action-promote.hbs | 173 ++++++++----------
 1 file changed, 79 insertions(+), 94 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..6dd57bb8042d 100644
--- a/ui/lib/core/addon/templates/components/replication-action-promote.hbs
+++ b/ui/lib/core/addon/templates/components/replication-action-promote.hbs
@@ -1,26 +1,65 @@
-{{#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 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 replicationDisplayMode "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>
+
+      {{#if (eq replicationDisplayMode "DR")}}
+      <div data-test-promote-dr-inputs>
+        <div class="field is-borderless">
+          <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"
+        />
       </div>
-    </div>
-    <ToggleButton
-      @class="is-block"
-      @toggleAttr="showOptions"
-      @toggleTarget={{this}}
-      @openLabel="Hide options"
-      @closedLabel="Options"
-      />
-    {{#if showOptions}}
-      <div class="box is-marginless">
+      {{/if}}
+      {{#if (or (eq replicationDisplayMode "Performance") showOptions)}}
+      <div data-test-promote-performance-inputs>
         <div class="field">
           <label for="primary_cluster_addr" class="is-label">
             Primary cluster address <em class="is-optional">(optional)</em>
@@ -52,78 +91,24 @@
           />
         </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>
+      {{/if}}
+
     </div>
-  </div>
-{{/if}}
+  </section>
+  <footer class="modal-card-foot modal-card-foot-outlined">
+    <button
+      class="button is-primary"
+      disabled={{if (and (eq replicationDisplayMode "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>

From 9bbaca3c54e6e602a2c0f156b024d6e915b50653 Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <chelshaw.dev@gmail.com>
Date: Tue, 2 Jun 2020 12:22:22 -0500
Subject: [PATCH 2/4] Remove options toggle from promote modal

---
 .../components/replication-action-promote.hbs | 28 ++++---------------
 1 file changed, 6 insertions(+), 22 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 6dd57bb8042d..9befb70ad83d 100644
--- a/ui/lib/core/addon/templates/components/replication-action-promote.hbs
+++ b/ui/lib/core/addon/templates/components/replication-action-promote.hbs
@@ -39,29 +39,19 @@
         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>
 
-      {{#if (eq replicationDisplayMode "DR")}}
       <div data-test-promote-dr-inputs>
+        {{#if (eq replicationDisplayMode "DR")}}
         <div class="field is-borderless">
-          <label for="dr_operation_token" class="is-label">
+          <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>
-        <ToggleButton
-          @class="is-block"
-          @toggleAttr="showOptions"
-          @toggleTarget={{this}}
-          @openLabel="Hide options"
-          @closedLabel="Options"
-        />
-      </div>
-      {{/if}}
-      {{#if (or (eq replicationDisplayMode "Performance") showOptions)}}
-      <div data-test-promote-performance-inputs>
+        {{/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">
@@ -80,19 +70,13 @@
             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>
   </section>
   <footer class="modal-card-foot modal-card-foot-outlined">

From e684789587f528fffd3badd839d6b4294b9ff545 Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <chelshaw.dev@gmail.com>
Date: Tue, 2 Jun 2020 13:37:59 -0500
Subject: [PATCH 3/4] Use replicationMode instead of replicationDisplayMode for
 determining node mode

---
 .../templates/components/replication-action-promote.hbs     | 6 +++---
 1 file changed, 3 insertions(+), 3 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 9befb70ad83d..b9b473c1e2a8 100644
--- a/ui/lib/core/addon/templates/components/replication-action-promote.hbs
+++ b/ui/lib/core/addon/templates/components/replication-action-promote.hbs
@@ -30,7 +30,7 @@
   <section class="modal-card-body">
     <div class="box is-shadowless is-fullwidth is-sideless">
 
-      {{#if (eq replicationDisplayMode "DR")}}
+      {{#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>
@@ -40,7 +40,7 @@
       </p>
 
       <div data-test-promote-dr-inputs>
-        {{#if (eq replicationDisplayMode "DR")}}
+        {{#if (eq replicationMode "dr")}}
         <div class="field is-borderless">
           <label for="dr_operation_token" class="is-label is-size-6">
             DR Operation Token
@@ -82,7 +82,7 @@
   <footer class="modal-card-foot modal-card-foot-outlined">
     <button
       class="button is-primary"
-      disabled={{if (and (eq replicationDisplayMode "DR") (not dr_operation_token)) true}}
+      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
     >

From 128177820c36d6e60ea246487cff9d0858705b85 Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <chelshaw.dev@gmail.com>
Date: Tue, 2 Jun 2020 13:55:21 -0500
Subject: [PATCH 4/4] Remove extreanneous space

---
 .../addon/templates/components/replication-action-promote.hbs    | 1 -
 1 file changed, 1 deletion(-)

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 b9b473c1e2a8..fc8a211ad5a2 100644
--- a/ui/lib/core/addon/templates/components/replication-action-promote.hbs
+++ b/ui/lib/core/addon/templates/components/replication-action-promote.hbs
@@ -19,7 +19,6 @@
   </div>
 </div>
 
-
 <Modal
   @title="Promote cluster?"
   @onClose={{action (mut isModalActive) false}}