refactor: replace router goto containers by handle navigation (podman-desktop#10032)

* refactor: replace router goto containers by handle navigation

Signed-off-by: axel7083 <[email protected]>

* fix: tests

Signed-off-by: axel7083 <[email protected]>

* fix: removing bind

Signed-off-by: axel7083 <[email protected]>

* fix: removing bind

Signed-off-by: axel7083 <[email protected]>

---------

Signed-off-by: axel7083 <[email protected]>

Author: axel7083

packages/api/src/navigation-page.ts

@@ -24,6 +24,7 @@ export enum NavigationPage {
   CONTAINER_LOGS = 'container-logs',
   CONTAINER_INSPECT = 'container-inspect',
   CONTAINER_TERMINAL = 'container-terminal',
+  CONTAINER_TTY = 'container-tty',
   CONTAINER_KUBE = 'container-kube',
   IMAGES = 'images',
   IMAGE_BUILD = 'image-build',

packages/api/src/navigation-request.ts

@@ -25,6 +25,7 @@ export interface NavigationParameters {
   [NavigationPage.CONTAINER]: { id: string };
   [NavigationPage.CONTAINER_EXPORT]: { id: string };
   [NavigationPage.CONTAINER_LOGS]: { id: string };
+  [NavigationPage.CONTAINER_TTY]: { id: string };
   [NavigationPage.CONTAINER_INSPECT]: { id: string };
   [NavigationPage.CONTAINER_TERMINAL]: { id: string };
   [NavigationPage.CONTAINER_KUBE]: { id: string };

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

@@ -1,6 +1,8 @@
 <script lang="ts">
 import { Link } from '@podman-desktop/ui-svelte';
-import { router } from 'tinro';
+
+import { handleNavigation } from '/@/navigation';
+import { NavigationPage } from '/@api/navigation-page';
 
 import DetailsCell from '../details/DetailsCell.svelte';
 import DetailsTable from '../details/DetailsTable.svelte';
@@ -10,7 +12,12 @@ import type { ComposeInfoUI } from './ComposeInfoUI';
 export let compose: ComposeInfoUI;
 
 function openContainer(containerID: string) {
-  router.goto(`/containers/${containerID}/logs`);
+  handleNavigation({
+    page: NavigationPage.CONTAINER_LOGS,
+    parameters: {
+      id: containerID,
+    },
+  });
 }
 </script>
 

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

@@ -1,12 +1,18 @@
 <script lang="ts">
-import { router } from 'tinro';
+import { handleNavigation } from '/@/navigation';
+import { NavigationPage } from '/@api/navigation-page';
 
 import type { ContainerInfoUI } from './ContainerInfoUI';
 
 export let object: ContainerInfoUI;
 
 function openContainerDetails(container: ContainerInfoUI): void {
-  router.goto(`/containers/${container.id}/`);
+  handleNavigation({
+    page: NavigationPage.CONTAINER,
+    parameters: {
+      id: container.id,
+    },
+  });
 }
 </script>
 

packages/renderer/src/lib/container/ContainerExport.spec.ts

@@ -100,7 +100,7 @@ test('Expect export function called when export button is clicked', async () =>
     id: container.Id,
     outputTarget: '/tmp/my/path',
   });
-  expect(goToMock).toBeCalledWith('/containers/');
+  expect(goToMock).toBeCalledWith('/containers');
 });
 
 test('Expect error shown if export function fails', async () => {

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

@@ -2,7 +2,6 @@
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { Button, ErrorMessage, Input } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
-import { router } from 'tinro';
 
 import { ContainerUtils } from '/@/lib/container/container-utils';
 import { handleNavigation } from '/@/navigation';
@@ -76,7 +75,7 @@ async function exportContainer() {
       outputTarget: outputUri.fsPath,
     });
     // go back to containers list
-    router.goto('/containers/');
+    handleNavigation({ page: NavigationPage.CONTAINERS });
   } catch (error) {
     exportedError = String(error);
   } finally {

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

@@ -6,8 +6,10 @@ import { onMount } from 'svelte';
 import { router } from 'tinro';
 
 import { array2String } from '/@/lib/string/string.js';
+import { handleNavigation } from '/@/navigation';
 import type { ContainerCreateOptions, DeviceMapping, HostConfig } from '/@api/container-info';
 import type { ImageInspectInfo } from '/@api/image-inspect-info';
+import { NavigationPage } from '/@api/navigation-page';
 import type { NetworkInspectInfo } from '/@api/network-info';
 
 import Route from '../../Route.svelte';
@@ -404,9 +406,14 @@ async function startContainer() {
 
     // redirect to containers if no tty, else redirect to the container details
     if (Tty && OpenStdin) {
-      router.goto(`/containers/${data.id}/tty`);
+      handleNavigation({
+        page: NavigationPage.CONTAINER_TTY,
+        parameters: {
+          id: data.id,
+        },
+      });
     } else {
-      router.goto('/containers');
+      handleNavigation({ page: NavigationPage.CONTAINERS });
     }
   } catch (e) {
     createError = String(e);

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

@@ -5,6 +5,8 @@ import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
 import { router } from 'tinro';
 
+import { handleNavigation } from '/@/navigation';
+import { NavigationPage } from '/@api/navigation-page';
 import type { ProviderContainerConnectionInfo, ProviderInfo } from '/@api/provider-info';
 
 import type { PodCreatePortOptions } from '../../../../main/src/plugin/dockerode/libpod-dockerode';
@@ -208,6 +210,10 @@ function getWarningText(): string {
   });
   return text;
 }
