[6.x] Show workflow stage type icons in the picker

CHANGELOG.md

@@ -18,6 +18,7 @@
 - Breadcrumb separators are now lighter. ([#20612](https://github.com/craftcms/cms/pull/20612))
 - Pages no longer show breadcrumbs when the only one would be the current page, such as the Dashboard. ([#20612](https://github.com/craftcms/cms/pull/20612))
 - Fields’ translation indicators now show their descriptions when pressed, including on touch devices, rather than on hover. ([#20612](https://github.com/craftcms/cms/pull/20612))
+- Updated the workflow stage type picker to show each type’s icon when available. ([#20660](https://github.com/craftcms/cms/pull/20660))
 - Fixed a bug where focus was lost after choosing elements in a relation field’s selector modal, or canceling it. Focus now returns to the field’s add button, or to the chosen element when the field is full. ([#20653](https://github.com/craftcms/cms/pull/20653))
 - Fixed a bug where typing in fields, especially Markdown fields, lagged on entries with many fields. ([#20637](https://github.com/craftcms/cms/issues/20637))
 - Fixed a bug where the user menu showed a “Permissions” item on Craft Solo, which led to a 403 error. ([#20621](https://github.com/craftcms/cms/issues/20621), [#20635](https://github.com/craftcms/cms/pull/20635))

resources/js/modules/workflows/components/WorkflowStagesInput.test.ts

@@ -13,12 +13,14 @@ const stageTypes = [
   {
     type,
     label: 'User Review',
+    icon: 'user-magnifying-glass',
     settings: {approvalsRequired: 1, approvalMode: 'total', userGroups: []},
     settingsUi: null,
   },
   {
     type: 'plugin\\AutomatedStage',
     label: 'Automated review',
+    icon: null,
     settings: {rule: 'passing'},
     settingsUi: null,
   },
@@ -93,6 +95,23 @@ describe('WorkflowStagesInput', () => {
     await nextTick();
   }
 
+  it('shows stage type icons and falls back to plus for types without icons', async () => {
+    mount([stage('editorial', 'Editorial')]);
+    await nextTick();
+
+    const menu =
+      container!.querySelectorAll<CraftActionMenu>('craft-action-menu')[1]!;
+    await vi.waitFor(() =>
+      expect(menu.querySelectorAll('craft-action-item')).toHaveLength(2)
+    );
+
+    const items = [...menu.querySelectorAll('craft-action-item')];
+    expect(items.map((item) => [item.textContent?.trim(), item.icon])).toEqual([
+      ['User Review', 'user-magnifying-glass'],
+      ['Automated review', 'plus'],
+    ]);
+  });
+
   it('reorders complete stages', async () => {
     const updates = mount([
       stage('editorial', 'Editorial'),

resources/js/modules/workflows/components/WorkflowStagesInput.vue

@@ -28,7 +28,7 @@
   const addStageActions = computed<ActionItems>(() =>
     props.stageTypes.map((stageType) => ({
       label: stageType.label,
-      icon: 'plus',
+      icon: stageType.icon ?? 'plus',
       onClick: () => addStage(stageType.type),
     }))
   );

src/Http/ViewModels/WorkflowEditViewModel.php

@@ -5,6 +5,7 @@
 namespace CraftCms\Cms\Http\ViewModels;
 
 use CraftCms\Cms\Component\ComponentHelper;
+use CraftCms\Cms\Component\Contracts\Iconic;
 use CraftCms\Cms\Http\Controllers\Settings\WorkflowsController;
 use CraftCms\Cms\Support\Str;
 use CraftCms\Cms\Ui\Controls\Table;
@@ -54,7 +55,7 @@ public function ui(): UiPayload
         ));
     }
 
-    /** @return list<array{type: string, label: string, settings: array<string, mixed>, settingsUi: UiPayload|null}> */
+    /** @return list<array{type: string, label: string, icon: string|null, settings: array<string, mixed>, settingsUi: UiPayload|null}> */
     public function stageTypes(): array
     {
         return $this->workflowStageTypes->types()
@@ -66,6 +67,7 @@ public function stageTypes(): array
                 return [
                     'type' => $type,
                     'label' => $type::displayName(),
+                    'icon' => $stage instanceof Iconic ? $stage->getIcon() : null,
                     'settings' => $stage->getSettings(),
                     'settingsUi' => $this->settingsUi($stage),
                 ];

src/Workflow/UserReview/UserReviewStage.php

@@ -4,6 +4,7 @@
 
 namespace CraftCms\Cms\Workflow\UserReview;
 
+use CraftCms\Cms\Component\Contracts\Iconic;
 use CraftCms\Cms\Database\Table;
 use CraftCms\Cms\Ui\Controls\Choice;
 use CraftCms\Cms\Ui\Controls\Number;
@@ -25,7 +26,7 @@
 /**
  * @since 6.0.0
  */
-class UserReviewStage extends WorkflowStage
+class UserReviewStage extends WorkflowStage implements Iconic
 {
     #[\Override]
     protected bool $showDefaultReviewActions = false;
@@ -42,6 +43,11 @@ public static function displayName(): string
         return t('User Review');
     }
 
+    public function getIcon(): ?string
+    {
+        return 'user-magnifying-glass';
+    }
+
     public function getRules(): array
     {
         return [

tests/Feature/Workflow/WorkflowsTest.php

@@ -142,6 +142,7 @@ public function evaluate(WorkflowStageContext $context): WorkflowStageResult
     $automaticApproval = collect($payload['stageTypes'])->firstWhere('type', AutomaticApprovalStage::class);
 
     expect($userReview['label'])->toBe('User Review')
+        ->and($userReview['icon'])->toBe('user-magnifying-glass')
         ->and($userReview['settings'])->toBe([
             'approvalsRequired' => 1,
             'approvalMode' => 'total',
@@ -151,6 +152,7 @@ public function evaluate(WorkflowStageContext $context): WorkflowStageResult
         ->and($userReview['settingsUi']->nodes[0]->children[0]->control->component)->toBe('craft:user-group-select')
         ->and($automaticApproval)->toMatchArray([
             'label' => 'Automatic Approval',
+            'icon' => null,
             'settings' => [],
             'settingsUi' => null,
         ]);