From 5f4e89084b6b439051f0c7ccc12abc7dc9f11cdb Mon Sep 17 00:00:00 2001
From: Jordan Reimer <zofskeez@gmail.com>
Date: Thu, 31 Mar 2022 16:16:05 -0600
Subject: [PATCH] Replace RadioButton With Internal Component (#14809)

* removes ember-radio-button dep and adds radio-button component

* updates missed instances of legacy RadioButton

* removes empty class attr
---
 ui/app/templates/components/raft-join.hbs     | 36 +++++-----
 .../components/secret-delete-menu.hbs         | 24 +++----
 ui/lib/core/addon/components/radio-button.hbs |  1 +
 .../addon/templates/components/box-radio.hbs  | 20 +++---
 ui/lib/core/app/components/radio-button.js    |  1 +
 ui/lib/core/package.json                      |  1 -
 .../components/path-filter-config-list.hbs    | 24 +++----
 .../components/replication-summary.hbs        | 26 ++++---
 ui/package.json                               |  1 -
 .../components/radio-button-test.js           | 69 +++++++++++++++++++
 ui/yarn.lock                                  | 28 +-------
 11 files changed, 141 insertions(+), 90 deletions(-)
 create mode 100644 ui/lib/core/addon/components/radio-button.hbs
 create mode 100644 ui/lib/core/app/components/radio-button.js
 create mode 100644 ui/tests/integration/components/radio-button-test.js

diff --git a/ui/app/templates/components/raft-join.hbs b/ui/app/templates/components/raft-join.hbs
index 51a39f7eb8..e55376aa4c 100644
--- a/ui/app/templates/components/raft-join.hbs
+++ b/ui/app/templates/components/raft-join.hbs
@@ -30,28 +30,28 @@
         <br />
         How do you want to get started?
       </h2>
-      <RadioButton
-        @value="join"
-        @groupValue={{this.preference}}
-        @changed={{action (mut this.preference)}}
-        @name="setup-pref"
-        @radioId="join"
-        @classNames="vlt-radio is-block"
-      >
+      <div class="vlt-radio is-block">
+        <RadioButton
+          id="join"
+          name="setup-pref"
+          @value="join"
+          @groupValue={{this.preference}}
+          @onChange={{fn (mut this.preference)}}
+        />
         <label for="join"></label>
         Join an existing Raft cluster
-      </RadioButton>
-      <RadioButton
-        @value="init"
-        @groupValue={{this.preference}}
-        @changed={{action (mut this.preference)}}
-        @name="setup-pref"
-        @radioId="init"
-        @classNames="vlt-radio is-block"
-      >
+      </div>
+      <div class="vlt-radio is-block">
+        <RadioButton
+          id="init"
+          name="setup-pref"
+          @value="init"
+          @groupValue={{this.preference}}
+          @onChange={{fn (mut this.preference)}}
+        />
         <label for="init" data-test-join-init></label>
         Create a new Raft cluster
-      </RadioButton>
+      </div>
     </div>
     <div class="box is-marginless is-shadowless">
       <button type="submit" class="button is-primary" data-test-next>
diff --git a/ui/app/templates/components/secret-delete-menu.hbs b/ui/app/templates/components/secret-delete-menu.hbs
index e92bdcdafc..d474ce081e 100644
--- a/ui/app/templates/components/secret-delete-menu.hbs
+++ b/ui/app/templates/components/secret-delete-menu.hbs
@@ -49,12 +49,12 @@
           {{#if (or this.canSoftDeleteSecretData this.canDeleteSecretData)}}
             <div class="modal-radio-button" data-test-delete-modal="delete-version">
               <RadioButton
+                id="delete-version"
+                name="setup-deleteType"
+                class="radio"
                 @value={{if this.canSoftDeleteSecretData "soft-delete" "delete-latest-version"}}
-                @radioClass="radio"
                 @groupValue={{this.deleteType}}
-                @changed={{action (mut this.deleteType)}}
-                @name="setup-deleteType"
-                @radioId="delete-version"
+                @onChange={{fn (mut this.deleteType)}}
               />
               <div class="helper-text">
                 <label for="delete-version" data-test-type-select="delete-version"><strong>Delete this version</strong></label>
@@ -70,12 +70,12 @@
         {{#if this.canDestroyVersion}}
           <div class="modal-radio-button" data-test-delete-modal="destroy-version">
             <RadioButton
+              id="destroy-version"
+              name="setup-deleteType"
+              class="radio"
               @value="destroy"
-              @radioClass="radio"
               @groupValue={{this.deleteType}}
-              @changed={{action (mut this.deleteType)}}
-              @name="setup-deleteType"
-              @radioId="destroy-version"
+              @onChange={{fn (mut this.deleteType)}}
             />
             <div class="helper-text">
               <label for="destroy-version" data-test-type-select="destroy-version"><strong>Destroy this version</strong></label>
@@ -91,12 +91,12 @@
       {{#if this.canDestroyAllVersions}}
         <div class="modal-radio-button" data-test-delete-modal="destroy-all-versions">
           <RadioButton
+            id="destroy-all-versions"
+            name="setup-deleteType"
+            class="radio"
             @value="destroy-all-versions"
-            @radioClass="radio"
             @groupValue={{this.deleteType}}
-            @changed={{action (mut this.deleteType)}}
-            @name="setup-deleteType"
-            @radioId="destroy-all-versions"
+            @onChange={{fn (mut this.deleteType)}}
           />
           <div class="helper-text">
             <label for="destroy-all-versions" data-test-replication-type-select="destroy-all-versions">
diff --git a/ui/lib/core/addon/components/radio-button.hbs b/ui/lib/core/addon/components/radio-button.hbs
new file mode 100644
index 0000000000..901962a233
--- /dev/null
+++ b/ui/lib/core/addon/components/radio-button.hbs
@@ -0,0 +1 @@
+<input ...attributes checked={{eq @value @groupValue}} type="radio" {{on "change" (fn @onChange @value)}} />
\ No newline at end of file
diff --git a/ui/lib/core/addon/templates/components/box-radio.hbs b/ui/lib/core/addon/templates/components/box-radio.hbs
index f25e309878..d17d4fec49 100644
--- a/ui/lib/core/addon/templates/components/box-radio.hbs
+++ b/ui/lib/core/addon/templates/components/box-radio.hbs
@@ -11,13 +11,13 @@
           <Icon @name={{@glyph}} @size="24" class="has-text-grey-light" />
           {{@displayName}}
           <RadioButton
+            id={{@type}}
+            name={{@groupName}}
+            class="radio"
+            disabled={{@disabled}}
             @value={{@type}}
-            @radioClass="radio"
             @groupValue={{@groupValue}}
-            @changed={{@onRadioChange}}
-            @name={{@groupName}}
-            @radioId={{@type}}
-            @disabled={{@disabled}}
+            @onChange={{@onRadioChange}}
           />
         </label>
       </T.Trigger>
@@ -39,13 +39,13 @@
       <Icon @name={{@glyph}} @size="24" class="has-text-grey-light" />
       {{@displayName}}
       <RadioButton
+        id={{@type}}
+        name={{@groupName}}
+        class="radio"
+        disabled={{@disabled}}
         @value={{@type}}
-        @radioClass="radio"
         @groupValue={{@mountType}}
-        @changed={{@onRadioChange}}
-        @name={{@groupName}}
-        @radioId={{@type}}
-        @disabled={{@disabled}}
+        @onChange={{@onRadioChange}}
       />
     </label>
   </div>
diff --git a/ui/lib/core/app/components/radio-button.js b/ui/lib/core/app/components/radio-button.js
new file mode 100644
index 0000000000..226a997c77
--- /dev/null
+++ b/ui/lib/core/app/components/radio-button.js
@@ -0,0 +1 @@
+export { default } from 'core/components/radio-button';
diff --git a/ui/lib/core/package.json b/ui/lib/core/package.json
index c3e272deb8..657148bea4 100644
--- a/ui/lib/core/package.json
+++ b/ui/lib/core/package.json
@@ -19,7 +19,6 @@
     "ember-concurrency": "*",
     "ember-maybe-in-element": "*",
     "ember-power-select": "*",
-    "ember-radio-button": "*",
     "ember-router-helpers": "*",
     "ember-svg-jar": "*",
     "ember-truth-helpers": "*",
diff --git a/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs b/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs
index d49230ec4a..c72c307843 100644
--- a/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs
+++ b/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs
@@ -16,12 +16,12 @@
     </div>
     <div class="radio-card-radio-row">
       <RadioButton
+        id="no-filtering"
+        name="config-mode"
+        class="radio"
         @value={{null}}
-        @radioClass="radio"
         @groupValue={{this.config.mode}}
-        @changed={{queue (action (mut this.config.mode))}}
-        @name="config-mode"
-        @radioId="no-filtering"
+        @onChange={{fn (mut this.config.mode)}}
       />
       <label for="no-filtering"></label>
     </div>
@@ -40,12 +40,12 @@
     </div>
     <div class="radio-card-radio-row">
       <RadioButton
+        id="allow"
+        name="config-mode"
+        class="radio"
         @value="allow"
-        @radioClass="radio"
         @groupValue={{this.config.mode}}
-        @changed={{queue (action (mut this.config.mode))}}
-        @name="config-mode"
-        @radioId="allow"
+        @onChange={{fn (mut this.config.mode)}}
       />
       <label for="allow"></label>
     </div>
@@ -64,12 +64,12 @@
     </div>
     <div class="radio-card-radio-row">
       <RadioButton
+        id="deny"
+        name="config-mode"
+        class="radio"
         @value="deny"
-        @radioClass="radio"
         @groupValue={{this.config.mode}}
-        @changed={{queue (action (mut this.config.mode))}}
-        @name="config-mode"
-        @radioId="deny"
+        @onChange={{fn (mut this.config.mode)}}
       />
       <label for="deny"></label>
     </div>
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index 97814016c8..e5f05b7e62 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -80,7 +80,13 @@
                 </p>
               </div>
               <div>
-                <RadioButton @value="dr" @groupValue={{this.replicationMode}} @name="replication-mode" @radioId="dr" />
+                <RadioButton
+                  id="dr"
+                  name="replication-mode"
+                  @value="dr"
+                  @groupValue={{this.replicationMode}}
+                  @onChange={{fn (mut this.replicationMode)}}
+                />
                 <label for="dr" data-test-replication-type-select="dr"></label>
               </div>
             </label>
@@ -107,14 +113,16 @@
               </div>
               <div>
                 {{#if (has-feature "Performance Replication")}}
-                  <RadioButton
-                    @value="performance"
-                    @groupValue={{this.replicationMode}}
-                    @name="replication-mode"
-                    @classNames="box columns is-centered"
-                    @radioId="performance"
-                  />
-                  <label for="performance" data-test-replication-type-select="performance"></label>
+                  <div class="box columns is-centered">
+                    <RadioButton
+                      id="performance"
+                      name="replication-mode"
+                      @value="performance"
+                      @groupValue={{this.replicationMode}}
+                      @onChange={{fn (mut this.replicationMode)}}
+                    />
+                    <label for="performance" data-test-replication-type-select="performance"></label>
+                  </div>
                 {{/if}}
               </div>
             </label>
diff --git a/ui/package.json b/ui/package.json
index 6cc32aaaa1..3cd3d6d4d4 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -134,7 +134,6 @@
     "ember-power-select": "^5.0.3",
     "ember-promise-helpers": "^1.0.9",
     "ember-qunit": "^5.1.4",
-    "ember-radio-button": "^2.0.1",
     "ember-resolver": "^8.0.2",
     "ember-responsive": "^3.0.0-beta.3",
     "ember-router-helpers": "^0.4.0",
diff --git a/ui/tests/integration/components/radio-button-test.js b/ui/tests/integration/components/radio-button-test.js
new file mode 100644
index 0000000000..9b50f02481
--- /dev/null
+++ b/ui/tests/integration/components/radio-button-test.js
@@ -0,0 +1,69 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { click, render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | radio-button', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it should spread attributes on input element', async function (assert) {
+    await render(
+      hbs(`
+      <RadioButton
+        id="foo"
+        name="bar"
+        class="radio"
+        @onChange={{fn (mut this.groupValue)}}
+      />
+    `)
+    );
+    assert.dom('input').hasAttribute('id', 'foo', 'id set on input element');
+    assert.dom('input').hasAttribute('name', 'bar', 'name set on input element');
+    assert.dom('input').hasClass('radio', 'class set on input element');
+  });
+
+  test('it should be checked when value and groupValue are equal', async function (assert) {
+    await render(
+      hbs(`
+      <RadioButton
+        @value="foo"
+        @groupValue="foo"
+        @onChange={{fn (mut this.groupValue)}}
+      />
+    `)
+    );
+    assert.true(
+      this.element.querySelector('input').checked,
+      'input is checked when value matches groupValue'
+    );
+  });
+
+  test('it should send onChange action and mark correct radio as checked', async function (assert) {
+    await render(
+      hbs(`
+      <RadioButton
+        @value="foo"
+        @groupValue={{this.groupValue}}
+        @onChange={{fn (mut this.groupValue)}}
+        data-test-radio-1
+      />
+      <RadioButton
+        @value="bar"
+        @groupValue={{this.groupValue}}
+        @onChange={{fn (mut this.groupValue)}}
+        data-test-radio-2
+      />
+    `)
+    );
+    const radio1 = this.element.querySelector('[data-test-radio-1]');
+    const radio2 = this.element.querySelector('[data-test-radio-2]');
+    assert.false(radio1.checked, 'radio1 is unchecked when groupValue is undefined');
+    assert.false(radio2.checked, 'radio2 is unchecked when groupValue is undefined');
+    await click('[data-test-radio-1]');
+    assert.true(radio1.checked, 'radio1 is checked');
+    assert.false(radio2.checked, 'radio2 is unchecked');
+    await click('[data-test-radio-2]');
+    assert.false(radio1.checked, 'radio1 is unchecked');
+    assert.true(radio2.checked, 'radio2 is checked');
+  });
+});
diff --git a/ui/yarn.lock b/ui/yarn.lock
index c5bef8056e..9078e3f65e 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -6751,7 +6751,7 @@ broccoli-output-wrapper@^3.2.5:
     heimdalljs-logger "^0.1.10"
     symlink-or-copy "^1.2.0"
 
-broccoli-persistent-filter@^1.0.3, broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
+broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3:
   version "1.4.6"
   resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615"
   integrity sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw==
@@ -9925,17 +9925,6 @@ ember-cli-get-component-path-option@^1.0.0:
   resolved "https://registry.yarnpkg.com/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz#0d7b595559e2f9050abed804f1d8eff1b08bc771"
   integrity sha1-DXtZVVni+QUKvtgE8djv8bCLx3E=
 
-ember-cli-htmlbars@^1.1.1:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-1.3.5.tgz#65be9678b274b5e7861d7f75c188780af7ef9d13"
-  integrity sha512-Qur/anb0Vk57qmIhGLkSzl8X1QIMoae6pLa14MRQ8+YD2N5fNs3qdhEFf0SDBquPOH1QxQtraiNQvji47QBJyg==
-  dependencies:
-    broccoli-persistent-filter "^1.0.3"
-    ember-cli-version-checker "^1.0.2"
-    hash-for-dep "^1.0.2"
-    json-stable-stringify "^1.0.0"
-    strip-bom "^2.0.0"
-
 ember-cli-htmlbars@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-2.0.5.tgz#b5a105429a6bce4f7c9c97b667e3b8926e31397f"
@@ -10243,13 +10232,6 @@ ember-cli-typescript@^4.1.0, ember-cli-typescript@^4.2.0, ember-cli-typescript@^
     stagehand "^1.0.0"
     walk-sync "^2.2.0"
 
-ember-cli-version-checker@^1.0.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-1.3.1.tgz#0bc2d134c830142da64bf9627a0eded10b61ae72"
-  integrity sha1-C8LRNMgwFC2mS/lieg7e0QthrnI=
-  dependencies:
-    semver "^5.3.0"
-
 ember-cli-version-checker@^2.1.0, ember-cli-version-checker@^2.1.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-2.2.0.tgz#47771b731fe0962705e27c8199a9e3825709f3b3"
@@ -10738,14 +10720,6 @@ ember-qunit@^5.1.4:
     silent-error "^1.1.1"
     validate-peer-dependencies "^1.2.0"
 
-ember-radio-button@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/ember-radio-button/-/ember-radio-button-2.0.1.tgz#f081a44d581a4b1db88fef79ec5c47da712ab963"
-  integrity sha512-cAAyFgNIM3PquowkWfa0lOSlq4PPst9vpkNiLi5yhd1LJ4lVtwgn6s+OpPXWKJLZdig2m31PWU8jxobcubge5w==
-  dependencies:
-    ember-cli-babel "^6.9.2"
-    ember-cli-htmlbars "^1.1.1"
-
 ember-require-module@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/ember-require-module/-/ember-require-module-0.3.0.tgz#65aff7908b5b846467e4526594d33cfe0c23456b"