crate/delete: Add required reason input field

Author: Turbo87

app/controllers/crate/delete.js

@@ -9,15 +9,18 @@ export default class CrateSettingsController extends Controller {
   @service notifications;
   @service router;
 
+  @tracked reason = '';
   @tracked isConfirmed;
 
   @action toggleConfirmation() {
     this.isConfirmed = !this.isConfirmed;
   }
 
   deleteTask = task(async () => {
+    let { reason } = this;
+
     try {
-      await this.model.destroyRecord();
+      await this.model.destroyRecord({ adapterOptions: { reason } });
       this.notifications.success(`Crate ${this.model.name} has been successfully deleted.`);
       this.router.transitionTo('index');
     } catch (error) {

app/routes/crate/delete.js

@@ -20,6 +20,7 @@ export default class SettingsRoute extends AuthenticatedRoute {
 
   setupController(controller) {
     super.setupController(...arguments);
+    controller.set('reason', '');
     controller.set('isConfirmed', false);
   }
 }

app/styles/crate/delete.module.css

@@ -75,6 +75,15 @@
     }
 }
 
+.reason {
+    margin-bottom: var(--space-m);
+}
+
+.reason-input {
+    composes: base-input from '../../styles/settings/tokens/new.module.css';
+    width: 100%;
+}
+
 .confirmation {
     composes: warning-block;
     display: block;

app/templates/crate/delete.hbs

@@ -36,6 +36,20 @@
       </ol>
     </div>
 
+    <div local-class="reason">
+      <h3>Reason:</h3>
+        <label>
+          <p>Please tell us why you are deleting this crate:</p>
+          <Input
+            @type="text"
+            @value={{this.reason}}
+            required={{true}}
+            local-class="reason-input"
+            data-test-reason
+          />
+        </label>
+    </div>
+
     <label local-class="confirmation">
       <Input
         @type="checkbox"

tests/acceptance/crate-deletion-test.js

@@ -1,4 +1,4 @@
-import { click, currentURL } from '@ember/test-helpers';
+import { click, currentURL, fillIn } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 
 import { setupApplicationTest } from 'crates-io/tests/helpers';
@@ -29,6 +29,7 @@ module('Acceptance | crate deletion', function (hooks) {
     assert.dom('[data-test-title]').hasText('Delete the foo crate?');
     assert.dom('[data-test-delete-button]').isDisabled();
 
+    await fillIn('[data-test-reason]', "I don't need this crate anymore");
     await click('[data-test-confirmation-checkbox]');
     assert.dom('[data-test-delete-button]').isEnabled();
 

tests/routes/crate/delete-test.js

@@ -1,4 +1,4 @@
-import { click, currentURL, waitFor } from '@ember/test-helpers';
+import { click, currentURL, fillIn, waitFor } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 
 import { defer } from 'rsvp';
@@ -58,6 +58,7 @@ module('Route: crate.delete', function (hooks) {
     assert.dom('[data-test-title]').hasText('Delete the foo crate?');
     await percySnapshot(assert);
 
+    await fillIn('[data-test-reason]', "I don't need this crate anymore");
     assert.dom('[data-test-delete-button]').isDisabled();
     await click('[data-test-confirmation-checkbox]');
     assert.dom('[data-test-delete-button]').isEnabled();
@@ -79,6 +80,7 @@ module('Route: crate.delete', function (hooks) {
     this.server.delete('/api/v1/crates/foo', deferred.promise);
 
     await visit('/crates/foo/delete');
+    await fillIn('[data-test-reason]', "I don't need this crate anymore");
     await click('[data-test-confirmation-checkbox]');
     let clickPromise = click('[data-test-delete-button]');
     await waitFor('[data-test-spinner]');
@@ -98,6 +100,7 @@ module('Route: crate.delete', function (hooks) {
     this.server.delete('/api/v1/crates/foo', payload, 422);
 
     await visit('/crates/foo/delete');
+    await fillIn('[data-test-reason]', "I don't need this crate anymore");
     await click('[data-test-confirmation-checkbox]');
     await click('[data-test-delete-button]');
     assert.strictEqual(currentURL(), '/crates/foo/delete');