Add "Delete this crate" button to the crate settings page

app/styles/crate/settings.module.css

@@ -48,3 +48,7 @@
 .remove-button {
     composes: small yellow-button from '../shared/buttons.module.css';
 }
+
+.delete-button {
+    composes: red-button from '../shared/buttons.module.css';
+}

app/templates/crate/settings.hbs

@@ -50,3 +50,11 @@
     </div>
   {{/each}}
 </div>
+
+<h2>Danger Zone</h2>
+
+<div>
+  <LinkTo @route="crate.delete" local-class="delete-button" data-test-delete-button>
+    Delete this crate
+  </LinkTo>
+</div>

e2e/acceptance/crate-deletion.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@/e2e/helper';
+
+test.describe('Acceptance | crate deletion', { tag: '@acceptance' }, () => {
+  test('happy path', async ({ page, mirage }) => {
+    await mirage.addHook(server => {
+      let user = server.create('user');
+      authenticateAs(user);
+
+      let crate = server.create('crate', { name: 'foo' });
+      server.create('version', { crate });
+      server.create('crate-ownership', { crate, user });
+    });
+
+    await page.goto('/crates/foo');
+    await expect(page).toHaveURL('/crates/foo');
+    await expect(page.locator('[data-test-settings-tab] a')).toBeVisible();
+
+    await page.click('[data-test-settings-tab] a');
+    await expect(page).toHaveURL('/crates/foo/settings');
+    await expect(page.locator('[data-test-delete-button]')).toBeVisible();
+
+    await page.click('[data-test-delete-button]');
+    await expect(page).toHaveURL('/crates/foo/delete');
+    await expect(page.locator('[data-test-title]')).toHaveText('Delete the foo crate?');
+    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();
+
+    await page.click('[data-test-delete-button]');
+    await expect(page).toHaveURL('/');
+
+    let message = 'Crate foo has been successfully deleted.';
+    await expect(page.locator('[data-test-notification-message="success"]')).toHaveText(message);
+
+    let crate = await page.evaluate(() => server.schema.crates.findBy({ name: 'foo' }));
+    expect(crate).toBeNull();
+  });
+});

tests/acceptance/crate-deletion-test.js

@@ -0,0 +1,44 @@
+import { click, currentURL } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { setupApplicationTest } from 'crates-io/tests/helpers';
+
+import { visit } from '../helpers/visit-ignoring-abort';
+
+module('Acceptance | crate deletion', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('happy path', async function (assert) {
+    let user = this.server.create('user');
+    this.authenticateAs(user);
+
+    let crate = this.server.create('crate', { name: 'foo' });
+    this.server.create('version', { crate });
+    this.server.create('crate-ownership', { crate, user });
+
+    await visit('/crates/foo');
+    assert.strictEqual(currentURL(), '/crates/foo');
+    assert.dom('[data-test-settings-tab] a').exists();
+
+    await click('[data-test-settings-tab] a');
+    assert.strictEqual(currentURL(), '/crates/foo/settings');
+    assert.dom('[data-test-delete-button]').exists();
+
+    await click('[data-test-delete-button]');
+    assert.strictEqual(currentURL(), '/crates/foo/delete');
+    assert.dom('[data-test-title]').hasText('Delete the foo crate?');
+    assert.dom('[data-test-delete-button]').isDisabled();
+
+    await click('[data-test-confirmation-checkbox]');
+    assert.dom('[data-test-delete-button]').isEnabled();
+
+    await click('[data-test-delete-button]');
+    assert.strictEqual(currentURL(), '/');
+
+    let message = 'Crate foo has been successfully deleted.';
+    assert.dom('[data-test-notification-message="success"]').hasText(message);
+
+    crate = this.server.schema.crates.findBy({ name: 'foo' });
+    assert.strictEqual(crate, null);
+  });
+});