Glimmerize alert-banner (#19105)

* glimmerize alert-banner

* remove conditional commented out

* add assert to require type

* add assert for if message type not included

* amend alert-inline test

ui/app/templates/components/license-banners.hbs

@@ -1,16 +1,16 @@
 {{#if this.licenseExpired}}
   <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-expired>
     <AlertBanner
-      @bannerType="license"
       @type="danger"
       @title="License expired"
       @message="Your Vault license expired on {{date-format
         @expiry
         'MMM d, yyyy'
       }}. Add a new license to your configuration and restart Vault."
-      @marginless={{true}}
+      class="message-marginless"
     >
       <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
+        <Icon @name="learn-link" />
         Read documentation
       </DocLink>
     </AlertBanner>
@@ -18,7 +18,6 @@
 {{else if (lte this.licenseExpiringInDays 30)}}
   <div class="license-banner-wrapper" data-test-license-banner data-test-license-banner-warning>
     <AlertBanner
-      @bannerType="license"
       @type="warning"
       @title="Vault license expiring"
       @message="Your Vault license will expire in {{this.licenseExpiringInDays}} days at {{date-format
@@ -29,9 +28,10 @@
         'Add a new license to your configuration.'
         'Keep in mind that your next license will need to be autoloaded'
       }}"
-      @marginless={{true}}
+      class="message-marginless"
     >
       <DocLink @path="/vault/tutorials/enterprise/hashicorp-enterprise-license">
+        <Icon @name="learn-link" />
         Read documentation
       </DocLink>
     </AlertBanner>

ui/app/templates/components/raft-join.hbs

