chore: move CloseButton to the ui library

also cut the dependency to tinro and parent element need to handle the dispatch

related to https://github.com/containers/podman-desktop/issues/6920
Signed-off-by: Florent Benoit <fbenoit@redhat.com>

packages/renderer/src/lib/dialogs/MessageBox.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 import { faCircle, faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
 import { faCircleExclamation, faInfo, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
-import { Button, type ButtonType } from '@podman-desktop/ui-svelte';
+import { Button, type ButtonType, CloseButton } from '@podman-desktop/ui-svelte';
 import { Modal } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import Fa from 'svelte-fa';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
-
 import type { MessageBoxOptions } from './messagebox-input';
 
 let currentId = 0;

packages/renderer/src/lib/extensions/InstallManuallyExtensionModal.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 import { faCloudDownload } from '@fortawesome/free-solid-svg-icons';
-import { Button, Input, Modal } from '@podman-desktop/ui-svelte';
+import { Button, CloseButton, Input, Modal } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
-
 export let closeCallback: () => void;
 let imageName = '';
 

packages/renderer/src/lib/feedback/SendFeedback.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 import { faFrown, faGrinStars, faMeh, faSmile } from '@fortawesome/free-solid-svg-icons';
-import { Button, ErrorMessage, Modal } from '@podman-desktop/ui-svelte';
+import { Button, CloseButton, ErrorMessage, Modal } from '@podman-desktop/ui-svelte';
 import Fa from 'svelte-fa';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
-
 import type { FeedbackProperties } from '../../../../preload/src/index';
 import WarningMessage from '../ui/WarningMessage.svelte';
 

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

@@ -1,14 +1,12 @@
 <script lang="ts">
 import { faCheckCircle, faCircleArrowUp, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
-import { Button, Link, Modal } from '@podman-desktop/ui-svelte';
+import { Button, CloseButton, Link, Modal } from '@podman-desktop/ui-svelte';
 import { onMount, tick } from 'svelte';
 import Fa from 'svelte-fa';
 import { router } from 'tinro';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
-
 import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings';
 import type { ImageInfoUI } from './ImageInfoUI';
 

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

@@ -1,10 +1,8 @@
 <script lang="ts">
-import { Button, ErrorMessage, Input, Modal } from '@podman-desktop/ui-svelte';
+import { Button, CloseButton, ErrorMessage, Input, Modal } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
-
 import type { ImageInfoUI } from './ImageInfoUI';
 
 export let closeCallback: () => void;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons';
-import { Button, Modal } from '@podman-desktop/ui-svelte';
+import { Button, CloseButton, Modal } from '@podman-desktop/ui-svelte';
 import Fa from 'svelte-fa';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
 import type { CheckStatus, ProviderInfo } from '/@api/provider-info';
 
 import ProviderLogo from '../dashboard/ProviderLogo.svelte';

packages/renderer/src/lib/troubleshooting/TroubleshootingPageStoreDetails.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 import { faRefresh, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button, Modal } from '@podman-desktop/ui-svelte';
+import { Button, CloseButton, Modal } from '@podman-desktop/ui-svelte';
 import humanizeDuration from 'humanize-duration';
 import moment from 'moment';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
 import type { EventStoreInfo } from '/@/stores/event-store';
 
 export let closeCallback: () => void;

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

@@ -1,9 +1,7 @@
 <script lang="ts">
-import { Link } from '@podman-desktop/ui-svelte';
+import { CloseButton, Link } from '@podman-desktop/ui-svelte';
 import { router } from 'tinro';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
-
 import { currentPage, lastPage } from '../../stores/breadcrumb';
 
 export let title: string;
@@ -35,7 +33,7 @@ function handleKeydown(e: KeyboardEvent) {
           title="Go back to {$lastPage.name}">{$lastPage.name}</Link>
         <div class="mx-2">&gt;</div>
         <div class="grow font-extralight" aria-label="name">{$currentPage.name}</div>
-        <CloseButton href="{$lastPage.path}" class="justify-self-end" />
+        <CloseButton class="justify-self-end" on:click="{() => router.goto($lastPage.path)}" />
       </div>
       <div class="flex flex-row items-start pt-1">
         <div class="pr-3">

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

@@ -1,9 +1,7 @@
 <script lang="ts">
-import { LinearProgress, Link } from '@podman-desktop/ui-svelte';
+import { CloseButton, LinearProgress, Link } from '@podman-desktop/ui-svelte';
 import { router } from 'tinro';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
-
 import { currentPage, lastPage } from '../../stores/breadcrumb';
 
 export let title: string;
@@ -33,7 +31,7 @@ function handleKeydown(e: KeyboardEvent) {
             >{$lastPage.name}</Link>
           <div class="mx-2">&gt;</div>
           <div class="grow font-extralight" aria-label="name">{$currentPage.name}</div>
-          <CloseButton href="{$lastPage.path}" class="justify-self-end" />
+          <CloseButton class="justify-self-end" on:click="{() => router.goto($lastPage.path)}" />
         </div>
       {/if}
       <div class="flex flex-row items-center pt-1">
@@ -52,7 +50,7 @@ function handleKeydown(e: KeyboardEvent) {
             </div>
           {/if}
           {#if !showBreadcrumb}
-            <CloseButton href="{$lastPage.path}" />
+            <CloseButton class="justify-self-end" on:click="{() => router.goto($lastPage.path)}" />
           {/if}
         </div>
       </div>

packages/ui/src/lib/button/CloseButton.spec.ts

@@ -16,24 +16,12 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import '@testing-library/jest-dom/vitest';
 
 import { fireEvent, render, screen } from '@testing-library/svelte';
-import { router } from 'tinro';
 import { expect, test, vi } from 'vitest';
 
-import CloseButton from '/@/lib/ui/CloseButton.svelte';
-
-// mock the router
-vi.mock('tinro', () => {
-  return {
-    router: {
-      goto: vi.fn(),
-    },
-  };
-});
+import CloseButton from './CloseButton.svelte';
 
 test('Check button styling', async () => {
   render(CloseButton);
@@ -54,21 +42,6 @@ test('Check button styling', async () => {
   expect(button.firstChild).toHaveClass('svelte-fa');
 });
 
-test('Check local href action', async () => {
-  const urlMock = vi.fn();
-  (window as any).openExternal = urlMock;
-  render(CloseButton, { href: '/Pods' });
-
-  // check href link
-  const button = screen.getByRole('button');
-  expect(button).toBeInTheDocument();
-
-  fireEvent.click(button);
-
-  expect(router.goto).toBeCalledTimes(1);
-  expect(urlMock).not.toHaveBeenCalled();
-});
-
 test('Check on:click action', async () => {
   const comp = render(CloseButton);
 
@@ -80,7 +53,7 @@ test('Check on:click action', async () => {
   expect(button).toBeInTheDocument();
   expect(clickMock).not.toHaveBeenCalled();
 
-  fireEvent.click(button);
+  await fireEvent.click(button);
 
-  expect(clickMock).toBeCalledTimes(1);
+  expect(clickMock).toBeCalled();
 });

packages/ui/src/lib/button/CloseButton.svelte

@@ -2,18 +2,11 @@
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Fa from 'svelte-fa';
-import { router } from 'tinro';
-
-export let href: string | undefined = undefined;
 
 const dispatch = createEventDispatcher<{ click: undefined }>();
 
-function click() {
-  if (href) {
-    router.goto(href);
-  } else {
-    dispatch('click');
-  }
+function click(): void {
+  dispatch('click');
 }
 </script>
 
@@ -21,7 +14,7 @@ function click() {
   type="button"
   class="text-gray-800 hover:bg-white hover:bg-opacity-10 transition-all rounded-[4px] p-1 no-underline cursor-pointer {$$props.class ||
     ''}"
-  on:click="{() => click()}"
+  on:click="{click}"
   title="Close"
   aria-label="Close">
   <Fa icon="{faTimes}" />

packages/ui/src/lib/index.ts

@@ -18,6 +18,7 @@
 import ErrorMessage from './alert/ErrorMessage.svelte';
 import type { ButtonType } from './button/Button';
 import Button from './button/Button.svelte';
+import CloseButton from './button/CloseButton.svelte';
 import Checkbox from './checkbox/Checkbox.svelte';
 import DropdownMenu from './dropdownMenu';
 import Input from './inputs/Input.svelte';
@@ -42,6 +43,7 @@ export type { ButtonType };
 export {
   Button,
   Checkbox,
+  CloseButton,
   DropdownMenu,
   EmptyScreen,
   ErrorMessage,