fix: handle ids with spaces for extensions

fixes podman-desktop#6955
Signed-off-by: Florent Benoit <[email protected]>

Author: benoitf

packages/renderer/src/lib/extensions/ExtensionDetails.spec.ts

@@ -65,6 +65,31 @@ export const aFakeExtension: CatalogExtension = {
   ],
 };
 
+export const withSpacesFakeExtension: CatalogExtension = {
+  id: 'id A Installed',
+  publisherName: 'FooPublisher',
+  shortDescription: 'this is short A',
+  publisherDisplayName: 'Foo Publisher',
+  extensionName: 'a-extension',
+  displayName: 'A Extension',
+  categories: [],
+  unlisted: false,
+  versions: [
+    {
+      version: '1.0.0A',
+      preview: false,
+      files: [
+        {
+          assetType: 'icon',
+          data: 'iconA',
+        },
+      ],
+      ociUri: 'linkA',
+      lastUpdated: new Date(),
+    },
+  ],
+};
+
 const combined: CombinedExtensionInfoUI[] = [
   {
     id: 'idAInstalled',
@@ -109,3 +134,15 @@ test('Expect empty screen', async () => {
   const extensionNotFound = screen.getByText('Extension not found');
   expect(extensionNotFound).toBeInTheDocument();
 });
+
+test('Expect to have details page with id with spaces', async () => {
+  const extensionId = 'id A Installed';
+
+  catalogExtensionInfos.set([withSpacesFakeExtension]);
+  extensionInfos.set(combined);
+
+  await waitRender({ extensionId });
+
+  const heading = screen.getByRole('heading', { name: 'A Extension extension' });
+  expect(heading).toBeInTheDocument();
+});

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

@@ -27,7 +27,11 @@ let extension: Readable<ExtensionDetailsUI | undefined>;
 $: extension = derived(
   [catalogExtensionInfos, combinedInstalledExtensions],
   ([$catalogExtensionInfos, $combinedInstalledExtensions]) => {
-    return extensionsUtils.extractExtensionDetail($catalogExtensionInfos, $combinedInstalledExtensions, extensionId);
+    return extensionsUtils.extractExtensionDetail(
+      $catalogExtensionInfos,
+      $combinedInstalledExtensions,
+      decodeURIComponent(extensionId),
+    );
   },
 );
 </script>

packages/renderer/src/lib/extensions/ExtensionDetailsLink.spec.ts

@@ -69,3 +69,31 @@ test('Expect to have link with displayIcon', async () => {
   // expect the router to be called
   expect(vi.mocked(router.goto)).toHaveBeenCalledWith('/extensions/details/myId/');
 });
+
+test('Expect to have link with spaces', async () => {
+  const extension: CombinedExtensionInfoUI = {
+    type: 'pd',
+    id: 'my Id with spaces',
+    name: 'foo',
+    description: 'my description',
+    displayName: 'This is the display name',
+    publisher: '',
+    removable: false,
+    version: 'v1.2.3',
+    state: 'started',
+    path: '',
+    readme: '',
+    icon: 'iconOfMyExtension.png',
+  };
+
+  render(ExtensionDetailsLink, { extension });
+
+  const detailsButton = screen.getByRole('button', { name: 'foo extension details' });
+  expect(detailsButton).toBeInTheDocument();
+
+  // click the button
+  await fireEvent.click(detailsButton);
+
+  // expect the router to be called
+  expect(vi.mocked(router.goto)).toHaveBeenCalledWith('/extensions/details/my%20Id%20with%20spaces/');
+});

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

@@ -11,7 +11,7 @@ export let extension: CombinedExtensionInfoUI;
 export let displayIcon: boolean = true;
 
 function openDetailsExtension() {
-  router.goto(`/extensions/details/${extension.id}/`);
+  router.goto(`/extensions/details/${encodeURIComponent(extension.id)}/`);
 }
 </script>