Command icon

demo/app/Sharp/Authors/Commands/VisitFacebookProfileCommand.php

@@ -14,7 +14,8 @@ public function label(): string
 
     public function buildCommandConfig(): void
     {
-        $this->configureDescription('You will leave Sharp');
+        $this->configureDescription('You will leave Sharp')
+            ->configureIcon('lucide-facebook');
     }
 
     public function execute(mixed $instanceId, array $data = []): array

demo/app/Sharp/Posts/Commands/BulkPublishPostsCommand.php

@@ -15,6 +15,7 @@ public function label(): ?string
     public function buildCommandConfig(): void
     {
         $this->configureDescription('Bulk command to publish posts')
+            ->configureIcon('lucide-check-check')
             ->configureInstanceSelectionRequired();
     }
 

demo/app/Sharp/Posts/Commands/ComposeEmailWithPostsWizardCommand.php

@@ -21,7 +21,8 @@ public function label(): ?string
 
     public function buildCommandConfig(): void
     {
-        $this->configureDescription('Use this wizard command to compose a message choosing posts links in a list');
+        $this->configureDescription('Use this wizard command to compose a message choosing posts links in a list')
+            ->configureIcon('lucide-mail');
     }
 
     public function buildFormFieldsForFirstStep(FieldsContainer $formFields): void

ide.json

@@ -16,6 +16,56 @@
                     ]
                 }
             ]
+        },
+        {
+            "complete": "bladeIcon",
+            "condition": [
+                {
+                    "classFqn": [
+                        "Code16\\Sharp\\Utils\\Menu\\HasSharpMenuItems"
+                    ],
+                    "methodNames": [
+                        "addEntityLink"
+                    ],
+                    "parameters": [
+                        3
+                    ]
+                },
+                {
+                    "classFqn": [
+                        "Code16\\Sharp\\Form\\Fields\\Embeds\\SharpFormEditorEmbed"
+                    ],
+                    "methodNames": [
+                        "configureIcon"
+                    ],
+                    "parameters": [
+                        1
+                    ]
+                },
+                {
+                    "classFqn": [
+                        "Code16\\Sharp\\EntityList\\Commands\\Command"
+                    ],
+                    "methodNames": [
+                        "configureIcon"
+                    ],
+                    "parameters": [
+                        1
+                    ]
+                },
+                {
+                    "place": "parameter",
+                    "classFqn": [
+                        "Code16\\Sharp\\EntityList\\EntityListEntities"
+                    ],
+                    "methodNames": [
+                        "addEntity"
+                    ],
+                    "parameters": [
+                        3
+                    ]
+                }
+            ]
         }
     ],
     "view": {
@@ -285,4 +335,4 @@
             ]
         }
     ]
-}
+}

resources/js/commands/components/CommandDropdownItems.vue

@@ -6,6 +6,7 @@
     import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
     import { useBreakpoints } from "@/composables/useBreakpoints";
     import { showAlert } from "@/utils/dialogs";
