feat: bring docker compatibility page if flag is enabled

note: page will be empty (no widgets in it for now)

part of #9025
Signed-off-by: Florent Benoit <[email protected]>

packages/renderer/src/PreferencesNavigation.spec.ts

@@ -19,25 +19,35 @@
 import '@testing-library/jest-dom/vitest';
 
 import { render, screen } from '@testing-library/svelte';
-import { beforeAll, expect, test } from 'vitest';
+import { tick } from 'svelte';
+import type { TinroRouteMeta } from 'tinro';
+import { beforeEach, expect, test, vi } from 'vitest';
 
 import PreferencesNavigation from './PreferencesNavigation.svelte';
 
 // fake the window.events object
-beforeAll(() => {
-  (window.events as unknown) = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    receive: (_channel: string, func: any) => {
-      func();
+beforeEach(() => {
+  vi.resetAllMocks();
+  Object.defineProperty(global, 'window', {
+    value: {
+      getConfigurationValue: vi.fn(),
+      events: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        receive: (_channel: string, func: any) => {
+          func();
+        },
+      },
     },
-  };
+    writable: true,
+  });
+  vi.mocked(window.getConfigurationValue<boolean>).mockResolvedValue(true);
 });
 
 test('Test rendering of the preferences navigation bar and its items', () => {
   render(PreferencesNavigation, {
     meta: {
       url: '/',
-    },
+    } as unknown as TinroRouteMeta,
   });
 
   const navigationBar = screen.getByRole('navigation', { name: 'PreferencesNavigation' });
@@ -53,3 +63,42 @@ test('Test rendering of the preferences navigation bar and its items', () => {
   expect(authentication).toBeVisible();
   // ToDo: adding configuration section/items mocks for preferences, issue #2966
 });
+
+test('Test rendering of the compatibility docker pag if config is available', async () => {
+  render(PreferencesNavigation, {
+    meta: {
+      url: '/',
+    } as unknown as TinroRouteMeta,
+  });
+
+  // wait docker compatibility is being set
+  await tick();
+
+  // expect getConfigurationValue to be called
+  expect(window.getConfigurationValue).toBeCalledWith('dockerCompatibility.enabled');
+
+  const dockerCompatLink = screen.getByRole('link', { name: 'Docker Compatibility' });
+  expect(dockerCompatLink).toBeVisible();
+});
+
+test('Test rendering of the compatibility docker page is hidden if disabled', async () => {
+  // mock window.getConfigurationValue
+  vi.mocked(window.getConfigurationValue<boolean>).mockReset();
+  vi.mocked(window.getConfigurationValue<boolean>).mockResolvedValue(false);
+
+  render(PreferencesNavigation, {
+    meta: {
+      url: '/',
+    } as unknown as TinroRouteMeta,
+  });
+
+  // wait docker compatibility is being set
+  await tick();
+
+  // expect getConfigurationValue to be called
+  expect(window.getConfigurationValue).toBeCalledWith('dockerCompatibility.enabled');
+
+  // should not be displayed
+  const dockerCompatLink = screen.queryByRole('link', { name: 'Docker Compatibility' });
+  expect(dockerCompatLink).toBeNull();
+});

packages/renderer/src/PreferencesNavigation.svelte

@@ -3,6 +3,8 @@ import { SettingsNavItem } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import type { TinroRouteMeta } from 'tinro';
 
+import { ExperimentalSettings } from '/@api/docker-compatibility-info';
+
 import { CONFIGURATION_DEFAULT_SCOPE } from '../../main/src/plugin/configuration-registry-constants';
 import { configurationProperties } from './stores/configurationProperties';
 
@@ -18,6 +20,8 @@ function sortItems(items: any): any[] {
   return items.sort((a: { title: string }, b: { title: any }) => a.title.localeCompare(b.title));
 }
 
+let dockerCompatibilityEnabled = false;
+
 onMount(async () => {
   configurationProperties.subscribe(value => {
     configProperties = value
@@ -36,6 +40,14 @@ onMount(async () => {
         }
         return map;
       }, new Map());
+
+    window
+      .getConfigurationValue<boolean>(`${ExperimentalSettings.SectionName}.${ExperimentalSettings.Enabled}`)
+      .then(result => {
+        if (result) {
+          dockerCompatibilityEnabled = result;
+        }
+      });
   });
 });
 </script>
@@ -52,8 +64,10 @@ onMount(async () => {
     </div>
   </div>
   <div class="h-full overflow-hidden hover:overflow-y-auto" style="margin-bottom:auto">
-    {#each [{ title: 'Resources', href: '/preferences/resources' }, { title: 'Proxy', href: '/preferences/proxies' }, { title: 'Registries', href: '/preferences/registries' }, { title: 'Authentication', href: '/preferences/authentication-providers' }, { title: 'CLI Tools', href: '/preferences/cli-tools' }, { title: 'Kubernetes', href: '/preferences/kubernetes-contexts' }] as navItem}
-      <SettingsNavItem title={navItem.title} href={navItem.href} selected={meta.url === navItem.href} />
+    {#each [{ title: 'Resources', href: '/preferences/resources', visible: true }, { title: 'Proxy', href: '/preferences/proxies', visible: true }, { title: 'Docker Compatibility', href: '/preferences/docker-compatibility', visible: dockerCompatibilityEnabled }, { title: 'Registries', href: '/preferences/registries', visible: true }, { title: 'Authentication', href: '/preferences/authentication-providers', visible: true }, { title: 'CLI Tools', href: '/preferences/cli-tools', visible: true }, { title: 'Kubernetes', href: '/preferences/kubernetes-contexts', visible: true }] as navItem}
+      {#if navItem.visible}
+        <SettingsNavItem title={navItem.title} href={navItem.href} selected={meta.url === navItem.href} />
+      {/if}
     {/each}
 
     <!-- Default configuration properties start -->

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

@@ -7,6 +7,7 @@ import type { IConfigurationPropertyRecordedSchema } from '../../../../main/src/
 import Route from '../../Route.svelte';
 import { configurationProperties } from '../../stores/configurationProperties';
 import Onboarding from '../onboarding/Onboarding.svelte';
+import PreferencesDockerCompatibilityRendering from './docker-compat/PreferencesDockerCompatibilityRendering.svelte';
 import PreferencesAuthenticationProvidersRendering from './PreferencesAuthenticationProvidersRendering.svelte';
 import PreferencesCliToolsRendering from './PreferencesCliToolsRendering.svelte';
 import PreferencesContainerConnectionRendering from './PreferencesContainerConnectionRendering.svelte';
@@ -61,6 +62,9 @@ onMount(async () => {
   <Route path="/resources" breadcrumb="Resources" navigationHint="root">
     <PreferencesResourcesRendering />
   </Route>
+  <Route path="/docker-compatibility" breadcrumb="Docker Compatibility">
+    <PreferencesDockerCompatibilityRendering />
+  </Route>
   <Route path="/registries" breadcrumb="Registries">
     <PreferencesRegistriesEditing />
   </Route>

packages/renderer/src/lib/preferences/docker-compat/PreferencesDockerCompatibilityRendering.spec.ts

@@ -0,0 +1,30 @@
+/**********************************************************************
+ * Copyright (C) 2024 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 '@testing-library/jest-dom/vitest';
+
+import { render, screen } from '@testing-library/svelte';
+import { expect, test } from 'vitest';
+
+import PreferencesDockerCompatibilityRendering from './PreferencesDockerCompatibilityRendering.svelte';
+
+test('Expect title is displayed', async () => {
+  render(PreferencesDockerCompatibilityRendering);
+
+  expect(screen.getByText('Docker compatibility')).toBeInTheDocument();
+});

packages/renderer/src/lib/preferences/docker-compat/PreferencesDockerCompatibilityRendering.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import SettingsPage from '../SettingsPage.svelte';
+</script>
+
+<SettingsPage title="Docker compatibility">
+  <div slot="subtitle" class="text-sm font-thin mt-2">
+    Podman Desktop provides compatibility with Docker, allowing you to use your existing Docker commands, images and
+    workflows.
+  </div>
+</SettingsPage>