From fe52b87e0fc669fcc7ac026b7f59489fa994fa57 Mon Sep 17 00:00:00 2001
From: Baylee Swenson <baylee@cos.io>
Date: Thu, 25 Jul 2019 11:47:26 -0400
Subject: [PATCH] Get validations to work, update type

---
 .../addon/docs/components/form-controls/controller.ts    | 9 +++++----
 .../components/form-controls/demo-default/template.hbs   | 2 +-
 .../addon/docs/components/form-controls/route.ts         | 7 ++++++-
 .../addon/docs/components/form-controls/template.md      | 7 +++----
 .../addon/docs/components/form-controls/validation.ts    | 3 +++
 lib/handbook/addon/docs/template.hbs                     | 2 +-
 lib/handbook/addon/routes.js                             | 2 +-
 .../addon/components/form-controls/component.ts          | 2 +-
 .../validated-input/x-input-wrapper/component.ts         | 3 ++-
 types/ember-changeset-validations/index.d.ts             | 2 +-
 10 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/lib/handbook/addon/docs/components/form-controls/controller.ts b/lib/handbook/addon/docs/components/form-controls/controller.ts
index 87145cd5b52..221e0d7edcd 100644
--- a/lib/handbook/addon/docs/components/form-controls/controller.ts
+++ b/lib/handbook/addon/docs/components/form-controls/controller.ts
@@ -3,8 +3,6 @@ import { reads } from '@ember-decorators/object/computed';
 import { service } from '@ember-decorators/service';
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
-// import Changeset from 'ember-changeset';
-// import lookupValidator from 'ember-changeset-validations';
 import { ChangesetDef } from 'ember-changeset/types';
 import DS from 'ember-data';
 import Toast from 'ember-toastr/services/toast';
@@ -32,7 +30,10 @@ export default class FormController extends Controller {
 
     @action
     submit() {
-        this.changeset.save({});
-        this.toast.success('Saved!');
+        this.changeset.validate();
+        if (this.changeset.isValid) {
+            this.changeset.save({});
+            this.toast.success('Saved!');
+        }
     }
 }
diff --git a/lib/handbook/addon/docs/components/form-controls/demo-default/template.hbs b/lib/handbook/addon/docs/components/form-controls/demo-default/template.hbs
index 69228cd78c8..c6c3ef4adcf 100644
--- a/lib/handbook/addon/docs/components/form-controls/demo-default/template.hbs
+++ b/lib/handbook/addon/docs/components/form-controls/demo-default/template.hbs
@@ -2,7 +2,7 @@
     <demo.example @name='form-controls.demo-default.hbs'>
         <form {{action this.submit on='submit'}}>
             <FormControls
-                @changeset={{changeset this.node this.validation}}
+                @changeset={{this.changeset}}
                 as |form|
             >
                 <form.text
diff --git a/lib/handbook/addon/docs/components/form-controls/route.ts b/lib/handbook/addon/docs/components/form-controls/route.ts
index 226e650f25c..f53d907f4ee 100644
--- a/lib/handbook/addon/docs/components/form-controls/route.ts
+++ b/lib/handbook/addon/docs/components/form-controls/route.ts
@@ -1,6 +1,7 @@
 import { computed } from '@ember-decorators/object';
 import Route from '@ember/routing/route';
 import Changeset from 'ember-changeset';
+import lookupValidator from 'ember-changeset-validations';
 import { task } from 'ember-concurrency';
 import ConfirmationMixin from 'ember-onbeforeunload/mixins/confirmation';
 
