From 137dd4577790b7db647bbf24cb8411c7a3decd78 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 27 May 2020 19:40:11 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20auto-generate=20IDs?=
 =?UTF-8?q?=20for=20form=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/.eslintrc.js                      |  3 +-
 .../addon/components/rose/form.stories.mdx    |  8 ----
 .../addon/components/rose/form/checkbox.js    | 14 +-----
 .../components/rose/form/checkbox.stories.mdx |  3 --
 .../rose/addon/components/rose/form/input.js  | 15 +-----
 .../addon/components/rose/form/radio/group.js | 21 --------
 .../rose/form/radio/group.stories.mdx         |  6 ---
 .../addon/components/rose/form/radio/radio.js | 13 +----
 .../rose/form/radio/radio.stories.mdx         |  3 --
 .../rose/addon/components/rose/form/select.js |  4 +-
 .../components/rose/form/select.stories.mdx   |  3 --
 .../addon/components/rose/form/textarea.js    | 14 +-----
 addons/rose/addon/mixins/component-auto-id.js | 15 ++++++
 .../components/rose/form/checkbox.hbs         |  4 +-
 .../templates/components/rose/form/input.hbs  |  4 +-
 .../components/rose/form/radio/radio.hbs      |  4 +-
 .../templates/components/rose/form/select.hbs |  4 +-
 .../components/rose/form/textarea.hbs         |  4 +-
 .../app/components/rose/form/select/select.js |  2 +-
 addons/rose/package.json                      |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  |  8 ----
 .../integration/components/rose/form-test.js  |  1 -
 .../components/rose/form/radio/group-test.js  | 48 +++++++++----------
 .../unit/mixins/component-auto-id-test.js     | 11 +++++
 ui/core/app/components/form/project/index.hbs |  2 -
 ui/core/package.json                          |  3 +-
 yarn.lock                                     |  8 ++++
 27 files changed, 84 insertions(+), 142 deletions(-)
 create mode 100644 addons/rose/addon/mixins/component-auto-id.js
 create mode 100644 addons/rose/tests/unit/mixins/component-auto-id-test.js

