feat: navigate to catalog (podman-desktop#14656)

feat: navigate to extensions catalog
Signed-off-by: Philippe Martin <phmartin@redhat.com>

Author: feloy

packages/api/src/navigation-page.ts

@@ -51,4 +51,5 @@ export enum NavigationPage {
   EXPERIMENTAL_FEATURES = 'experimental',
   CREATE_PROVIDER_CONNECTION = 'create-provider-connection',
   NETWORK = 'network',
+  EXTENSIONS_CATALOG = 'extensions-catalog',
 }

packages/api/src/navigation-request.ts

@@ -54,6 +54,7 @@ export interface NavigationParameters {
   [NavigationPage.PROVIDER_TASK]: { internalId: string; taskId: number | undefined };
   [NavigationPage.EXPERIMENTAL_FEATURES]: never;
   [NavigationPage.NETWORK]: { name: string; engineId: string };
+  [NavigationPage.EXTENSIONS_CATALOG]: { searchTerm?: string };
 }
 
 // the parameters property is optional when the NavigationParameters say it is

packages/extension-api/src/extension-api.d.ts

@@ -4939,6 +4939,13 @@ declare module '@podman-desktop/api' {
     export function getFreePort(port: number): Promise<number>;
   }
 
+  export interface NavigateToExtensionsCatalogOptions {
+    /**
+     * the search term to use to filter the extensions. Supports `category:`, `keyword:` prefixes and `is:installed`, `not:installed`.
+     */
+    readonly searchTerm?: string;
+  }
+
   export namespace navigation {
     // Navigate to the Dashboard page
     export function navigateToDashboard(): Promise<void>;
@@ -5004,6 +5011,11 @@ declare module '@podman-desktop/api' {
      */
     export function navigateToOnboarding(extensionId?: string): Promise<void>;
 
+    /**
+     * Navigate to the Catalog tab of the Extensions page
+     */
+    export function navigateToExtensionsCatalog(options: NavigateToExtensionsCatalogOptions): Promise<void>;
+
     /**
      * Allow to define custom route for an extension.
      *

packages/main/src/plugin/extension/extension-loader.ts

@@ -1546,6 +1546,11 @@ export class ExtensionLoader implements IAsyncDisposable {
         onboardingExtensionId ??= extensionInfo.id;
         await this.navigationManager.navigateToOnboarding(onboardingExtensionId);
       },
+      navigateToExtensionsCatalog: async (
+        options: containerDesktopAPI.NavigateToExtensionsCatalogOptions,
+      ): Promise<void> => {
+        await this.navigationManager.navigateToExtensionsCatalog(options);
+      },
       navigate: async (routeId: string, ...args: unknown[]): Promise<void> => {
         return this.navigationManager.navigateToRoute(`${extensionInfo.id}.${routeId}`, args);
       },

packages/main/src/plugin/navigation/navigation-manager.spec.ts

@@ -293,3 +293,14 @@ test('check navigateToCreateProviderConnection', async () => {
     },
   });
 });
+
+test('check navigateToExtensionsCatalog', async () => {
+  await navigationManager.navigateToExtensionsCatalog({ searchTerm: 'not:installed category:foo keyword:bar' });
+
+  expect(apiSender.send).toHaveBeenCalledWith('navigate', {
+    page: NavigationPage.EXTENSIONS_CATALOG,
+    parameters: {
+      searchTerm: 'not:installed category:foo keyword:bar',
+    },
+  });
+});

packages/main/src/plugin/navigation/navigation-manager.ts

@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import type { ProviderContainerConnection } from '@podman-desktop/api';
+import type { NavigateToExtensionsCatalogOptions, ProviderContainerConnection } from '@podman-desktop/api';
 import { inject, injectable } from 'inversify';
 
 import { ApiSenderType } from '/@/plugin/api.js';
@@ -342,4 +342,13 @@ export class NavigationManager {
       },
     });
   }
+
+  async navigateToExtensionsCatalog(options: NavigateToExtensionsCatalogOptions): Promise<void> {
+    this.navigateTo({
+      page: NavigationPage.EXTENSIONS_CATALOG,
+      parameters: {
+        searchTerm: options.searchTerm,
+      },
+    });
+  }
 }

packages/renderer/src/App.svelte

@@ -5,6 +5,7 @@ import '@fortawesome/fontawesome-free/css/all.min.css';
 import { tablePersistence } from '@podman-desktop/ui-svelte';
 import { router } from 'tinro';
 
+import { parseExtensionListRequest } from '/@/lib/extensions/extension-list';
 import PinActions from '/@/lib/statusbar/PinActions.svelte';
 import { handleNavigation } from '/@/navigation';
 import { kubernetesNoCurrentContext } from '/@/stores/kubernetes-no-current-context';
@@ -395,8 +396,12 @@ tablePersistence.storage = new PodmanDesktopStoragePersist();
         <Route path="/troubleshooting/*" breadcrumb="Troubleshooting">
           <TroubleshootingPage />
         </Route>
-        <Route path="/extensions" breadcrumb="Extensions" navigationHint="root">
-          <ExtensionList />
+        <Route path="/extensions" breadcrumb="Extensions" navigationHint="root" let:meta>
+          {@const request = parseExtensionListRequest(meta)}
+          <ExtensionList
+            searchTerm={request.searchTerm}
+            screen={request.screen}
+          />
         </Route>
         <Route path="/extensions/details/:id/*" breadcrumb="Extension Details" let:meta navigationHint="details">
           <ExtensionDetails extensionId={meta.params.id} />

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

@@ -2,6 +2,7 @@
 import { faCloudDownload } from '@fortawesome/free-solid-svg-icons';
 import { Button, FilteredEmptyScreen, NavPage } from '@podman-desktop/ui-svelte';
 
+import type { ExtensionListScreen } from '/@/lib/extensions/extension-list';
 import InstalledExtensionList from '/@/lib/extensions/InstalledExtensionList.svelte';
 import ExtensionIcon from '/@/lib/images/ExtensionIcon.svelte';
 import { type CombinedExtensionInfoUI, combinedInstalledExtensions } from '/@/stores/all-installed-extensions';
@@ -16,9 +17,10 @@ import InstallManuallyExtensionModal from './InstallManuallyExtensionModal.svelt
 
 interface Props {
   searchTerm?: string;
+  screen?: ExtensionListScreen;
 }
 
-let { searchTerm = '' }: Props = $props();
+let { searchTerm = '', screen = 'installed' }: Props = $props();
 
 const extensionsUtils = new ExtensionsUtils();
 
@@ -48,7 +50,6 @@ function closeModal(): void {
   installManualImageModal = false;
 }
 
-let screen: 'installed' | 'catalog' | 'development' = $state('installed');
 let installManualImageModal: boolean = $state(false);
 
 function changeScreen(newScreen: 'installed' | 'catalog' | 'development'): void {

packages/renderer/src/lib/extensions/extension-list.spec.ts

@@ -0,0 +1,41 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import { describe, expect, it } from 'vitest';
+
+import { parseExtensionListRequest } from './extension-list';
+
+describe('parseExtensionListRequest', () => {
+  it('should return the correct query params when specified correctly', () => {
+    const request = { query: { searchTerm: 'category%3Akubernetes%20keyword%3Aprovider%20term', screen: 'catalog' } };
+    const result = parseExtensionListRequest(request);
+    expect(result).toEqual({ searchTerm: 'category:kubernetes keyword:provider term', screen: 'catalog' });
+  });
+
+  it('should return the correct query params when screen is not specified correctly', () => {
+    const request = { query: { searchTerm: 'test', screen: 'unknown' } };
+    const result = parseExtensionListRequest(request);
+    expect(result).toEqual({ searchTerm: 'test', screen: 'installed' });
+  });
+
+  it('should return the correct query params when nothing is specified', () => {
+    const request = {};
+    const result = parseExtensionListRequest(request);
+    expect(result).toEqual({ searchTerm: '', screen: 'installed' });
+  });
+});

packages/renderer/src/lib/extensions/extension-list.ts

@@ -0,0 +1,35 @@
+/**********************************************************************
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+const screens = ['installed', 'catalog', 'development'] as const;
+
+export type ExtensionListScreen = (typeof screens)[number];
+
+interface ExtensionListRequest {
+  searchTerm: string;
+  screen: ExtensionListScreen;
+}
+
+export function parseExtensionListRequest(request: { query?: Record<string, string> }): ExtensionListRequest {
+  return {
+    searchTerm: request.query?.searchTerm ? decodeURIComponent(request.query.searchTerm) : '',
+    screen: screens.includes(request.query?.screen as ExtensionListScreen)
+      ? (request.query?.screen as ExtensionListScreen)
+      : 'installed',
+  };
+}