Add Inline Alert component

ui/app/components/alert-inline.js

@@ -0,0 +1,22 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+import { messageTypes } from 'vault/helpers/message-types';
+
+export default Component.extend({
+  type: null,
+
+  classNames: ['message-inline'],
+
+  textClass: computed('type', function() {
+    if (this.get('type') == 'danger') {
+      return messageTypes([this.get('type')]).glyphClass;
+    }
+
+    return
+  }),
+
+  alertType: computed('type', function() {
+    return messageTypes([this.get('type')]);
+  }),
+});

ui/app/styles/components/splash-page.scss

@@ -22,4 +22,4 @@
 
 .splash-page-header {
   padding: $size-6 $size-5;
-}
+}

ui/app/styles/components/unseal-warning.scss

@@ -1,3 +1,3 @@
 .unseal-warning.message {
   margin: -1px -1px 0;
-}
+}

ui/app/styles/core/message.scss

@@ -96,3 +96,18 @@
     }
   }
 }
+
+.message-inline {
+  display: flex;
+  margin: -$spacing-xs 0 $spacing-l;
+
+  .icon {
+    flex: 0;
+    margin: 0 $spacing-xxs 0 0;
+    min-width: fit-content;
+  }
+
+  .p {
+    margin: 0;
+  }
+}

ui/app/templates/components/alert-inline.hbs

@@ -0,0 +1,8 @@
+<ICon
+  @glyph="{{alertType.glyph}}"
+  @class="{{alertType.glyphClass}}"
+  @size="16"
+/>
+<p class="{{textClass}}">
+  {{message}}
+</p>

ui/app/templates/components/form-field.hbs

