feat: makes containers port(s) list multi line (podman-desktop#9554)

* feat: makes containers port multi line Signed-off-by: axel7083 <[email protected]> * fix: remove legacy tests Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
axel7083 · Oct 24, 2024 · a2a052a · a2a052a
1 parent 5fa3e80
commit a2a052a
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 14 deletions.
diff --git a/packages/renderer/src/lib/details/DetailsCell.svelte b/packages/renderer/src/lib/details/DetailsCell.svelte
@@ -3,6 +3,6 @@ export let style: string = '';
 export let onClick: () => void = () => {};
 </script>
 
-<td class="pt-1 pl-3 {style}" on:click={onClick}>
+<td class="pt-1 pl-3 {style} {$$props.class}" on:click={onClick}>
   <slot />
 </td>
diff --git a/packages/renderer/src/lib/kube/details/KubeContainerArtifact.spec.ts b/packages/renderer/src/lib/kube/details/KubeContainerArtifact.spec.ts
@@ -55,13 +55,6 @@ test('Container artifact renders with correct values', async () => {
   expect(screen.getByText('Image Pull Policy')).toBeInTheDocument();
   expect(screen.getByText('IfNotPresent')).toBeInTheDocument();
 
-  // Check if ports are displayed correctly
-  if (fakeContainer.ports && fakeContainer.ports.length > 0) {
-    const portsText = fakeContainer.ports.map(port => `${port.containerPort}/${port.protocol}`).join(', ');
-    expect(screen.getByText('Ports')).toBeInTheDocument();
-    expect(screen.getByText(portsText)).toBeInTheDocument();
-  }
-
   // Check if environment variables are displayed correctly
   if (fakeContainer.env && fakeContainer.env.length > 0) {
     expect(screen.getByText('Environment Variables')).toBeInTheDocument();

diff --git a/packages/renderer/src/lib/kube/details/KubeContainerArtifact.svelte b/packages/renderer/src/lib/kube/details/KubeContainerArtifact.svelte
@@ -2,6 +2,7 @@
 import type { V1Container } from '@kubernetes/client-node';
 
 import Cell from '/@/lib/details/DetailsCell.svelte';
+import KubeContainerPorts from '/@/lib/kube/details/KubeContainerPorts.svelte';
 
 export let artifact: V1Container | undefined;
 </script>
@@ -19,12 +20,7 @@ export let artifact: V1Container | undefined;
     <Cell>Image Pull Policy</Cell>
     <Cell>{artifact.imagePullPolicy}</Cell>
   </tr>
-  {#if artifact.ports}
-    <tr>
-      <Cell>Ports</Cell>
-      <Cell>{artifact.ports?.map(port => `${port.containerPort}/${port.protocol}`).join(', ') || ''}</Cell>
-    </tr>
-  {/if}
+  <KubeContainerPorts ports={artifact.ports ?? []}/>
   {#if artifact.env}
     <tr>
       <Cell>Environment Variables</Cell>

diff --git a/packages/renderer/src/lib/kube/details/KubeContainerPorts.spec.ts b/packages/renderer/src/lib/kube/details/KubeContainerPorts.spec.ts
@@ -0,0 +1,65 @@
+/**********************************************************************
+ * 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 } from '@testing-library/svelte';
+import { expect, test } from 'vitest';
+
+import KubeContainerPorts from '/@/lib/kube/details/KubeContainerPorts.svelte';
+
+test('expect port title not to be visible when no ports provided', async () => {
+  const { queryByText } = render(KubeContainerPorts);
+
+  const title = queryByText('Ports');
+  expect(title).toBeNull();
+});
+
+test('expect port title to be visible when ports is defined', async () => {
+  const { getByText } = render(KubeContainerPorts, {
+    ports: [
+      {
+        containerPort: 80,
+      },
+    ],
+  });
+
+  const title = getByText('Ports');
+  expect(title).toBeDefined();
+});
+
+test('expect multiple ports to be visible', async () => {
+  const { getByText } = render(KubeContainerPorts, {
+    ports: [
+      {
+        containerPort: 80,
+        protocol: 'TCP',
+      },
+      {
+        containerPort: 100,
+        protocol: 'TCP',
+      },
+    ],
+  });
+
+  const port80 = getByText('80/TCP');
+  expect(port80).toBeDefined();
+
+  const port100 = getByText('100/TCP');
+  expect(port100).toBeDefined();
+});
diff --git a/packages/renderer/src/lib/kube/details/KubeContainerPorts.svelte b/packages/renderer/src/lib/kube/details/KubeContainerPorts.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { V1ContainerPort } from '@kubernetes/client-node';
+
+import Cell from '/@/lib/details/DetailsCell.svelte';
+
+interface Props {
+  ports?: V1ContainerPort[];
+}
+
+let { ports }: Props = $props();
+</script>
+
+{#if ports && ports.length > 0}
+  <tr>
+    <Cell class="flex">Ports</Cell>
+    <Cell>
+      <div class="flex gap-y-1 flex-col">
+        {#each ports as port (port.containerPort)}
+        <span>
+          {port.containerPort}/{port.protocol}
+        </span>
+        {/each}
+      </div>
+    </Cell>
+  </tr>
+{/if}
+