UI: Glimmerize BoxRadio and AlertPopup (#19571)

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

@@ -0,0 +1,18 @@
+<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={{@type.glyph}} />
+    </div>
+    <div class="column">
+      <button type="button" class="close-button" {{on "click" @close}}>
+        <Icon @name="x" aria-label="Close" />
+      </button>
+      <div class="message-title">
+        {{@type.text}}
+      </div>
+      {{#if @message}}
+        <p class="message-body {{if @isPreformatted 'pre'}}" data-test-flash-message-body="true">{{@message}}</p>
+      {{/if}}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,52 @@
+{{#if @disabled}}
+  <div class="box-radio-spacing">
+    <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
+      <T.Trigger @tabindex="-1">
+        <label
+          for={{@type}}
+          class="box-radio is-disabled is-marginless"
+          data-test-mount-type-radio
+          data-test-mount-type={{@type}}
+        >
+          <Icon @name={{@glyph}} @size="24" class="has-text-grey-light" />
+          {{@displayName}}
+          <RadioButton
+            id={{@type}}
+            name={{@groupName}}
+            class="radio"
+            @disabled={{@disabled}}
+            @value={{@type}}
+            @groupValue={{@groupValue}}
+            @onChange={{@onRadioChange}}
+          />
+        </label>
+      </T.Trigger>
+      <T.Content @defaultClass="tool-tip">
+        <div class="box">
+          {{@tooltipMessage}}
+        </div>
+      </T.Content>
+    </ToolTip>
+  </div>
+{{else}}
+  <div class="box-radio-spacing">
+    <label
+      for={{@type}}
+      class="box-radio is-marginless {{if (eq @groupValue @type) ' is-selected'}}"
+      data-test-mount-type-radio
+      data-test-mount-type={{@type}}
+    >
+      <Icon @name={{@glyph}} @size="24" class="has-text-grey-light" />
+      {{@displayName}}
+      <RadioButton
+        id={{@type}}
+        name={{@groupName}}
+        class="radio"
+        @disabled={{@disabled}}
+        @value={{@type}}
+        @groupValue={{@mountType}}
+        @onChange={{@onRadioChange}}
+      />
+    </label>
+  </div>
+{{/if}}

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);