+    import Icon from "@/components/ui/Icon.vue";
 
     const props = defineProps<{
         commands: CommandData[][],
@@ -38,6 +39,9 @@
                                 @click="$emit('select', command)"
                                 :disabled="requiresSelection(command)"
                             >
+                                <template v-if="command.icon">
+                                    <Icon :icon="command.icon" class="size-4" />
+                                </template>
                                 <div>
                                     {{ command.label }}
                                     <template v-if="command.description">

resources/js/types/generated.d.ts

@@ -44,6 +44,7 @@ export type CommandData = {
     buttonLabel: string | null;
   } | null;
   hasForm: boolean;
+  icon: IconData | null;
   authorization: Array<string | number> | boolean;
   instanceSelection: InstanceSelectionMode | null;
   primary: boolean | null;

src/Data/Commands/CommandData.php

@@ -3,6 +3,7 @@
 namespace Code16\Sharp\Data\Commands;
 
 use Code16\Sharp\Data\Data;
+use Code16\Sharp\Data\IconData;
 use Code16\Sharp\Enums\CommandType;
 use Code16\Sharp\Enums\InstanceSelectionMode;
 use Spatie\TypeScriptTransformer\Attributes\LiteralTypeScriptType;
@@ -20,6 +21,7 @@ public function __construct(
         #[LiteralTypeScriptType('{ text: string, title: string | null, buttonLabel: string | null } | null')]
         public ?array $confirmation,
         public bool $hasForm,
+        public ?IconData $icon,
         /** @var array<string|int>|bool */
         public array|bool $authorization,
         public ?InstanceSelectionMode $instanceSelection = null,
@@ -34,6 +36,7 @@ public static function from(array $command): self
             'instanceSelection' => isset($command['instanceSelection'])
                 ? InstanceSelectionMode::from($command['instanceSelection'])
                 : null,
+            'icon' => IconData::optional($command['icon'] ?? null),
         ];
 
         return new self(...$command);

src/EntityList/Commands/Command.php

@@ -33,6 +33,7 @@ abstract class Command
     private ?string $confirmationTitle = null;
     private ?string $confirmationButtonLabel = null;
     private ?string $description = null;
+    private ?string $icon = null;
 
     protected function info(string $message, bool $reload = false): array
     {
@@ -146,6 +147,13 @@ final protected function configureConfirmationText(string $confirmationText, ?st
         return $this;
     }
 
+    final protected function configureIcon(string $icon): self
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
     /**
      * Check if the current user is allowed to use this Command.
      */
@@ -179,6 +187,11 @@ final public function getDescription(): ?string
         return $this->description;
     }
 
+    final public function getIcon(): ?string
+    {
+        return $this->icon;
+    }
+
     final public function getFormModalTitle(?array $formData): ?string
     {
         return ($callback = $this->formModalTitle) instanceof Closure

src/EntityList/Traits/Utils/CommonCommandUtils.php

@@ -4,6 +4,7 @@
 
 use Code16\Sharp\EntityList\Commands\Command;
 use Code16\Sharp\EntityList\Commands\EntityCommand;
+use Code16\Sharp\Utils\Icons\IconManager;
 use Illuminate\Support\Collection;
 
 trait CommonCommandUtils
@@ -30,6 +31,7 @@ protected function appendCommandsToConfig(Collection $commandHandlers, array &$c
                     'authorization' => $instanceId
                         ? $handler->authorizeFor($instanceId)
                         : $handler->getGlobalAuthorization(),
+                    'icon' => app(IconManager::class)->iconToArray($handler->getIcon()),
                     ...$handler instanceof EntityCommand ? [
                         'instanceSelection' => $handler->getInstanceSelectionMode(),
                     ] : [],

tests/Unit/Dashboard/DashboardCommandTest.php

@@ -34,6 +34,7 @@ public function execute(array $data = []): array {}
             'description' => null,
             'confirmation' => null,
             'hasForm' => false,
+            'icon' => null,
         ]);
 });
 
@@ -113,6 +114,7 @@ public function execute(array $data = []): array {}
                         'authorization' => true,
                         'confirmation' => null,
                         'description' => null,
+                        'icon' => null,
                     ],
                 ],
             ],

tests/Unit/EntityList/SharpEntityListCommandTest.php

@@ -53,6 +53,7 @@ public function execute($instanceId, array $data = []): array {}
                     'instanceSelection' => null,
                     'confirmation' => null,
                     'hasForm' => false,
+                    'icon' => null,
                 ],
             ],
         ],
@@ -66,6 +67,7 @@ public function execute($instanceId, array $data = []): array {}
                     'description' => null,
                     'confirmation' => null,
                     'hasForm' => false,
+                    'icon' => null,
                 ],
             ],
         ],
@@ -265,7 +267,7 @@ public function getListData(): array|\Illuminate\Contracts\Support\Arrayable
     expect($list->listConfig()['commands']['instance'][0][0]['authorization'])->toEqual([1, 2]);
 });
 
-it('allows to define a description on a command', function () {
+it('allows to define a description & icon on a command', function () {
     $list = new class() extends FakeSharpEntityList
     {
         public function getEntityCommands(): ?array
@@ -280,7 +282,8 @@ public function label(): string
 
                     public function buildCommandConfig(): void
                     {
-                        $this->configureDescription('My Entity Command description');
+                        $this->configureDescription('My Entity Command description')
+                            ->configureIcon('testicon-user');
                     }
 
                     public function execute(array $data = []): array {}
@@ -291,7 +294,13 @@ public function execute(array $data = []): array {}
 
     $list->buildListConfig();
 
-    expect($list->listConfig()['commands']['entity'][0][0]['description'])->toEqual('My Entity Command description');
+    expect($list->listConfig()['commands']['entity'][0][0])->toMatchArray([
+        'description' => 'My Entity Command description',
+        'icon' => [
+            'name' => 'testicon-user',
+            'svg' => '<svg><!--user--></svg>',
+        ],
+    ]);
 });
 
 it('allows to define separators in instance commands', function () {