UI: Glimmerize BoxRadio and AlertPopup (#19571)

ui/app/components/alert-popup.js

@@ -1,33 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-/**
- * @module AlertPopup
- * The `AlertPopup` is an implementation of the [ember-cli-flash](https://github.com/poteto/ember-cli-flash) `flashMessage`.
- *
- * @example ```js
- * // All properties are passed in from the flashMessage service.
- *   <AlertPopup @type={{message-types flash.type}} @message={{flash.message}} @close={{close}}/>```
- *
- * @param {string} type=null - The alert type. This comes from the message-types helper.
- * @param {string} [message=null] - The alert message.
- * @param {function} close=null - The close action which will close the alert.
- * @param {boolean} isPreformatted - if true modifies class.
- *
- */
-
-export default class AlertPopup extends Component {
-  get type() {
-    return this.args.type || null;
-  }
-  get message() {
-    return this.args.message || null;
-  }
-  get close() {
-    return this.args.close || null;
-  }
-}

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

@@ -1,17 +1,17 @@
-<div class="message {{this.type.class}}">
+<div class="message {{@type.class}}">
   <div class="columns is-mobile is-variable is-1">
     <div class="column is-narrow message-icon">
-      <Icon aria-hidden="true" @name={{this.type.glyph}} />
+      <Icon aria-hidden="true" @name={{@type.glyph}} />
     </div>
     <div class="column">
-      <button type="button" class="close-button" {{on "click" this.close}}>
+      <button type="button" class="close-button" {{on "click" @close}}>
         <Icon @name="x" aria-label="Close" />
       </button>
       <div class="message-title">
-        {{this.type.text}}
+        {{@type.text}}
       </div>
-      {{#if this.message}}
-        <p class="message-body {{if @isPreformatted 'pre'}}" data-test-flash-message-body="true">{{this.message}}</p>
+      {{#if @message}}
+        <p class="message-body {{if @isPreformatted 'pre'}}" data-test-flash-message-body="true">{{@message}}</p>
       {{/if}}
     </div>
   </div>

ui/lib/core/addon/components/box-radio.js

@@ -1,3 +1,5 @@
+import Component from '@glimmer/component';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -21,13 +23,8 @@
  * @param {string} [tooltipMessage=default] - The message that shows in the tooltip if the radio option is disabled
  */
 
-import Component from '@glimmer/component';
-import layout from '../templates/components/box-radio';
-import { setComponentTemplate } from '@ember/component';
-
-class BoxRadio extends Component {
-  disabled = false;
-  tooltipMessage = 'This option is not available to you at this time.';
+export default class BoxRadio extends Component {
+  get tooltipMessage() {
+    return this.args.tooltipMessage || 'This option is not available to you at this time.';
+  }
 }
-
-export default setComponentTemplate(layout, BoxRadio);

ui/lib/core/app/components/alert-popup.js

@@ -0,0 +1 @@
+export { default } from 'core/components/alert-popup';

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

@@ -0,0 +1,58 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'vault/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { click } from '@ember/test-helpers';
+
+module('Integration | Component | alert-popup', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.set('message', 'some very important alert');
+    this.set('type', 'warning');
+    this.set('close', () => this.set('closed', true));
+  });
+
+  test('it renders the alert popup input', async function (assert) {
+    await render(hbs`
+      <AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
+    `);
+
+    assert.dom(this.element).hasText('Warning some very important alert');
+  });
+
+  test('it invokes the close action', async function (assert) {
+    assert.expect(1);
+
+    await render(hbs`
+      <AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
+    `);
+    await click('.close-button');
+
+    assert.true(this.closed);
+  });
+
+  test('it renders the alert popup with different colors based on types', async function (assert) {
+    await render(hbs`
+      <AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
+    `);
+
+    assert.dom('.message').hasClass('is-highlight');
+
+    this.set('type', 'info');
+
+    await render(hbs`
+    <AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
+    `);
+
+    assert.dom('.message').hasClass('is-info');
+
+    this.set('type', 'danger');
+
+    await render(hbs`
+    <AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
+    `);
+
+    assert.dom('.message').hasClass('is-danger');
+  });
+});