feat: add kube to compose actions (#3253)

### What does this PR do?

* Adds "Generate Kube" to Compose actions
* Adds "Kube" tab to Compose details

### Screenshot/screencast of this PR

<!-- Please include a screenshot or a screencast explaining what is doing this PR -->

### What issues does this PR fix or reference?

<!-- Please include any related issue from Podman Desktop repository (or from another issue tracker).
-->

Closes #3105

### How to test this PR?

1. Deploy a docker-compose example
(https://raw.githubusercontent.com/kubernetes/kompose/main/examples/docker-compose.yaml)
2. Go to the container view in PD
3. Press on the compose group
4. View kube tab

<!-- Please explain steps to reproduce -->

Signed-off-by: Charlie Drage <charlie@charliedrage.com>

packages/renderer/src/lib/compose/ComposeActions.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-import { faTrash, faPlay, faStop, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
+import { faFileCode, faTrash, faPlay, faStop, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
 import type { ComposeInfoUI } from './ComposeInfoUI';
+import { router } from 'tinro';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import DropdownMenu from '../ui/DropdownMenu.svelte';
 import FlatMenu from '../ui/FlatMenu.svelte';
@@ -57,6 +58,10 @@ async function restartCompose(composeInfoUI: ComposeInfoUI) {
   }
 }
 
+function openGenerateKube(): void {
+  router.goto(`/compose/${encodeURI(compose.name)}/${encodeURI(compose.engineId)}/kube`);
+}
+
 // If dropdownMenu = true, we'll change style to the imported dropdownMenu style
 // otherwise, leave blank.
 let actionsStyle;
@@ -93,6 +98,14 @@ if (dropdownMenu) {
 
 <!-- If dropdownMenu is true, use it, otherwise just show the regular buttons -->
 <svelte:component this="{actionsStyle}">
+  {#if !detailed}
+    <ListItemButtonIcon
+      title="Generate Kube"
+      onClick="{() => openGenerateKube()}"
+      menu="{dropdownMenu}"
+      detailed="{detailed}"
+      icon="{faFileCode}" />
+  {/if}
   <ListItemButtonIcon
     title="Restart Compose"
     onClick="{() => restartCompose(compose)}"

packages/renderer/src/lib/compose/ComposeDetails.spec.ts

@@ -26,6 +26,7 @@ beforeAll(() => {
   });
   (window as any).ResizeObserver = vi.fn().mockReturnValue({ observe: vi.fn(), unobserve: vi.fn() });
   (window as any).initializeProvider = vi.fn().mockResolvedValue([]);
+  (window as any).generatePodmanKube = vi.fn();
   mockBreadcrumb();
 });
 
@@ -44,3 +45,9 @@ test('Simple test that compose name is displayed', async () => {
   render(ComposeDetails, { composeName: 'foobar', engineId: 'engine' });
   expect(screen.getByText('foobar')).toBeInTheDocument();
 });
+
+test('Test that compose kube tab is clickable and loadable', async () => {
+  render(ComposeDetails, { composeName: 'foobar', engineId: 'engine' });
+  const kubeHref = screen.getByRole('link', { name: 'Kube' });
+  await fireEvent.click(kubeHref);
+});

packages/renderer/src/lib/compose/ComposeDetails.svelte

@@ -9,6 +9,7 @@ import { containersInfos } from '/@/stores/containers';
 import type { ComposeInfoUI } from './ComposeInfoUI';
 import { ContainerUtils } from '../container/container-utils';
 import ComposeDetailsLogs from './ComposeDetailsLogs.svelte';
+import ComposeDetailsKube from './ComposeDetailsKube.svelte';
 import type { ContainerInfoUI } from '../container/ContainerInfoUI';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import Tab from '../ui/Tab.svelte';
@@ -83,11 +84,15 @@ onDestroy(() => {
     </svelte:fragment>
     <svelte:fragment slot="tabs">
       <Tab title="Logs" url="logs" />
+      <Tab title="Kube" url="kube" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/logs" breadcrumb="Logs" navigationHint="tab">
         <ComposeDetailsLogs compose="{compose}" />
       </Route>
+      <Route path="/kube" breadcrumb="Kube" navigationHint="tab">
+        <ComposeDetailsKube compose="{compose}" />
+      </Route>
     </svelte:fragment>
   </DetailsPage>
 {/if}

packages/renderer/src/lib/compose/ComposeDetailsKube.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import MonacoEditor from '../editor/MonacoEditor.svelte';
+import type { ComposeInfoUI } from './ComposeInfoUI';
+
+export let compose: ComposeInfoUI;
+
+let kubeDetails: string;
+
+onMount(async () => {
+  // Grab all the container ID's from compose.containers
+  const containerIds = compose.containers.map(container => container.id);
+
+  // Generate the kube yaml using the generatePodmanKube function which
+  // only has to take in the engineID and an array of container ID's to generate from
+  const kubeResult = await window.generatePodmanKube(compose.engineId, containerIds);
+  kubeDetails = kubeResult;
+});
+</script>
+
+{#if kubeDetails}
+  <MonacoEditor content="{kubeDetails}" language="yaml" />
+{/if}