fix: status bar progress bar percentage display (podman-desktop#9791)

* fix: status bar progress bar percentage display Signed-off-by: axel7083 <[email protected]> * fix: progress bar tests Signed-off-by: axel7083 <[email protected]> * fix(ui): enhance props definition with html attributes Signed-off-by: axel7083 <[email protected]> * fix(ui): remove duplicate class property Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
feloy · Nov 13, 2024 · ead5e63 · ead5e63
1 parent b0d78c6
commit ead5e63
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/packages/renderer/src/lib/statusbar/TaskIndicator.spec.ts b/packages/renderer/src/lib/statusbar/TaskIndicator.spec.ts
@@ -98,3 +98,20 @@ test('multiple tasks running should display them', async () => {
   expect(status).toBeDefined();
   expect(status.textContent).toBe('2 tasks running');
 });
+
+test('task with defined progress value should display it', async () => {
+  tasksInfo.set([
+    {
+      name: 'Dummy Task',
+      state: 'running',
+      status: 'in-progress',
+      started: 0,
+      id: 'dummy-task',
+      progress: 50,
+    },
+  ]);
+
+  const { getByText } = render(TaskIndicator);
+  const span = getByText('50%');
+  expect(span).toBeDefined();
+});
diff --git a/packages/renderer/src/lib/statusbar/TaskIndicator.svelte b/packages/renderer/src/lib/statusbar/TaskIndicator.svelte
@@ -13,7 +13,7 @@ let title: string | undefined = $derived.by(() => {
 });
 
 let progress: number | undefined = $derived.by(() => {
-  if (runningTasks.length !== 0) return undefined;
+  if (runningTasks.length === 0) return undefined;
   return runningTasks[0].progress ?? 0;
 });
 
@@ -29,7 +29,7 @@ function toggleTaskManager(): void {
         <div class="flex items-center gap-x-2">
           <span role="status" class="max-w-32 text-ellipsis overflow-hidden whitespace-nowrap">{title}</span>
           {#if (progress ?? 0) >= 0}
-            <ProgressBar height="h-1" width="w-20" progress={progress} />
+            <ProgressBar class="items-center" height="h-1" width="w-20" progress={progress} />
           {/if}
         </div>
       </button>

diff --git a/packages/renderer/src/lib/task-manager/ProgressBar.spec.ts b/packages/renderer/src/lib/task-manager/ProgressBar.spec.ts
@@ -40,3 +40,16 @@ test('Expect that the progress bar is incremental', async () => {
   expect(progressBar).toHaveClass('progress-bar-incremental');
   expect(progressBar.classList.contains('progress-bar-indeterminate')).toBe(false);
 });
+
+test('Expect class to be propagated', async () => {
+  const { container } = render(ProgressBar, { progress: 5, class: 'dummy-class' });
+
+  expect(container.children[0]).toHaveClass('dummy-class');
+});
+
+test('Expect aria-label to be propagated', async () => {
+  const { getByLabelText } = render(ProgressBar, { progress: 5, 'aria-label': 'hello-world' });
+
+  const container = getByLabelText('hello-world');
+  expect(container).toBeDefined();
+});
diff --git a/packages/renderer/src/lib/task-manager/ProgressBar.svelte b/packages/renderer/src/lib/task-manager/ProgressBar.svelte
@@ -29,12 +29,18 @@
 </style>
 
 <script lang="ts">
-export let progress: number | undefined;
-export let width: string = 'w-36';
-export let height: string = 'h-4';
+import type { HTMLAttributes } from 'svelte/elements';
+
+interface Props extends HTMLAttributes<HTMLElement> {
+  progress?: number;
+  width?: string;
+  height?: string;
+}
+
+let { progress, width = 'w-36', height = 'h-4', class: className, ...restProps }: Props = $props();
 </script>
 
-<div class="flex flex-row">
+<div class="flex flex-row {className}" {...restProps} >
   <div class="{width} {height} rounded-full bg-[var(--pd-progressBar-bg)] progress-bar overflow-hidden">
     {#if progress !== undefined}
       <div