From 7b5327e2637d9ba8bba0e3589d6b8c8b1e80bb43 Mon Sep 17 00:00:00 2001
From: Tim deBoer <git@tdeboer.ca>
Date: Fri, 27 Sep 2024 12:40:43 -0400
Subject: [PATCH 1/2] feat: details page for disk images

Modifies the build logs to have a proper details page for disk images, similar
to how Podman Desktop handles Images or Containers.

The two tabs are Summary and Build Logs. The summary page is simple for now
but could be expanded; the build logs doesn't really match what we typically
have in Podman Desktop, but it fits in better here than a standalone page.

Fixes #856.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
---
 packages/frontend/src/App.svelte              |  8 +--
 .../frontend/src/lib/BootcActions.spec.ts     |  2 +-
 packages/frontend/src/lib/BootcActions.svelte |  5 +-
 .../frontend/src/lib/BootcImageColumn.spec.ts | 11 ++++
 .../frontend/src/lib/BootcImageColumn.svelte  | 13 +++-
 .../lib/disk-image/DiskImageDetails.spec.ts   | 66 +++++++++++++++++++
 .../lib/disk-image/DiskImageDetails.svelte    | 65 ++++++++++++++++++
 .../disk-image/DiskImageDetailsBuild.spec.ts} | 27 ++++----
 .../disk-image/DiskImageDetailsBuild.svelte}  | 57 +++++++---------
 .../DiskImageDetailsSummary.spec.ts           | 59 +++++++++++++++++
 .../disk-image/DiskImageDetailsSummary.svelte | 36 ++++++++++
 .../src/lib/upstream/DetailsCell.svelte       |  8 +++
 .../src/lib/upstream/DetailsTable.svelte      |  7 ++
 .../src/lib/upstream/DetailsTitle.svelte      |  3 +
 packages/frontend/src/lib/upstream/Util.ts    | 30 +++++++++
 15 files changed, 337 insertions(+), 60 deletions(-)
 create mode 100644 packages/frontend/src/lib/disk-image/DiskImageDetails.spec.ts
 create mode 100644 packages/frontend/src/lib/disk-image/DiskImageDetails.svelte
 rename packages/frontend/src/{Logs.spec.ts => lib/disk-image/DiskImageDetailsBuild.spec.ts} (81%)
 rename packages/frontend/src/{Logs.svelte => lib/disk-image/DiskImageDetailsBuild.svelte} (69%)
 create mode 100644 packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.spec.ts
 create mode 100644 packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.svelte
 create mode 100644 packages/frontend/src/lib/upstream/DetailsCell.svelte
 create mode 100644 packages/frontend/src/lib/upstream/DetailsTable.svelte
 create mode 100644 packages/frontend/src/lib/upstream/DetailsTitle.svelte
 create mode 100644 packages/frontend/src/lib/upstream/Util.ts

diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
index eda7e464..3fa59ec4 100644
--- a/packages/frontend/src/App.svelte
+++ b/packages/frontend/src/App.svelte
@@ -9,7 +9,7 @@ import { getRouterState } from './api/client';
 import Homepage from './Homepage.svelte';
 import { rpcBrowser } from '/@/api/client';
 import { Messages } from '/@shared/src/messages/Messages';
-import Logs from './Logs.svelte';
+import DiskImageDetails from './lib/disk-image/DiskImageDetails.svelte';
 
 router.mode.hash();
 
