fix: removing a connection(podman machine) should redirect to previous page

packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.spec.ts

@@ -29,6 +29,7 @@ import type { ProviderContainerConnectionInfo, ProviderInfo } from '../../../../
 import userEvent from '@testing-library/user-event';
 import { router } from 'tinro';
 import PreferencesContainerConnectionRendering from './PreferencesContainerConnectionRendering.svelte';
+import { lastPage } from '/@/stores/breadcrumb';
 
 test('Expect that the right machine is displayed', async () => {
   const socketPath = '/my/common-socket-path';
@@ -100,3 +101,113 @@ test('Expect that the right machine is displayed', async () => {
   const title = screen.getByRole('heading', { name: 'podman machine 2', level: 1 });
   expect(title).toBeInTheDocument();
 });
+
+test('Expect that removing the connection is going back to the previous page', async () => {
+  const socketPath = '/my/common-socket-path';
+  const podmanMachineName1 = 'podman machine 1';
+  const podmanMachineName2 = 'podman machine 2';
+  const podmanMachineName3 = 'podman machine 3';
+
+  const routerGotoSpy = vi.spyOn(router, 'goto');
+
+  const deleteMock = vi.fn();
+  (window as any).deleteProviderConnectionLifecycle = deleteMock;
+
+  const providerInfo: ProviderInfo = {
+    id: 'podman',
+    name: 'podman',
+    images: {
+      icon: 'img',
+    },
+    status: 'started',
+    warnings: undefined,
+    containerProviderConnectionCreation: true,
+    detectionChecks: undefined,
+    containerConnections: [
+      {
+        name: podmanMachineName1,
+        status: 'started',
+        endpoint: {
+          socketPath,
+        },
+        type: 'podman',
+      },
+      {
+        name: podmanMachineName2,
+        status: 'stopped',
+        endpoint: {
+          socketPath,
+        },
+        type: 'podman',
+        lifecycleMethods: ['delete'],
+      },
+      {
+        name: podmanMachineName3,
+        status: 'started',
+        endpoint: {
+          socketPath,
+        },
+        type: 'podman',
+      },
+    ],
+    installationSupport: undefined,
+    internalId: '0',
+    kubernetesConnections: [],
+    kubernetesProviderConnectionCreation: true,
+    links: undefined,
+    containerProviderConnectionInitialization: false,
+    containerProviderConnectionCreationDisplayName: 'Podman machine',
+    kubernetesProviderConnectionInitialization: false,
+  };
+
+  // 3 connections with the same socket path
+  providerInfos.set([providerInfo]);
+
+  // encode name with base64 of the second machine
+  const name = Buffer.from(podmanMachineName2).toString('base64');
+
+  const connection = Buffer.from(socketPath).toString('base64');
+
+  // defines a fake lastPage so we can check where we will be redirected
+  lastPage.set({ name: 'Fake Previous', path: '/last' });
+
+  // delete current machine 2 from the provider info
+  deleteMock.mockImplementation(() => {
+    providerInfos.update(providerInfos =>
+      providerInfos.map(provider => {
+        provider.containerConnections = provider.containerConnections.filter(
+          connection => connection.name !== podmanMachineName2,
+        );
+        return provider;
+      }),
+    );
+  });
+
+  render(PreferencesContainerConnectionRendering, {
+    name,
+    connection,
+    providerInternalId: '0',
+  });
+
+  // expect to have the second machine being displayed (and not the first one that also match socket path)
+  const title = screen.getByRole('heading', { name: 'podman machine 2', level: 1 });
+  expect(title).toBeInTheDocument();
+
+  // ok now we delete the connection
+  const deleteButton = screen.getByRole('button', { name: 'Delete' });
+
+  // grab current route
+  const currentRoute = window.location;
+  expect(currentRoute.href).toBe('http://localhost:3000/');
+
+  // click on it
+  await userEvent.click(deleteButton);
+
+  // expect that we have called the router when page has been removed
+  // to jump to the previous page
+  expect(routerGotoSpy).toBeCalledWith('/last');
+
+  // grab updated route
+  const afterRoute = window.location;
+  expect(afterRoute.href).toBe('http://localhost:3000/last');
+});

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

@@ -23,6 +23,8 @@ export let providerInternalId: string = undefined;
 export let connection: string = undefined;
 export let name: string = undefined;
 
+let detailsPage: DetailsPage;
+
 const connectionName = Buffer.from(name, 'base64').toString();
 const socketPath: string = Buffer.from(connection, 'base64').toString();
 $: connectionStatus = new Map<string, IConnectionStatus>();
@@ -44,6 +46,11 @@ onMount(async () => {
     connectionInfo = providerInfo?.containerConnections?.find(
       connection => connection.endpoint.socketPath === socketPath && connection.name === connectionName,
     );
+    if (!connectionInfo) {
+      // closing the page of a connection that has been removed
+      detailsPage.close();
+      return;
+    }
     const containerConnectionName = getProviderConnectionName(providerInfo, connectionInfo);
     if (
       containerConnectionName &&
@@ -123,7 +130,7 @@ function setNoLogs() {
 
 {#if connectionInfo}
   <div class="bg-charcoal-700 h-full">
-    <DetailsPage title="{connectionInfo.name}">
+    <DetailsPage title="{connectionInfo.name}" bind:this="{detailsPage}">
       <svelte:fragment slot="subtitle">
         <div class="flex flex-row">
           <ConnectionStatus status="{connectionInfo.status}" />