From 9a84a8ed2113a2cf5cada2530db33f91410e2316 Mon Sep 17 00:00:00 2001
From: Kianna <30884335+kiannaquach@users.noreply.github.com>
Date: Fri, 17 Mar 2023 07:37:33 -0700
Subject: [PATCH] UI: Glimmerize BoxRadio and AlertPopup (#19571)

---
 ui/app/components/alert-popup.js              | 33 -----------
 .../core/addon}/components/alert-popup.hbs    | 12 ++--
 .../{templates => }/components/box-radio.hbs  |  0
 ui/lib/core/addon/components/box-radio.js     | 15 ++---
 ui/lib/core/app/components/alert-popup.js     |  1 +
 .../components/alert-popup-test.js            | 58 +++++++++++++++++++
 6 files changed, 71 insertions(+), 48 deletions(-)
 delete mode 100644 ui/app/components/alert-popup.js
 rename ui/{app/templates => lib/core/addon}/components/alert-popup.hbs (54%)
 rename ui/lib/core/addon/{templates => }/components/box-radio.hbs (100%)
 create mode 100644 ui/lib/core/app/components/alert-popup.js
 create mode 100644 ui/tests/integration/components/alert-popup-test.js

diff --git a/ui/app/components/alert-popup.js b/ui/app/components/alert-popup.js
deleted file mode 100644
index 406d4e9270..0000000000
--- a/ui/app/components/alert-popup.js
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/ui/app/templates/components/alert-popup.hbs b/ui/lib/core/addon/components/alert-popup.hbs
similarity index 54%
rename from ui/app/templates/components/alert-popup.hbs
rename to ui/lib/core/addon/components/alert-popup.hbs
index c95751ff24..34fbd4aa7c 100644
--- a/ui/app/templates/components/alert-popup.hbs
+++ b/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>
diff --git a/ui/lib/core/addon/templates/components/box-radio.hbs b/ui/lib/core/addon/components/box-radio.hbs
similarity index 100%
rename from ui/lib/core/addon/templates/components/box-radio.hbs
rename to ui/lib/core/addon/components/box-radio.hbs
diff --git a/ui/lib/core/addon/components/box-radio.js b/ui/lib/core/addon/components/box-radio.js
index c01c13ba0b..556a13e00a 100644
--- a/ui/lib/core/addon/components/box-radio.js
+++ b/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);
diff --git a/ui/lib/core/app/components/alert-popup.js b/ui/lib/core/app/components/alert-popup.js
new file mode 100644
index 0000000000..cc0cbb2212
--- /dev/null
+++ b/ui/lib/core/app/components/alert-popup.js
@@ -0,0 +1 @@
+export { default } from 'core/components/alert-popup';
diff --git a/ui/tests/integration/components/alert-popup-test.js b/ui/tests/integration/components/alert-popup-test.js
new file mode 100644
index 0000000000..25f476e8d5
--- /dev/null
+++ b/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');
+  });
+});