From 60f690dad042d1068223b2b88e196c901aa94fff Mon Sep 17 00:00:00 2001
From: Joe Gaudet <joe@joegaudet.com>
Date: Tue, 28 Feb 2023 12:16:54 -0800
Subject: [PATCH] Add required text to labels based on the model

This commit adds the ability for the form to represent required fields
based on the validations present on the model.

Currently only supports ember-model-validators, but could be extended
easily through the required attribute.
---
 addon/components/field-for.hbs                |  9 ++++-
 addon/components/field-for.js                 |  4 ++-
 addon/components/form-for.js                  | 10 ++++++
 addon/components/label-for.hbs                |  8 +++--
 addon/components/label-for.js                 | 16 ++++++++-
 addon/services/form-for.js                    |  2 ++
 config/environment.js                         |  2 ++
 tests/dummy/app/templates/docs/forms.md       |  6 ++++
 tests/dummy/app/templates/docs/index.md       |  8 +++++
 tests/dummy/config/environment.js             |  1 +
 tests/integration/components/form-for-test.js | 35 +++++++++++++++++++
 11 files changed, 96 insertions(+), 5 deletions(-)

diff --git a/addon/components/field-for.hbs b/addon/components/field-for.hbs
index 4d21315a..8f8d9aeb 100644
--- a/addon/components/field-for.hbs
+++ b/addon/components/field-for.hbs
@@ -22,7 +22,14 @@
     {{did-insert this.registerElement}}
   >
     {{#unless this.hideDefaultLabel}}
-      <LabelFor @label={{this.label}} @controlId={{this.controlId}} @infoText={{this.infoText}} />
+      <LabelFor
+        @label={{this.label}}
+        @controlId={{this.controlId}}
+        @infoText={{this.infoText}}
+        @required={{this.required}}
+        @form={{this.form}}
+        @requiredText={{this.form.requiredText}}
+      />
     {{/unless}}
     {{#if this._showValue}}
       {{#if this.displayValueComponent}}
diff --git a/addon/components/field-for.js b/addon/components/field-for.js
index 0cb6a87e..d5311595 100644
--- a/addon/components/field-for.js
+++ b/addon/components/field-for.js
@@ -526,7 +526,9 @@ export default class FieldForComponent extends Component {
    * @public
    */
   @arg(bool)
-  required = false;
+  get required() {
+    return get(this, `form.model.validations.${this.for}.presence`) ?? false;
+  }
 
   /**
    * Whether or not this field is disabled
diff --git a/addon/components/form-for.js b/addon/components/form-for.js
index 2f3d0d50..e44451fc 100644
--- a/addon/components/form-for.js
+++ b/addon/components/form-for.js
@@ -501,6 +501,16 @@ export default class FormForComponent extends Component {
   @arg(bool)
   enforceRequiredFields = false;
 
+  @arg(bool)
+  get showRequiredIndicator() {
+    return this.formFor.showRequiredIndicator ?? false;
+  }
+
+  @arg(string)
+  get requiredText() {
+    return this.formFor.requiredText;
+  }
+
   /**
    * Resets the dirty model properties to their previous values on the form destruction. Turning this off will
    * leave the model in a dirty state, even when the user navigates away.
diff --git a/addon/components/label-for.hbs b/addon/components/label-for.hbs
index f1a82a51..2aef34a0 100644
--- a/addon/components/label-for.hbs
+++ b/addon/components/label-for.hbs
@@ -2,7 +2,7 @@
   {{#if this.customLabelComponent}}
     {{component this.customLabelComponent for=@controlId label=@label}}
   {{else}}
-    <label for="{{@controlId}}" ...attributes>
+    <label for="{{@controlId}}" data-test-label-for ...attributes>
       {{#if (has-block)}}
         {{yield @controlId}}
       {{else}}
@@ -13,9 +13,13 @@
         {{#if this.formFor.customInfoTextComponent}}
           {{component this.formFor.customInfoTextComponent infoText=@infoText}}
         {{else}}
-          <span title="{{@infoText}}">ℹ️</span>
+          <span class="ff-info-text" title="{{@infoText}}">ℹ️</span>
         {{/if}}
       {{/if}}
+
+      {{#if this.showRequiredIndicator}}
+        <span class="ff-required-text">{{this.requiredText}}</span>
+      {{/if}}
     </label>
   {{/if}}
 {{/if}}
\ No newline at end of file
diff --git a/addon/components/label-for.js b/addon/components/label-for.js
index 979c9ffc..4242c64e 100644
--- a/addon/components/label-for.js
+++ b/addon/components/label-for.js
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { arg } from 'ember-arg-types';
-import { object, string } from 'prop-types';
+import { object, string, boolean } from 'prop-types';
 import { next } from '@ember/runloop';
 
 export default class LabelFor extends Component {
@@ -20,6 +20,20 @@ export default class LabelFor extends Component {
   @arg(object)
   field;
 
+  @arg(object)
+  form;
+
+  @arg(string)
+  requiredText;
+
+  @arg(boolean)
+  required = false;
+
+  @arg(boolean)
+  get showRequiredIndicator() {
+    return this.required && this.form?.showRequiredIndicator;
+  }
+
   constructor() {
     super(...arguments);
 
diff --git a/addon/services/form-for.js b/addon/services/form-for.js
index 531f6c10..d0bcc2e5 100644
--- a/addon/services/form-for.js
+++ b/addon/services/form-for.js
@@ -31,6 +31,8 @@ export default class FormForService extends Service {
     this.customLabelComponent = this.config.customLabelComponent;
     this.customInfoTextComponent = this.config.customInfoTextComponent;
     this.preventsNavigationByDefault = this.config.preventsNavigationByDefault;
+    this.showRequiredIndicator = this.config.showRequiredIndicator;
+    this.requiredText = this.config.requiredText;
 
     this.router.on('routeWillChange', (transition) => {
       if (
diff --git a/config/environment.js b/config/environment.js
index 073ce0e8..d93a3a3b 100644
--- a/config/environment.js
+++ b/config/environment.js
@@ -12,6 +12,8 @@ module.exports = function (/* environment, appConfig */) {
         useBemClass: false,
         fieldForControlCalloutClasses: 'field-for-control-callout',
         fieldForControlCalloutPosition: 'bottom left',
+        showRequiredIndicator: true,
+        requiredText: '*',
 
         buttonClasses: '',
         buttonActingClass: '',
diff --git a/tests/dummy/app/templates/docs/forms.md b/tests/dummy/app/templates/docs/forms.md
index 866d6055..dc104599 100644
--- a/tests/dummy/app/templates/docs/forms.md
+++ b/tests/dummy/app/templates/docs/forms.md
@@ -262,3 +262,9 @@ forms: ```form-for-model-name```
 fields: ```form-for-model-name__field-for-field-name```
 
 buttons: ```form-for-model-name__button-type-button```
+
+## Required Field Text
+
+If a form's model has validations (currently only ember-model-validator) then it can be configured to display a required 
+indicator in the label. This text can be configured at the environment level, and the form level. You can also override
+the required value as an argument.
diff --git a/tests/dummy/app/templates/docs/index.md b/tests/dummy/app/templates/docs/index.md
index 5005012e..28d621a7 100644
--- a/tests/dummy/app/templates/docs/index.md
+++ b/tests/dummy/app/templates/docs/index.md
@@ -38,6 +38,14 @@ APP: {
     formClasses: 'form',
     fieldForControlCalloutClasses: 'field-for-control-callout',
     fieldForControlCalloutPosition: 'bottom left',
+      
+    // bem classes 
+    bemClassPrefix: '',
+    useBemClass: false,
+      
+    // required indicator 
+    showRequiredIndicator: true,
+    requiredText: '*',
 
     buttonClasses: '',
     submitButtonClasses: '',
diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js
index eacbb6d6..18deb2c6 100644
--- a/tests/dummy/config/environment.js
+++ b/tests/dummy/config/environment.js
@@ -26,6 +26,7 @@ module.exports = function (environment) {
         useBemClass: false,
         fieldForControlCalloutClasses: 'field-for-control-callout',
         fieldForControlCalloutPosition: 'bottom left',
+        requiredText: '*',
 
         buttonClasses: 'a-button',
         buttonActingClass: 'acting',
diff --git a/tests/integration/components/form-for-test.js b/tests/integration/components/form-for-test.js
index 1289300c..3643872b 100644
--- a/tests/integration/components/form-for-test.js
+++ b/tests/integration/components/form-for-test.js
@@ -703,4 +703,39 @@ module('Integration | Component | form for', function (hooks) {
     assert.equal(this.validationOptions.only[0], 'foo');
     assert.equal(this.validationOptions.only.length, 1);
   });
+
+  test('displays the required text if the form is configured to do so and an attribute is marked required', async function (assert) {
+    this.model = { foo: null, bar: null, validations: { foo: { presence: true } } };
+
+    await render(hbs`
+      <Form
+      @for={{this.model}}
+      @enforceRequiredFields={{true}}
+      @showRequiredIndicator={{true}}
+      as |form|>
+        <form.field @for='foo' @label='test'/>
+        <form.submit />
+      </Form>
+    `);
+
+    assert.dom('[data-test-field-for="object_foo"] [data-test-label-for]').containsText('*');
+  });
+
+  test('lets you override the required text', async function (assert) {
+    this.model = { foo: null, bar: null, validations: { foo: { presence: true } } };
+
+    await render(hbs`
+      <Form
+      @for={{this.model}}
+      @enforceRequiredFields={{true}}
+      @showRequiredIndicator={{true}}
+      @requiredText="required"
+      as |form|>
+        <form.field @for='foo' @label='test'/>
+        <form.submit />
+      </Form>
+    `);
+
+    assert.dom('[data-test-field-for="object_foo"] [data-test-label-for]').containsText('required');
+  });
 });