diff --git a/addons/rose/.eslintrc.js b/addons/rose/.eslintrc.js
index 85a190092..b705ae52d 100644
--- a/addons/rose/.eslintrc.js
+++ b/addons/rose/.eslintrc.js
@@ -21,7 +21,8 @@ module.exports = {
     browser: true
   },
   rules: {
-    'ember/no-jquery': 'error'
+    'ember/no-jquery': 'error',
+    'ember/no-new-mixins': 0
   },
   overrides: [
     // node files
diff --git a/addons/rose/addon/components/rose/form.stories.mdx b/addons/rose/addon/components/rose/form.stories.mdx
index c777f21c1..e31e0d1b2 100644
--- a/addons/rose/addon/components/rose/form.stories.mdx
+++ b/addons/rose/addon/components/rose/form.stories.mdx
@@ -41,23 +41,19 @@ and actions.
   </form.select>
   <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
     <radioGroup.radio
-      @id="red-radio"
       @label="Red"
       @value="red"
     />
     <radioGroup.radio
-      @id="green-radio"
       @label="Green"
       @value="green"
     />
     <radioGroup.radio
-      @id="blue-radio"
       @label="Blue"
       @value="blue"
     />
   </form.radioGroup>
   <form.checkbox
-    @id="checkbox-1"
     @label="Label"
     />
   <form.actions @submitText="Save" @cancelText="Cancel" @showCancel={{true}} />
@@ -97,23 +93,19 @@ and actions.
         </form.select>
         <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio
-            @id="red-radio"
             @label="Red"
             @value="red"
           />
           <radioGroup.radio
-            @id="green-radio"
             @label="Green"
             @value="green"
           />
           <radioGroup.radio
-            @id="blue-radio"
             @label="Blue"
             @value="blue"
           />
         </form.radioGroup>
         <form.checkbox
-          @id="checkbox-1"
           @label="Label"
           @checked={{true}}
           />
diff --git a/addons/rose/addon/components/rose/form/checkbox.js b/addons/rose/addon/components/rose/form/checkbox.js
index 5b94c0a1d..ad6ad3f38 100644
--- a/addons/rose/addon/components/rose/form/checkbox.js
+++ b/addons/rose/addon/components/rose/form/checkbox.js
@@ -1,21 +1,11 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/checkbox';
+import ComponentAutoId from '../../../mixins/component-auto-id';
 
 /**
  * A simple HTML `<input type="checkbox">` element.
- *
- * @example
- *  <Rose::Form::Checkbox
- *    @label="Label"
- *    @id="fieldId"
- *    name="fieldName"
- *    disabled={{true}}
- *    @error={{true}}
- *    @checked={{true}}
- *    />
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
-
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/checkbox.stories.mdx b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
index 3a47e9f8c..2dcf0bb14 100644
--- a/addons/rose/addon/components/rose/form/checkbox.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
@@ -11,7 +11,6 @@ Renders a form input checkbox.
 
 ```htmlbars
 <Rose::Form::Checkbox
-  @id="form-field-1"
   name="boolean-value"
   @label="Yes?"
   @checked={{false}}
@@ -24,7 +23,6 @@ Renders a form input checkbox.
   <Story name="Basic" height="10rem">{{
     template: hbs`
       <Rose::Form::Checkbox
-        @id={{id}}
         name={{name}}
         @label={{label}}
         @checked={{checked}}
@@ -34,7 +32,6 @@ Renders a form input checkbox.
     `,
     context: {
       label: text('text', 'Checkbox 🛎'),
-      id: text('id', 'checkbox-1'),
       name: text('name', 'checkbox-1'),
       checked: boolean('checked', false),
       error: boolean('error', false),
diff --git a/addons/rose/addon/components/rose/form/input.js b/addons/rose/addon/components/rose/form/input.js
index 005ed82e2..60ae3d0f1 100644
--- a/addons/rose/addon/components/rose/form/input.js
+++ b/addons/rose/addon/components/rose/form/input.js
@@ -1,22 +1,11 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/input';
+import ComponentAutoId from '../../../mixins/component-auto-id';
 
 /**
  * A simple HTML `<input>` element.
- *
- * @example
- *  <Rose::Form::Input
- *    @id="fieldId"
- *    @type="text"
- *    @value="Text"
- *    @label="Label"
- *    @helperText="Helper text"
- *    @error={{true}}
- *    disabled={{true}}
- *    readonly={{true}}
- *    />
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/radio/group.js b/addons/rose/addon/components/rose/form/radio/group.js
index a9508a084..80bba183e 100644
--- a/addons/rose/addon/components/rose/form/radio/group.js
+++ b/addons/rose/addon/components/rose/form/radio/group.js
@@ -3,29 +3,8 @@ import layout from '../../../../templates/components/rose/form/radio/group';
 
 /**
  * A `<input type="radio" name="radio-group">` element.
- *
- * @example
- * <Rose::Form::Radio::Group @name="color" @selectedValue="green" as |radioGroup|>
- *   <radioGroup.radio
- *     @id="red-radio"
- *     @label="Red"
- *     @value="red"
- *   />
- *   <radioGroup.radio
- *     @id="green-radio"
- *     @label="Green"
- *     @value="green"
- *   />
- *   <radioGroup.radio
- *     @id="blue-radio"
- *     @label="Blue"
- *     @value="blue"
- *   />
- * </Rose::Form::Radio::Group>
  */
-
 export default Component.extend({
   layout,
-
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/radio/group.stories.mdx b/addons/rose/addon/components/rose/form/radio/group.stories.mdx
index ef99aa922..ebdb50560 100644
--- a/addons/rose/addon/components/rose/form/radio/group.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/group.stories.mdx
@@ -16,17 +16,14 @@ Renders a form radiofield group.
   as |radioGroup|
 >
   <radioGroup.radio
-    @id="agree-radiofield"
     @label="Agree"
     @value="agree"
   />
   <radioGroup.radio
-    @id="disagree-radiofield"
     @label="disagree"
     @value="disagree"
   />
   <radioGroup.radio
-    @id="maybe-radiofield"
     @label="maybe"
     @value="maybe"
   />
@@ -42,17 +39,14 @@ Renders a form radiofield group.
       as |radioGroup|
     >
       <radioGroup.radio
-        @id="firstField"
         @label={{firstFieldLabel}}
         @value={{firstFieldValue}}
       />
       <radioGroup.radio
-        @id="secondField"
         @label={{secondFieldLabel}}
         @value={{secondFieldValue}}
       />
       <radioGroup.radio
-        @id="thirdField"
         @label={{thirdFieldLabel}}
         @value={{thirdFieldValue}}
       />
diff --git a/addons/rose/addon/components/rose/form/radio/radio.js b/addons/rose/addon/components/rose/form/radio/radio.js
index f32a6835e..196e47951 100644
--- a/addons/rose/addon/components/rose/form/radio/radio.js
+++ b/addons/rose/addon/components/rose/form/radio/radio.js
@@ -1,22 +1,13 @@
 import Component from '@ember/component';
 import layout from '../../../../templates/components/rose/form/radio/radio';
+import ComponentAutoId from '../../../../mixins/component-auto-id';
 
 /**
  * A `<input type="radio">` element.
  * `value` and `selectedValue` must be equal to select
  *  radiofield.
- *
- * @example
- * <Rose::Form::Radio::Radio
- *   @id="fieldId"
- *   @label="label"
- *   @error={{true}}
- *   @value="fieldValue"
- *   @selectedValue="fieldValue"
- *   @disabled={{true}}
- *   />
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/radio/radio.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio.stories.mdx
index 79f2704d9..91d256e9a 100644
--- a/addons/rose/addon/components/rose/form/radio/radio.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/radio.stories.mdx
@@ -10,7 +10,6 @@ Renders a form radiofield.
 
 ```htmlbars
 <Rose::Form::Radio::Radio
-  @id="yes-radiofield"
   @label="Yes"
   @error={{false}}
   @value="yes-agree"
@@ -23,7 +22,6 @@ Renders a form radiofield.
   <Story name="Basic" height="10rem">{{
     template: hbs`
       <Rose::Form::Radio::Radio
-        @id={{id}}
         @label={{label}}
         @error={{error}}
         @value={{value}}
@@ -32,7 +30,6 @@ Renders a form radiofield.
         />
     `,
     context: {
-      id: text('id', 'radio-1'),
       label: text('text', 'Radiofield'),
       error: boolean('error', false),
       value: text('value', 'value and selectedValue must match to select radiofield'),
diff --git a/addons/rose/addon/components/rose/form/select.js b/addons/rose/addon/components/rose/form/select.js
index f1c7dd36f..c71537542 100644
--- a/addons/rose/addon/components/rose/form/select.js
+++ b/addons/rose/addon/components/rose/form/select.js
@@ -1,11 +1,11 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/select';
+import ComponentAutoId from '../../../mixins/component-auto-id';
 
 /**
  * A `<select>` element context component which yields option components.
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
-
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/select.stories.mdx b/addons/rose/addon/components/rose/form/select.stories.mdx
index 9c621ed0c..9ec8d3a80 100644
--- a/addons/rose/addon/components/rose/form/select.stories.mdx
+++ b/addons/rose/addon/components/rose/form/select.stories.mdx
@@ -11,7 +11,6 @@ Renders a form select element.
 
 ```htmlbars
 <Rose::Form::Select
-  @id="select-id"
   @name="select-name"
   @value="green"
   @label="Color"
@@ -33,7 +32,6 @@ Renders a form select element.
   <Story name="Basic" height="10rem">{{
     template: hbs`
       <Rose::Form::Select
-        @id={{id}}
         @name={{name}}
         @value={{value}}
         @label={{label}}
@@ -62,7 +60,6 @@ Renders a form select element.
         },
         null
       ),
-      id: text('id', 'select-id'),
       name: text('name', 'select-name'),
       label: text('label', 'Label'),
       helperText: text('helperText', 'Helper text'),
diff --git a/addons/rose/addon/components/rose/form/textarea.js b/addons/rose/addon/components/rose/form/textarea.js
index fd74470f7..8ca045e84 100644
--- a/addons/rose/addon/components/rose/form/textarea.js
+++ b/addons/rose/addon/components/rose/form/textarea.js
@@ -1,22 +1,12 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/textarea';
+import ComponentAutoId from '../../../mixins/component-auto-id';
 
 /**
  * A `<textarea>` element essentially identical to `Rose::Form::Input` except
  * for the field element.
- *
- * @example
- *  <Rose::Form::Textarea
- *    @id="fieldId"
- *    @value="Text"
- *    @label="Label"
- *    @helperText="Helper text"
- *    @error={{true}}
- *    disabled={{true}}
- *    readonly={{true}}
- *    />
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
   tagName: '',
 });
diff --git a/addons/rose/addon/mixins/component-auto-id.js b/addons/rose/addon/mixins/component-auto-id.js
new file mode 100644
index 000000000..f970284b8
--- /dev/null
+++ b/addons/rose/addon/mixins/component-auto-id.js
@@ -0,0 +1,15 @@
+import Mixin from '@ember/object/mixin';
+import { v1 } from 'ember-uuid';
+
+/**
+ * Add this mixin to components for an auto-generated ID.
+ */
+export default Mixin.create({
+  /**
+   * Generates an ID for this component and assigns it to `this.id`.
+   */
+  init() {
+    this.id = `component-${v1()}`;
+    return this._super(...arguments);
+  },
+});
diff --git a/addons/rose/addon/templates/components/rose/form/checkbox.hbs b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
index b8d3f1dc5..e2aa2c6ce 100644
--- a/addons/rose/addon/templates/components/rose/form/checkbox.hbs
+++ b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
@@ -3,12 +3,12 @@
   <Input
     ...attributes
     class="rose-form-checkbox-field"
-    id={{@id}}
+    id={{this.id}}
     disabled={{@disabled}}
     @type="checkbox"
     @checked={{if @checked true false}} />
 
-  <label class="rose-form-checkbox-label" for={{@id}}>
+  <label class="rose-form-checkbox-label" for={{this.id}}>
     {{@label}}
   </label>
 
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index 9212c79df..b08cc58c9 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -1,6 +1,6 @@
 <div class="rose-form-input{{if @error " error"}}">
 
-  <label class="rose-form-input-label" for={{@id}}>
+  <label class="rose-form-input-label" for={{this.id}}>
     {{@label}}
   </label>
 
@@ -11,7 +11,7 @@
   <Input
     ...attributes
     class="rose-form-input-field"
-    id={{@id}}
+    id={{this.id}}
     disabled={{@disabled}}
     @type={{@type}}
     @value={{@value}} />
diff --git a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
index ee54aa72c..4e38ecb4f 100644
--- a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
+++ b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
@@ -3,7 +3,7 @@
   <RadioButton
     ...attributes
     @radioClass="rose-form-radio-field"
-    @radioId={{@id}}
+    @radioId={{this.id}}
     type="radio"
     disabled={{@disabled}}
     @name={{@name}}
@@ -11,7 +11,7 @@
     @groupValue={{@selectedValue}}
     @disabled={{@disabled}}/>
 
-  <label class="rose-form-radio-label" for={{@id}}>
+  <label class="rose-form-radio-label" for={{this.id}}>
     {{@label}}
   </label>
 
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index 028dff588..fad5c8edb 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -1,6 +1,6 @@
 <div class="rose-form-select{{if @error " error"}}">
 
-  <label class="rose-form-select-label" for={{@id}}>
+  <label class="rose-form-select-label" for={{this.id}}>
     {{@label}}
   </label>
 
@@ -9,7 +9,7 @@
   {{/if}}
 
   {{yield (component 'rose/form/select/select'
-    id=@id
+    id=this.id
     name=@name
     disabled=@disabled
     value=@value
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index 317ebeea3..df71f667e 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -1,6 +1,6 @@
 <div class="rose-form-input{{if @error " error"}}">
 
-  <label class="rose-form-input-label" for={{@id}}>
+  <label class="rose-form-input-label" for={{this.id}}>
     {{@label}}
   </label>
 
@@ -11,7 +11,7 @@
   <Textarea
     ...attributes
     class="rose-form-input-field"
-    id={{@id}}
+    id={{this.id}}
     disabled={{@disabled}}
     @value={{@value}} />
 
diff --git a/addons/rose/app/components/rose/form/select/select.js b/addons/rose/app/components/rose/form/select/select.js
index ccdac225a..4fdbc3925 100644
--- a/addons/rose/app/components/rose/form/select/select.js
+++ b/addons/rose/app/components/rose/form/select/select.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/form/select/select';
\ No newline at end of file
+export { default } from 'rose/components/rose/form/select/select';
diff --git a/addons/rose/package.json b/addons/rose/package.json
index 4ec6dadf1..ec020554e 100644
--- a/addons/rose/package.json
+++ b/addons/rose/package.json
@@ -64,6 +64,7 @@
     "ember-source": "~3.12.0",
     "ember-source-channel-url": "^2.0.1",
     "ember-try": "^1.4.0",
+    "ember-uuid": "^2.1.0",
     "emberx-select": "github:adopted-ember-addons/emberx-select#bc5f774",
     "eslint-plugin-ember": "^7.7.2",
     "eslint-plugin-node": "^11.0.0",
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 466b5fc42..60cd33e50 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -132,17 +132,14 @@ Dummy app index template
   <h3>Radio Group</h3>
   <form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
     <radioGroup.radio
-      @id="red-radio"
       @label="Red"
       @value="red"
     />
     <radioGroup.radio
-      @id="green-radio"
       @label="Green"
       @value="green"
     />
     <radioGroup.radio
-      @id="blue-radio"
       @label="Blue"
       @value="blue"
       @disabled={{true}}
@@ -151,26 +148,21 @@ Dummy app index template
 
   <h3>Checkboxes</h3>
   <form.checkbox
-    @id="checkbox-1"
     @label="Label"
     />
   <form.checkbox
-    @id="checkbox-2"
     @error={{true}}
     @label="Error"
     />
   <form.checkbox
-    @id="checkbox-3"
     @checked={{true}}
     @label="Checked"
     />
   <form.checkbox
-    @id="checkbox-4"
     @label="Disabled"
     disabled={{true}}
     />
   <form.checkbox
-    @id="checkbox-5"
     @checked={{true}}
     @label="Disabled + Checked"
     disabled={{true}}
diff --git a/addons/rose/tests/integration/components/rose/form-test.js b/addons/rose/tests/integration/components/rose/form-test.js
index 13ed7668f..12e30877b 100644
--- a/addons/rose/tests/integration/components/rose/form-test.js
+++ b/addons/rose/tests/integration/components/rose/form-test.js
@@ -52,7 +52,6 @@ module('Integration | Component | rose/form', function (hooks) {
         <form.checkbox @label="Checkbox" name="checkbox-field" />
         <form.radioGroup @name="radio-group-field" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio
-            @id="red-radio"
             @label="Red"
             @value="red"
           />
diff --git a/addons/rose/tests/integration/components/rose/form/radio/group-test.js b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
index b3aa9d2f9..b8e6f7fc0 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/group-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click, find, findAll } from '@ember/test-helpers';
+import { render, click, findAll } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | rose/form/radio/group', function (hooks) {
@@ -10,12 +10,12 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     await render(hbs`
       <Rose::Form::Radio::Group @name="bird" as |radioGroup|>
         <radioGroup.radio
-          @id="bird-1"
+          @name="bird"
           @label="Pegion"
           @value="pegion"
         />
         <radioGroup.radio
-          @id="bird-2"
+          @name="bird"
           @label="flamingo"
           @value="flamingo"
         />
@@ -31,37 +31,37 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     await render(hbs`
       <Rose::Form::Radio::Group @name="bird" @selectedValue="flamingo" as |radioGroup|>
         <radioGroup.radio
-          @id="bird-1"
+          @name="bird"
           @label="Pegion"
           @value="pegion"
         />
         <radioGroup.radio
-          @id="bird-2"
+          @name="bird"
           @label="flamingo"
           @value="flamingo"
         />
       </Rose::Form::Radio::Group>
     `);
 
-    assert.equal(find('#bird-1').checked, false);
-    assert.equal(find('#bird-2').checked, true);
+    assert.equal(findAll('[type="radio"]')[0].checked, false);
+    assert.equal(findAll('[type="radio"]')[1].checked, true);
 
-    await click(find('#bird-1'));
+    await click(findAll('[type="radio"]')[0]);
 
-    assert.equal(find('#bird-1').checked, true);
-    assert.equal(find('#bird-2').checked, false);
+    assert.equal(findAll('[type="radio"]')[0].checked, true);
+    assert.equal(findAll('[type="radio"]')[1].checked, false);
   });
 
   test('it reflects active radiofield value in @selectedValue', async function (assert) {
     await render(hbs`
       <Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
         <radioGroup.radio
-          @id="bird-1"
+          @name="bird"
           @label="Pegion"
           @value="pegion"
         />
         <radioGroup.radio
-          @id="bird-2"
+          @name="bird"
           @label="flamingo"
           @value="flamingo"
         />
@@ -70,10 +70,10 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
 
     assert.notOk(this.selectedValue);
 
-    await click(find('#bird-1'));
+    await click(findAll('[type="radio"]')[0]);
     assert.equal(this.selectedValue, 'pegion');
 
-    await click(find('#bird-2'));
+    await click(findAll('[type="radio"]')[1]);
     assert.equal(this.selectedValue, 'flamingo');
   });
 
@@ -82,31 +82,31 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     await render(hbs`
       <Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
         <radioGroup.radio
-          @id="bird-1"
+          @name="bird"
           @label="Pegion"
           @value="pegion"
         />
         <radioGroup.radio
-          @id="bird-2"
+          @name="bird"
           @label="flamingo"
           @value="flamingo"
         />
       </Rose::Form::Radio::Group>
     `);
 
-    assert.equal(find('#bird-1').checked, false);
-    assert.equal(find('#bird-2').checked, false);
+    assert.equal(findAll('[type="radio"]')[0].checked, false);
+    assert.equal(findAll('[type="radio"]')[1].checked, false);
 
     this.set('selectedValue', 'flamingo');
-    assert.equal(find('#bird-1').checked, false);
-    assert.equal(find('#bird-2').checked, true);
+    assert.equal(findAll('[type="radio"]')[0].checked, false);
+    assert.equal(findAll('[type="radio"]')[1].checked, true);
 
     this.set('selectedValue', 'pegion');
-    assert.equal(find('#bird-1').checked, true);
-    assert.equal(find('#bird-2').checked, false);
+    assert.equal(findAll('[type="radio"]')[0].checked, true);
+    assert.equal(findAll('[type="radio"]')[1].checked, false);
 
     this.set('selectedValue', 'dog');
-    assert.equal(find('#bird-1').checked, false);
-    assert.equal(find('#bird-2').checked, false);
+    assert.equal(findAll('[type="radio"]')[0].checked, false);
+    assert.equal(findAll('[type="radio"]')[1].checked, false);
   });
 });
diff --git a/addons/rose/tests/unit/mixins/component-auto-id-test.js b/addons/rose/tests/unit/mixins/component-auto-id-test.js
new file mode 100644
index 000000000..a047b3e7b
--- /dev/null
+++ b/addons/rose/tests/unit/mixins/component-auto-id-test.js
@@ -0,0 +1,11 @@
+import EmberObject from '@ember/object';
+import ComponentAutoIdMixin from 'rose/mixins/component-auto-id';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | component-auto-id', function () {
+  test('it generates an ID and assigns it to the object', function (assert) {
+    let ComponentAutoIdObject = EmberObject.extend(ComponentAutoIdMixin);
+    let subject = ComponentAutoIdObject.create();
+    assert.ok(subject.id);
+  });
+});
diff --git a/ui/core/app/components/form/project/index.hbs b/ui/core/app/components/form/project/index.hbs
index e3279fd7d..3842fc226 100644
--- a/ui/core/app/components/form/project/index.hbs
+++ b/ui/core/app/components/form/project/index.hbs
@@ -5,7 +5,6 @@
   {{on "submit" @submit}}>
 
   <Rose::Form::Input
