From 6a630414d81405c3d7467e42cd0b7a2f8853d326 Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <chelshaw.dev@gmail.com>
Date: Fri, 5 Jun 2020 13:31:04 -0500
Subject: [PATCH] Ui/replication mgmt/update primary action (#9149)

* Update Primary replication action uses modal flow

* Update modal max-height to accommodate for the navbar
---
 ui/app/styles/components/modal.scss           |   2 +
 .../helpers/replication-action-for-mode.js    |   2 +-
 .../replication-action-update-primary.hbs     | 239 +++++++-----------
 .../components/replication-actions-test.js    |  30 +--
 4 files changed, 112 insertions(+), 161 deletions(-)

diff --git a/ui/app/styles/components/modal.scss b/ui/app/styles/components/modal.scss
index 34911989d518..fe629265737a 100644
--- a/ui/app/styles/components/modal.scss
+++ b/ui/app/styles/components/modal.scss
@@ -5,6 +5,8 @@
 .modal-card {
   box-shadow: $box-shadow-highest;
   border: 1px solid $grey-light;
+  max-height: calc(100vh - 70px);
+  margin-top: 60px;
 
   &-head {
     border-radius: 0;
diff --git a/ui/lib/core/addon/helpers/replication-action-for-mode.js b/ui/lib/core/addon/helpers/replication-action-for-mode.js
index 83af1e481260..c4b24992c9a2 100644
--- a/ui/lib/core/addon/helpers/replication-action-for-mode.js
+++ b/ui/lib/core/addon/helpers/replication-action-for-mode.js
@@ -9,7 +9,7 @@ const ACTIONS = {
   dr: {
     primary: ['disable', 'recover', 'reindex', 'demote'],
     // TODO: add disable, recover, reindex and update-primary when API is ready
-    secondary: ['promote'],
+    secondary: ['promote', 'update-primary'],
     bootstrapping: ['disable', 'recover', 'reindex'],
   },
 };
diff --git a/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs b/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs
index eef3bd5c9e33..c8da778b78b1 100644
--- a/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs
+++ b/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs
@@ -1,153 +1,104 @@
-{{#if (and (eq replicationMode 'dr') (eq model.replicationAttrs.modeForUrl 'secondary'))}}
-  <div class="box is-marginless is-shadowless">
+<div class="action-block is-rounded" data-test-update-primary-replication>
+  <div class="action-block-info">
+    <h4 class="title is-5 is-marginless">
+      Update primary
+    </h4>
     <p>
-      Change a secondary cluster’s assigned primary cluster using a secondary
-      activation token. This does not wipe all data in the cluster.
+      Change this secondary's assigned primary cluster
     </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>
-    <div class="field">
-      <label for="secondary-token" class="is-label">
-        Secondary activation token
-      </label>
-      <div class="control">
-        {{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}}
+  </div>
+
+  <div class="action-block-action">
+    <button
+      class="button is-secondary"
+      onclick={{action (mut isModalActive) true}}
+      data-test-update-primary-action-trigger
+    >
+      Update
+    </button>
+  </div>
+</div>
+
+<Modal
+  @title="Update primary"
+  @onClose={{action (mut isModalActive) false}}
+  @isActive={{isModalActive}}
+  @type="warning"
+  @showCloseButton={{true}}
+>
+  <section class="modal-card-body">
+    <p class="has-bottom-margin-m">
+      Use a secondary activation token to change this secondary’s assigned primary. This does not wipe all data in the cluster.
+    </p>
+
+    <div data-test-update-primary-inputs>
+      {{#if (eq replicationMode "dr")}}
+      <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>
-    </div>
-    <ToggleButton
-      @class="is-block"
-      @toggleAttr="showOptions"
-      @toggleTarget={{this}}
-      @openLabel="Hide options"
-      @closedLabel="Options"
-      />
-    {{#if showOptions}}
-      <div class="box is-marginless">
-        <div class="field">
-          <label for="primary_api_addr" class="is-label">
-            Primary API address <em class="is-optional">(optional)</em>
-          </label>
-          <div class="control">
-            {{input class="input" value=primary_api_addr id="primary_api_addr" name="primary_api_addr"}}
-          </div>
-          <p class="help">
-           Set this to the API address (normal Vault address) to override the
-           value embedded in the token.
-          </p>
+      {{/if}}
+      <div class="field">
+        <label for="secondary-token" class="is-label">
+          Secondary activation token
+        </label>
+        <div class="control">
+          {{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}}
         </div>
-        <div class="field">
-          <label for="ca_file" class="is-label">
-            CA file <em class="is-optional">(optional)</em>
-          </label>
-          <div class="control">
-            {{input value=ca_file id="ca_file" name="ca_file" class="input"}}
-          </div>
-          <p class="help">
-            Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary.
-          </p>
+      </div>
+      <div class="field">
+        <label for="primary_api_addr" class="is-label">
+          Primary API address <em class="is-optional">(optional)</em>
+        </label>
+        <div class="control">
+          {{input class="input" value=primary_api_addr id="primary_api_addr" name="primary_api_addr"}}
         </div>
-        <div class="field">
-          <label for="ca_path" class="is-label">
-            CA path <em class="is-optional">(optional)</em>
-          </label>
-          <div class="control">
-            {{input value=ca_path id="ca_path" name="ca_file" class="input"}}
-          </div>
-          <p class="help">
-            Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary.
-          </p>
+        <p class="help">
+          Set this to the API address (normal Vault address) to override the
+          value embedded in the token.
+        </p>
+      </div>
+      <div class="field">
+        <label for="ca_file" class="is-label">
+          CA file <em class="is-optional">(optional)</em>
+        </label>
+        <div class="control">
+          {{input value=ca_file id="ca_file" name="ca_file" class="input"}}
         </div>
+        <p class="help">
+          Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary.
+        </p>
       </div>
-    {{/if}}
-  </div>
-
-  <div class="box is-marginless is-shadowless">
-    <div class="field">
-      <div class="control">
-        <ConfirmAction
-          @buttonClasses="button is-primary"
-          @confirmTitle="Update primary?"
-          @confirmMessage="This will update this cluster's primary."
-          @confirmButtonText="Update"
-          @horizontalPosition="auto-left"
-          @onConfirmAction={{action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file)}}
-        >
-          Update primary
-        </ConfirmAction>
+      <div class="field">
+        <label for="ca_path" class="is-label">
+          CA path <em class="is-optional">(optional)</em>
+        </label>
+        <div class="control">
+          {{input value=ca_path id="ca_path" name="ca_file" class="input"}}
+        </div>
+        <p class="help">
+          Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary.
+        </p>
       </div>
     </div>
-  </div>
-{{else}}
-  <h4 class="title is-5 is-marginless">
-    Update primary
-  </h4>
-  <div class="content">
-    <p>
-      Change a secondary cluster’s assigned primary cluster using a secondary
-      activation token. This does not wipe all data in the cluster.
-    </p>
-  </div>
-  <div class="field">
-    <label for="secondary-token" class="is-label">
-      Secondary activation token
-    </label>
-    <div class="control">
-      {{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}}
-    </div>
-  </div>
-  <div class="field">
-    <label for="primary_api_addr" class="is-label">
-      Primary API address <em class="is-optional">(optional)</em>
-    </label>
-    <div class="control">
-      {{input class="input" value=primary_api_addr id="primary_api_addr" name="primary_api_addr"}}
-    </div>
-    <p class="help has-text-grey">
-     Set this to the API address (normal Vault address) to override the
-     value embedded in the token.
-    </p>
-  </div>
-  <div class="field">
-    <label for="ca_file" class="is-label">
-      CA file <em class="is-optional">(optional)</em>
-    </label>
-    <div class="control">
-      {{input value=ca_file id="ca_file" name="ca_file" class="input"}}
-    </div>
-    <p class="help has-text-grey">
-      Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary.
-    </p>
-  </div>
-  <div class="field">
-    <label for="ca_path" class="is-label">
-      CA path <em class="is-optional">(optional)</em>
-    </label>
-    <div class="control">
-      {{input value=ca_path id="ca_path" name="ca_file" class="input"}}
-    </div>
-    <p class="help has-text-grey">
-      Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary.
-    </p>
-  </div>
-
-  <div class="field">
-    <div class="control">
-      <ConfirmAction
-        @buttonClasses="button is-primary"
-        @confirmTitle="Update primary?"
-        @confirmMessage="This will update this cluster's primary."
-        @confirmButtonText="Update"
-        @horizontalPosition="auto-left"
-        @onConfirmAction={{action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file)}}
-      >
-        Update primary
-      </ConfirmAction>
-    </div>
-  </div>
-{{/if}}
+  </section>
+  <footer class="modal-card-foot modal-card-foot-outlined">
+    <button
+      class="button is-primary"
+      onclick={{action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file)}}
+      data-test-confirm-action-trigger
+    >
+      Update
+    </button>
+    <button
+      class="button is-secondary"
+      onclick={{action (mut isModalActive) false}}
+      data-test-update-primary-cancel-button>
+      Cancel
+    </button>
+  </footer>
+</Modal>
diff --git a/ui/tests/integration/components/replication-actions-test.js b/ui/tests/integration/components/replication-actions-test.js
index 9b6cf6000f88..764801e0fabe 100644
--- a/ui/tests/integration/components/replication-actions-test.js
+++ b/ui/tests/integration/components/replication-actions-test.js
@@ -99,22 +99,20 @@ module('Integration | Component | replication actions', function(hooks) {
       ['promote', 'secondary', { primary_cluster_addr: 'cluster addr' }],
       false,
     ],
-
-    // don't yet update-primary for dr
-    // [
-    //   'performance',
-    //   'secondary',
-    //   'update-primary',
-    //   'Update primary',
-    //   async function() {
-    //     await fillIn('#secondary-token', 'token');
-    //     await blur('#secondary-token');
-    //     await fillIn('#primary_api_addr', 'addr');
-    //     await blur('#primary_api_addr');
-    //   },
-    //   ['update-primary', 'secondary', { token: 'token', primary_api_addr: 'addr' }],
-    //   true,
-    // ],
+    [
+      'performance',
+      'secondary',
+      'update-primary',
+      'Update primary',
+      async function() {
+        await fillIn('#secondary-token', 'token');
+        await blur('#secondary-token');
+        await fillIn('#primary_api_addr', 'addr');
+        await blur('#primary_api_addr');
+      },
+      ['update-primary', 'secondary', { token: 'token', primary_api_addr: 'addr' }],
+      false,
+    ],
   ];
 
   for (let [