feat(UI): migrate dropdown component

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

packages/renderer/src/lib/compose/ComposeActions.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 import { faArrowsRotate, faFileCode, faPlay, faRocket, faStop, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { Dropdown } from '@podman-desktop/ui-svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import { router } from 'tinro';
 
 import ContributionActions from '/@/lib/actions/ContributionActions.svelte';
 
 import type { Menu } from '../../../../main/src/plugin/menu-registry';
 import { MenuContext } from '../../../../main/src/plugin/menu-registry';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
 import FlatMenu from '../ui/FlatMenu.svelte';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import type { ComposeInfoUI } from './ComposeInfoUI';
@@ -108,9 +108,9 @@ function openGenerateKube(): void {
 
 // If dropdownMenu = true, we'll change style to the imported dropdownMenu style
 // otherwise, leave blank.
-let actionsStyle: typeof DropdownMenu | typeof FlatMenu;
+let actionsStyle: typeof Dropdown | typeof FlatMenu;
 if (dropdownMenu) {
-  actionsStyle = DropdownMenu;
+  actionsStyle = Dropdown;
 } else {
   actionsStyle = FlatMenu;
 }

packages/renderer/src/lib/container/ContainerActions.svelte

@@ -11,6 +11,7 @@ import {
   faTerminal,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
+import { Dropdown } from '@podman-desktop/ui-svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import { router } from 'tinro';
 
@@ -19,7 +20,6 @@ import { exportContainerInfo } from '/@/stores/export-container-store';
 
 import type { Menu } from '../../../../main/src/plugin/menu-registry';
 import { MenuContext } from '../../../../main/src/plugin/menu-registry';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
 import FlatMenu from '../ui/FlatMenu.svelte';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import { ContainerGroupInfoTypeUI, type ContainerInfoUI } from './ContainerInfoUI';
@@ -127,9 +127,9 @@ function deployToKubernetes(): void {
 
 // If dropdownMenu = true, we'll change style to the imported dropdownMenu style
 // otherwise, leave blank.
-let actionsStyle: typeof DropdownMenu | typeof FlatMenu;
+let actionsStyle: typeof Dropdown | typeof FlatMenu;
 if (dropdownMenu) {
-  actionsStyle = DropdownMenu;
+  actionsStyle = Dropdown;
 } else {
   actionsStyle = FlatMenu;
 }

packages/renderer/src/lib/image/ActionsMenu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-import DropdownMenu from '../ui/DropdownMenu.svelte';
+import { Dropdown } from '@podman-desktop/ui-svelte';
+
 import FlatMenu from '../ui/FlatMenu.svelte';
 
 export let dropdownMenu = false;
@@ -8,8 +9,7 @@ export let onBeforeToggle = () => {};
 </script>
 
 {#if dropdownMenu}
-  <DropdownMenu shownAsMenuActionItem="{dropdownMenuAsMenuActionItem}" onBeforeToggle="{onBeforeToggle}"
-    ><slot /></DropdownMenu>
+  <Dropdown shownAsMenuActionItem="{dropdownMenuAsMenuActionItem}" onBeforeToggle="{onBeforeToggle}"><slot /></Dropdown>
 {:else}
   <FlatMenu><slot /></FlatMenu>
 {/if}

packages/renderer/src/lib/pod/PodActions.svelte

@@ -8,6 +8,7 @@ import {
   faStop,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
+import { Dropdown } from '@podman-desktop/ui-svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import { router } from 'tinro';
 
@@ -16,7 +17,6 @@ import ContributionActions from '/@/lib/actions/ContributionActions.svelte';
 import type { Menu } from '../../../../main/src/plugin/menu-registry';
 import { MenuContext } from '../../../../main/src/plugin/menu-registry';
 import { ContainerUtils } from '../container/container-utils';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
 import FlatMenu from '../ui/FlatMenu.svelte';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import type { PodInfoUI } from './PodInfoUI';
@@ -149,9 +149,9 @@ function deployToKubernetes(): void {
 }
 // If dropdownMenu = true, we'll change style to the imported dropdownMenu style
 // otherwise, leave blank.
-let actionsStyle: typeof DropdownMenu | typeof FlatMenu;
+let actionsStyle: typeof Dropdown | typeof FlatMenu;
 if (dropdownMenu) {
-  actionsStyle = DropdownMenu;
+  actionsStyle = Dropdown;
 } else {
   actionsStyle = FlatMenu;
 }
@@ -217,7 +217,7 @@ if (dropdownMenu) {
         detailed="{detailed}"
         icon="{faExternalLinkSquareAlt}" />
     {:else if openingUrls.length > 1}
-      <DropdownMenu icon="{faExternalLinkSquareAlt}" hidden="{dropdownMenu}" shownAsMenuActionItem="{true}">
+      <Dropdown icon="{faExternalLinkSquareAlt}" hidden="{dropdownMenu}" shownAsMenuActionItem="{true}">
         {#each openingUrls as url}
           <ListItemButtonIcon
             title="Open {extractPort(url)}"
@@ -228,7 +228,7 @@ if (dropdownMenu) {
             detailed="{detailed}"
             icon="{faExternalLinkSquareAlt}" />
         {/each}
-      </DropdownMenu>
+      </Dropdown>
     {/if}
     <ListItemButtonIcon
       title="Restart Pod"
@@ -256,7 +256,7 @@ if (dropdownMenu) {
         detailed="{detailed}"
         icon="{faExternalLinkSquareAlt}" />
     {:else if openingKubernetesUrls.size > 1}
-      <DropdownMenu
+      <Dropdown
         title="Open Kubernetes Routes"
         icon="{faExternalLinkSquareAlt}"
         hidden="{dropdownMenu}"
@@ -271,7 +271,7 @@ if (dropdownMenu) {
             detailed="{detailed}"
             icon="{faExternalLinkSquareAlt}" />
         {/each}
-      </DropdownMenu>
+      </Dropdown>
     {/if}
   {/if}
   <ContributionActions

packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte

@@ -5,15 +5,13 @@ import {
   faRightFromBracket,
   faRightToBracket,
 } from '@fortawesome/free-solid-svg-icons';
-import { Button, Tooltip } from '@podman-desktop/ui-svelte';
+import { Button, Dropdown, Tooltip } from '@podman-desktop/ui-svelte';
 import Fa from 'svelte-fa';
 
 import EmbeddableCatalogExtensionList from '/@/lib/extensions/EmbeddableCatalogExtensionList.svelte';
 
 import { authenticationProviders } from '../../stores/authenticationProviders';
 import KeyIcon from '../images/KeyIcon.svelte';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
-import DropdownMenuItem from '../ui/DropDownMenuItem.svelte';
 import EmptyScreen from '../ui/EmptyScreen.svelte';
 import SettingsPage from './SettingsPage.svelte';
 </script>
@@ -150,14 +148,14 @@ import SettingsPage from './SettingsPage.svelte';
               <!-- Authentication Provider Auth Request Sign In button end -->
             {:else if sessionRequests.length > 1}
               <!-- Authentication Provider Auth Requests DropDown start -->
-              <DropdownMenu>
+              <Dropdown>
                 {#each sessionRequests as request}
-                  <DropdownMenuItem
+                  <Dropdown.Item
                     title="Sign in to use {request.extensionLabel}"
                     onClick="{() => window.requestAuthenticationProviderSignIn(request.id)}"
                     icon="{faArrowRightToBracket}" />
                 {/each}
-              </DropdownMenu>
+              </Dropdown>
               <!-- Authentication Provider Auth Requests DropDown end -->
             {/if}
           </div>

packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
 import { faPlusCircle, faTrash, faUser, faUserPen } from '@fortawesome/free-solid-svg-icons';
 import type * as containerDesktopAPI from '@podman-desktop/api';
-import { Button, Input } from '@podman-desktop/ui-svelte';
+import { Button, Dropdown, Input } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 
 import PasswordInput from '/@/lib/ui/PasswordInput.svelte';
 
 import { registriesInfos, registriesSuggestedInfos } from '../../stores/registries';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
-import DropdownMenuItem from '../ui/DropDownMenuItem.svelte';
 import SettingsPage from './SettingsPage.svelte';
 
 // contains the original instances of registries when user clicks on `Edit password` menu item
@@ -349,22 +347,19 @@ function removeExistingRegistry(registry: containerDesktopAPI.Registry) {
 
                 <!-- Show/hide password end -->
                 <!-- containerDesktopAPI.Registry menu start -->
-                <DropdownMenu>
-                  <DropdownMenuItem
+                <Dropdown>
+                  <Dropdown.Item
                     title="Login"
                     onClick="{() => markRegistryAsModified(registry)}"
                     hidden="{!!registry.username && !!registry.secret}"
                     icon="{faUser}" />
-                  <DropdownMenuItem
+                  <Dropdown.Item
                     title="Edit password"
                     onClick="{() => markRegistryAsModified(registry)}"
                     hidden="{!registry.username && !registry.secret}"
                     icon="{faUserPen}" />
-                  <DropdownMenuItem
-                    title="Remove"
-                    onClick="{() => removeExistingRegistry(registry)}"
-                    icon="{faTrash}" />
-                </DropdownMenu>
+                  <Dropdown.Item title="Remove" onClick="{() => removeExistingRegistry(registry)}" icon="{faTrash}" />
+                </Dropdown>
               </div>
             {/if}
           </div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
-import { isFontAwesomeIcon } from '@podman-desktop/ui-svelte';
+import { Dropdown, isFontAwesomeIcon } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/motion';
 import Fa from 'svelte-fa';
@@ -9,7 +9,6 @@ import { context as storeContext } from '/@/stores/context';
 
 import type { ContextUI } from '../context/context';
 import { ContextKeyExpr } from '../context/contextKey';
-import DropdownMenuItem from './DropDownMenuItem.svelte';
 
 export let title: string;
 export let icon: IconDefinition | string;
@@ -116,7 +115,7 @@ $: styleClass = detailed
 <!-- If menu = true, use the menu, otherwise implement the button -->
 {#if menu}
   <!-- enabled menu -->
-  <DropdownMenuItem
+  <Dropdown.Item
     title="{title}"
     tooltip="{tooltip}"
     icon="{icon}"

packages/ui/package.json

@@ -43,6 +43,10 @@
     "./ErrorMessage": {
       "types": "./dist/alert/ErrorMessage.svelte.d.ts",
       "svelte": "./dist/alert/ErrorMessage.svelte"
+    },
+    "./Dropdown": {
+      "types": "./dist/dropdown/index.d.ts",
+      "svelte": "./dist/dropdown/index.js"
     }
   },
   "peerDependencies": {

packages/renderer/src/lib/ui/DropdownMenu.svelte → packages/ui/src/lib/dropdown/DropdownMenu.svelte

@@ -5,7 +5,7 @@ import Fa from 'svelte-fa';
 
 import DropDownMenuItems from './DropDownMenuItems.svelte';
 
-export let onBeforeToggle = () => {};
+export let onBeforeToggle = (): void => {};
 export let icon: IconDefinition = faEllipsisVertical;
 export let shownAsMenuActionItem = false;
 export let hidden = false;
@@ -18,23 +18,30 @@ let showMenu = false;
 let outsideWindow: HTMLButtonElement;
 
 // If we hit ESC while the menu is open, close it
-function handleEscape({ key }: any) {
+function handleEscape({ key }: KeyboardEvent): void {
   if (key === 'Escape') {
     showMenu = false;
   }
 }
 
 let clientY: number;
 
-function toggleMenu() {
+function toggleMenu(): void {
   onBeforeToggle();
   showMenu = !showMenu;
 }
 
 // If we click outside the menu, close the menu
-function onWindowClick(e: any) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function onWindowClick(e: any): void {
   if (!hidden) showMenu = outsideWindow.contains(e.target);
 }
+
+function onButtonClick(e: MouseEvent): void {
+  // keep track of the cursor position
+  clientY = e.clientY;
+  toggleMenu();
+}
 </script>
 
 <!-- Required in order for Svelte to track all key presses and if you pressed "ESC" -->
@@ -46,11 +53,7 @@ function onWindowClick(e: any) {
     <!-- Button for the dropdown menu -->
     <button
       aria-label="{title.length > 0 ? title : 'kebab menu'}"
-      on:click="{e => {
-        // keep track of the cursor position
-        clientY = e.clientY;
-        toggleMenu();
-      }}"
+      on:click="{onButtonClick}"
       title="{title}"
       bind:this="{outsideWindow}"
       class="text-gray-400 {shownAsMenuActionItem

packages/ui/src/lib/dropdown/index.ts

@@ -0,0 +1,24 @@
+/**********************************************************************
+ * 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 DropDownMenuItem from '/@/lib/dropdown/DropDownMenuItem.svelte';
+
+import DropdownMenu from './DropdownMenu.svelte';
+
+export default Object.assign(DropdownMenu, {
+  Item: DropDownMenuItem,
+});

packages/ui/src/lib/index.ts

@@ -19,12 +19,13 @@ import ErrorMessage from './alert/ErrorMessage.svelte';
 import type { ButtonType } from './button/Button';
 import Button from './button/Button.svelte';
 import Checkbox from './checkbox/Checkbox.svelte';
+import Dropdown from './dropdown';
 import Input from './input/Input.svelte';
 import Modal from './modal/Modal.svelte';
 import Spinner from './spinner/Spinner.svelte';
 import Tooltip from './tooltip/Tooltip.svelte';
 import { isFontAwesomeIcon } from './utils/icon-utils';
 
 export type { ButtonType };
-export { Button, Checkbox, ErrorMessage, Input, Modal, Spinner, Tooltip };
+export { Button, Checkbox, Dropdown, ErrorMessage, Input, Modal, Spinner, Tooltip };
 export { isFontAwesomeIcon };