chore: rename bootc to disk-image

Move the disk image related files into the disk-image folder, and rename using
the same pattern we use for columns in Podman Desktop. While I was there I updated
most imports to '/@' syntax.

Also thought of another test for the Navigation and added that.

Fixes podman-desktop#886.

Signed-off-by: Tim deBoer <[email protected]>

packages/frontend/src/Navigation.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 { expect, test } from 'vitest';
+
+import Navigation from './Navigation.svelte';
+import type { TinroRouteMeta } from 'tinro';
+
+test('Expect panel to have correct styling', async () => {
+  render(Navigation, { meta: { url: 'test' } as TinroRouteMeta });
+
+  const panel = screen.getByLabelText('Navigation');
+  expect(panel).toBeInTheDocument();
+  expect(panel).toHaveClass('bg-[var(--pd-secondary-nav-bg)]');
+  expect(panel).toHaveClass('border-[var(--pd-global-nav-bg-border)]');
+  expect(panel).toHaveClass('border-r-[1px]');
+});
+
+test('Expect dashboard to be selected', async () => {
+  render(Navigation, { meta: { url: '/' } as TinroRouteMeta });
+
+  const dashboard = screen.getByText('Dashboard');
+  expect(dashboard).toBeInTheDocument();
+  expect(dashboard.parentElement).toHaveClass('text-[color:var(--pd-secondary-nav-text-selected)]');
+
+  const diskImages = screen.getByText('Disk Images');
+  expect(diskImages).toBeInTheDocument();
+  expect(diskImages.parentElement).not.toHaveClass('text-[color:var(--pd-secondary-nav-text-selected)]');
+});
+
+test('Expect disk images to be selected', async () => {
+  render(Navigation, { meta: { url: '/disk-images' } as TinroRouteMeta });
+
+  const dashboard = screen.getByText('Dashboard');
+  expect(dashboard).toBeInTheDocument();
+  expect(dashboard.parentElement).not.toHaveClass('text-[color:var(--pd-secondary-nav-text-selected)]');
+
+  const diskImages = screen.getByText('Disk Images');
+  expect(diskImages).toBeInTheDocument();
+  expect(diskImages.parentElement).toHaveClass('text-[color:var(--pd-secondary-nav-text-selected)]');
+});

packages/frontend/src/lib/BootcActions.spec.ts → packages/frontend/src/lib/disk-image/DiskImageActions.spec.ts

@@ -17,11 +17,11 @@
 
 import { beforeEach, vi, test, expect } from 'vitest';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
-import { bootcClient } from '../api/client';
+import { bootcClient } from '/@/api/client';
 import { screen, render } from '@testing-library/svelte';
-import BootcActions from './BootcActions.svelte';
+import DiskImageActions from './DiskImageActions.svelte';
 
