From f1b1b7a6b67bf2c7abceae38f40f6937ac1e17fb Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Mon, 13 Jan 2025 16:01:28 +0100
Subject: [PATCH 1/3] crate/delete: Use proper `form` element for `submit`
 button

---
 app/templates/crate/delete.hbs | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/templates/crate/delete.hbs b/app/templates/crate/delete.hbs
index 3b7bd08f26..025d9abd92 100644
--- a/app/templates/crate/delete.hbs
+++ b/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>
@@ -53,7 +53,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 +62,5 @@
         </div>
       {{/if}}
     </div>
-  </div>
+  </form>
 </div>
\ No newline at end of file

From 2807030bfe16503c1863731d6880b18a3e31b795 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Mon, 13 Jan 2025 16:18:56 +0100
Subject: [PATCH 2/3] adapters/crate: Implement `urlForDeleteRecord()` hook

---
 app/adapters/crate.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/adapters/crate.js b/app/adapters/crate.js
index 5dc3b05f12..7f9059690a 100644
--- a/app/adapters/crate.js
+++ b/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) {

From 8719a8613179580643ddcb98e3fea8c3bc8ea2c4 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Mon, 13 Jan 2025 16:19:22 +0100
Subject: [PATCH 3/3] crate/delete: Add required reason input field

---
 app/controllers/crate/delete.js         |  5 ++++-
 app/routes/crate/delete.js              |  1 +
 app/styles/crate/delete.module.css      |  9 +++++++++
 app/templates/crate/delete.hbs          | 14 ++++++++++++++
 e2e/acceptance/crate-deletion.spec.ts   |  1 +
 e2e/routes/crate/delete.spec.ts         |  3 +++
 tests/acceptance/crate-deletion-test.js |  3 ++-
 tests/routes/crate/delete-test.js       |  5 ++++-
 8 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/app/controllers/crate/delete.js b/app/controllers/crate/delete.js
index 866acfa277..cd35fa283f 100644
--- a/app/controllers/crate/delete.js
+++ b/app/controllers/crate/delete.js
@@ -9,6 +9,7 @@ export default class CrateSettingsController extends Controller {
   @service notifications;
   @service router;
 
+  @tracked reason = '';
   @tracked isConfirmed;
 
   @action toggleConfirmation() {
@@ -16,8 +17,10 @@ export default class CrateSettingsController extends Controller {
   }
 
   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) {
diff --git a/app/routes/crate/delete.js b/app/routes/crate/delete.js
index 5a19c5c9cd..0e62ac3e98 100644
--- a/app/routes/crate/delete.js
+++ b/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);
   }
 }
diff --git a/app/styles/crate/delete.module.css b/app/styles/crate/delete.module.css
index 6b73b90732..5896bfb0f0 100644
--- a/app/styles/crate/delete.module.css
+++ b/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;
diff --git a/app/templates/crate/delete.hbs b/app/templates/crate/delete.hbs
index 025d9abd92..6c1a9e317c 100644
--- a/app/templates/crate/delete.hbs
+++ b/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"
diff --git a/e2e/acceptance/crate-deletion.spec.ts b/e2e/acceptance/crate-deletion.spec.ts
index 72386cc996..ba349ce25f 100644
--- a/e2e/acceptance/crate-deletion.spec.ts
+++ b/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();
 
diff --git a/e2e/routes/crate/delete.spec.ts b/e2e/routes/crate/delete.spec.ts
index 4e67ce4a60..5bbb99e980 100644
--- a/e2e/routes/crate/delete.spec.ts
+++ b/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');
diff --git a/tests/acceptance/crate-deletion-test.js b/tests/acceptance/crate-deletion-test.js
index 72ea46dbe5..c3664f57d9 100644
--- a/tests/acceptance/crate-deletion-test.js
+++ b/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();
 
diff --git a/tests/routes/crate/delete-test.js b/tests/routes/crate/delete-test.js
index 2cd33a67bb..dcf232b86d 100644
--- a/tests/routes/crate/delete-test.js
+++ b/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');