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
2023-02-09 11:25:16 -07:00 · 2023-02-09 11:25:16 -07:00 · 39123773c6
parent 78522ed923
commit 39123773c6
9 changed files with 59 additions and 84 deletions
--- a/ui/app/templates/components/license-banners.hbs
+++ b/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>
--- a/ui/app/templates/components/raft-join.hbs
+++ b/ui/app/templates/components/raft-join.hbs
@ -1,11 +1,4 @@
-<AlertBanner @type="warning" @message="Vault is sealed" @yieldWithoutColumn={{true}} class="is-marginless">
-  <div class="is-flex is-flex-v-centered">
-    <div>
-      <span class="message-title">Warning</span>
-      Vault is sealed
-    </div>
-  </div>
-</AlertBanner>
+<AlertBanner @type="warning" class="is-marginless" @title="Vault is sealed" />
 {{#if this.showJoinForm}}
  <div class="box is-marginless is-shadowless">
    <h2 class="title is-5" data-test-join-header>
--- a/ui/lib/core/addon/components/alert-banner.hbs
+++ b/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>
--- a/ui/lib/core/addon/components/alert-banner.js
+++ b/ui/lib/core/addon/components/alert-banner.js
@ -1,7 +1,6 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
 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({
-  layout,
-  type: null,
-  message: null,
-  title: null,
-  secondIconType: null,
-  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]);
-  }),
-});
+export default class AlertBanner extends Component {
+  get alertType() {
+    if (!this.args.type) {
+      assert('alert-banner component expects attr type');
+    }
+    return messageTypes([this.args.type]);
+  }
+}
--- a/ui/lib/core/addon/helpers/message-types.js
+++ b/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];
 }

--- a/ui/lib/core/addon/templates/components/alert-banner.hbs
+++ b/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>
--- a/ui/lib/core/addon/templates/components/replication-dashboard.hbs
+++ b/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
      />
--- a/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs
+++ b/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>
--- a/ui/tests/integration/components/alert-inline-test.js
+++ b/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