-vi.mock('../api/client', async () => {
+vi.mock('/@/api/client', async () => {
   return {
     bootcClient: {
       deleteBuilds: vi.fn(),
@@ -52,14 +52,14 @@ beforeEach(() => {
 });
 
 test('Renders Delete Build button', async () => {
-  render(BootcActions, { object: mockHistoryInfo });
+  render(DiskImageActions, { object: mockHistoryInfo });
 
   const deleteButton = screen.getAllByRole('button', { name: 'Delete Build' })[0];
   expect(deleteButton).not.toBeNull();
 });
 
 test('Test clicking on delete button', async () => {
-  render(BootcActions, { object: mockHistoryInfo });
+  render(DiskImageActions, { object: mockHistoryInfo });
 
   // spy on deleteBuild function
   const spyOnDelete = vi.spyOn(bootcClient, 'deleteBuilds');
@@ -72,7 +72,7 @@ test('Test clicking on delete button', async () => {
 });
 
 test('Test clicking on logs button', async () => {
-  render(BootcActions, { object: mockHistoryInfo });
+  render(DiskImageActions, { object: mockHistoryInfo });
 
   // Click on logs button
   const logsButton = screen.getAllByRole('button', { name: 'Build Logs' })[0];

packages/frontend/src/lib/BootcActions.svelte → packages/frontend/src/lib/disk-image/DiskImageActions.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
-import ListItemButtonIcon from './upstream/ListItemButtonIcon.svelte';
+import ListItemButtonIcon from '/@/lib/upstream/ListItemButtonIcon.svelte';
 import { faFileAlt, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { router } from 'tinro';
-import { bootcClient } from '../api/client';
+import { bootcClient } from '/@/api/client';
 
 export let object: BootcBuildInfo;
 export let detailed = false;

packages/frontend/src/lib/BootcColumnActions.spec.ts → packages/frontend/src/lib/disk-image/DiskImageColumnActions.spec.ts

@@ -18,7 +18,7 @@
 import { beforeEach, vi, test, expect } from 'vitest';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 import { screen, render } from '@testing-library/svelte';
-import BootcColumnActions from './BootcColumnActions.svelte';
+import DiskImageColumnActions from '/@/lib/disk-image/DiskImageColumnActions.svelte';
 
 const mockHistoryInfo: BootcBuildInfo = {
   id: 'name1',
@@ -31,7 +31,7 @@ const mockHistoryInfo: BootcBuildInfo = {
   arch: 'x86_64',
 };
 
-vi.mock('../api/client', async () => {
+vi.mock('/@/api/client', async () => {
   return {
     rpcBrowser: {
       subscribe: () => {
@@ -48,7 +48,7 @@ beforeEach(() => {
 });
 
 test('Renders actions column corretly', async () => {
-  render(BootcColumnActions, { object: mockHistoryInfo });
+  render(DiskImageColumnActions, { object: mockHistoryInfo });
 
   const deleteButton = screen.getAllByRole('button', { name: 'Delete Build' })[0];
   expect(deleteButton).not.toBeNull();

packages/frontend/src/lib/BootcColumnActions.svelte → packages/frontend/src/lib/disk-image/DiskImageColumnActions.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
-import BootcActions from './BootcActions.svelte';
+import DiskImageActions from './DiskImageActions.svelte';
 
 export let object: BootcBuildInfo;
 </script>
 
-<BootcActions object={object} on:update />
+<DiskImageActions object={object} on:update />

packages/frontend/src/lib/BootcFolderColumn.spec.ts → packages/frontend/src/lib/disk-image/DiskImageColumnFolder.spec.ts

@@ -18,7 +18,7 @@
 import { beforeEach, vi, test, expect } from 'vitest';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 import { screen, render } from '@testing-library/svelte';
-import BootcFolderColumn from './BootcFolderColumn.svelte';
+import DiskImageColumnFolder from './DiskImageColumnFolder.svelte';
 
 const mockHistoryInfo: BootcBuildInfo = {
   id: 'name1',
@@ -32,7 +32,7 @@ const mockHistoryInfo: BootcBuildInfo = {
   status: 'running',
 };
 
-vi.mock('../api/client', async () => {
+vi.mock('/@/api/client', async () => {
   return {
     rpcBrowser: {
       subscribe: () => {
@@ -49,7 +49,7 @@ beforeEach(() => {
 });
 
 test('Expect to render folder column with a button to open the folder', async () => {
-  render(BootcFolderColumn, { object: mockHistoryInfo });
+  render(DiskImageColumnFolder, { object: mockHistoryInfo });
 
   const folder = screen.getByText('/foo/image1');
   expect(folder).not.toBeNull();

packages/frontend/src/lib/BootcFolderColumn.svelte → packages/frontend/src/lib/disk-image/DiskImageColumnFolder.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Link from './Link.svelte';
+import Link from '/@/lib/Link.svelte';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 
 export let object: BootcBuildInfo;

packages/frontend/src/lib/BootcImageColumn.spec.ts → packages/frontend/src/lib/disk-image/DiskImageColumnImage.spec.ts

@@ -18,7 +18,7 @@
 import { test, expect } from 'vitest';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 import { screen, render } from '@testing-library/svelte';
-import BootcImageColumn from './BootcImageColumn.svelte';
+import DiskImageColumnImage from './DiskImageColumnImage.svelte';
 
 const mockHistoryInfo: BootcBuildInfo = {
   id: 'name1',
@@ -33,14 +33,14 @@ const mockHistoryInfo: BootcBuildInfo = {
 };
 
 test('Expect to render as name:tag', async () => {
-  render(BootcImageColumn, { object: mockHistoryInfo });
+  render(DiskImageColumnImage, { object: mockHistoryInfo });
 
   const name = screen.getByText('image1:latest');
   expect(name).not.toBeNull();
 });
 
 test('Expect click goes to details page', async () => {
-  render(BootcImageColumn, { object: mockHistoryInfo });
+  render(DiskImageColumnImage, { object: mockHistoryInfo });
 
   const name = screen.getByText('image1:latest');
   expect(name).not.toBeNull();

packages/frontend/src/lib/disk-image/DiskImagesList.spec.ts

@@ -18,7 +18,7 @@
 import { vi, test, expect } from 'vitest';
 import { screen, render } from '@testing-library/svelte';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
-import { bootcClient } from '../../api/client';
+import { bootcClient } from '/@/api/client';
 import { beforeEach } from 'node:test';
 import DiskImagesList from './DiskImagesList.svelte';
 
@@ -45,7 +45,7 @@ const mockHistoryInfo: BootcBuildInfo[] = [
   },
 ];
 
-vi.mock('../../api/client', async () => {
+vi.mock('/@/api/client', async () => {
   return {
     bootcClient: {
       listHistoryInfo: vi.fn(),

packages/frontend/src/lib/disk-image/DiskImagesList.svelte

@@ -2,13 +2,13 @@
 import { onMount } from 'svelte';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import BootcColumnActions from '../BootcColumnActions.svelte';
-import { bootcClient } from '../../api/client';
+import DiskImageColumnActions from './DiskImageColumnActions.svelte';
+import { bootcClient } from '/@/api/client';
 import BootcStatus from '../BootcStatus.svelte';
 import { searchPattern, filtered } from '../../stores/historyInfo';
 import DiskImageIcon from '../DiskImageIcon.svelte';
-import BootcFolderColumn from '../BootcFolderColumn.svelte';
-import BootcImageColumn from '../BootcImageColumn.svelte';
+import DiskImageColumnFolder from './DiskImageColumnFolder.svelte';
+import DiskImageColumnImage from './DiskImageColumnImage.svelte';
 import {
   Button,
   Table,
@@ -65,7 +65,7 @@ let statusColumn = new TableColumn<BootcBuildInfo>('Status', {
 
 let imageColumn = new TableColumn<BootcBuildInfo>('Image', {
   width: '2fr',
-  renderer: BootcImageColumn,
+  renderer: DiskImageColumnImage,
   comparator: (a, b) => a.image.localeCompare(b.image),
 });
 
@@ -89,7 +89,7 @@ let archColumn = new TableColumn<BootcBuildInfo, string>('Arch', {
 });
 
 let folderColumn = new TableColumn<BootcBuildInfo>('Folder', {
-  renderer: BootcFolderColumn,
+  renderer: DiskImageColumnFolder,
   comparator: (a, b) => a.folder.localeCompare(b.folder),
 });
 
@@ -99,7 +99,7 @@ const columns = [
   typeColumn,
   archColumn,
   folderColumn,
-  new TableColumn<BootcBuildInfo>('Actions', { align: 'right', renderer: BootcColumnActions, overflow: true }),
+  new TableColumn<BootcBuildInfo>('Actions', { align: 'right', renderer: DiskImageColumnActions, overflow: true }),
 ];
 
 const row = new TableRow<BootcBuildInfo>({