@@ -36,10 +36,8 @@ onMount(() => {
       <Route path="/build" breadcrumb="Build">
         <Build />
       </Route>
-      <Route path="/logs/:base64BuildImageName/:base64FolderLocation" breadcrumb="Logs" let:meta>
-        <Logs
-          base64BuildImageName={meta.params.base64BuildImageName}
-          base64FolderLocation={meta.params.base64FolderLocation} />
+      <Route path="/details/:id/*" breadcrumb="Disk Image Details" let:meta>
+        <DiskImageDetails id={meta.params.id} />
       </Route>
       <Route path="/build/:name/:tag" breadcrumb="Build" let:meta>
         <Build imageName={decodeURIComponent(meta.params.name)} imageTag={decodeURIComponent(meta.params.tag)} />
diff --git a/packages/frontend/src/lib/BootcActions.spec.ts b/packages/frontend/src/lib/BootcActions.spec.ts
index b97cd13a..ae8b9763 100644
--- a/packages/frontend/src/lib/BootcActions.spec.ts
+++ b/packages/frontend/src/lib/BootcActions.spec.ts
@@ -78,5 +78,5 @@ test('Test clicking on logs button', async () => {
   const logsButton = screen.getAllByRole('button', { name: 'Build Logs' })[0];
   logsButton.click();
 
-  expect(window.location.href).toContain('/logs');
+  expect(window.location.href).toContain('/build');
 });
diff --git a/packages/frontend/src/lib/BootcActions.svelte b/packages/frontend/src/lib/BootcActions.svelte
index fded053d..01ba4141 100644
--- a/packages/frontend/src/lib/BootcActions.svelte
+++ b/packages/frontend/src/lib/BootcActions.svelte
@@ -15,10 +15,7 @@ async function deleteBuild(): Promise<void> {
 
 // Navigate to the build
 async function gotoLogs(): Promise<void> {
-  // Convert object.folder to base64
-  const base64FolderLocation = btoa(object.folder);
-  const base64BuildImageName = btoa(object.image);
-  router.goto(`/logs/${base64BuildImageName}/${base64FolderLocation}`);
+  router.goto(`/details/${btoa(object.id)}/build`);
 }
 </script>
 
diff --git a/packages/frontend/src/lib/BootcImageColumn.spec.ts b/packages/frontend/src/lib/BootcImageColumn.spec.ts
index 0107b303..cd7355a5 100644
--- a/packages/frontend/src/lib/BootcImageColumn.spec.ts
+++ b/packages/frontend/src/lib/BootcImageColumn.spec.ts
@@ -38,3 +38,14 @@ test('Expect to render as name:tag', async () => {
   const name = screen.getByText('image1:latest');
   expect(name).not.toBeNull();
 });
+
+test('Expect click goes to details page', async () => {
+  render(BootcImageColumn, { object: mockHistoryInfo });
+
+  const name = screen.getByText('image1:latest');
+  expect(name).not.toBeNull();
+
+  name.click();
+
+  expect(window.location.href).toContain('/summary');
+});
diff --git a/packages/frontend/src/lib/BootcImageColumn.svelte b/packages/frontend/src/lib/BootcImageColumn.svelte
index 39a27a32..b2909176 100644
--- a/packages/frontend/src/lib/BootcImageColumn.svelte
+++ b/packages/frontend/src/lib/BootcImageColumn.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
+import { router } from 'tinro';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 
 export let object: BootcBuildInfo;
+
+function openDetails() {
+  router.goto(`/details/${btoa(object.id)}/summary`);
+}
 </script>
 
-<div class="text-[var(--pd-table-body-text-highlight)] overflow-hidden text-ellipsis">
-  {object.image}:{object.tag}
-</div>
+<button class="hover:cursor-pointer flex flex-col max-w-full" on:click={() => openDetails()}>
+  <div class="text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.image}:{object.tag}
+  </div>
+</button>
diff --git a/packages/frontend/src/lib/disk-image/DiskImageDetails.spec.ts b/packages/frontend/src/lib/disk-image/DiskImageDetails.spec.ts
new file mode 100644
index 00000000..7b0f1ffe
--- /dev/null
+++ b/packages/frontend/src/lib/disk-image/DiskImageDetails.spec.ts
@@ -0,0 +1,66 @@
+/**********************************************************************
+ * 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 { beforeEach, expect, test, vi } from 'vitest';
+import { bootcClient } from '/@/api/client';
+
+import DiskImageDetails from './DiskImageDetails.svelte';
+import type { BootcBuildInfo } from '/@shared/src/models/bootc';
+import { tick } from 'svelte';
+
+const image: BootcBuildInfo = {
+  id: 'id1',
+  image: 'my-image',
+  imageId: 'image-id',
+  tag: 'latest',
+  engineId: 'podman',
+  type: ['ami'],
+  folder: '/bootc',
+};
+
+vi.mock('/@/api/client', async () => {
+  return {
+    bootcClient: {
+      listHistoryInfo: vi.fn(),
+    },
+    rpcBrowser: {
+      subscribe: () => {
+        return {
+          unsubscribe: () => {},
+        };
+      },
+    },
+  };
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+test('Confirm renders disk image details', async () => {
+  vi.mocked(bootcClient.listHistoryInfo).mockResolvedValue([image]);
+
+  render(DiskImageDetails, { id: btoa(image.id) });
+
+  // allow UI time to update
+  await tick();
+
+  expect(screen.getByText(image.image + ':' + image.tag)).toBeInTheDocument();
+});
diff --git a/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte b/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte
new file mode 100644
index 00000000..ea3ee00d
--- /dev/null
+++ b/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+import { DetailsPage, Tab } from '@podman-desktop/ui-svelte';
+import { router } from 'tinro';
+import DiskImageIcon from '/@/lib/DiskImageIcon.svelte';
+import DiskImageDetailsBuild from './DiskImageDetailsBuild.svelte';
+import Route from '../Route.svelte';
+import DiskImageDetailsSummary from './DiskImageDetailsSummary.svelte';
+import { onMount } from 'svelte';
+import type { BootcBuildInfo } from '/@shared/src/models/bootc';
+import { getTabUrl, isTabSelected } from '../upstream/Util';
+import { historyInfo } from '/@/stores/historyInfo';
+
+export let id: string;
+
+let diskImage: BootcBuildInfo;
+
+let detailsPage: DetailsPage;
+
+onMount(() => {
+  const actualId = atob(id);
+  console.log('id: ' + actualId);
+  console.log('hist: ' + historyInfo.subscribe.length);
+  return historyInfo.subscribe(value => {
+    const matchingImage = value.find(image => image.id === actualId);
+    console.log('match: ' + matchingImage?.id);
+    if (matchingImage) {
+      try {
+        diskImage = matchingImage;
+      } catch (err) {
+        console.error(err);
+      }
+    } else if (detailsPage) {
+      // the disk image has been deleted
+      goToHomePage();
+    }
+  });
+});
+
+export function goToHomePage(): void {
+  router.goto('/');
+}
+</script>
+
+<DetailsPage
+  bind:this={detailsPage}
+  title="{diskImage?.image}:{diskImage?.tag}"
+  breadcrumbLeftPart="Bootable Containers"
+  breadcrumbRightPart="Disk Image Details"
+  breadcrumbTitle="Go back to homepage"
+  onclose={goToHomePage}
+  onbreadcrumbClick={goToHomePage}>
+  <DiskImageIcon slot="icon" size="30px" />
+  <svelte:fragment slot="tabs">
+    <Tab title="Summary" selected={isTabSelected($router.path, 'summary')} url={getTabUrl($router.path, 'summary')} />
+    <Tab title="Build Log" selected={isTabSelected($router.path, 'build')} url={getTabUrl($router.path, 'build')} />
+  </svelte:fragment>
+  <svelte:fragment slot="content">
+    <Route path="/summary" breadcrumb="Summary">
+      <DiskImageDetailsSummary image={diskImage} />
+    </Route>
+    <Route path="/build" breadcrumb="Build Log">
+      <DiskImageDetailsBuild folder={diskImage?.folder} />
+    </Route>
+  </svelte:fragment>
+</DetailsPage>
diff --git a/packages/frontend/src/Logs.spec.ts b/packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.spec.ts
similarity index 81%
rename from packages/frontend/src/Logs.spec.ts
rename to packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.spec.ts
index 74bb50d2..9730be1c 100644
--- a/packages/frontend/src/Logs.spec.ts
+++ b/packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.spec.ts
@@ -17,14 +17,21 @@
 
 import { render, screen, waitFor } from '@testing-library/svelte';
 import { vi, test, expect, beforeAll } from 'vitest';
-import Logs from './Logs.svelte';
-import { bootcClient } from './api/client';
+import DiskImageDetailsBuild from './DiskImageDetailsBuild.svelte';
+import { bootcClient } from '/@/api/client';
 
-vi.mock('./api/client', async () => ({
+vi.mock('/@/api/client', async () => ({
   bootcClient: {
     loadLogsFromFolder: vi.fn(),
     getConfigurationValue: vi.fn(),
   },
+  rpcBrowser: {
+    subscribe: () => {
+      return {
+        unsubscribe: () => {},
+      };
+    },
+  },
 }));
 
 beforeAll(() => {
@@ -59,10 +66,8 @@ test('Render logs and terminal setup', async () => {
   vi.mocked(bootcClient.loadLogsFromFolder).mockResolvedValue(mockLogs);
   vi.mocked(bootcClient.getConfigurationValue).mockResolvedValue(14);
 
-  const base64FolderLocation = btoa('/path/to/logs');
-  const base64BuildImageName = btoa('test-image');
-
-  render(Logs, { base64FolderLocation, base64BuildImageName });
+  const folderLocation = '/path/to/logs';
+  render(DiskImageDetailsBuild, { folder: folderLocation });
 
   // Wait for the logs to be shown
   await waitFor(() => {
@@ -77,12 +82,10 @@ test('Handles empty logs correctly', async () => {
   vi.mocked(bootcClient.loadLogsFromFolder).mockResolvedValue('');
   vi.mocked(bootcClient.getConfigurationValue).mockResolvedValue(14);
 
-  const base64FolderLocation = btoa('/empty/logs');
-  const base64BuildImageName = btoa('empty-image');
-
-  render(Logs, { base64FolderLocation, base64BuildImageName });
+  const folderLocation = '/empty/logs';
+  render(DiskImageDetailsBuild, { folder: folderLocation });
 
   // Verify no logs message is displayed when logs are empty
-  const emptyMessage = await screen.findByText(/Unable to read image-build.log file from \/empty\/logs/);
+  const emptyMessage = await screen.findByText('Unable to read image-build.log file from /empty/logs');
   expect(emptyMessage).toBeDefined();
 });
diff --git a/packages/frontend/src/Logs.svelte b/packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.svelte
similarity index 69%
rename from packages/frontend/src/Logs.svelte
rename to packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.svelte
index e32ff5be..cf532a31 100644
--- a/packages/frontend/src/Logs.svelte
+++ b/packages/frontend/src/lib/disk-image/DiskImageDetailsBuild.svelte
@@ -1,21 +1,15 @@
 <script lang="ts">
 import '@xterm/xterm/css/xterm.css';
 
-import { DetailsPage, EmptyScreen, FormPage } from '@podman-desktop/ui-svelte';
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { FitAddon } from '@xterm/addon-fit';
 import { Terminal } from '@xterm/xterm';
 import { onDestroy, onMount } from 'svelte';
 import { router } from 'tinro';
-import DiskImageIcon from './lib/DiskImageIcon.svelte';
-import { bootcClient } from './api/client';
-import { getTerminalTheme } from './lib/upstream/terminal-theme';
+import { bootcClient } from '/@/api/client';
+import { getTerminalTheme } from '/@/lib/upstream/terminal-theme';
 
-export let base64FolderLocation: string;
-export let base64BuildImageName: string;
-
-// Decode the base64 folder location to a normal string path
-const folderLocation = atob(base64FolderLocation);
-const buildImageName = atob(base64BuildImageName);
+export let folder: string | undefined;
 
 // Log
 let logsXtermDiv: HTMLDivElement;
@@ -31,7 +25,11 @@ let logsTerminal: Terminal;
 let logInterval: NodeJS.Timeout;
 
 async function fetchFolderLogs() {
-  const logs = await bootcClient.loadLogsFromFolder(folderLocation);
+  if (!folder) {
+    return;
+  }
+
+  const logs = await bootcClient.loadLogsFromFolder(folder);
 
   // We will write only the new logs to the terminal,
   // this is a simple way of updating the logs as we update it by calling the function
@@ -110,27 +108,16 @@ export function goToHomePage(): void {
 }
 </script>
 
-<DetailsPage
-  title="{buildImageName} build logs"
-  breadcrumbLeftPart="Bootable Containers"
-  breadcrumbRightPart="{buildImageName} build logs"
-  breadcrumbTitle="Go back to homepage"
-  onclose={goToHomePage}
-  onbreadcrumbClick={goToHomePage}>
-  <DiskImageIcon slot="icon" size="30px" />
-  <svelte:fragment slot="content">
-    <EmptyScreen
-      icon={undefined}
-      title="No log file"
-      message="Unable to read image-build.log file from {folderLocation}"
-      hidden={noLogs === false} />
-
-    <div
-      class="min-w-full flex flex-col"
-      class:invisible={noLogs === true}
-      class:h-0={noLogs === true}
-      class:h-full={noLogs === false}
-      bind:this={logsXtermDiv}>
-    </div>
-  </svelte:fragment>
-</DetailsPage>
+<EmptyScreen
+  icon={undefined}
+  title="No log file"
+  message="Unable to read image-build.log file from {folder}"
+  hidden={noLogs === false} />
+
+<div
+  class="min-w-full flex flex-col p-[5px] pr-0 bg-[var(--pd-terminal-background)]"
+  class:invisible={noLogs === true}
+  class:h-0={noLogs === true}
+  class:h-full={noLogs === false}
+  bind:this={logsXtermDiv}>
+</div>
diff --git a/packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.spec.ts b/packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.spec.ts
new file mode 100644
index 00000000..9799205d
--- /dev/null
+++ b/packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.spec.ts
@@ -0,0 +1,59 @@
+/**********************************************************************
+ * 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 { beforeEach, expect, test, vi } from 'vitest';
+
+import type { BootcBuildInfo } from '/@shared/src/models/bootc';
+import DiskImageDetailsSummary from './DiskImageDetailsSummary.svelte';
+
+const image: BootcBuildInfo = {
+  id: 'id1',
+  image: 'my-image',
+  imageId: 'image-id',
+  tag: 'latest',
+  engineId: 'podman',
+  type: ['ami'],
+  folder: '/bootc',
+};
+
+vi.mock('/@/api/client', async () => {
+  return {
+    rpcBrowser: {
+      subscribe: () => {
+        return {
+          unsubscribe: () => {},
+        };
+      },
+    },
+  };
+});
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  vi.clearAllMocks();
+});
+
+test('Expect to show image summary', async () => {
+  render(DiskImageDetailsSummary, { image: image });
+
+  expect(screen.getByText(image.image + ':' + image.tag)).toBeInTheDocument();
+  expect(screen.getByText(image.type[0])).toBeInTheDocument();
+  expect(screen.getByText(image.folder)).toBeInTheDocument();
+});
diff --git a/packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.svelte b/packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.svelte
new file mode 100644
index 00000000..d83f4796
--- /dev/null
+++ b/packages/frontend/src/lib/disk-image/DiskImageDetailsSummary.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+import Table from '/@/lib/upstream/DetailsTable.svelte';
+import Title from '/@/lib/upstream/DetailsTitle.svelte';
+import type { BootcBuildInfo } from '/@shared/src/models/bootc';
+import Cell from '/@/lib/upstream/DetailsCell.svelte';
+import Link from '../Link.svelte';
+
+export let image: BootcBuildInfo | undefined;
+</script>
+
+<Table>
+  <tr>
+    <Title>Details</Title>
+  </tr>
+  {#if image}
+    <tr>
+      <Cell>Source image</Cell>
+      <Cell>{image.image}:{image.tag}</Cell>
+    </tr>
+    <tr>
+      <Cell>Disk image type</Cell>
+      <Cell>{image.type}</Cell>
+    </tr>
+    <tr>
+      <Cell>Architecture</Cell>
+      <Cell>{image.arch}</Cell>
+    </tr>
+    <tr>
+      <Cell>Folder</Cell>
+      <Cell
+        ><Link folder={image.folder}>
+          {image.folder}
+        </Link></Cell>
+    </tr>
+  {/if}
+</Table>
diff --git a/packages/frontend/src/lib/upstream/DetailsCell.svelte b/packages/frontend/src/lib/upstream/DetailsCell.svelte
new file mode 100644
index 00000000..680c7dab
--- /dev/null
+++ b/packages/frontend/src/lib/upstream/DetailsCell.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+export let style: string = '';
+export let onClick: () => void = () => {};
+</script>
+
+<td class="pt-1 pl-3 {style}" on:click={onClick}>
+  <slot />
+</td>
diff --git a/packages/frontend/src/lib/upstream/DetailsTable.svelte b/packages/frontend/src/lib/upstream/DetailsTable.svelte
new file mode 100644
index 00000000..855c9c6f
--- /dev/null
+++ b/packages/frontend/src/lib/upstream/DetailsTable.svelte
@@ -0,0 +1,7 @@
+<div class="flex px-5 py-4 flex-col items-start h-full overflow-auto text-[var(--pd-table-body-text)]">
+  <table class="w-full">
+    <tbody>
+      <slot />
+    </tbody>
+  </table>
+</div>
diff --git a/packages/frontend/src/lib/upstream/DetailsTitle.svelte b/packages/frontend/src/lib/upstream/DetailsTitle.svelte
new file mode 100644
index 00000000..7a796d7c
--- /dev/null
+++ b/packages/frontend/src/lib/upstream/DetailsTitle.svelte
@@ -0,0 +1,3 @@
+<td class="pt-1 text-lg font-semibold text-[var(--pd-table-body-text-sub-secondary)]">
+  <slot />
+</td>
diff --git a/packages/frontend/src/lib/upstream/Util.ts b/packages/frontend/src/lib/upstream/Util.ts
new file mode 100644
index 00000000..177c478f
--- /dev/null
+++ b/packages/frontend/src/lib/upstream/Util.ts
@@ -0,0 +1,30 @@
+/**********************************************************************
+ * Copyright (C) 2023-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
+ ***********************************************************************/
+
+export function capitalize(text: string): string {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+export function getTabUrl(routerPath: string, tabUrl: string): string {
+  const baseURL = routerPath.substring(0, routerPath.lastIndexOf('/'));
+  return `${baseURL}/${tabUrl}`;
+}
+
+export function isTabSelected(routerPath: string, tabUrl: string): boolean {
+  return routerPath === getTabUrl(routerPath, tabUrl);
+}

From fe0f1ae2a96c3ea7d7839ff71e357995c3a7304b Mon Sep 17 00:00:00 2001
From: Tim deBoer <git@tdeboer.ca>
Date: Mon, 30 Sep 2024 07:59:37 -0400
Subject: [PATCH 2/2] chore: removing console.log, added util tests

Removed unnecessary console.log debugging and added tests for Util.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
---
 .../lib/disk-image/DiskImageDetails.svelte    |  3 --
 .../frontend/src/lib/upstream/Util.spec.ts    | 44 +++++++++++++++++++
 packages/frontend/src/lib/upstream/Util.ts    |  2 +-
 3 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/src/lib/upstream/Util.spec.ts

diff --git a/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte b/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte
index ea3ee00d..f7a259df 100644
--- a/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte
+++ b/packages/frontend/src/lib/disk-image/DiskImageDetails.svelte
@@ -18,11 +18,8 @@ let detailsPage: DetailsPage;
 
 onMount(() => {
   const actualId = atob(id);
-  console.log('id: ' + actualId);
-  console.log('hist: ' + historyInfo.subscribe.length);
   return historyInfo.subscribe(value => {
     const matchingImage = value.find(image => image.id === actualId);
-    console.log('match: ' + matchingImage?.id);
     if (matchingImage) {
       try {
         diskImage = matchingImage;
diff --git a/packages/frontend/src/lib/upstream/Util.spec.ts b/packages/frontend/src/lib/upstream/Util.spec.ts
new file mode 100644
index 00000000..933022be
--- /dev/null
+++ b/packages/frontend/src/lib/upstream/Util.spec.ts
@@ -0,0 +1,44 @@
+/**********************************************************************
+ * 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 { expect, test } from 'vitest';
+
+import { capitalize, getTabUrl, isTabSelected } from './Util';
+
+test('test capitalize function', () => {
+  expect(capitalize('test')).toBe('Test');
+  expect(capitalize('Test')).toBe('Test');
+  expect(capitalize('TEST')).toBe('TEST');
+});
+
+test('test getTabUrl', () => {
+  expect(getTabUrl('/images', 'images')).toBe('/images');
+  expect(getTabUrl('/images/summary', 'summary')).toBe('/images/summary');
+  expect(getTabUrl('/images/summary', 'logs')).toBe('/images/logs');
+  expect(getTabUrl('/images/image-id/summary', 'logs')).toBe('/images/image-id/logs');
+  expect(getTabUrl('/images/image-id/logs', 'logs')).toBe('/images/image-id/logs');
+});
+
+test('test isTabSelected', () => {
+  expect(isTabSelected('/images/details/summary', 'summary')).toBe(true);
+  expect(isTabSelected('/images/details/logs', 'summary')).toBe(false);
+  expect(isTabSelected('/images/details/', 'images')).toBe(false);
+  expect(isTabSelected('/images/image-id/details/summary', 'summary')).toBe(true);
+});
diff --git a/packages/frontend/src/lib/upstream/Util.ts b/packages/frontend/src/lib/upstream/Util.ts
index 177c478f..c3d295e6 100644
--- a/packages/frontend/src/lib/upstream/Util.ts
+++ b/packages/frontend/src/lib/upstream/Util.ts
@@ -1,5 +1,5 @@
 /**********************************************************************
- * Copyright (C) 2023-2024 Red Hat, Inc.
+ * 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.