refactor: move Link to UI library (podman-desktop#7295)

Fixes podman-desktop#6921 Signed-off-by: Jeff MAURY <[email protected]>
feloy · May 23, 2024 · 6427681 · 6427681
1 parent 51f5d1d
commit 6427681
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 83 deletions.
diff --git a/packages/renderer/src/lib/container/ContainerDetails.svelte b/packages/renderer/src/lib/container/ContainerDetails.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import 'xterm/css/xterm.css';
 
-import { ErrorMessage, Tab } from '@podman-desktop/ui-svelte';
+import { ErrorMessage, Link, Tab } from '@podman-desktop/ui-svelte';
 import { ContainerIcon } from '@podman-desktop/ui-svelte/icons';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
@@ -10,7 +10,6 @@ import Route from '../../Route.svelte';
 import { containersInfos } from '../../stores/containers';
 import StatusIcon from '../images/StatusIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
-import Link from '../ui/Link.svelte';
 import StateChange from '../ui/StateChange.svelte';
 import { ContainerUtils } from './container-utils';
 import ContainerActions from './ContainerActions.svelte';
@@ -69,7 +68,12 @@ onMount(() => {
   <DetailsPage title="{container.name}" bind:this="{detailsPage}">
     <StatusIcon slot="icon" icon="{ContainerIcon}" size="{24}" status="{container.state}" />
     <svelte:fragment slot="subtitle">
-      <Link internalRef="{container.imageHref}">{container.shortImage}</Link>
+      <Link
+        on:click="{() => {
+          if (container.imageHref) {
+            router.goto(container.imageHref);
+          }
+        }}">{container.shortImage}</Link>
     </svelte:fragment>
     <svelte:fragment slot="actions">
       <div class="flex items-center w-5">

diff --git a/packages/renderer/src/lib/dashboard/ProviderLinks.svelte b/packages/renderer/src/lib/dashboard/ProviderLinks.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { ProviderInfo } from '/@api/provider-info';
+import { Link } from '@podman-desktop/ui-svelte';
 
-import Link from '../ui/Link.svelte';
+import type { ProviderInfo } from '/@api/provider-info';
 
 export let provider: ProviderInfo;
 </script>
@@ -10,7 +10,7 @@ export let provider: ProviderInfo;
   <div class="mt-2 flex relative w-full content-stretch items-center flex-row justify-around flex-grow flex-nowrap">
     {#each provider.links as link}
       {#if link.group === undefined}
-        <Link class="text-base" externalRef="{link.url}">
+        <Link class="text-base" on:click="{() => window.openExternal(link.url)}">
           {link.title}
         </Link>
       {/if}

diff --git a/packages/renderer/src/lib/image/PushImageModal.svelte b/packages/renderer/src/lib/image/PushImageModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { faCheckCircle, faCircleArrowUp, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
-import { Button, Modal } from '@podman-desktop/ui-svelte';
+import { Button, Link, Modal } from '@podman-desktop/ui-svelte';
 import { onMount, tick } from 'svelte';
 import Fa from 'svelte-fa';
 import { router } from 'tinro';
@@ -10,7 +10,6 @@ import { FitAddon } from 'xterm-addon-fit';
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 
 import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings';
-import Link from '../ui/Link.svelte';
 import type { ImageInfoUI } from './ImageInfoUI';
 
 export let closeCallback: () => void;
@@ -145,7 +144,7 @@ $: window.hasAuthconfigForImage(imageInfoToPush.name).then(result => (isAuthenti
         and to click to go to the registries page -->
         {#if !isAuthenticatedForThisImage}
           <p class="text-amber-500 pt-1">
-            No registry with push permissions found. <Link internalRef="/preferences/registries"
+            No registry with push permissions found. <Link on:click="{() => router.goto('/preferences/registries')}"
               >Add a registry now.</Link>
           </p>{/if}
       </div>

diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnHostPath.svelte b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnHostPath.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-import Link from '../ui/Link.svelte';
+import { Link } from '@podman-desktop/ui-svelte';
+
 import { IngressRouteUtils } from './ingress-route-utils';
 import type { IngressUI } from './IngressUI';
 import type { RouteUI } from './RouteUI';
@@ -12,7 +13,13 @@ const ingressRouteUtils = new IngressRouteUtils();
 {#each ingressRouteUtils.getHostPaths(object) as hostPath}
   <div class="text-sm text-gray-500 overflow-hidden text-ellipsis">
     {#if hostPath.url}
-      <Link aria-label="{hostPath.label}" externalRef="{hostPath.url}">
+      <Link
+        aria-label="{hostPath.label}"
+        on:click="{() => {
+          if (hostPath.url) {
+            window.openExternal(hostPath.url);
+          }
+        }}">
         {hostPath.label}
       </Link>
     {:else}

diff --git a/packages/renderer/src/lib/kube/details/KubeIngressArtifact.svelte b/packages/renderer/src/lib/kube/details/KubeIngressArtifact.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { V1IngressSpec } from '@kubernetes/client-node';
+import { Link } from '@podman-desktop/ui-svelte';
 
-import Link from '../../ui/Link.svelte';
 import Cell from './ui/Cell.svelte';
 import Title from './ui/Title.svelte';
 
@@ -66,9 +66,9 @@ export let artifact: V1IngressSpec | undefined;
               Path: {path.path}
               {#if rule.host}
                 • Link:
-                <Link
-                  externalRef="{artifact.tls && artifact.tls.length > 0 ? 'https' : 'http'}://{rule.host}{path.path}">
-                  {artifact.tls && artifact.tls.length > 0 ? 'https' : 'http'}://{rule.host}{path.path}
+                {@const link = `${artifact.tls && artifact.tls.length > 0 ? 'https' : 'http'}://${rule.host}${path.path}`}
+                <Link on:click="{() => window.openExternal(link)}">
+                  {link}
                 </Link>
               {/if}
               {#if path.backend.service}

diff --git a/packages/renderer/src/lib/kube/details/OpenshiftRouteArtifact.svelte b/packages/renderer/src/lib/kube/details/OpenshiftRouteArtifact.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+import { Link } from '@podman-desktop/ui-svelte';
+
 import type { V1Route } from '/@api/openshift-types';
 
-import Link from '../../ui/Link.svelte';
 import Cell from './ui/Cell.svelte';
 import Title from './ui/Title.svelte';
 
@@ -66,8 +67,9 @@ export let artifact: V1Route | undefined;
     <tr>
       <Cell>Link</Cell>
       <Cell>
-        <Link externalRef="{artifact.spec.tls ? 'https' : 'http'}://{artifact.spec.host}{artifact.spec.path || ''}">
-          {artifact.spec.tls ? 'https' : 'http'}://{artifact.spec.host}{artifact.spec.path || ''}
+        {@const link = `${artifact.spec.tls ? 'https' : 'http'}://${artifact.spec.host}${artifact.spec.path || ''}`}
+        <Link on:click="{() => window.openExternal(link)}">
+          {link}
         </Link>
       </Cell>
     </tr>

diff --git a/packages/renderer/src/lib/onboarding/Onboarding.svelte b/packages/renderer/src/lib/onboarding/Onboarding.svelte
@@ -28,7 +28,7 @@
 <script lang="ts">
 import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
 import { faForward } from '@fortawesome/free-solid-svg-icons';
-import { Button, Spinner } from '@podman-desktop/ui-svelte';
+import { Button, Link, Spinner } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
 import Fa from 'svelte-fa';
@@ -41,7 +41,6 @@ import type { OnboardingInfo, OnboardingStepItem } from '/@api/onboarding';
 
 import type { ContextUI } from '../context/context';
 import { ContextKeyExpr } from '../context/contextKey';
-import Link from '../ui/Link.svelte';
 import {
   type ActiveOnboardingStep,
   cleanSetup,

diff --git a/packages/renderer/src/lib/pod/DeployPodToKube.svelte b/packages/renderer/src/lib/pod/DeployPodToKube.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { faExternalLink, faRocket } from '@fortawesome/free-solid-svg-icons';
 import type { V1NamespaceList, V1Pod } from '@kubernetes/client-node/dist/api';
-import { Button, Checkbox, ErrorMessage, Input } from '@podman-desktop/ui-svelte';
+import { Button, Checkbox, ErrorMessage, Input, Link } from '@podman-desktop/ui-svelte';
 import * as jsYaml from 'js-yaml';
 import { onDestroy, onMount } from 'svelte';
 import { router } from 'tinro';
@@ -11,7 +11,6 @@ import type { V1Route } from '/@api/openshift-types';
 
 import MonacoEditor from '../editor/MonacoEditor.svelte';
 import FormPage from '../ui/FormPage.svelte';
-import Link from '../ui/Link.svelte';
 import WarningMessage from '../ui/WarningMessage.svelte';
 
 export let resourceId: string;
@@ -420,7 +419,8 @@ function updateKubeResult() {
             required />
           <span class="text-gray-400 text-sm ml-1">
             Update Kubernetes manifest to respect the Pod security <Link
-              externalRef="https://kubernetes.io/docs/concepts/security/pod-security-standards#restricted"
+              on:click="{() =>
+                window.openExternal('https://kubernetes.io/docs/concepts/security/pod-security-standards#restricted')}"
               >restricted profile</Link
             >.</span>
         </div>

diff --git a/packages/renderer/src/lib/ui/DetailsPage.svelte b/packages/renderer/src/lib/ui/DetailsPage.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
+import { Link } from '@podman-desktop/ui-svelte';
 import { router } from 'tinro';
 
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 
 import { currentPage, lastPage } from '../../stores/breadcrumb';
-import Link from './Link.svelte';
 
 export let title: string;
 export let titleDetail: string | undefined = undefined;
@@ -28,8 +28,11 @@ function handleKeydown(e: KeyboardEvent) {
   <div class="flex flex-row w-full h-fit px-5 pt-4 pb-2">
     <div class="flex flex-col w-full h-fit">
       <div class="flex flew-row items-center text-sm text-[var(--pd-content-breadcrumb)]">
-        <Link class="text-sm" aria-label="back" internalRef="{$lastPage.path}" title="Go back to {$lastPage.name}"
-          >{$lastPage.name}</Link>
+        <Link
+          class="text-sm"
+          aria-label="back"
+          on:click="{() => router.goto($lastPage.path)}"
+          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" />

diff --git a/packages/renderer/src/lib/ui/FormPage.svelte b/packages/renderer/src/lib/ui/FormPage.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-import { LinearProgress } from '@podman-desktop/ui-svelte';
+import { LinearProgress, Link } from '@podman-desktop/ui-svelte';
 import { router } from 'tinro';
 
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 
 import { currentPage, lastPage } from '../../stores/breadcrumb';
-import Link from './Link.svelte';
 
 export let title: string;
 export let showBreadcrumb = true;
@@ -30,7 +29,7 @@ function handleKeydown(e: KeyboardEvent) {
     <div class="flex flex-col w-full h-fit">
       {#if showBreadcrumb}
         <div class="flex flew-row items-center text-sm text-[var(--pd-content-breadcrumb)]">
-          <Link aria-label="back" internalRef="{$lastPage.path}" title="Go back to {$lastPage.name}"
+          <Link aria-label="back" on:click="{() => router.goto($lastPage.path)}" 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>

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -79,6 +79,10 @@
     "./NavPage": {
       "types": "./dist/layouts/NavPage.d.ts",
       "svelte": "./dist/layouts/NavPage.svelte"
+    },
+    "./Link": {
+      "types": "./dist/link/Link.d.ts",
+      "svelte": "./dist/link/Link.svelte"
     }
   },
   "peerDependencies": {

diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
@@ -22,6 +22,7 @@ import Checkbox from './checkbox/Checkbox.svelte';
 import Input from './inputs/Input.svelte';
 import SearchInput from './inputs/SearchInput.svelte';
 import NavPage from './layouts/NavPage.svelte';
+import Link from './link/Link.svelte';
 import Modal from './modal/Modal.svelte';
 import LinearProgress from './progress/LinearProgress.svelte';
 import Spinner from './progress/Spinner.svelte';
@@ -40,6 +41,7 @@ export {
   ErrorMessage,
   Input,
   LinearProgress,
+  Link,
   Modal,
   NavPage,
   SearchInput,

diff --git a/packages/renderer/src/lib/ui/Link.spec.ts → packages/ui/src/lib/link/Link.spec.ts b/packages/renderer/src/lib/ui/Link.spec.ts → packages/ui/src/lib/link/Link.spec.ts
@@ -22,20 +22,10 @@ import '@testing-library/jest-dom/vitest';
 
 import { faRocket } from '@fortawesome/free-solid-svg-icons';
 import { fireEvent, render, screen } from '@testing-library/svelte';
-import { router } from 'tinro';
 import { expect, test, vi } from 'vitest';
 
 import Link from './Link.svelte';
 
-// mock the router
-vi.mock('tinro', () => {
-  return {
-    router: {
-      goto: vi.fn(),
-    },
-  };
-});
-
 test('Check link styling', async () => {
   render(Link);
 
@@ -59,37 +49,6 @@ test('Check icon styling', async () => {
   expect(link.firstChild?.firstChild).toHaveClass('svelte-fa');
 });
 
-test('Check href action', async () => {
-  const urlMock = vi.fn();
-  (window as any).openExternal = urlMock;
-  render(Link, { externalRef: 'http://test.com' });
-
-  // check href link
-  const link = screen.getByRole('link');
-  expect(link).toBeInTheDocument();
-  expect(urlMock).not.toHaveBeenCalled();
-
-  fireEvent.click(link);
-
-  expect(urlMock).toBeCalledTimes(1);
-  expect(router.goto).not.toHaveBeenCalled();
-});
-
-test('Check local href action', async () => {
-  const urlMock = vi.fn();
-  (window as any).openExternal = urlMock;
-  render(Link, { internalRef: '/Pods' });
-
-  // check href link
-  const link = screen.getByRole('link');
-  expect(link).toBeInTheDocument();
-
-  fireEvent.click(link);
-
-  expect(router.goto).toBeCalledTimes(1);
-  expect(urlMock).not.toHaveBeenCalled();
-});
-
 test('Check on:click action', async () => {
   const comp = render(Link);
 
@@ -101,7 +60,7 @@ test('Check on:click action', async () => {
   expect(link).toBeInTheDocument();
   expect(clickMock).not.toHaveBeenCalled();
 
-  fireEvent.click(link);
+  await fireEvent.click(link);
 
   expect(clickMock).toBeCalledTimes(1);
 });
diff --git a/packages/renderer/src/lib/ui/Link.svelte → packages/ui/src/lib/link/Link.svelte b/packages/renderer/src/lib/ui/Link.svelte → packages/ui/src/lib/link/Link.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-import { isFontAwesomeIcon } from '@podman-desktop/ui-svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import Fa from 'svelte-fa';
-import { router } from 'tinro';
 
-export let internalRef: string | undefined = undefined;
-export let externalRef: string | undefined = undefined;
+import { isFontAwesomeIcon } from '../utils/icon-utils';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let icon: any = undefined;
 
 let iconType: string | undefined = undefined;
@@ -21,13 +20,7 @@ onMount(() => {
 });
 
 function click(): void {
-  if (internalRef) {
-    router.goto(internalRef);
-  } else if (externalRef) {
-    window.openExternal(externalRef);
-  } else {
-    dispatch('click');
-  }
+  dispatch('click');
 }
 </script>
 
@@ -38,7 +31,7 @@ function click(): void {
 <a
   class="text-purple-400 hover:bg-white hover:bg-opacity-10 transition-all rounded-[4px] p-0.5 no-underline cursor-pointer {$$props.class ||
     ''}"
-  on:click="{() => click()}"
+  on:click="{click}"
   role="link"
   aria-label="{$$props['aria-label']}">
   {#if icon}