From 25c5d9de7e13b106d6ee073be942cb1e7923dcd7 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Thu, 5 Jun 2025 14:06:07 +0200 Subject: [PATCH] crate/settings: Hide "Add Owner" form behind "Add Owner" button This form does not need a dedicated header and does not need to be visible all the time. This commit hides it until the user explicitly clicks the "Add Owner" button. This frees up space on the page to add the list of "Trusted Publishing" configurations. --- app/controllers/crate/settings.js | 9 ++++++++ app/styles/crate/settings.module.css | 7 ++++++ app/templates/crate/settings.hbs | 25 ++++++++++++--------- e2e/acceptance/settings/add-owner.spec.ts | 4 ++++ tests/acceptance/settings/add-owner-test.js | 4 ++++ tests/routes/crate/settings-test.js | 3 +-- 6 files changed, 40 insertions(+), 12 deletions(-) diff --git a/app/controllers/crate/settings.js b/app/controllers/crate/settings.js index f421e246d0f..1fd26ab7200 100644 --- a/app/controllers/crate/settings.js +++ b/app/controllers/crate/settings.js @@ -1,5 +1,7 @@ import Controller from '@ember/controller'; +import { action } from '@ember/object'; import { service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; import { task } from 'ember-concurrency'; @@ -8,6 +10,12 @@ export default class CrateSettingsController extends Controller { crate = null; username = ''; + @tracked addOwnerVisible = false; + + @action showAddOwnerForm() { + this.addOwnerVisible = true; + this.username = ''; + } addOwnerTask = task(async () => { const username = this.username; @@ -20,6 +28,7 @@ export default class CrateSettingsController extends Controller { } else { this.notifications.success(`An invite has been sent to ${username}`); } + this.addOwnerVisible = false; } catch (error) { let detail = error.errors?.[0]?.detail; if (detail && !detail.startsWith('{')) { diff --git a/app/styles/crate/settings.module.css b/app/styles/crate/settings.module.css index 6ace00a8453..699bbff540d 100644 --- a/app/styles/crate/settings.module.css +++ b/app/styles/crate/settings.module.css @@ -1,3 +1,9 @@ +.owners-header { + display: flex; + justify-content: space-between; + align-items: center; +} + .email-form { display: flex; justify-content: space-between; @@ -8,6 +14,7 @@ background-color: light-dark(white, #141413); border-radius: var(--space-3xs); box-shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321); + margin-bottom: var(--space-s); } .email-input-label { diff --git a/app/templates/crate/settings.hbs b/app/templates/crate/settings.hbs index 4d3b5a9cefa..29eaa2cacd6 100644 --- a/app/templates/crate/settings.hbs +++ b/app/templates/crate/settings.hbs @@ -2,17 +2,22 @@ -

Add Owner

- -
- - - -
+
+

Owners

+ {{#unless this.addOwnerVisible}} + + {{/unless}} +
-

Owners

+{{#if this.addOwnerVisible}} +
+ + + +
+{{/if}}
{{#each this.crate.owner_team as |team|}} diff --git a/e2e/acceptance/settings/add-owner.spec.ts b/e2e/acceptance/settings/add-owner.spec.ts index 43f53cbdf0f..fb975266dc3 100644 --- a/e2e/acceptance/settings/add-owner.spec.ts +++ b/e2e/acceptance/settings/add-owner.spec.ts @@ -19,12 +19,14 @@ test.describe('Acceptance | Settings | Add Owner', { tag: '@acceptance' }, () => test('attempting to add owner without username', async ({ page }) => { await page.goto('/crates/nanomsg/settings'); + await page.click('[data-test-add-owner-button]'); await page.fill('input[name="username"]', ''); await expect(page.locator('[data-test-save-button]')).toBeDisabled(); }); test('attempting to add non-existent owner', async ({ page }) => { await page.goto('/crates/nanomsg/settings'); + await page.click('[data-test-add-owner-button]'); await page.fill('input[name="username"]', 'spookyghostboo'); await page.click('[data-test-save-button]'); @@ -39,6 +41,7 @@ test.describe('Acceptance | Settings | Add Owner', { tag: '@acceptance' }, () => msw.db.user.create({ name: 'iain8' }); await page.goto('/crates/nanomsg/settings'); + await page.click('[data-test-add-owner-button]'); await page.fill('input[name="username"]', 'iain8'); await page.click('[data-test-save-button]'); @@ -54,6 +57,7 @@ test.describe('Acceptance | Settings | Add Owner', { tag: '@acceptance' }, () => msw.db.team.create({ org: 'rust-lang', name: 'crates-io' }); await page.goto('/crates/nanomsg/settings'); + await page.click('[data-test-add-owner-button]'); await page.fill('input[name="username"]', 'github:rust-lang:crates-io'); await page.click('[data-test-save-button]'); diff --git a/tests/acceptance/settings/add-owner-test.js b/tests/acceptance/settings/add-owner-test.js index d1cc9051707..b7810aa0770 100644 --- a/tests/acceptance/settings/add-owner-test.js +++ b/tests/acceptance/settings/add-owner-test.js @@ -30,6 +30,7 @@ module('Acceptance | Settings | Add Owner', function (hooks) { prepare(this); await visit('/crates/nanomsg/settings'); + await click('[data-test-add-owner-button]'); await fillIn('input[name="username"]', ''); assert.dom('[data-test-save-button]').isDisabled(); }); @@ -38,6 +39,7 @@ module('Acceptance | Settings | Add Owner', function (hooks) { prepare(this); await visit('/crates/nanomsg/settings'); + await click('[data-test-add-owner-button]'); await fillIn('input[name="username"]', 'spookyghostboo'); await click('[data-test-save-button]'); @@ -54,6 +56,7 @@ module('Acceptance | Settings | Add Owner', function (hooks) { this.db.user.create({ name: 'iain8' }); await visit('/crates/nanomsg/settings'); + await click('[data-test-add-owner-button]'); await fillIn('input[name="username"]', 'iain8'); await click('[data-test-save-button]'); @@ -69,6 +72,7 @@ module('Acceptance | Settings | Add Owner', function (hooks) { this.db.team.create({ org: 'rust-lang', name: 'crates-io' }); await visit('/crates/nanomsg/settings'); + await click('[data-test-add-owner-button]'); await fillIn('input[name="username"]', 'github:rust-lang:crates-io'); await click('[data-test-save-button]'); diff --git a/tests/routes/crate/settings-test.js b/tests/routes/crate/settings-test.js index 4147d45db9f..77e6e7d52df 100644 --- a/tests/routes/crate/settings-test.js +++ b/tests/routes/crate/settings-test.js @@ -46,8 +46,7 @@ module('Route | crate.settings', hooks => { await visit(`/crates/${crate.name}/settings`); assert.strictEqual(currentURL(), `/crates/${crate.name}/settings`); - // This is the Add Owner button. - assert.dom('[data-test-save-button]').exists(); + assert.dom('[data-test-add-owner-button]').exists(); assert.dom('[data-test-owners]').exists(); assert.dom(`[data-test-owner-user="${user.login}"]`).exists(); assert.dom('[data-test-remove-owner-button]').exists();