hashicorp · chelshaw · Jun 3, 2020 · May 29, 2020 · Jun 2, 2020 · Jun 2, 2020
diff --git a/ui/app/styles/components/action-block.scss b/ui/app/styles/components/action-block.scss
@@ -12,6 +12,7 @@
   display: grid;
   padding: $spacing-m $spacing-l;
   line-height: inherit;
+  grid-gap: $spacing-m;
 
   @include until($mobile) {
     @include stacked-grid();
@@ -20,7 +21,7 @@
 
 .action-block-info {
   @include until($mobile) {
-    @include stacked-grid();
+    @include stacked-content();
   }
 }
 
@@ -42,17 +43,25 @@
   }
 }
 
+/* Action Block Grid */
 .replication-actions-grid-layout {
   display: flex;
   flex-wrap: wrap;
+  margin: $spacing-m 0;
+  @include until($tablet) {
+    display: block;
+  }
 }
 
 .replication-actions-grid-item {
   flex-basis: 50%;
-  padding: 5px;
+  padding: $spacing-s;
 }
 
 .replication-actions-grid-item .action-block {
   height: 100%;
   width: 100%;
+  @include until($tablet) {
+    height: inherit;
+  }
 }
diff --git a/ui/app/styles/components/modal.scss b/ui/app/styles/components/modal.scss
@@ -39,6 +39,11 @@
   }
 }
 
+.modal-card-title.title {
+  display: flex;
+  align-items: center;
+}
+
 pre {
   background-color: inherit;
 }
@@ -52,3 +57,20 @@ pre {
     color: $yellow-dark;
   }
 }
+
+.modal-confirm-section .is-help {
+  color: $grey;
+  margin: $spacing-xxs 0;
+  strong {
+    color: inherit;
+  }
+}
+
+.modal-confirm-section {
+  margin: $spacing-xl 0 $spacing-m;
+}
+
+.modal-card-foot-outlined {
+  background: #f7f8fa;
+  border-top: 1px solid #bac1cc;
+}
diff --git a/ui/app/styles/core/helpers.scss b/ui/app/styles/core/helpers.scss
@@ -158,3 +158,8 @@
 .has-border-danger {
   border: 1px solid $danger;
 }
+
+ul.bullet {
+  list-style: disc;
+  padding-left: $spacing-m;
+}
diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -1,44 +1,44 @@
 <section class="section">
   <div class="container is-widescreen">
     <ReplicationPage @model={{model}} as |Page|>
