refactor: 💡 auto-generate IDs for form fields

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

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}}
           />

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: '',
 });

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

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: '',
 });

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: '',
 });

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}}
       />

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: '',
 });

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'),

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: '',
 });

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'),

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: '',
 });

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);
+  },
+});

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>
 

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}} />

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>
 

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

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}} />
 

addons/rose/app/components/rose/form/select/select.js

@@ -1 +1 @@
-export { default } from 'rose/components/rose/form/select/select';
+export { default } from 'rose/components/rose/form/select/select';

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",

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}}

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"
           />

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

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

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}}

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",

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"