change to use changeset and validation (#1142)

## Purpose Add maximum character limit for withdrawal justifications. ## Summary of Changes Changed `registries-states/is-public` component to use changeset and changeset validations.

Author: adlius

lib/registries/addon/components/registries-states/is-public/component.ts

@@ -11,6 +11,10 @@ import captureException, { getApiErrorMessage } from 'ember-osf-web/utils/captur
 import defaultTo from 'ember-osf-web/utils/default-to';
 import randomScientist from 'ember-osf-web/utils/random-scientist';
 
+import Changeset from 'ember-changeset';
+import lookupValidator, { ValidationObject } from 'ember-changeset-validations';
+import { validateLength } from 'ember-changeset-validations/validators';
+import { ChangesetDef } from 'ember-changeset/types';
 import styles from './styles';
 import template from './template';
 
@@ -20,41 +24,59 @@ export default class RegistrationIsPublic extends Component {
  @service toast!: Toast;
 
  registration!: Registration;
+ changeset!: ChangesetDef;
 
  scientistName?: string;
  scientistNameInput?: string = '';
- withdrawalJustification?: string = '';
  closeDropdown!: () => void;
  showModal: boolean = defaultTo(this.showModal, false);
 
+ changesetValidation: ValidationObject<Registration> = {
+ withdrawalJustification: validateLength({
+ allowBlank: true,
+ max: 2048,
+ type: 'tooLong',
+ translationArgs: {
+ description: this.intl.t('registries.overview.withdraw.withdrawal_justification'),
+ max: 2048,
+ },
+ }),
+ };
+
  @task({ withTestWaiter: true, drop: true })
  submitWithdrawal = task(function *(this: RegistrationIsPublic) {
  if (!this.registration) {
  return;
  }
 
- this.registration.setProperties({
+ this.changeset.setProperties({
  pendingWithdrawal: true,
- withdrawalJustification: this.withdrawalJustification,
  });
+ this.changeset.validate();
+ if (this.changeset.isValid) {
+ try {
+ yield this.changeset.save({});
+ } catch (e) {
+ const errorMessage = this.intl.t('registries.overview.withdraw.error');
+ captureException(e, { errorMessage });
+ this.toast.error(getApiErrorMessage(e), errorMessage);
+ throw e;
+ }
 
- try {
- yield this.registration.save();
- } catch (e) {
- const errorMessage = this.intl.t('registries.overview.withdraw.error');
- captureException(e, { errorMessage });
- this.toast.error(getApiErrorMessage(e), errorMessage);
- throw e;
- }
-
- this.toast.success(this.intl.t('registries.overview.withdraw.success'));
+ this.toast.success(this.intl.t('registries.overview.withdraw.success'));
 
- if (this.closeDropdown) {
- this.closeDropdown();
+ if (this.closeDropdown) {
+ this.closeDropdown();
+ }
  }
  });
 
  didReceiveAttrs() {
+ this.changeset = new Changeset(
+ this.registration,
+ lookupValidator(this.changesetValidation),
+ this.changesetValidation,
+ ) as ChangesetDef;
  this.setProperties({
  scientistNameInput: '',
  scientistName: randomScientist(),
@@ -65,16 +87,18 @@ export default class RegistrationIsPublic extends Component {
  'submitWithdrawal.isRunning',
  'scientistNameInput',
  'scientistName',
+ 'changeset.isInvalid',
  )
  get submitDisabled(): boolean {
  return this.submitWithdrawal.isRunning
- || (this.scientistNameInput !== this.scientistName);
+ || (this.scientistNameInput !== this.scientistName)
+ || this.changeset.isInvalid;
  }
 
  @action
  close() {
- if (this.registration.hasDirtyAttributes) {
- this.registration.rollbackAttributes();
+ if (this.changeset.isDirty) {
+ this.changeset.rollback();
  }
  this.closeDropdown();
  }

lib/registries/addon/components/registries-states/is-public/template.hbs

@@ -22,14 +22,13 @@
  <div local-class='WithdrawDropdown' data-test-withdrawal-form>
  <p>{{t 'registries.overview.withdraw.warning'}}</p>
  <p><strong>{{t 'registries.overview.withdraw.withdrawal_justification_label'}}</strong></p>
- <div class='form-group'>
- {{textarea
- class='form-control'
- rows='4'
- required=true
- value=this.withdrawalJustification
- }}
- </div>
+ <FormControls
+ @changeset={{this.changeset}}
+ as |form|>
+ <form.textarea
+ @valuePath='withdrawalJustification'
+ />
+ </FormControls>
  <p>{{t 'registries.overview.withdraw.random_scientist_x' x=this.scientistName htmlSafe=true}}</p>
  <div local-class='Container'>
  <div>

translations/en-us.yml

@@ -1266,6 +1266,7 @@ registries:
  no_justification: 'None given'
  state: Withdrawn
  withdraw:
+ withdrawal_justification: 'Withdrawal justification'
  withdraw: 'Withdraw registration'
  withdrawal_justification_label: 'Please provide your justification for withdrawing this registration.'
  random_scientist_x: 'Type <strong>{x}</strong> below and click Withdraw Registration if you are sure you want to continue.'