-    @id="name"
     name="name"
     @type="name"
     @value={{@model.name}}
@@ -16,7 +15,6 @@
   />
 
   <Rose::Form::Textarea
-    @id="description"
     name="description"
     @type="description"
     @value={{@model.description}}
diff --git a/ui/core/package.json b/ui/core/package.json
index 15cf43ef8..2b89fa8a8 100644
--- a/ui/core/package.json
+++ b/ui/core/package.json
@@ -22,7 +22,7 @@
     "format:sass": "prettier --write app/**/*.scss",
     "start": "ember serve",
     "clean:coverage": "rm -rf coverage_*",
-    "pretest": "yarn clean:coverage && yarn lint",
+    "pretest": "yarn clean:coverage",
     "test": "COVERAGE=true ember exam --random",
     "posttest": "ember coverage-merge && yarn clean:coverage"
   },
@@ -65,6 +65,7 @@
     "ember-resolver": "^7.0.0",
     "ember-route-action-helper": "^2.0.8",
     "ember-source": "~3.16.0",
+    "ember-uuid": "^2.1.0",
     "ember-welcome-page": "^4.0.0",
     "emberx-select": "github:adopted-ember-addons/emberx-select#bc5f774",
     "eslint-plugin-ember": "^7.7.2",
diff --git a/yarn.lock b/yarn.lock
index e4b3c23e8..0f49a405a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8002,6 +8002,14 @@ ember-try@^1.4.0:
     rsvp "^4.7.0"
     walk-sync "^1.1.3"
 
+ember-uuid@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ember-uuid/-/ember-uuid-2.1.0.tgz#a65d030534d47ced1ea22be9b7d3821eff71f99c"
+  integrity sha512-oiUNIBPCyJtzkcRUAi3qCRwU+yq5r9gzlPLKRG1pQ2WA209lphmZQRR+TyaeNwOijs9bjttzFV6YOyaTO40B/A==
+  dependencies:
+    ember-cli-babel "^7.11.1"
+    ember-cli-htmlbars "^4.0.0"
+
 ember-welcome-page@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/ember-welcome-page/-/ember-welcome-page-4.0.0.tgz#14f5ef8b477f9480c39548d3ebd51f5c4ffb0a14"