@@ -18,7 +19,11 @@ export default class FormControls extends Route.extend(ConfirmationMixin, {
     }
 
     setupController(controller: FormController) {
-        const changeset = new Changeset(controller.node, controller.validation);
+        const model = {
+            title: '',
+            description: '',
+        };
+        const changeset = new Changeset(model, lookupValidator(controller.validation), controller.validation);
         controller.set('changeset', changeset);
     }
 
diff --git a/lib/handbook/addon/docs/components/form-controls/template.md b/lib/handbook/addon/docs/components/form-controls/template.md
index 502b2822438..6924fe829ed 100644
--- a/lib/handbook/addon/docs/components/form-controls/template.md
+++ b/lib/handbook/addon/docs/components/form-controls/template.md
@@ -1,11 +1,11 @@
-# validated-form-controls
+# form-controls
 Takes a changeset and yields validated form components
 
 ### Params
 The only param that `<FormControls />` takes is a changeset for the current form being created
 
 ### Yielded hash
-When invoked in a form, `<ValidatedFormControls />` yields a hash with the following keys:
+When invoked in a form, `<FormControls />` yields a hash with the following keys:
 
 * Several `validated-model-form/*` components with common arguments (`model`, `changeset`, `shouldShowMessages`, `disabled`) already bound:
     * `checkbox`
@@ -18,6 +18,5 @@ When invoked in a form, `<ValidatedFormControls />` yields a hash with the follo
 ## Demo: Default
 {{docs/components/form-controls/demo-default
     submit=(action this.submit)
-    node=this.node
-    validation=this.validation
+    changeset=this.changeset
 }}
diff --git a/lib/handbook/addon/docs/components/form-controls/validation.ts b/lib/handbook/addon/docs/components/form-controls/validation.ts
index 5345b83182d..a85e1ca3414 100644
--- a/lib/handbook/addon/docs/components/form-controls/validation.ts
+++ b/lib/handbook/addon/docs/components/form-controls/validation.ts
@@ -6,4 +6,7 @@ export const nodeValidation: ValidationObject<NodeModel> = {
     title: [
         validatePresence(true),
     ],
+    description: [
+        validatePresence(true),
+    ],
 };
diff --git a/lib/handbook/addon/docs/template.hbs b/lib/handbook/addon/docs/template.hbs
index 62a17b6f89d..a619960b2b4 100644
--- a/lib/handbook/addon/docs/template.hbs
+++ b/lib/handbook/addon/docs/template.hbs
@@ -23,6 +23,7 @@
         <nav.item @label='contributor-list' @route='docs.components.contributor-list' />
         <nav.item @label='copyable-text' @route='docs.components.copyable-text' />
         <nav.item @label='delete-button' @route='docs.components.delete-button' />
+        <nav.item @label='form-controls' @route='docs.components.form-controls' />
         <nav.item @label='osf-link' @route='docs.components.osf-link' />
         <nav.item @label='institutions-widget' @route='docs.components.institutions-widget' />
         <nav.item @label='loading-indicator' @route='docs.components.loading-indicator' />
@@ -33,7 +34,6 @@
         <nav.item @label='panel' @route='docs.components.panel' />
         <nav.item @label='placeholder' @route='docs.components.placeholder' />
         <nav.item @label='tags-widget' @route='docs.components.tags-widget' />
-        <nav.item @label='validated-form-controls' @route='docs.components.validated-form-controls' />
         <nav.item @label='validated-model-form' @route='docs.components.validated-model-form' />
     </viewer.nav>
 
diff --git a/lib/handbook/addon/routes.js b/lib/handbook/addon/routes.js
index 5f6c4989639..14cb7406679 100644
--- a/lib/handbook/addon/routes.js
+++ b/lib/handbook/addon/routes.js
@@ -28,6 +28,7 @@ export default buildRoutes(function() {
             this.route('contributor-list');
             this.route('copyable-text');
             this.route('delete-button');
+            this.route('form-controls');
             this.route('osf-link');
             this.route('institutions-widget');
             this.route('loading-indicator');
@@ -38,7 +39,6 @@ export default buildRoutes(function() {
             this.route('panel');
             this.route('placeholder');
             this.route('tags-widget');
-            this.route('validated-form-controls');
             this.route('validated-model-form');
         });
 
diff --git a/lib/osf-components/addon/components/form-controls/component.ts b/lib/osf-components/addon/components/form-controls/component.ts
index 005753d96ec..3e283ff095c 100644
--- a/lib/osf-components/addon/components/form-controls/component.ts
+++ b/lib/osf-components/addon/components/form-controls/component.ts
@@ -9,5 +9,5 @@ import template from './template';
 export default class FormControls extends Component {
     // Optional arguments
     disabled: boolean = defaultTo(this.disabled, false);
-    shouldShowMessages: boolean = false;
+    shouldShowMessages: boolean = true;
 }
diff --git a/lib/osf-components/addon/components/validated-input/x-input-wrapper/component.ts b/lib/osf-components/addon/components/validated-input/x-input-wrapper/component.ts
index 1374778b754..4aa1ed202e0 100644
--- a/lib/osf-components/addon/components/validated-input/x-input-wrapper/component.ts
+++ b/lib/osf-components/addon/components/validated-input/x-input-wrapper/component.ts
@@ -19,6 +19,7 @@ export default class ValidatedXInputWrapper extends Component {
     // Optional arguments
     errors?: string;
     label?: string;
+    id?: string;
 
     @className
     @equal('validationStatus', ValidationStatus.HasError)
@@ -34,6 +35,6 @@ export default class ValidatedXInputWrapper extends Component {
 
     @computed('elementId', 'valuePath')
     get inputElementId() {
-        return `${this.elementId}__${this.valuePath}`;
+        return this.id ? this.id : `${this.elementId}__${this.valuePath}`;
     }
 }
diff --git a/types/ember-changeset-validations/index.d.ts b/types/ember-changeset-validations/index.d.ts
index cccbf50c3e2..393748b51d7 100644
--- a/types/ember-changeset-validations/index.d.ts
+++ b/types/ember-changeset-validations/index.d.ts
@@ -3,7 +3,7 @@ import { validator } from 'ember-validations';
 
 export type ValidatorFunction = (key: string, result: any) => string | string[] | true;
 
-export function lookupValidator(validator: validatorObject): ValidatorFunc;
+export default function lookupValidator(validator: validatorObject): ValidatorFunc;
 
 // FIXME: Below doesn't actually work, but setting it aside for now to get actual
 // functionality implemented. James is upgrading types a bit, and the following