feat: allow to customize icons in contributed actions

it's done by providing the icon font

fixes podman-desktop#5562
Signed-off-by: Florent Benoit <[email protected]>

Author: benoitf

packages/renderer/src/lib/actions/ContributionActions.spec.ts

@@ -1,3 +1,21 @@
+/**********************************************************************
+ * Copyright (C) 2023-2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
 import '@testing-library/jest-dom/vitest';
 import { beforeAll, test, expect, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/svelte';
@@ -209,3 +227,23 @@ test('Expect when property to be true multiple args', async () => {
   const item = screen.getByText('dummy-title');
   expect(item).toBeInTheDocument();
 });
+
+test('Expect custom icon on the contributed action', async () => {
+  render(ContributionActions, {
+    args: [],
+    contributions: [
+      {
+        command: 'dummy.command',
+        title: 'dummy-title',
+        icon: '${dummyIcon}',
+      },
+    ],
+    onError: () => {},
+    dropdownMenu: true,
+  });
+
+  const iconItem = screen.getByRole('img', { name: 'dummy-title' });
+  expect(iconItem).toBeInTheDocument();
+  // expect to have the podman desktop icon class
+  expect(iconItem).toHaveClass('podman-desktop-icon-dummyIcon');
+});

packages/renderer/src/lib/actions/ContributionActions.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { Menu } from '../../../../main/src/plugin/menu-registry';
 import { faPlug } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import { removeNonSerializableProperties } from '/@/lib/actions/ActionUtils';
 import type { ContextUI } from '/@/lib/context/context';
@@ -62,6 +63,21 @@ $: {
   }
 }
 
+function getIcon(menu: Menu): IconDefinition | string {
+  const defaultIcon = faPlug;
+  if (!menu.icon) {
+    return defaultIcon;
+  }
+
+  const match = menu.icon.match(/\$\{(.*)\}/);
+  if (match && match.length === 2) {
+    const className = match[1];
+    return menu.icon.replace(match[0], `podman-desktop-icon-${className}`);
+  }
+  console.error(`Invalid icon name: ${menu.icon}`);
+  return defaultIcon;
+}
+
 onDestroy(() => {
   // unsubscribe from the store
   if (contextsUnsubscribe) {
@@ -84,7 +100,7 @@ async function executeContribution(menu: Menu): Promise<void> {
     title="{menu.title}"
     onClick="{() => executeContribution(menu)}"
     menu="{dropdownMenu}"
-    icon="{faPlug}"
+    icon="{getIcon(menu)}"
     detailed="{detailed}"
     disabledWhen="{menu.disabled}"
     contextUI="{globalContext}" />

packages/renderer/src/lib/ui/DropDownMenuItem.spec.ts

@@ -0,0 +1,50 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+
+import DropDownMenuItem from './DropDownMenuItem.svelte';
+import { faCircleUp } from '@fortawesome/free-solid-svg-icons';
+
+test('Expect custom font icon on the contributed action', async () => {
+  render(DropDownMenuItem, {
+    title: 'dummy-title',
+    icon: 'podman-desktop-icon-dummyIcon',
+  });
+
+  const iconItem = screen.getByRole('img', { name: 'dummy-title' });
+  expect(iconItem).toBeInTheDocument();
+  // expect to have the podman desktop icon class
+  expect(iconItem).toHaveClass('podman-desktop-icon-dummyIcon');
+});
+
+test('Expect Font Awesome icon on the contributed action', async () => {
+  render(DropDownMenuItem, {
+    title: 'dummy-title',
+    icon: faCircleUp,
+  });
+
+  // grab the svg element
+  const svgElement = screen.getByRole('img', { hidden: true });
+  expect(svgElement).toBeInTheDocument();
+
+  // check it is a svelte-fa class
+  expect(svgElement).toHaveClass('svelte-fa');
+});

packages/renderer/src/lib/ui/DropDownMenuItem.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import Fa from 'svelte-fa';
 
 export let title: string;
-export let icon: IconDefinition;
+export let icon: IconDefinition | string;
 export let enabled = true;
 export let hidden = false;
 export let onClick: () => void = () => {};
@@ -16,7 +16,11 @@ const disabledClasses = 'text-gray-900 bg-charcoal-800';
   <!-- Use a div + onclick so there's no "blind spots" for when clicking-->
   <div class="{`p-3 ${enabled ? enabledClasses : disabledClasses}`}" role="none" on:click="{onClick}">
     <span title="{title}" class="group flex items-center text-sm no-underline whitespace-nowrap" tabindex="-1">
-      <Fa class="h-4 w-4 text-md" icon="{icon}" />
+      {#if typeof icon === 'string'}
+        <span role="img" aria-label="{title}" class="{icon} h-4 w-4"></span>
+      {:else}
+        <Fa class="h-4 w-4 text-md" icon="{icon}" />
+      {/if}
       {#if title}<span class="ml-2">{title}</span>{/if}
     </span>
   </div>

packages/renderer/src/lib/ui/ListItemButtonIcon.spec.ts

@@ -20,7 +20,7 @@ import '@testing-library/jest-dom/vitest';
 import { test, expect, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/svelte';
 import ListItemButtonIcon from './ListItemButtonIcon.svelte';
-import { faRocket } from '@fortawesome/free-solid-svg-icons';
+import { faCircleCheck, faRocket } from '@fortawesome/free-solid-svg-icons';
 import { ContextUI } from '../context/context';
 import { context } from '/@/stores/context';
 
@@ -158,3 +158,41 @@ test('With confirmation=no, there will be no confirmation when clicking the butt
   await fireEvent.click(button);
   expect(showMessageBoxMock).not.toHaveBeenCalled();
 });
+
+test('With custom font icon', async () => {
+  const title = 'Dummy item';
+
+  render(ListItemButtonIcon, {
+    title,
+    icon: 'podman-desktop-icon-dummyIcon',
+    menu: true,
+    confirm: false,
+    enabled: true,
+    inProgress: false,
+  });
+
+  const iconItem = screen.getByRole('img', { name: title });
+  expect(iconItem).toBeInTheDocument();
+  // expect to have the podman desktop icon class
+  expect(iconItem).toHaveClass('podman-desktop-icon-dummyIcon');
+});
+
+test('With custom Fa icon', async () => {
+  const title = 'Dummy item';
+
+  render(ListItemButtonIcon, {
+    title,
+    icon: faCircleCheck,
+    menu: true,
+    confirm: false,
+    enabled: true,
+    inProgress: false,
+  });
+
+  // grab the svg element
+  const svgElement = screen.getByRole('img', { hidden: true });
+  expect(svgElement).toBeInTheDocument();
+
+  // check it is a svelte-fa class
+  expect(svgElement).toHaveClass('svelte-fa');
+});

packages/renderer/src/lib/ui/ListItemButtonIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import DropdownMenuItem from './DropDownMenuItem.svelte';
 import Fa from 'svelte-fa';
 import { onDestroy } from 'svelte';
@@ -9,7 +9,7 @@ import { context as storeContext } from '/@/stores/context';
 import { ContextKeyExpr } from '../context/contextKey';
 
 export let title: string;
-export let icon: IconDefinition;
+export let icon: IconDefinition | string;
 export let hidden = false;
 export let disabledWhen = '';
 export let enabled: boolean = true;