crate/settings: Hide "Add Owner" form behind "Add Owner" button (#11301)

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.

Author: Turbo87

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('{')) {

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 {

app/templates/crate/settings.hbs

@@ -2,17 +2,22 @@
 
 <CrateHeader @crate={{this.crate}} />
 
-<h2>Add Owner</h2>
-
-<form local-class="email-form" {{on "submit" (prevent-default (perform this.addOwnerTask))}}>
-  <label local-class="email-input-label" for='new-owner-username'>
-    Username
-  </label>
-  <Input @type="text" id="new-owner-username" @value={{this.username}} placeholder="Username" local-class="email-input" name="username" />
-  <button type="submit" disabled={{not this.username}} class="button button--small" data-test-save-button>Save</button>
-</form>
+<div local-class="owners-header">
+  <h2>Owners</h2>
+  {{#unless this.addOwnerVisible}}
+    <button type="button" class="button button--small" data-test-add-owner-button {{on "click" this.showAddOwnerForm}}>Add Owner</button>
+  {{/unless}}
+</div>
 
-<h2>Owners</h2>
+{{#if this.addOwnerVisible}}
+  <form local-class="email-form" {{on "submit" (prevent-default (perform this.addOwnerTask))}}>
+    <label local-class="email-input-label" for='new-owner-username'>
+      Username
+    </label>
+    <Input @type="text" id="new-owner-username" @value={{this.username}} placeholder="Username" local-class="email-input" name="username" />
+    <button type="submit" disabled={{not this.username}} class="button button--small" data-test-save-button>Save</button>
+  </form>
+{{/if}}
 
 <div local-class='list' data-test-owners>
   {{#each this.crate.owner_team as |team|}}

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

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

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