-        <Page.header
-          @showTabs={{false}}
+      <Page.header
+        @showTabs={{true}}
+      />
+      {{#if Page.isDisabled}}
+        <EmptyState
+          @title="Disaster Recovery secondary not set up"
+          @message={{Page.message}}
+          @icon="alert-circle-outline"
+          @bottomBorder={{true}}
+        >
+          <nav class="breadcrumb">
+            <ul class="is-grouped-split">
+              <li>
+                {{#link-to "vault.cluster.secrets.backends" }}
+                  <span class="sep"/>
+                  Go back
+                {{/link-to}}
+              </li>
+              <li>
+                <LearnLink @path="/vault/operations/ops-disaster-recovery" @class="has-text-grey">
+                  Need help?
+                </LearnLink>
+              </li>
+            </ul>
+          </nav>
+        </EmptyState>
+      {{else}}
+      <Page.dashboard
+      {{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
+        @componentToRender='replication-secondary-card' as |Dashboard|>
+        <Dashboard.card
+          @title="States"
         />
-        {{#if Page.isDisabled}}
-          <EmptyState
-            @title="Disaster Recovery secondary not set up"
-            @message={{Page.message}}
-            @icon="alert-circle-outline"
-            @bottomBorder={{true}}
-          >
-            <nav class="breadcrumb">
-              <ul class="is-grouped-split">
-                <li>
-                  {{#link-to "vault.cluster.secrets.backends" }}
-                    <span class="sep"/>
-                    Go back
-                  {{/link-to}}
-                </li>
-                <li>
-                  <LearnLink @path="/vault/operations/ops-disaster-recovery" @class="has-text-grey">
-                    Need help?
-                  </LearnLink>
-                </li>
-              </ul>
-            </nav>
-          </EmptyState>
-        {{else}}
-        <Page.dashboard
-        {{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
-          @componentToRender='replication-secondary-card' as |Dashboard|>
-          <Dashboard.card
-            @title="States"
-          />
-          <Dashboard.card
-            @title="Primary cluster"
-          />
-          <Dashboard.rows/>
-        </Page.dashboard>
+        <Dashboard.card
+          @title="Primary cluster"
+        />
+        <Dashboard.rows/>
+      </Page.dashboard>
       {{/if}}
     </ReplicationPage>
   </div>

diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
@@ -1,62 +1,40 @@
-<SplashPage as |Page|>
-  <Page.header>
-    <h1 class="title is-4">
-     Disaster Recovery secondary is&nbsp;enabled
-    </h1>
-  </Page.header>
-  <Page.content>
-    <nav class="tabs sub-nav is-marginless">
-      <ul>
-        <li class="{{if (eq action '') 'is-active'}}">
-          {{#link-to 'vault.cluster.replication-dr-promote' (query-params action='')}}
-            Operation token
-          {{/link-to}}
-        </li>
-        <li class="{{if (eq action 'update') 'is-active'}}">
-          {{#link-to 'vault.cluster.replication-dr-promote' (query-params action='update')}}
-            Update primary
-          {{/link-to}}
-        </li>
-        <li class="{{if (eq action 'promote') 'is-active'}}">
-          {{#link-to 'vault.cluster.replication-dr-promote' (query-params action='promote')}}
-            Promote
-          {{/link-to}}
-        </li>
-      </ul>
-    </nav>
-    {{#if (eq action 'promote')}}
-      <AlertBanner
-        @type="warning"
-        @title="Caution"
-        @message="Vault Replication is not designed for active-active usage and enabling two performance primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected."
-        @class="unseal-warning"
-        data-test-cluster-status
+<section class="section">
+  <div class="container is-widescreen">
+    <ReplicationPage @model={{model}} as |Page|>
+      <Page.header
+        @showTabs={{true}}
       />
-      <ReplicationActions
-        @replicationMode="dr"
-        @selectedAction="promote"
-        @model={{model}}
-        />
-    {{/if}}
-    {{#if (eq action 'update')}}
-      <ReplicationActions
-        @replicationMode="dr"
-        @selectedAction="update-primary"
-        @model={{model}}
-        />
-    {{/if}}
-    {{#unless action}}
-      <ShamirFlow
-        @action="generate-dr-operation-token"
-        @buttonText="Promote cluster"
-        @fetchOnInit=true
-        @generateAction=true
-      >
-        <p>
-          Generate an Operation Token by entering a portion of the master key.
-          Once all portions are entered, the generated operation token may be used to manage your secondary Disaster Recovery cluster.
-        </p>
-      </ShamirFlow>
-    {{/unless}}
-  </Page.content>
-</SplashPage>
+      {{#if Page.isDisabled}}
+        <EmptyState
+          @title="Disaster Recovery secondary not set up"
+          @message={{Page.message}}
+          @icon="alert-circle-outline"
+          @bottomBorder={{true}}
+        >
+          <nav class="breadcrumb">
+            <ul class="is-grouped-split">
+              <li>
+                {{#link-to "vault.cluster.secrets.backends" }}
+                  <span class="sep"/>
+                  Go back
+                {{/link-to}}
+              </li>
+              <li>
+                <LearnLink @path="/vault/operations/ops-disaster-recovery" @class="has-text-grey">
+                  Need help?
+                </LearnLink>
+              </li>
+            </ul>
+          </nav>
+        </EmptyState>
+      {{else}}
+        <section>
+          <ReplicationActions
+            @replicationMode="dr"
+            @model={{model}}
+            />
+        </section>
+      {{/if}}
+    </ReplicationPage>
+  </div>
+</section>
diff --git a/ui/lib/core/addon/components/confirmation-modal.js b/ui/lib/core/addon/components/confirmation-modal.js
@@ -0,0 +1,35 @@
+/**
+ * @module ConfirmationModal
+ * ConfirmationModal components are used to provide an alternative to ConfirmationButton that automatically prompts the user to fill in confirmation text before they can continue with a potentially destructive action. It is built off the Modal component
+ *
+ * @example
+ * ```js
+ * <ConfirmationModal
+ *   @onConfirm={action "destructiveAction"}
+ *   @title="Do Dangerous Thing?"
+ *   @isActive={{isModalActive}}
+ *   @onClose={{action (mut isModalActive) false}}
+ * />
+ * ```
+ * @param {function} onConfirm - onConfirm is the action that happens when user clicks onConfirm after filling in the confirmation block
+ * @param {boolean} isActive - Controls whether the modal is "active" eg. visible or not.
+ * @param {string} title - Title of the modal
+ * @param {function} onClose - specify what to do when user attempts to close modal
+ * @param {string} [buttonText=Confirm] - Button text on the confirm button
+ * @param {string} [confirmText=Yes] - The confirmation text that the user must type before continuing
+ * @param {string} [buttonClass=is-danger] - extra class to add to confirm button (eg. "is-danger")
+ * @param {sting} [type=warning] - Applies message-type styling to header. Override to default with empty string
+ * @param {string} [toConfirmMsg] - Finishes the sentence "Type YES to confirm ..."
+ */
+
+import Component from '@ember/component';
+import layout from '../templates/components/confirmation-modal';
+
+export default Component.extend({
+  layout,
+  buttonClass: 'is-danger',
+  buttonText: 'Confirm',
+  confirmText: 'Yes',
+  type: 'warning',
+  toConfirmMsg: '',
+});
diff --git a/ui/lib/core/addon/templates/components/confirmation-modal.hbs b/ui/lib/core/addon/templates/components/confirmation-modal.hbs
@@ -0,0 +1,46 @@
+<Modal
+  @title={{title}}
+  @onClose={{onClose}}
+  @isActive={{isActive}}
+  @type={{type}}
+  @showCloseButton={{true}}
+>
+  <section class="modal-card-body">
+    <div class="box is-shadowless is-fullwidth is-sideless">
+
+      {{yield}}
+
+      <div class="modal-confirm-section">
+        <p class="has-text-weight-semibold is-size-6">
+          Confirm
+        </p>
+        <p class="is-help">Type <strong>{{confirmText}}</strong> to confirm {{toConfirmMsg}}</p>
+        {{input
+            type="text"
+            value=confirmationInput
+            name="confirmationInput"
+            class="input has-margin-top"
+            autocomplete="off"
+            spellcheck="false"
+            data-test-confirmation-modal-input="confirmationInput"
+          }}
+        </div>
+    </div>
+  </section>
+  <footer class="modal-card-foot modal-card-foot-outlined">
+    <button
+      class="button {{buttonClass}}"
+      disabled={{unless (eq confirmationInput confirmText) true}}
+      onclick={{onConfirm}}
+      data-test-confirm-button
+    >
+      {{buttonText}}
+    </button>
+    <button
+      class="button is-secondary"
+      onclick={{action (mut isActive) false}}
+      data-test-cancel-button>
+      Cancel
+    </button>
+  </footer>
+</Modal>
diff --git a/ui/lib/core/addon/templates/components/modal.hbs b/ui/lib/core/addon/templates/components/modal.hbs
@@ -13,7 +13,7 @@
                 data-test-modal-glyph={{glyph.glyph}}
               />
             {{/if}}
-            {{title}}
+            <span>{{title}}</span>
           </h2>
           {{#if showCloseButton}}
             <button class="delete" aria-label="close" onclick={{onClose}} data-test-modal-close-button></button>