feat: link to a page listing the extensions related to kubernetes providers (#433)

* feat: link to extensions catalog

Signed-off-by: Philippe Martin <[email protected]>

* feat: new provider card

Signed-off-by: Philippe Martin <[email protected]>

* chore: update podman-desktop api with navigate to extensions catalog

Signed-off-by: Philippe Martin <[email protected]>

* test: add unit test

Signed-off-by: Philippe Martin <[email protected]>

* fix: ui

Signed-off-by: Philippe Martin <[email protected]>

---------

Signed-off-by: Philippe Martin <[email protected]>

Author: feloy

packages/channels/src/interface/navigation-api.ts

@@ -20,4 +20,5 @@ export const NavigationApi = Symbol.for('NavigationApi');
 
 export interface NavigationApi {
   navigateToProviderNewConnection(id: string): Promise<void>;
+  navigateToExtensionsCatalog(searchTerm?: string): Promise<void>;
 }

packages/extension/src/manager/navigation-api.ts

@@ -32,4 +32,15 @@ export class NavigationApiImpl implements NavigationApi {
     }
     return podmanDesktopApi.navigation.navigateToCreateProviderConnection(id);
   }
+
+  async navigateToExtensionsCatalog(searchTerm?: string): Promise<void> {
+    // This test can be removed when the minimal version is set to 1.23
+    if (!('navigateToExtensionsCatalog' in podmanDesktopApi.navigation)) {
+      console.warn(
+        'navigating to extensions catalog is not supported in this version of Podman Desktop, please upgrade to the latest version',
+      );
+      return;
+    }
+    return podmanDesktopApi.navigation.navigateToExtensionsCatalog({ searchTerm });
+  }
 }

packages/webview/src/component/dashboard/KubernetesProviderCard.svelte

