Ui/fix enable overflow

ui/app/styles/components/replication-mode-summary.scss

@@ -0,0 +1,11 @@
+.replication-description {
+  flex-shrink: 1;
+
+  .title {
+    margin-bottom: $spacing-xs;
+  }
+
+  .detail-tags {
+    margin-bottom: $spacing-m;
+  }
+}

ui/app/styles/core.scss

@@ -83,6 +83,7 @@
 @import './components/replication-dashboard';
 @import './components/replication-doc-link';
 @import './components/replication-header';
+@import './components/replication-mode-summary';
 @import './components/replication-page';
 @import './components/replication-primary-card';
 @import './components/replication-summary';

ui/lib/core/addon/components/replication-mode-summary.js

@@ -15,7 +15,7 @@ export default Component.extend({
   version: service(),
   router: service(),
   namespace: service(),
-  classNameBindings: ['isMenu::box', 'isMenu::level'],
+  classNameBindings: ['isMenu::box'],
   attributeBindings: ['href', 'target'],
   display: 'banner',
   isMenu: equal('display', 'menu'),

ui/lib/core/addon/helpers/cluster-states.js

@@ -17,25 +17,21 @@ export const CLUSTER_STATES = {
   },
   'stream-wals': {
     glyph: 'check-circle-outline',
-    display: 'Streaming',
     isOk: true,
     isSyncing: false,
   },
   'merkle-diff': {
     glyph: 'android-sync',
-    display: 'Determining sync status',
     isOk: true,
     isSyncing: true,
   },
   connecting: {
     glyph: 'android-sync',
-    display: 'Streaming',
     isOk: true,
     isSyncing: true,
   },
   'merkle-sync': {
     glyph: 'android-sync',
-    display: 'Syncing',
     isOk: true,
     isSyncing: true,
   },
@@ -59,7 +55,6 @@ export const CLUSTER_STATES = {
 export function clusterStates([state]) {
   const defaultDisplay = {
     glyph: '',
-    display: '',
     isOk: null,
     isSyncing: null,
   };

ui/lib/core/addon/helpers/replication-mode-description.js

@@ -0,0 +1,14 @@
+import { helper as buildHelper } from '@ember/component/helper';
+
+const REPLICATION_MODE_DESCRIPTIONS = {
+  dr:
+    'Disaster Recovery Replication is designed to protect against catastrophic failure of entire clusters. Secondaries do not forward service requests until they are elected and become a new primary.',
+  performance:
+    'Performance Replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled.',
+};
+
+export function replicationModeDescription([mode]) {
+  return REPLICATION_MODE_DESCRIPTIONS[mode];
+}
+
+export default buildHelper(replicationModeDescription);

ui/lib/core/addon/templates/components/replication-mode-summary.hbs

@@ -1,4 +1,5 @@
-{{#if (eq display 'menu')}}
+{{#if isMenu}}
+{{!-- this is the status menu --}}
   <div class="level is-mobile">
     <div class="is-flex-1">
       {{#if replicationUnsupported}}
@@ -53,59 +54,61 @@
     </div>
   </div>
 {{else}}
-  <div class="level-left is-flex-1">
+{{!-- this is the replication index page --}}
+  <div class="level">
+    <div class="replication-description level-left">
     <div>
-      {{#if (and (eq mode 'performance') (not (has-feature "Performance Replication")))}}
-        <p>
-          Performance Replication is a feature of Vault Enterprise Premium.
-        </p>
-        <p class="has-text-centered">
-          <a
-            href="https://hashicorp.com/products/vault/trial?source=vaultui_Performance%20Replication"
-            class="button is-ghost has-icon-right"
-            data-test-upgrade-link="true"
-          >
-            Learn more
-            <Chevron />
-          </a>
-        </p>
-      {{else if replicationEnabled}}
-        <h5 class="title is-7 is-uppercase is-marginless">
+    {{#if (and (eq mode 'performance') (not (has-feature 'Performance Replication')))}}
+      <p>
+        Performance Replication is a feature of Vault Enterprise Premium.
+      </p>
+      <p class="has-text-centered">
+        <a
+          href="https://hashicorp.com/products/vault/trial?source=vaultui_Performance%20Replication"
+          class="button is-ghost has-icon-right"
+          data-test-upgrade-link="true"
+        >
+          Learn more
+          <Chevron />
+        </a>
+      </p>
+    {{else if replicationEnabled}}
+        <h6 class="title is-6 is-uppercase">
           Enabled
-        </h5>
+        </h6>
+      <div class="detail-tags">
         <span class="has-text-grey">
           {{capitalize modeForUrl}}
         </span>
         {{#if secondaryId}}
-          <span class="tag">
+          <span class="tag is-light has-text-grey-dark">
             <code>
               {{secondaryId}}
             </code>
           </span>
         {{/if}}
-        <span class="tag">
+        <span class="tag is-light has-text-grey-dark">
           <code>
             {{clusterIdDisplay}}
           </code>
         </span>
-      {{else}}
-        <p class="help has-text-grey-dark">
-          {{#if (eq mode 'dr')}}
-            {{model.replicationModeForDisplay}} is designed to protect against catastrophic failure of entire clusters. Secondaries do not forward service requests (until they are elected and become a new primary).
-          {{else}}
-            {{model.replicationModeForDisplay}} Replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled.
-          {{/if}}
-        </p>
-      {{/if}}
-    </div>
-  </div>
-  <div class="level-right">
-    {{#if replicationDisabled}}
-      {{#link-to "mode.index" cluster.name mode class="button is-primary"}}
-        Enable
-      {{/link-to}}
-    {{else}}
-      {{get (cluster-states modeState) "display"}}
+      </div>
     {{/if}}
+    <p class="help has-text-grey-dark">
+      {{replication-mode-description mode}}
+    </p>
+  </div>
+</div>
+<div class="level-right">
+  {{#if replicationDisabled}}
+    {{#link-to 'mode.index' cluster.name mode class='button is-primary'}}
+      Enable
+    {{/link-to}}
+  {{else}}
+    {{#link-to 'mode.index' cluster.name mode class="button is-secondary"}}
+      Details
+    {{/link-to}}
+  {{/if}}
+</div>
   </div>
 {{/if}}

ui/lib/core/addon/templates/components/replication-table-rows.hbs

@@ -5,11 +5,13 @@
       label='secondary_id'
       helperText="The ID of the secondary activation token used to enable replication."
       value=secondaryId}}
-  {{/if}}
-  {{info-table-row
+  {{else}}
+    {{info-table-row
       label='primary_cluster_addr'
       helperText='The configuration of the cluster. This was set when replication was enabled.'
-      value=primaryClusterAddr}}
+      value=primaryClusterAddr
+    }}
+  {{/if}}
   {{info-table-row
     label="Merkle root index"
     helperText="A snapshot in time of the merkle tree's root hash. Changes on every update to storage."

ui/lib/core/app/helpers/replication-mode-description.js

@@ -0,0 +1,5 @@
+export {
+  default,
+  replicationModeDescription,
+  REPLICATION_MODE_DESCRIPTIONS,
+} from 'core/helpers/replication-mode-description';

ui/lib/replication/addon/templates/components/replication-summary.hbs

@@ -40,8 +40,7 @@
             Disaster Recovery (DR) Replication
           </h3>
           <p class="help has-text-grey-dark">
-            DR is designed to protect against catastrophic failure of entire clusters. Secondaries do not forward
-            service requests (until they are elected and become a new primary).
+            {{replication-mode-description 'dr'}}
           </p>
         {{else if (eq initialReplicationMode 'performance')}}
           <h3 class="title is-flex-center is-5 is-marginless">
@@ -54,8 +53,7 @@
             </p>
           {{else}}
             <p class="help has-text-grey-dark">
-              Performance replication scales workloads horizontally across clusters to make requests faster. Local
-              secondaries handle read requests but forward writes to the primary to be handled.
+              {{replication-mode-description 'performance'}}
             </p>
           {{/if}}
         {{/if}}
@@ -76,8 +74,7 @@
                   Disaster Recovery (DR)
                 </h3>
                 <p class="help has-text-grey-dark">
-                  DR is designed to protect against catastrophic failure of entire clusters. Secondaries do not forward
-                  service requests (until they are elected and become a new primary).
+                  {{replication-mode-description 'dr'}}
                 </p>
               </div>
               <div>
@@ -105,8 +102,7 @@
                   </p>
                 {{else}}
                   <p class="help has-text-grey-dark">
-                    Performance Replication scales workloads horizontally across clusters to make requests faster. Local
-                    secondaries handle read requests but forward writes to the primary to be handled.
+                    {{replication-mode-description 'performance'}}
                   </p>
                 {{/if}}
               </div>