VersionList::Row: Replace yank button with a dropdown menu

Author: eth3lbert

app/components/version-list/row.hbs

@@ -117,7 +117,18 @@
     {{/if}}
   </div>
 
-  <PrivilegedAction @userAuthorised={{this.isOwner}}>
-    <YankButton @version={{@version}} local-class="yank-button" />
-  </PrivilegedAction>
+  <Dropdown local-class="dropdown" data-test-actions-menu as |dd|>
+    <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-actions-toggle>
+      {{svg-jar "ellipsis-circle" local-class="icon"}}
+      <span class="sr-only">Actions</span>
+    </dd.Trigger>
+
+    <dd.Menu local-class="menu" as |menu|>
+      <menu.Item>
+        <PrivilegedAction @userAuthorised={{this.isOwner}}>
+          <YankButton @version={{@version}} class="button-reset" local-class="menu-button" />
+        </PrivilegedAction>
+      </menu.Item>
+    </dd.Menu>
+  </Dropdown>
 </div>

app/components/version-list/row.module.css

@@ -235,11 +235,37 @@
     margin-top: var(--space-2xs);
 }
 
-.yank-button {
-    position: relative;
-    margin-left: var(--space-xs);
+.dropdown {
+    line-height: 1rem;
+}
 
-    @media only screen and (max-width: 550px) {
-        display: none;
+.icon {
+    width: 1.4em;
+    height: auto;
+}
+
+.trigger {
+    background: none;
+    border: none;
+    padding: 0;
+}
+
+.menu {
+    right: 0;
+    min-width: max-content;
+}
+
+.menu-button {
+    align-items: center;
+    gap: var(--space-2xs);
+    cursor: pointer;
+    text-transform: capitalize;
+
+    /* This duplicates the styles in .button[disabled] as there's no
+     * obvious way to compose them, given the target selectors. */
+    &[disabled] {
+        background: linear-gradient(to bottom, var(--bg-color-top-light) 0%, var(--bg-color-bottom-light) 100%);
+        color: var(--disabled-text-color) !important;
+        cursor: not-allowed;
     }
 }

app/components/yank-button.hbs

@@ -1,7 +1,6 @@
 {{#if @version.yanked}}
   <button
     type="button"
-    class="button button--small"
     ...attributes
     data-test-version-unyank-button={{@version.num}}
     disabled={{@version.unyankTask.isRunning}}
@@ -16,7 +15,6 @@
 {{else}}
   <button
     type="button"
-    class="button button--small"
     ...attributes
     data-test-version-yank-button={{@version.num}}
     disabled={{@version.yankTask.isRunning}}

e2e/acceptance/sudo.spec.ts

@@ -52,6 +52,8 @@ test.describe('Acceptance | sudo', { tag: '@acceptance' }, () => {
     await expect(page.locator('[data-test-disable-admin-actions]')).toHaveCount(0);
     await expect(page.locator('[data-test-enable-admin-actions]')).toBeVisible();
 
+    await page.locator('[data-test-actions-toggle]').click();
+
     // Test that the fieldset is present and disabled.
     await expect(page.locator('[data-test-placeholder-fieldset]')).toBeVisible();
     // NOTE: `toBeDisabled()` is not working as expected because the element is not a form control element.
@@ -93,6 +95,8 @@ test.describe('Acceptance | sudo', { tag: '@acceptance' }, () => {
     });
     expect(seen).toBe(1);
 
+    await page.locator('[data-test-actions-toggle]').click();
+
     // Test that the fieldset is not present.
     await expect(page.locator('[data-test-placeholder-fieldset]')).toHaveCount(0);
     await expect(page.locator('[data-test-version-yank-button="0.1.0"]')).toBeVisible();
@@ -106,6 +110,8 @@ test.describe('Acceptance | sudo', { tag: '@acceptance' }, () => {
     await page.locator('[data-test-user-menu]').getByRole('button').click();
     await page.getByRole('button', { name: 'Enable admin actions' }).click();
 
+    await page.locator('[data-test-actions-toggle]').click();
+
     const yankButton = page.locator('[data-test-version-yank-button="0.1.0"]');
     const unyankButton = page.locator('[data-test-version-unyank-button="0.1.0"]');
 

e2e/acceptance/versions.spec.ts

@@ -52,6 +52,8 @@ test.describe('Acceptance | crate versions page', { tag: '@acceptance' }, () =>
     await expect(v020).not.toHaveClass(/.*latest/);
     await expect(v020).not.toHaveClass(/.yanked/);
 
+    await v021.locator('[data-test-actions-toggle]').click();
+
     // yanking
     await page.locator('[data-test-version-yank-button="0.2.1"]').click();
     await expect(v021).not.toHaveClass(/.*latest/);

public/assets/ellipsis-circle.svg

@@ -57,6 +57,8 @@ module('Acceptance | sudo', function (hooks) {
     assert.dom('[data-test-disable-admin-actions]').doesNotExist();
     assert.dom('[data-test-enable-admin-actions]').exists();
 
+    await click('[data-test-actions-toggle]');
+
     // Test that the fieldset is present and disabled.
     assert.dom('[data-test-placeholder-fieldset]').exists().isDisabled();
 
@@ -90,6 +92,8 @@ module('Acceptance | sudo', function (hooks) {
     }
     assert.strictEqual(seen, 1);
 
+    await click('[data-test-actions-toggle]');
+
     // Test that the fieldset is not present.
     assert.dom('[data-test-placeholder-fieldset]').doesNotExist();
     assert.dom('[data-test-version-yank-button="0.1.0"]').exists();
@@ -101,6 +105,8 @@ module('Acceptance | sudo', function (hooks) {
     await visit('/crates/foo/versions');
     await click('[data-test-enable-admin-actions]');
 
+    await click('[data-test-actions-toggle]');
+
     await click('[data-test-version-yank-button="0.1.0"]');
 
     await waitFor('[data-test-version-unyank-button="0.1.0"]');

tests/acceptance/sudo-test.js

@@ -57,6 +57,8 @@ module('Acceptance | crate versions page', function (hooks) {
       .hasNoClass(/.*latest/)
       .hasNoClass(/.yanked/);
 
+    await click('[data-test-actions-toggle]');
+
     // yanking
     await click('[data-test-version-yank-button="0.2.1"]');
     assert