Merge pull request #10380 from Turbo87/delete-reason-input

crate/delete: Add required reason input field

Author: Turbo87

app/adapters/crate.js

@@ -25,6 +25,18 @@ export default class CrateAdapter extends ApplicationAdapter {
     return `${baseUrl}/${crateName}`;
   }
 
+  /** Adds a `reason` query parameter to the URL, if set in the `adapterOptions`. */
+  urlForDeleteRecord(id, modelName, snapshot) {
+    let url = super.urlForDeleteRecord(...arguments);
+
+    let reason = snapshot.adapterOptions.reason;
+    if (reason) {
+      url += `?reason=${encodeURIComponent(reason)}`;
+    }
+
+    return url;
+  }
+
   groupRecordsForFindMany(store, snapshots) {
     let result = [];
     for (let i = 0; i < snapshots.length; i += BULK_REQUEST_GROUP_SIZE) {

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

@@ -1,5 +1,5 @@
 <div local-class="wrapper">
-  <div local-class="content">
+  <form local-class="content" {{on "submit" (prevent-default (perform this.deleteTask))}}>
     <h1 local-class="title" data-test-title>Delete the {{@model.name}} crate?</h1>
 
     <p>Are you sure you want to delete the crate "{{@model.name}}"?</p>
@@ -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"
@@ -53,7 +67,6 @@
         disabled={{or (not this.isConfirmed) this.deleteTask.isRunning}}
         local-class="delete-button"
         data-test-delete-button
-        {{on "click" (perform this.deleteTask)}}
       >
         Delete this crate
       </button>
@@ -63,5 +76,5 @@
         </div>
       {{/if}}
     </div>
-  </div>
+  </form>
 </div>

e2e/acceptance/crate-deletion.spec.ts

@@ -24,6 +24,7 @@ test.describe('Acceptance | crate deletion', { tag: '@acceptance' }, () => {
     await expect(page.locator('[data-test-title]')).toHaveText('Delete the foo crate?');
     await expect(page.locator('[data-test-delete-button]')).toBeDisabled();
 
+    await page.fill('[data-test-reason]', "I don't need this crate anymore");
     await page.click('[data-test-confirmation-checkbox]');
     await expect(page.locator('[data-test-delete-button]')).toBeEnabled();
 

e2e/routes/crate/delete.spec.ts

@@ -50,6 +50,7 @@ test.describe('Route: crate.delete', { tag: '@routes' }, () => {
     await expect(page.locator('[data-test-title]')).toHaveText('Delete the foo crate?');
     await percy.snapshot();
 
+    await page.fill('[data-test-reason]', "I don't need this crate anymore");
     await expect(page.locator('[data-test-delete-button]')).toBeDisabled();
     await page.click('[data-test-confirmation-checkbox]');
     await expect(page.locator('[data-test-delete-button]')).toBeEnabled();
@@ -72,6 +73,7 @@ test.describe('Route: crate.delete', { tag: '@routes' }, () => {
     });
 
     await page.goto('/crates/foo/delete');
+    await page.fill('[data-test-reason]', "I don't need this crate anymore");
     await page.click('[data-test-confirmation-checkbox]');
     await page.click('[data-test-delete-button]');
     await expect(page.locator('[data-test-spinner]')).toBeVisible();
@@ -90,6 +92,7 @@ test.describe('Route: crate.delete', { tag: '@routes' }, () => {
     });
 
     await page.goto('/crates/foo/delete');
+    await page.fill('[data-test-reason]', "I don't need this crate anymore");
     await page.click('[data-test-confirmation-checkbox]');
     await page.click('[data-test-delete-button]');
     await expect(page).toHaveURL('/crates/foo/delete');

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