feat: add summary tab for compose (#3317)

### What does this PR do?

* Adds the summary tab for compose which takes inspiration on how we
  summarize pod details.
* Adds tests

### 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 #3191

### How to test this PR?

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

1. Deploy an example compose yaml
2. Click on the group of containers
3. Click on summary tab

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

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

@@ -104,19 +104,21 @@ console.log('compose: ', compose);
 
 <!-- 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="Deploy to Kubernetes"
     onClick="{() => deployToKubernetes()}"
     menu="{dropdownMenu}"
     hidden="{!(compose.engineType === 'podman')}"
     detailed="{detailed}"
     icon="{faRocket}" />
-  <ListItemButtonIcon
-    title="Generate Kube"
-    onClick="{() => openGenerateKube()}"
-    menu="{dropdownMenu}"
-    detailed="{detailed}"
-    icon="{faFileCode}" />
   <ListItemButtonIcon
     title="Restart Compose"
     onClick="{() => restartCompose(compose)}"

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

@@ -165,6 +165,17 @@ test('Simple test that compose name is displayed', async () => {
   expect(screen.getByText('foobar')).toBeInTheDocument();
 });
 
+// Test that compose summary is clickable and loadable
+test('Simple test that compose summary is clickable and loadable', async () => {
+  render(ComposeDetails, { composeName: 'foobar', engineId: 'engine' });
+  // Click on the summary href
+  const summaryHref = screen.getByRole('link', { name: 'Summary' });
+  await fireEvent.click(summaryHref);
+
+  // Check that 'Name:' is displayed meaning it has loaded correctly.
+  expect(screen.getByText('Name:')).toBeInTheDocument();
+});
+
 test('Compose details inspect is clickable and loadable', async () => {
   const mockedContainers = [
     {

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

@@ -13,6 +13,7 @@ import ComposeDetailsKube from './ComposeDetailsKube.svelte';
 import type { ContainerInfoUI } from '../container/ContainerInfoUI';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import Tab from '../ui/Tab.svelte';
+import ComposeDetailsSummary from './ComposeDetailsSummary.svelte';
 import ComposeDetailsInspect from './ComposeDetailsInspect.svelte';
 
 export let composeName: string;
@@ -93,11 +94,15 @@ onDestroy(() => {
       <ComposeActions compose="{compose}" detailed="{true}" />
     </svelte:fragment>
     <svelte:fragment slot="tabs">
+      <Tab title="Summary" url="summary" />
       <Tab title="Logs" url="logs" />
       <Tab title="Inspect" url="inspect" />
       <Tab title="Kube" url="kube" />
     </svelte:fragment>
     <svelte:fragment slot="content">
+      <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
+        <ComposeDetailsSummary compose="{compose}" />
+      </Route>
       <Route path="/logs" breadcrumb="Logs" navigationHint="tab">
         <ComposeDetailsLogs compose="{compose}" />
       </Route>

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+import { router } from 'tinro';
+
+import type { ComposeInfoUI } from './ComposeInfoUI';
+
+export let compose: ComposeInfoUI;
+
+function openContainer(containerID: string) {
+  router.goto(`/containers/${containerID}/logs`);
+}
+</script>
+
+<div class="flex px-5 py-4 flex-col">
+  <div class="w-full">
+    <table>
+      <tr>
+        <td class="pt-2 pr-2">Name:</td>
+        <td class="pt-2 pr-2">{compose.name}</td>
+      </tr>
+    </table>
+  </div>
+  {#if compose.containers.length > 0}
+    <div class="w-full my-12">
+      <span>Containers using this Compose group:</span>
+      <table>
+        {#each compose.containers as container}
+          <tr class="cursor-pointer" on:click="{() => openContainer(container.id)}">
+            <td class="pt-2 pr-2">{container.name}</td>
+            <td class="pt-2 pr-2">{container.id}</td>
+          </tr>
+        {/each}
+      </table>
+    </div>
+  {/if}
+</div>