+
+function navigateToContainers(): void {
+  return handleNavigation({ page: NavigationPage.CONTAINERS });
+}
 </script>
 
 <EngineFormPage title="Copy containers to a pod" inProgress={createInProgress}>
@@ -291,7 +297,7 @@ function getWarningText(): string {
 
       <div class="w-full grid justify-items-end mt-5">
         <div>
-          <Button type="link" on:click={() => router.goto('/containers')}>Close</Button>
+          <Button type="link" on:click={navigateToContainers}>Close</Button>
           <Button
             icon={SolidPodIcon}
             bind:disabled={createInProgress}

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

@@ -1,18 +1,24 @@
 <script lang="ts">
 import { Link } from '@podman-desktop/ui-svelte';
-import { router } from 'tinro';
+
+import { handleNavigation } from '/@/navigation';
+import { NavigationPage } from '/@api/navigation-page';
 
 import DetailsCell from '../details/DetailsCell.svelte';
 import DetailsSubtitle from '../details/DetailsSubtitle.svelte';
 import DetailsTable from '../details/DetailsTable.svelte';
 import DetailsTitle from '../details/DetailsTitle.svelte';
-import type { PodInfoUI } from './PodInfoUI';
+import type { PodInfoContainerUI, PodInfoUI } from './PodInfoUI';
 
 export let pod: PodInfoUI | undefined;
 let creationTime: Date;
 if (pod) {
   creationTime = new Date(pod.created);
 }
+
+function navigateToLogs(container: PodInfoContainerUI): void {
+  return handleNavigation({ page: NavigationPage.CONTAINER_LOGS, parameters: { id: container.Id } });
+}
 </script>
 
 <DetailsTable>
@@ -50,7 +56,7 @@ if (pod) {
       {#each pod.containers as container}
         <tr>
           <DetailsSubtitle>
-            <Link on:click={() => router.goto(`/containers/${container.Id}/logs`)}>
+            <Link on:click={() => navigateToLogs(container)}>
               {container.Names}
             </Link>
           </DetailsSubtitle>

packages/renderer/src/lib/volume/VolumeDetailsSummary.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 import { Link } from '@podman-desktop/ui-svelte';
-import { router } from 'tinro';
+
+import { handleNavigation } from '/@/navigation';
+import { NavigationPage } from '/@api/navigation-page';
 
 import DetailsCell from '../details/DetailsCell.svelte';
 import DetailsTable from '../details/DetailsTable.svelte';
@@ -11,7 +13,12 @@ export let volume: VolumeInfoUI;
 const createdTime: Date = new Date(volume.created);
 
 function openContainer(containerID: string) {
-  router.goto(`/containers/${containerID}/logs`);
+  handleNavigation({
+    page: NavigationPage.CONTAINER_LOGS,
+    parameters: {
+      id: containerID,
+    },
+  });
 }
 </script>