From 3547dcfcb37d028629fe59a03384ff4d77050acf Mon Sep 17 00:00:00 2001
From: Kianna <30884335+kiannaquach@users.noreply.github.com>
Date: Thu, 14 Dec 2023 11:01:57 -0800
Subject: [PATCH] UI: Update radio form field to have group styles and
 label/subtext (#24542)

* Add radio form field

* Add some tests!

* Address feedback
---
 ui/lib/core/addon/components/form-field.hbs   | 37 +++++++++++++++---
 ui/lib/core/addon/components/form-field.js    |  5 +++
 .../integration/components/form-field-test.js | 39 +++++++++++++++++++
 3 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/ui/lib/core/addon/components/form-field.hbs b/ui/lib/core/addon/components/form-field.hbs
index 33a67116ac..257f61b193 100644
--- a/ui/lib/core/addon/components/form-field.hbs
+++ b/ui/lib/core/addon/components/form-field.hbs
@@ -16,9 +16,13 @@
   {{/unless}}
   {{#if @attr.options.possibleValues}}
     {{#if (eq @attr.options.editType "radio")}}
-      <div class="control columns" data-test-radio-input>
+      <div class="control {{unless this.hasRadioSubText 'columns'}}" data-test-radio-input>
         {{#each (path-or-array @attr.options.possibleValues @model) as |val|}}
-          <div class="column is-narrow is-flex-center has-text-grey has-right-margin-s" data-test-input={{@attr.name}}>
+          <div
+            class="is-flex-center
+              {{if this.hasRadioSubText 'has-top-padding-xs has-bottom-padding-s' 'column is-narrow has-right-margin-s'}}"
+            data-test-input={{@attr.name}}
+          >
             <RadioButton
               class="radio"
               name={{@attr.name}}
@@ -26,12 +30,24 @@
               value={{or val.value val}}
               @value={{or val.value val}}
               @onChange={{this.setAndBroadcast}}
-              @groupValue={{(get @model this.valuePath)}}
+              @groupValue={{get @model this.valuePath}}
               @disabled={{and @attr.options.editDisabled (not @model.isNew)}}
+              data-test-radio={{or val.value val}}
             />
-            <label for={{or val.value val}} class="has-left-margin-xs">
-              {{or val.value val}}
-            </label>
+            <div class="has-left-margin-xs">
+              <label
+                for="{{or val.value val}}"
+                class="has-left-margin-xs has-text-black is-size-7"
+                data-test-radio-label={{or val.label val.value val}}
+              >
+                <span>{{or val.label val.value val}}</span>
+                {{#if this.hasRadioSubText}}
+                  <p class="has-left-margin-xs has-text-grey is-size-8" data-test-radio-subText={{val.subText}}>
+                    {{val.subText}}
+                  </p>
+                {{/if}}
+              </label>
+            </div>
           </div>
         {{/each}}
       </div>
@@ -74,6 +90,15 @@
         </div>
       </div>
     {{/if}}
+  {{else if (eq @attr.options.editType "dateTimeLocal")}}
+    <Input
+      @type="datetime-local"
+      @value={{date-format (get @model this.valuePath) "yyyy-MM-dd'T'HH:mm"}}
+      class="input has-top-margin-xs is-auto-width is-block"
+      name={{@attr.name}}
+      data-test-input={{@attr.name}}
+      {{on "change" this.onChangeWithEvent}}
+    />
   {{else if (eq @attr.options.editType "searchSelect")}}
     <div class="form-section">
       <SearchSelect
diff --git a/ui/lib/core/addon/components/form-field.js b/ui/lib/core/addon/components/form-field.js
index f1aa94376c..5c2991190f 100644
--- a/ui/lib/core/addon/components/form-field.js
+++ b/ui/lib/core/addon/components/form-field.js
@@ -75,6 +75,11 @@ export default class FormFieldComponent extends Component {
     this.showInput = !!modelValue;
   }
 
+  get hasRadioSubText() {
+    // for 'radio' editType, check to see if every of the possibleValues has a subText and label
+    return this.args?.attr?.options?.possibleValues?.any((v) => v.subText);
+  }
+
   get hideLabel() {
     const { type, options } = this.args.attr;
     if (type === 'boolean' || type === 'object' || options?.isSectionHeader) {
diff --git a/ui/tests/integration/components/form-field-test.js b/ui/tests/integration/components/form-field-test.js
index 0d33ee2da6..3768847de5 100644
--- a/ui/tests/integration/components/form-field-test.js
+++ b/ui/tests/integration/components/form-field-test.js
@@ -11,6 +11,7 @@ import hbs from 'htmlbars-inline-precompile';
 import { create } from 'ember-cli-page-object';
 import sinon from 'sinon';
 import formFields from '../../pages/components/form-field';
+import { format, startOfDay } from 'date-fns';
 
 const component = create(formFields);
 
@@ -159,6 +160,44 @@ module('Integration | Component | form field', function (hooks) {
     assert.strictEqual(model.get('foo'), selectedValue);
     assert.ok(spy.calledWith('foo', selectedValue), 'onChange called with correct args');
   });
+  test('it renders: radio buttons for possible values, labels, and subtext', async function (assert) {
+    const [model, spy] = await setup.call(
+      this,
+      createAttr('foo', null, {
+        editType: 'radio',
+        possibleValues: [
+          { label: 'Label 1', subText: 'Some subtext 1', value: 'SHA1' },
+          { label: 'Label 2', subText: 'Some subtext 2', value: 'SHA256' },
+          { subText: 'Some subtext 3', value: 'SHA256' },
+        ],
+      })
+    );
+    assert.ok(component.hasRadio, 'renders radio buttons');
+    const selectedValue = 'SHA256';
+    await component.selectRadioInput(selectedValue);
+    assert.dom('[data-test-radio-label="Label 1"] span').hasText('Label 1');
+    assert.dom('[data-test-radio-label="Label 2"] span').hasText('Label 2');
+    assert.dom('[data-test-radio-label="SHA256"] span').hasText('SHA256');
+    assert.dom('[data-test-radio-subText="Some subtext 1"]').hasText('Some subtext 1');
+    assert.dom('[data-test-radio-subText="Some subtext 2"]').hasText('Some subtext 2');
+    assert.dom('[data-test-radio-subText="Some subtext 3"]').hasText('Some subtext 3');
+    assert.strictEqual(model.get('foo'), selectedValue);
+    assert.ok(spy.calledWith('foo', selectedValue), 'onChange called with correct args');
+  });
+  test('it renders: datetimelocal', async function (assert) {
+    const [model] = await setup.call(
+      this,
+      createAttr('bar', null, {
+        editType: 'dateTimeLocal',
+      })
+    );
+    assert.dom("[data-test-input='bar']").exists();
+    await fillIn(
+      "[data-test-input='bar']",
+      format(startOfDay(new Date('2023-12-17T03:24:00')), "yyyy-MM-dd'T'HH:mm")
+    );
+    assert.deepEqual(model.get('bar'), '2023-12-17T00:00', 'sets the value on the model');
+  });
 
   test('it renders: editType stringArray', async function (assert) {
     const [model, spy] = await setup.call(this, createAttr('foo', 'string', { editType: 'stringArray' }));