diff --git a/app/styles/crate/settings.module.css b/app/styles/crate/settings.module.css
index 3d1d9917316..304ef2f7ed5 100644
--- a/app/styles/crate/settings.module.css
+++ b/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';
+}
diff --git a/app/templates/crate/settings.hbs b/app/templates/crate/settings.hbs
index 623b238a95e..5487e88876c 100644
--- a/app/templates/crate/settings.hbs
+++ b/app/templates/crate/settings.hbs
@@ -50,3 +50,11 @@
{{/each}}
+
+
Danger Zone
+
+
+
+ Delete this crate
+
+
diff --git a/e2e/acceptance/crate-deletion.spec.ts b/e2e/acceptance/crate-deletion.spec.ts
new file mode 100644
index 00000000000..72386cc9961
--- /dev/null
+++ b/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();
+ });
+});
diff --git a/tests/acceptance/crate-deletion-test.js b/tests/acceptance/crate-deletion-test.js
new file mode 100644
index 00000000000..72ea46dbe50
--- /dev/null
+++ b/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);
+ });
+});