From 8651bb163c58bced4d8361fd97f4621809f9e9b0 Mon Sep 17 00:00:00 2001
From: Denis Golovin <dgolovin@redhat.com>
Date: Mon, 6 Jan 2025 21:37:55 -0800
Subject: [PATCH] fix: hide legacy tasks manager when user clicks outside of it

Signed-off-by: Denis Golovin <dgolovin@redhat.com>
---
 .../lib/task-manager/LegacyTaskManager.spec.ts  | 17 +++++++++++++++++
 .../lib/task-manager/LegacyTaskManager.svelte   | 14 ++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/renderer/src/lib/task-manager/LegacyTaskManager.spec.ts b/packages/renderer/src/lib/task-manager/LegacyTaskManager.spec.ts
index e5b1028dc..ace12d4d4 100644
--- a/packages/renderer/src/lib/task-manager/LegacyTaskManager.spec.ts
+++ b/packages/renderer/src/lib/task-manager/LegacyTaskManager.spec.ts
@@ -20,6 +20,7 @@ import '@testing-library/jest-dom/vitest';
 
 import { fireEvent, render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
+import { tick } from 'svelte';
 import { beforeAll, expect, test, vi } from 'vitest';
 
 import { tasksInfo } from '/@/stores/tasks';
@@ -109,6 +110,22 @@ test('Expect that the tasks manager is hidden if user click on the hide button',
   expect(tasksManager).not.toBeInTheDocument();
 });
 
+test('Expect that the task manager is hidden if user clicks outside of it', async () => {
+  render(LegacyTaskManager, { showTaskManager: true });
+
+  let legacyTasksManager = screen.queryByTitle('Tasks manager');
+  expect(legacyTasksManager).toBeInTheDocument();
+
+  // Click "outside" the tasks manager element
+  const event = new MouseEvent('click', { bubbles: true });
+  document.body.dispatchEvent(event);
+
+  await tick();
+
+  legacyTasksManager = screen.queryByTitle('Tasks manager');
+  expect(legacyTasksManager).not.toBeInTheDocument();
+});
+
 test('Expect no tasks', async () => {
   render(LegacyTaskManager, { showTaskManager: true });
 
diff --git a/packages/renderer/src/lib/task-manager/LegacyTaskManager.svelte b/packages/renderer/src/lib/task-manager/LegacyTaskManager.svelte
index 30a4d8279..b11ba44f2 100644
--- a/packages/renderer/src/lib/task-manager/LegacyTaskManager.svelte
+++ b/packages/renderer/src/lib/task-manager/LegacyTaskManager.svelte
@@ -11,6 +11,7 @@ import LegacyTaskManagerGroup from './LegacyTaskManagerGroup.svelte';
 
 // display or not the tasks manager (defaut is false)
 export let showTaskManager = false;
+let outsideWindow: HTMLDivElement;
 
 $: runningTasks = $tasksInfo.filter(task => task.state === 'running');
 $: completedTasks = $tasksInfo.filter(task => task.state !== 'running');
@@ -35,13 +36,22 @@ function handleEscape({ key }: any) {
 window.events?.receive('toggle-legacy-task-manager', () => {
   showTaskManager = !showTaskManager;
 });
+
+function onWindowClick(e: MouseEvent): void {
+  const target = e.target as HTMLElement;
+  // Listen to anything **but** the button that has "data-task-button" attribute with a value of "Help"
+  // Ignore if task manager not visible
+  if (showTaskManager && target && target.getAttribute('data-task-button') !== 'Tasks') {
+    showTaskManager = outsideWindow?.contains(target);
+  }
+}
 </script>
 
 <!-- track keys like "ESC" -->
-<svelte:window on:keyup={handleEscape} />
+<svelte:window on:keyup={handleEscape} on:click={onWindowClick}/>
 
 {#if showTaskManager}
-  <div title="Tasks manager" class="fixed bottom-9 right-4 bg-[var(--pd-modal-bg)] h-96 w-80 z-40">
+  <div title="Tasks manager" class="fixed bottom-9 right-4 bg-[var(--pd-modal-bg)] h-96 w-80 z-40" bind:this={outsideWindow}>
     <!-- Draw the arrow below the box-->
     <div
       class="absolute bottom-0 z-50 right-[17px] transform -translate-x-1/2 translate-y-1/2 rotate-45 w-4 h-4 {$tasksInfo.length >