devex: Refactor workflow action menus into component (#2776)

- Adds new `<btrix-workflow-action-menu>` component that consolidates
action menu from workflow list and detail views + update Storybook docs.
- Adds `.menu-item-success` and `.menu-item-danger` classes + update
background color on hover and focus to match Figma design.\

Author: SuaYoo

frontend/src/__mocks__/api/orgs/[id]/crawlconfigs/[id].js

@@ -0,0 +1,77 @@
+import user from "@/__mocks__/api/users/me";
+
+// API v1.18.0
+export default {
+  name: "",
+  description: null,
+  created: "2025-01-23T06:23:32Z",
+  createdBy: user.id,
+  modified: "2025-01-28T19:53:15Z",
+  modifiedBy: user.id,
+  autoAddCollections: [],
+  inactive: false,
+  rev: 2,
+  crawlAttemptCount: 3,
+  crawlCount: 3,
+  crawlSuccessfulCount: 3,
+  totalSize: 61275,
+  lastCrawlId: "manual-20250205210838-a5e3cf23-f3c",
+  lastCrawlStartTime: "2025-02-05T21:08:38Z",
+  lastStartedBy: user.id,
+  lastCrawlTime: "2025-02-05T21:09:20Z",
+  lastCrawlState: "complete",
+  lastCrawlSize: 61275,
+  lastRun: "2025-02-05T21:09:20Z",
+  isCrawlRunning: false,
+  crawlFilenameTemplate: null,
+  id: "a5f3cf23-f3ce-4ceb-a232-f2946185370f",
+  schedule: "",
+  jobType: "custom",
+  config: {
+    seeds: null,
+    seedFileId: null,
+    scopeType: "page",
+    include: null,
+    exclude: [],
+    depth: -1,
+    limit: null,
+    extraHops: 0,
+    lang: "en",
+    blockAds: false,
+    behaviorTimeout: null,
+    pageLoadTimeout: null,
+    pageExtraDelay: null,
+    postLoadDelay: null,
+    workers: null,
+    headless: null,
+    generateWACZ: null,
+    combineWARC: null,
+    useSitemap: false,
+    failOnFailedSeed: false,
+    logging: null,
+    behaviors: "autoscroll,autoplay,autofetch,siteSpecific",
+    customBehaviors: [],
+    userAgent: "",
+    selectLinks: ["a[href]->href"],
+    clickSelector: "a",
+  },
+  tags: [],
+  crawlTimeout: 0,
+  maxCrawlSize: 0,
+  scale: 1,
+  browserWindows: 4,
+  oid: "x_example_org_id_x",
+  profileid: null,
+  crawlerChannel: "beta",
+  proxyId: null,
+  firstSeed: "https://example.com/",
+  seedCount: 1,
+  lastCrawlStopping: false,
+  lastCrawlShouldPause: false,
+  lastCrawlPausedAt: null,
+  lastCrawlPausedExpiry: null,
+  profileName: null,
+  createdByName: user.name,
+  modifiedByName: user.name,
+  lastStartedByName: user.name,
+};

frontend/src/components/ui/overflow-dropdown.ts

@@ -11,6 +11,7 @@ import {
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import { TailwindElement } from "@/classes/TailwindElement";
+import type { WorkflowActionMenu } from "@/features/crawl-workflows/workflow-action-menu/workflow-action-menu";
 
 /**
  * Dropdown for additional actions.
@@ -40,15 +41,22 @@ export class OverflowDropdown extends TailwindElement {
   @query("sl-dropdown")
   private readonly dropdown?: SlDropdown;
 
-  @queryAssignedElements({ selector: "sl-menu", flatten: true })
-  private readonly menu!: SlMenu[];
+  @queryAssignedElements({
+    selector: "sl-menu, btrix-workflow-action-menu",
+    flatten: true,
+  })
+  private readonly menu!: (SlMenu | WorkflowActionMenu)[];
 
   render() {
     return html`
       <sl-dropdown
         ?disabled=${!this.hasMenuItems}
         hoist
         distance=${ifDefined(this.raised ? "4" : undefined)}
+        @btrix-select=${() => {
+          void this.dropdown?.hide();
+          this.dropdown?.focusOnTrigger();
+        }}
       >
         <btrix-button
           slot="trigger"

frontend/src/events/btrix-select.ts

@@ -0,0 +1,7 @@
+export type BtrixSelectEvent<T = unknown> = CustomEvent<{ item: T }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    "btrix-select": BtrixSelectEvent;
+  }
+}

frontend/src/features/crawl-workflows/index.ts

@@ -5,6 +5,7 @@ import("./link-selector-table");
 import("./new-workflow-dialog");
 import("./queue-exclusion-form");
 import("./queue-exclusion-table");
+import("./workflow-action-menu/workflow-action-menu");
 import("./workflow-editor");
 import("./workflow-list");
 import("./workflow-schedule-filter");

frontend/src/features/crawl-workflows/workflow-action-menu/index.ts

@@ -0,0 +1 @@
+export { WorkflowActionMenu } from "./workflow-action-menu";

frontend/src/features/crawl-workflows/workflow-action-menu/types.ts

@@ -0,0 +1,14 @@
+import type { BtrixSelectEvent } from "@/events/btrix-select";
+
+export enum Action {
+  Run = "run",
+  TogglePauseResume = "togglePauseResume",
+  Stop = "stop",
+  Cancel = "cancel",
+  EditBrowserWindows = "editBrowserWindows",
+  EditExclusions = "editExclusions",
+  Duplicate = "duplicate",
+  Delete = "delete",
+}
+
+export type BtrixSelectActionEvent = BtrixSelectEvent<{ action: Action }>;