@@ -125,9 +125,10 @@
       />
       {{#if attr.options.validationAttr}}
         {{#if (and (get model valuePath) (not (get model attr.options.validationAttr)))}}
-          <p class="has-text-danger">
-            {{attr.options.invalidMessage}}
-          </p>
+          <AlertInline
+            @type="danger"
+            @message={{attr.options.invalidMessage}}
+          />
         {{/if}}
       {{/if}}
     {{/if}}

ui/app/templates/components/message-error.hbs

@@ -2,7 +2,7 @@
   {{#each displayErrors as |error|}}
     <AlertBanner
       @type="danger"
-      @message="{{error}}"
+      @message={{error}}
       data-test-error
     />
   {{/each}}

ui/app/templates/components/string-list.hbs

@@ -11,7 +11,7 @@
 {{#if warning}}
   <AlertBanner
     @type="warning"
-    @message="{{warning}}"
+    @message={{warning}}
   />
 {{/if}}
 {{#each inputList as |data index|}}

ui/app/templates/partials/replication/demote.hbs

@@ -7,14 +7,18 @@
       (not model.performance.replicationDisabled)
     )
   }}
-    <p data-test-demote-warning>
-      <em class="has-text-danger">Caution</em>: Demoting this DR primary cluster
-      would result in a DR secondary and in that mode Vault is read-only. This
-      cluster is also currently operating as a Performance 
-      {{capitalize model.performance.modeForUrl}}, demoting it will leave your
-      replication setup without a performance primary cluster until a new 
-      cluster is promoted.
-    </p>
+
+    <div data-test-demote-warning>
+      <AlertInline
+        @type="danger"
+        @message="Demoting this DR primary cluster
+          would result in a DR secondary and in that mode Vault is read-only. This
+          cluster is also currently operating as a Performance 
+          capitalize model.performance.modeForUrl}}, demoting it will leave your
+          replication setup without a performance primary cluster until a new 
+          cluster is promoted."
+      />
+    </div>
   {{/if}}
     <p>
       Demote this {{replicationDisplayMode}} primary cluster to a {{replicationDisplayMode}} secondary. The resulting secondary cluster will not

ui/app/templates/partials/replication/disable.hbs

@@ -31,10 +31,10 @@
       The cluster will no longer be able to connect to the primary.
     {{/if}}
   </p>
-  <p>
-    <em class="has-text-danger">Caution</em>: re-enabling this node as a primary or secondary will
-    change its cluster ID.
-  </p>
+  <AlertInline
+    @type="danger"
+    @message="Caution: re-enabling this node as a primary or secondary will change its cluster ID."
+  />
   <p>
     In the secondary case this means a wipe of the
     underlying storage when connected to a primary, and in the primary case,

ui/app/templates/partials/replication/enable.hbs

@@ -141,9 +141,10 @@
         </select>
       </div>
       {{#if (eq mode 'secondary')}}
-        <p class="help">
-          <em class="has-text-danger">Caution</em>: this will <em>immediately</em> clear <strong>all</strong> data in this cluster!
-        </p>
+        <AlertInline
+          @type="warning"
+          @message="This will immediately clear all data in this cluster!"
+        />
       {{/if}}
     </div>
     {{#if (eq mode 'primary')}}

ui/app/templates/partials/replication/promote.hbs

@@ -45,10 +45,11 @@
               Force promotion of this cluster
             </label>
           </div>
-          <p class="help has-text-grey">
-            <em class="has-text-danger">Caution</em>: Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
-            promotes the cluster even if certain safety checks fail.
-          </p>
+          <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}}
@@ -74,10 +75,11 @@
   </h4>
   <div class="content">
     <p>Promote the cluster to primary.</p>
-    <p>
-      <em class="has-text-danger">Caution</em>: 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>
+    <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."
+    />
     <div class="field">
       <label for="primary_cluster_addr" class="is-label">
         Primary cluster address <em class="is-optional">(optional)</em>
@@ -101,10 +103,11 @@
           Force promotion of this cluster
         </label>
       </div>
-      <p class="help has-text-grey">
-        <em class="has-text-danger">Caution</em>: Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
-        promotes the cluster even if certain safety checks fail.
-      </p>
+      <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">

ui/app/templates/partials/role-aws/form.hbs

@@ -5,8 +5,8 @@
     {{#if (gt model.credentialTypes.length 1)}}
       <AlertBanner
         @type="warning"
-        @message="This role has more than one <code>credential_type</code>, currently: <code>{{join ', ' model.credentialTypes}}</code>.
-        Multiple credential types is deprecated and you must choose one in order to save this role."
+        @message="This role has more than one credential_type, currently: {{join ', ' model.credentialTypes}}.
+          Multiple credential types is deprecated and you must choose one in order to save this role."
       />
     {{/if}}
     {{#each (if (eq mode 'edit') (drop 1 model.fields) model.fields) as |attr|}}

ui/app/templates/vault/cluster/access/leases/error.hbs

@@ -11,34 +11,28 @@
 {{/unless}}
 
 <div class="box is-sideless is-fullwidth is-marginless">
-  <div class="box">
-    <div class="columns is-centered">
-      <div class="column is-half has-text-centered">
-        {{#if (eq model.httpStatus 400)}}
-          <p class="box is-shadowless has-text-danger" data-test-lease-error="true">
-            {{i-con glyph='close'}}
-            <code class="has-text-danger">{{model.keyId}}</code> is not a valid lease ID
-          </p>
-        {{else if (eq model.httpStatus 404)}}
-          <p class="message">
-          Unable to find lease for the <code>id</code>: <code>{{model.keyId}}</code>. Try going back to the
-            {{#link-to "vault.cluster.access.leases"}}lookup{{/link-to}}
-            and re-entering the <code>id</code>.
-          </p>
-        {{else if (eq model.httpStatus 403)}}
-          <p class="message">
-            You don't have access to <code>{{model.keyId}}</code>. If you think you've reached this page in error, please contact your administrator.
-          </p>
-        {{else}}
-          {{#each model.errors as |error|}}
-            <p class="message">
-              {{error}}
-            </p>
-          {{/each}}
-        {{/if}}
-      </div>
-    </div>
-  </div>
+  {{#if (eq model.httpStatus 400)}}
+    <AlertBanner
+      @type="danger"
+      @message="{{model.keyId}} is not a valid lease ID"
+    />
+  {{else if (eq model.httpStatus 404)}}
+    <p class="message">
+      Unable to find lease for the <code>id</code>: <code>{{model.keyId}}</code>. Try going back to the
+      {{#link-to "vault.cluster.access.leases"}}lookup{{/link-to}}
+      and re-entering the <code>id</code>.
+    </p>
+  {{else if (eq model.httpStatus 403)}}
+    <p class="message">
+      You don't have access to <code>{{model.keyId}}</code>. If you think you've reached this page in error, please contact your administrator.
+    </p>
+  {{else}}
+    {{#each model.errors as |error|}}
+      <p class="message">
+        {{error}}
+      </p>
+    {{/each}}
+  {{/if}}
 </div>
 <div class="field is-grouped box is-fullwidth is-bottomless">
   {{#link-to "vault.cluster.access.leases" class="button"}}

ui/app/templates/vault/cluster/policies/create.hbs

@@ -14,7 +14,7 @@
   </p.levelLeft>
 </PageHeader>
 
-<form class="" {{ action "savePolicy" model on="submit"}}>
+<form {{ action "savePolicy" model on="submit"}}>
   <div class="box is-bottomless is-fullwidth is-marginless">
     {{message-error model=model}}
     <NamespaceReminder @mode="create" @noun="policy" />

ui/tests/integration/components/alert-inline-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | alert-inline', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{alert-inline type="danger" message="test message"}}`);
+
+    assert.equal(this.element.textContent.trim(), 'test message');
+  });
+});

ui/tests/pages/components/mount-backend-form.js

@@ -1,6 +1,6 @@
 import { clickable, collection, fillable, text, value } from 'ember-cli-page-object';
 import fields from './form-field';
-import errorText from './message-in-page';
+import errorText from './alert-banner';
 
 export default {
   ...fields,