@@ -1,11 +1,4 @@
-<AlertBanner @type="warning" @message="Vault is sealed" @yieldWithoutColumn={{true}} class="is-marginless">
+<AlertBanner @type="warning" class="is-marginless" @title="Vault is sealed" />
-  <div class="is-flex is-flex-v-centered">
-    <div>
-      <span class="message-title">Warning</span>
-      Vault is sealed
-    </div>
-  </div>
-</AlertBanner>
 {{#if this.showJoinForm}}
   <div class="box is-marginless is-shadowless">
     <h2 class="title is-5" data-test-join-header>

ui/lib/core/addon/components/alert-banner.hbs

@@ -0,0 +1,32 @@
+<div data-test-alert-banner="alert" class="message {{this.alertType.class}}" ...attributes>
+  <div class="columns is-mobile is-variable is-1">
+    <div class="column is-narrow message-icon">
+      <Icon class={{this.alertType.glyphClass}} aria-hidden="true" @name={{this.alertType.glyph}} />
+    </div>
+    <div class="column">
+      <div class="message-title">
+        {{or @title this.alertType.text}}
+        {{#if @showLoading}}
+          <Icon class="loading" aria-hidden="true" @name="loading" />
+        {{/if}}
+        {{#if @progressBar}}
+          <progress
+            value={{@progressBar.value}}
+            max={{@progressBar.max}}
+            class="progress is-success is-medium is-inline-block"
+          ></progress>
+        {{/if}}
+      </div>
+      {{#if @message}}
+        <p class="alert-banner-message-body">
+          {{@message}}
+        </p>
+      {{/if}}
+      {{#if (has-block)}}
+        <p class="message-actions">
+          {{yield}}
+        </p>
+      {{/if}}
+    </div>
+  </div>
+</div>

ui/lib/core/addon/components/alert-banner.js

@@ -1,7 +1,6 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
-import { computed } from '@ember/object';
 import { messageTypes } from 'core/helpers/message-types';
-import layout from '../templates/components/alert-banner';
+import { assert } from '@ember/debug';
 
 /**
  * @module AlertBanner
@@ -13,36 +12,17 @@ import layout from '../templates/components/alert-banner';
  * ```
  *
  * @param {String} type=null  - The banner type. This comes from the message-types helper.
- * @param {String} [secondIconType=null] - If you want a second icon to appear to the right of the title. This comes from the message-types helper.
- * @param {Object} [progressBar=null] - An object containing a value and maximum for a progress bar. Will be displayed next to the message title.
  * @param {String} [message=null] - The message to display within the banner.
+ * @param {Object} [progressBar=null] - An object containing a value and maximum for a progress bar. Will be displayed next to the message title.
+ * @param {Boolean} [showLoading=false] - Shows a loading icon to the right of the title.
  * @param {String} [title=null] - A title to show above the message. If this is not provided, there are default values for each type of alert.
- * @param {String} [bannerType=alert] - Defaults to 'alert', can be used to specify an alert banner's test selector
- *
  */
 
-export default Component.extend({
+export default class AlertBanner extends Component {
-  layout,
+  get alertType() {
-  type: null,
+    if (!this.args.type) {
-  message: null,
+      assert('alert-banner component expects attr type');
-  title: null,
+    }
-  secondIconType: null,
+    return messageTypes([this.args.type]);
-  progressBar: null,
+  }
-  yieldWithoutColumn: false,
+}
-  marginless: false,
-  classNameBindings: ['containerClass'],
-  bannerType: 'alert',
-
-  containerClass: computed('type', 'marginless', function () {
-    const base = this.marginless ? 'message message-marginless ' : 'message ';
-    return base + messageTypes([this.type]).class;
-  }),
-
-  alertType: computed('type', function () {
-    return messageTypes([this.type]);
-  }),
-
-  secondAlertType: computed('secondIconType', function () {
-    return messageTypes([this.secondIconType]);
-  }),
-});

ui/lib/core/addon/helpers/message-types.js

@@ -1,4 +1,5 @@
 import { helper as buildHelper } from '@ember/component/helper';
+import { assert } from '@ember/debug';
 
 export const MESSAGE_TYPES = {
   info: {
@@ -34,6 +35,9 @@ export const MESSAGE_TYPES = {
 };
 
 export function messageTypes([type]) {
+  if (!([type] in MESSAGE_TYPES)) {
+    assert('type is not a valid message type.');
+  }
   return MESSAGE_TYPES[type];
 }
 

ui/lib/core/addon/templates/components/alert-banner.hbs

@@ -1,36 +0,0 @@
-<div data-test-alert-banner={{this.bannerType}}>
-  <div class="columns is-mobile is-variable is-1">
-    <div class="column is-narrow message-icon">
-      <Icon class={{this.alertType.glyphClass}} aria-hidden="true" @name={{this.alertType.glyph}} />
-    </div>
-    {{#if @yieldWithoutColumn}}
-      {{yield}}
-    {{else}}
-      <div class="column">
-        <div class="message-title">
-          {{or @title this.alertType.text}}
-          {{#if @secondIconType}}
-            <Icon class={{this.secondAlertType.glyphClass}} aria-hidden="true" @name={{this.secondAlertType.glyph}} />
-          {{/if}}
-          {{#if @progressBar}}
-            <progress
-              value={{this.progressBar.value}}
-              max={{this.progressBar.max}}
-              class="progress is-success is-medium is-inline-block"
-            ></progress>
-          {{/if}}
-        </div>
-        {{#if @message}}
-          <p class="alert-banner-message-body">
-            {{@message}}
-          </p>
-        {{/if}}
-        {{#if (has-block)}}
-          <p class="message-actions">
-            {{yield}}
-          </p>
-        {{/if}}
-      </div>
-    {{/if}}
-  </div>
-</div>

ui/lib/core/addon/templates/components/replication-dashboard.hbs

@@ -53,7 +53,7 @@
       <AlertBanner
         @title="Syncing in progress"
         @type="info"
-        @secondIconType="loading"
+        @showLoading={{true}}
         @message="The cluster is syncing. This happens when the secondary is too far behind the primary to use the normal stream-wals state for catching up."
         data-test-isSyncing
       />

ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs

@@ -62,7 +62,7 @@
               @type="danger"
               @title={{if crossSignRow.hasUnsupportedParams crossSignRow.hasError "Cross-sign failed"}}
               @message={{if crossSignRow.hasUnsupportedParams crossSignRow.hasUnsupportedParams crossSignRow.hasError}}
-              @marginless={{true}}
+              class="message-marginless"
             />
           {{/if}}
         </div>

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

@@ -8,6 +8,7 @@ module('Integration | Component | alert-inline', function (hooks) {
 
   hooks.beforeEach(function () {
     this.set('message', 'some very important alert');
+    this.set('type', 'warning');
   });
 
   test('it renders alert message with correct class args', async function (assert) {
@@ -17,6 +18,7 @@ module('Integration | Component | alert-inline', function (hooks) {
       @isMarginless={{true}}
       @sizeSmall={{true}}
       @message={{this.message}}
+      @type={{this.type}}
     />
     `);
     assert.dom('[data-test-inline-error-message]').hasText('some very important alert');
@@ -27,7 +29,7 @@ module('Integration | Component | alert-inline', function (hooks) {
 
   test('it yields to block text', async function (assert) {
     await render(hbs`
-    <AlertInline @message={{this.message}}> 
+    <AlertInline @message={{this.message}} @type={{this.type}}> 
       A much more important alert
     </AlertInline>
     `);
@@ -49,7 +51,6 @@ module('Integration | Component | alert-inline', function (hooks) {
   });
 
   test('it renders correctly for type=warning', async function (assert) {
-    this.set('type', 'warning');
     await render(hbs`
     <AlertInline 
       @type={{this.type}}
@@ -65,6 +66,7 @@ module('Integration | Component | alert-inline', function (hooks) {
     <AlertInline 
       @message={{this.message}}
       @mimicRefresh={{true}} 
+      @type={{this.type}}
     />
     `);
     assert