feat: add statusbar item highlight property (podman-desktop#5773)

* feat: add statusbar item important property Signed-off-by: axel7083 <[email protected]> * feat: add statusbar item important property Signed-off-by: axel7083 <[email protected]> * refactor: rename important to highlight Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
feloy · Feb 6, 2024 · 5c5d589 · 5c5d589
1 parent 110da9a
commit 5c5d589
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 1 deletion.
diff --git a/packages/main/src/plugin/index.ts b/packages/main/src/plugin/index.ts
@@ -570,6 +570,7 @@ export class PluginSystem {
           true,
           'update',
           undefined,
+          true,
         );
       });
 

diff --git a/packages/main/src/plugin/statusbar/statusbar-item.ts b/packages/main/src/plugin/statusbar/statusbar-item.ts
@@ -34,6 +34,7 @@ export class StatusBarItemImpl implements StatusBarItem {
   private isVisible = false;
   private _iconClass: string | { active: string; inactive: string } | undefined;
   private _enabled = true;
+  private _highlight = false;
 
   private _command: string | undefined;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -48,6 +49,15 @@ export class StatusBarItemImpl implements StatusBarItem {
     this._id = StatusBarItemImpl.nextId();
   }
 
+  public get highlight(): boolean {
+    return this._highlight;
+  }
+
+  public set highlight(highlight: boolean) {
+    this._highlight = highlight;
+    this.update();
+  }
+
   public get alignment(): StatusBarAlignment {
     return this._alignment;
   }

diff --git a/packages/main/src/plugin/statusbar/statusbar-registry.ts b/packages/main/src/plugin/statusbar/statusbar-registry.ts
@@ -30,6 +30,7 @@ export interface StatusBarEntry {
   command?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   commandArgs?: any[];
+  highlight?: boolean;
 }
 
 export interface StatusBarEntryDescriptor {
@@ -62,6 +63,7 @@ export class StatusBarRegistry implements IDisposable {
     command: string | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     commandArgs: any[] | undefined,
+    highlight?: boolean,
   ) {
     const existingEntry = this.entries.get(entryId);
     if (existingEntry && (existingEntry.alignLeft !== alignLeft || existingEntry.priority !== priority)) {
@@ -80,6 +82,7 @@ export class StatusBarRegistry implements IDisposable {
         enabled: enabled,
         command: command,
         commandArgs: commandArgs,
+        highlight: highlight,
       };
 
       const entryDescriptor: StatusBarEntryDescriptor = {
@@ -97,6 +100,7 @@ export class StatusBarRegistry implements IDisposable {
       entryToUpdate.enabled = enabled;
       entryToUpdate.command = command;
       entryToUpdate.commandArgs = commandArgs;
+      entryToUpdate.highlight = highlight;
     }
 
     this.apiSender.send(STATUS_BAR_UPDATED_EVENT_NAME, undefined);

diff --git a/packages/renderer/src/lib/statusbar/StatusBarItem.spec.ts b/packages/renderer/src/lib/statusbar/StatusBarItem.spec.ts
@@ -19,6 +19,8 @@
 import { test, expect } from 'vitest';
 import type { StatusBarEntry } from '../../../../main/src/plugin/statusbar/statusbar-registry';
 import { iconClass } from './StatusBarItem';
+import { render, screen } from '@testing-library/svelte';
+import StatusBarItem from './StatusBarItem.svelte';
 
 test('check iconClass with font awesome icons', () => {
   const statusBarEntry: StatusBarEntry = {
@@ -49,3 +51,29 @@ test('check iconClass with font awesome icons and spinning', () => {
   const icon = iconClass(statusBarEntry);
   expect(icon).toBe('fas fa-sync animate-spin');
 });
+
+test('expect dot not rendered', async () => {
+  const statusBarEntry: StatusBarEntry = {
+    enabled: true,
+    activeIconClass: '${podman}',
+    highlight: false,
+  };
+
+  render(StatusBarItem, { entry: statusBarEntry });
+
+  const dot = screen.queryByRole('status');
+  expect(dot).toBeNull();
+});
+
+test('expect dot rendered', () => {
+  const statusBarEntry: StatusBarEntry = {
+    enabled: true,
+    activeIconClass: '${podman}',
+    highlight: true,
+  };
+
+  render(StatusBarItem, { entry: statusBarEntry });
+
+  const dot = screen.getByRole('status');
+  expect(dot).toBeDefined();
+});
diff --git a/packages/renderer/src/lib/statusbar/StatusBarItem.svelte b/packages/renderer/src/lib/statusbar/StatusBarItem.svelte
@@ -35,12 +35,15 @@ async function executeCommand(entry: StatusBarEntry) {
   on:click="{() => {
     executeCommand(entry);
   }}"
-  class="{opacity(entry)} px-1 flex items-center {hoverBackground(entry)} {hoverCursor(entry)}"
+  class="{opacity(entry)} px-1 flex items-center {hoverBackground(entry)} {hoverCursor(entry)} relative inline-block"
   title="{tooltipText(entry)}">
   {#if iconClass(entry)}
     <span class="{iconClass(entry)}" aria-hidden="true"></span>
   {/if}
   {#if entry.text}
     <span class="ml-1">{entry.text}</span>
   {/if}
+  {#if entry.highlight}
+    <span role="status" class="absolute bg-purple-500 rounded-full p-1 top-[-2px] right-[-2px]"></span>
+  {/if}
 </button>
-Original file line number
+Diff line change
@@ Expand Up / @@ -570,6 +570,7 @@ export class PluginSystem { @@
               true,
               'update',
               undefined,
+              true,
             );
           });
@@ Expand Down @@