From 39123773c60e31d9266f7656ee86b726e397155f Mon Sep 17 00:00:00 2001 From: Angel Garbarino Date: Thu, 9 Feb 2023 11:25:16 -0700 Subject: [PATCH] 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 --- .../templates/components/license-banners.hbs | 8 ++-- ui/app/templates/components/raft-join.hbs | 9 +--- ui/lib/core/addon/components/alert-banner.hbs | 32 ++++++++++++++ ui/lib/core/addon/components/alert-banner.js | 44 +++++-------------- ui/lib/core/addon/helpers/message-types.js | 4 ++ .../templates/components/alert-banner.hbs | 36 --------------- .../components/replication-dashboard.hbs | 2 +- .../components/pki-issuer-cross-sign.hbs | 2 +- .../components/alert-inline-test.js | 6 ++- 9 files changed, 59 insertions(+), 84 deletions(-) create mode 100644 ui/lib/core/addon/components/alert-banner.hbs delete mode 100644 ui/lib/core/addon/templates/components/alert-banner.hbs diff --git a/ui/app/templates/components/license-banners.hbs b/ui/app/templates/components/license-banners.hbs index c8770cba8..8c043d37e 100644 --- a/ui/app/templates/components/license-banners.hbs +++ b/ui/app/templates/components/license-banners.hbs @@ -1,16 +1,16 @@ {{#if this.licenseExpired}}
+ Read documentation @@ -18,7 +18,6 @@ {{else if (lte this.licenseExpiringInDays 30)}}
+ Read documentation diff --git a/ui/app/templates/components/raft-join.hbs b/ui/app/templates/components/raft-join.hbs index e55376aa4..c00409e42 100644 --- a/ui/app/templates/components/raft-join.hbs +++ b/ui/app/templates/components/raft-join.hbs @@ -1,11 +1,4 @@ - -
-
- Warning - Vault is sealed -
-
- + {{#if this.showJoinForm}}

diff --git a/ui/lib/core/addon/components/alert-banner.hbs b/ui/lib/core/addon/components/alert-banner.hbs new file mode 100644 index 000000000..0f47bdb76 --- /dev/null +++ b/ui/lib/core/addon/components/alert-banner.hbs @@ -0,0 +1,32 @@ +
+
+
+
+
+
+ {{or @title this.alertType.text}} + {{#if @showLoading}} +
+ {{#if @message}} +

+ {{@message}} +

+ {{/if}} + {{#if (has-block)}} +

+ {{yield}} +

+ {{/if}} +
+
+
\ No newline at end of file diff --git a/ui/lib/core/addon/components/alert-banner.js b/ui/lib/core/addon/components/alert-banner.js index 81daff8ba..40e5ff698 100644 --- 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]); + } +} diff --git a/ui/lib/core/addon/helpers/message-types.js b/ui/lib/core/addon/helpers/message-types.js index a3416dee2..cf89b1f0e 100644 --- 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]; } diff --git a/ui/lib/core/addon/templates/components/alert-banner.hbs b/ui/lib/core/addon/templates/components/alert-banner.hbs deleted file mode 100644 index cbb9d772d..000000000 --- a/ui/lib/core/addon/templates/components/alert-banner.hbs +++ /dev/null @@ -1,36 +0,0 @@ -
-
-
-
- {{#if @yieldWithoutColumn}} - {{yield}} - {{else}} -
-
- {{or @title this.alertType.text}} - {{#if @secondIconType}} -
- {{#if @message}} -

- {{@message}} -

- {{/if}} - {{#if (has-block)}} -

- {{yield}} -

- {{/if}} -
- {{/if}} -
-
\ No newline at end of file diff --git a/ui/lib/core/addon/templates/components/replication-dashboard.hbs b/ui/lib/core/addon/templates/components/replication-dashboard.hbs index a99e396fb..834619b09 100644 --- a/ui/lib/core/addon/templates/components/replication-dashboard.hbs +++ b/ui/lib/core/addon/templates/components/replication-dashboard.hbs @@ -53,7 +53,7 @@ diff --git a/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs b/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs index 5786e033a..cba1504da 100644 --- 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}}

diff --git a/ui/tests/integration/components/alert-inline-test.js b/ui/tests/integration/components/alert-inline-test.js index 6397c165d..334c5f8ad 100644 --- 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` - + A much more important alert `); @@ -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` `); assert