@@ -34,14 +34,12 @@ async function createNew(provider: KubernetesProvider): Promise<void> {
     <Markdown markdown={provider.emptyConnectionMarkdownDescription} />
   </p>
 
-  <div class="flex justify-center">
-    <Button
-      type="primary"
-      on:click={(): Promise<void> => createNew(provider)}
-      class="flex items-center"
-      aria-label={provider.creationButtonTitle ?? 'Create new'}>
-      <Fa icon={faPlusCircle} size="1.2x" class="mr-1" />
-      {provider.creationButtonTitle ?? 'Create new'}
-    </Button>
-  </div>
+  <Button
+    type="primary"
+    on:click={(): Promise<void> => createNew(provider)}
+    class="flex items-center"
+    aria-label={provider.creationButtonTitle ?? 'Create new'}>
+    <Fa icon={faPlusCircle} size="1.2x" class="mr-1" />
+    {provider.creationButtonTitle ?? 'Create new'}
+  </Button>
 </div>

packages/webview/src/component/dashboard/NewProviderCard.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { faPuzzlePiece } from '@fortawesome/free-solid-svg-icons';
+import { Button } from '@podman-desktop/ui-svelte';
+import Fa from 'svelte-fa';
+import NewProvider from '/@/component/icons/NewProvider.svelte';
+import { getContext } from 'svelte';
+import { Remote } from '/@/remote/remote';
+import { API_NAVIGATION } from '@kubernetes-dashboard/channels';
+import Markdown from '/@/markdown/Markdown.svelte';
+
+const remote = getContext<Remote>(Remote);
+const navigationApi = remote.getProxy(API_NAVIGATION);
+
+const markdownText = `
+Install a new Kubernetes provider via extension. Navigate to extensions by pressing the button, install the ones you prefer and they will show up here.
+      
+More information: [creating a kube cluster](https://podman-desktop.io/docs/kubernetes/creating-a-kube-cluster)`;
+</script>
+
+<div class="rounded-xl p-5 text-left border border-dotted border-(--pd-content-divider)">
+  <div class="flex justify-left text-(--pd-details-empty-icon) py-2 mb-2">
+    <NewProvider />
+  </div>
+  <h1 class="text-lg font-semibold mb-4">New provider</h1>
+
+  <p class="text-sm text-(--pd-content-text) mb-6">
+    <Markdown markdown={markdownText}></Markdown>
+  </p>
+
+  <Button
+    type="secondary"
+    on:click={async (): Promise<void> => {
+      await navigationApi.navigateToExtensionsCatalog('category:kubernetes keyword:provider not:installed');
+    }}
+    class="flex items-center"
+    aria-label="See available extensions">
+    <Fa icon={faPuzzlePiece} size="1.2x" class="mr-1" />
+    See available extensions
+  </Button>
+</div>

packages/webview/src/component/dashboard/NoContextPage.spec.ts

@@ -23,23 +23,30 @@ import { beforeEach, expect, test, vi } from 'vitest';
 import NoContextPage from './NoContextPage.svelte';
 import { StatesMocks } from '/@/tests/state-mocks';
 import { FakeStateObject } from '/@/state/util/fake-state-object.svelte';
-import type { KubernetesProvidersInfo } from '@kubernetes-dashboard/channels';
+import { API_NAVIGATION, type KubernetesProvidersInfo, type NavigationApi } from '@kubernetes-dashboard/channels';
 import KubeIcon from '/@/component/icons/KubeIcon.svelte';
 import KubernetesProviderCard from '/@/component/dashboard/KubernetesProviderCard.svelte';
 import type { Unsubscriber } from 'svelte/store';
+import { RemoteMocks } from '/@/tests/remote-mocks';
 
 vi.mock(import('./KubernetesProviderCard.svelte'));
 vi.mock(import('/@/component/icons/KubeIcon.svelte'));
 
 const statesMocks = new StatesMocks();
 let kubernetesProvidersMock: FakeStateObject<KubernetesProvidersInfo, void>;
+const remoteMocks = new RemoteMocks();
 
 beforeEach(() => {
   vi.resetAllMocks();
   statesMocks.reset();
+  remoteMocks.reset();
 
   kubernetesProvidersMock = new FakeStateObject<KubernetesProvidersInfo, void>();
   statesMocks.mock<KubernetesProvidersInfo, void>('stateKubernetesProvidersInfoUI', kubernetesProvidersMock);
+
+  remoteMocks.mock(API_NAVIGATION, {
+    navigateToExtensionsCatalog: vi.fn(),
+  } as unknown as NavigationApi);
 });
 
 test('should render the Kubernetes icon', () => {
@@ -50,8 +57,17 @@ test('should render the Kubernetes icon', () => {
 test('should render the main heading', () => {
   render(NoContextPage);
 
-  const heading = screen.getByRole('heading', { level: 1 });
-  expect(heading).toHaveTextContent('No Kubernetes cluster');
+  const headings = screen.getAllByRole('heading', { level: 1 });
+  expect(headings.length).toBeGreaterThan(0);
+  expect(headings[0]).toHaveTextContent('No Kubernetes cluster');
+});
+
+test('should render the New provider card', () => {
+  render(NoContextPage);
+
+  const headings = screen.getAllByRole('heading', { level: 1 });
+  expect(headings.length).toBeGreaterThan(1);
+  expect(headings[1]).toHaveTextContent('New provider');
 });
 
 test('should render the description text', () => {

packages/webview/src/component/dashboard/NoContextPage.svelte

@@ -4,6 +4,7 @@ import { getContext, onDestroy, onMount } from 'svelte';
 import { States } from '/@/state/states';
 import type { Unsubscriber } from 'svelte/store';
 import KubernetesProviderCard from '/@/component/dashboard/KubernetesProviderCard.svelte';
+import NewProviderCard from '/@/component/dashboard/NewProviderCard.svelte';
 
 const states = getContext<States>(States);
 const kubernetesProviders = states.stateKubernetesProvidersInfoUI;
@@ -33,6 +34,7 @@ onDestroy(() => {
       {#each kubernetesProviders.data?.providers as provider (provider.id)}
         <KubernetesProviderCard provider={provider} />
       {/each}
+      <NewProviderCard />
     </div>
   </div>
 </div>