fix: show recommended ext card when podman is ready (#10853)

* fix: show recommended ext card when podman is ready

This PR introduces optional when field for recommendations.json
entries. Recommendation card is shown if 'when' condition is
evaluated to true.

Example:

```when="provider.podman.status==='ready'"```

shows recommendation card when there is running podman VM.

```when="provider.kind.status==='ready'"```

shows recommendation card when there is running kind instance.

This PR also improves component tests implementation.

Signed-off-by: Denis Golovin <dgolovin@redhat.com>

packages/main/src/plugin/recommendations/recommendations-api.ts

@@ -34,6 +34,7 @@ export interface ExtensionBanner {
       end: string;
     };
   };
+  when?: string;
 }
 
 export interface RecommendedRegistryExtensionDetails {

packages/renderer/src/lib/recommendation/ExtensionBanners.spec.ts

@@ -17,37 +17,16 @@
  ***********************************************************************/
 
 import { render, screen } from '@testing-library/svelte';
-import { get } from 'svelte/store';
-import { beforeEach, expect, test, vi } from 'vitest';
+import { expect, test } from 'vitest';
 
 import ExtensionBanners from '/@/lib/recommendation/ExtensionBanners.svelte';
 import { extensionBannerInfos } from '/@/stores/extensionBanners';
+import { providerInfos } from '/@/stores/providers';
+import type { ProviderInfo } from '/@api/provider-info';
 
 import type { FeaturedExtension } from '../../../../main/src/plugin/featured/featured-api';
 import type { ExtensionBanner } from '../../../../main/src/plugin/recommendations/recommendations-api';
 
-const getExtensionBannersMock = vi.fn();
-
-// fake the window.events object
-beforeEach(() => {
-  vi.resetAllMocks();
-  Object.defineProperty(window, 'getExtensionBanners', { value: getExtensionBannersMock });
-  Object.defineProperty(window, 'getConfigurationProperties', { value: vi.fn().mockResolvedValueOnce({}) });
-  Object.defineProperty(window, 'getConfigurationValue', { value: vi.fn().mockResolvedValue(undefined) });
-  (window.events as unknown) = {
-    receive: (_channel: string, func: () => void): void => {
-      func();
-    },
-  };
-});
-
-const waitForInitialization = async (): Promise<void> => {
-  // wait store are populated
-  while (get(extensionBannerInfos).length === 0) {
-    await new Promise(resolve => setTimeout(resolve, 200));
-  }
-};
-
 test('multiple banners should be rendered', async () => {
   const banners: ExtensionBanner[] = Array.from({ length: 10 }, (_, i) => ({
     extensionId: `dummy.id-${i}`,
@@ -58,12 +37,7 @@ test('multiple banners should be rendered', async () => {
     thumbnail: 'data:image/png;base64-thumbnail',
   }));
 
-  getExtensionBannersMock.mockResolvedValue(banners);
-
-  // ask to update the featured Extensions store
-  window.dispatchEvent(new CustomEvent('system-ready'));
-
-  await waitForInitialization();
+  extensionBannerInfos.set(banners);
 
   render(ExtensionBanners);
 
@@ -72,3 +46,39 @@ test('multiple banners should be rendered', async () => {
     expect(text).toBeDefined();
   }
 });
+
+test('only banners with when condition evaluated to true should be rendered', async () => {
+  const banner1 = {
+    extensionId: `dummy.id-when-visible-1`,
+    title: 'Visible',
+    featured: {} as unknown as FeaturedExtension,
+    description: 'dummy description',
+    icon: 'data:image/png;base64-icon',
+    thumbnail: 'data:image/png;base64-thumbnail',
+    when: `provider.podman.status === 'ready'`,
+  };
+
+  const banner2 = {
+    extensionId: `dummy.id-when-invisible-1`,
+    title: 'Invisible',
+    featured: {} as unknown as FeaturedExtension,
+    description: 'dummy description',
+    icon: 'data:image/png;base64-icon',
+    thumbnail: 'data:image/png;base64-thumbnail',
+    when: `provider.kubectl.status === 'ready'`,
+  };
+
+  const providerInfo = {
+    internalId: '0',
+    id: 'podman',
+    status: 'ready',
+  };
+
+  providerInfos.set([providerInfo as unknown as ProviderInfo]);
+  extensionBannerInfos.set([banner1, banner2]);
+
+  render(ExtensionBanners);
+
+  expect(screen.getByText(banner1.title)).toBeDefined();
+  expect(screen.queryByText(banner2.title)).toBeNull();
+});

packages/renderer/src/lib/recommendation/ExtensionBanners.svelte

@@ -2,9 +2,26 @@
 import ExtensionBanner from '/@/lib/recommendation/ExtensionBanner.svelte';
 import { extensionBannerInfos } from '/@/stores/extensionBanners';
 
+import type { ExtensionBanner as ExtensionBannerInfo } from '../../../../main/src/plugin/recommendations/recommendations-api';
 import { isDark } from '../../stores/appearance';
+import { providerInfos } from '../../stores/providers';
+import { ContextUI } from '../context/context';
+import { ContextKeyExpr } from '../context/contextKey';
+
+let banners: ExtensionBannerInfo[] = $derived.by(() =>
+  $extensionBannerInfos.filter(banner => !banner.when || isBannerVisible(banner)),
+);
+
+function isBannerVisible(banner: ExtensionBannerInfo): boolean | undefined {
+  const context: ContextUI = new ContextUI();
+  $providerInfos.forEach(provider => {
+    context.setValue(`provider.${provider.id}.status`, provider.status);
+  });
+  const whenDeserialized = ContextKeyExpr.deserialize(banner.when);
+  return whenDeserialized?.evaluate(context);
+}
 </script>
 
-{#each $extensionBannerInfos as banner (banner.extensionId)}
+{#each banners as banner (banner.extensionId)}  
   <ExtensionBanner banner={banner} isDark={$isDark} />
 {/each}