chore: hide tooltip when opening context/dropdown/buddy widget menu (#8553)

* chore: hide tooltip when opening context/dropdown/buddy widget menu
Signed-off-by: Sonia Sandler <ssandler@redhat.com>

packages/main/src/mainWindow.ts

@@ -231,6 +231,12 @@ async function createWindow(): Promise<BrowserWindow> {
     append: (_defaultActions, parameters) => {
       return navigationItemsMenuBuilder?.buildNavigationMenu(parameters) ?? [];
     },
+    onClose: () => {
+      browserWindow.webContents.send('context-menu:visible', false);
+    },
+    onShow: () => {
+      browserWindow.webContents.send('context-menu:visible', true);
+    },
   });
 
   // Add help/about menu entry

packages/preload/src/index.ts

@@ -1456,6 +1456,10 @@ export function initExposure(): void {
     apiSender.send('dev-tools:open-webview', webviewId);
   });
 
+  ipcRenderer.on('context-menu:visible', (_, visible: boolean) => {
+    apiSender.send('context-menu:visible', visible);
+  });
+
   // Handle callback on dialogs by calling the callback once we get the answer
   ipcRenderer.on('dialog:open-save-dialog-response', (_, dialogId: string, result: string | string[] | undefined) => {
     // grab from stored map

packages/renderer/src/App.spec.ts

@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import { render } from '@testing-library/svelte';
+import { render, waitFor } from '@testing-library/svelte';
 import { tick } from 'svelte';
 import { router } from 'tinro';
 import { beforeEach, expect, test, vi } from 'vitest';
@@ -54,9 +54,18 @@ vi.mock('./lib/appearance/Appearance.svelte', () => ({
   default: vi.fn(),
 }));
 
+const dispatchEventMock = vi.fn();
+const messages = new Map<string, (args: any) => void>();
+
 beforeEach(() => {
   vi.resetAllMocks();
   router.goto('/');
+  (window.events as unknown) = {
+    receive: vi.fn().mockImplementation((channel, func) => {
+      messages.set(channel, func);
+    }),
+  };
+  (window as any).dispatchEvent = dispatchEventMock;
 });
 
 test('test /image/run/* route', async () => {
@@ -76,3 +85,27 @@ test('test /images/:id/:engineId route', async () => {
   await tick();
   expect(mocks.ImagesList).toHaveBeenCalled();
 });
+
+test('receive context menu visible event from main', async () => {
+  render(App);
+  // send 'context-menu:visible' event
+  messages.get('context-menu:visible')?.(true);
+
+  // wait for dispatch method to be called
+  waitFor(() => expect(dispatchEventMock).toHaveBeenCalledWith(expect.any(Event)));
+
+  const eventSent = vi.mocked(dispatchEventMock).mock.calls[0][0];
+  expect((eventSent as Event).type).toBe('tooltip-hide');
+});
+
+test('receive context menu not visible event from main', async () => {
+  render(App);
+
+  messages.get('context-menu:visible')?.(false);
+
+  //  wait for dispatch method to be called
+  waitFor(() => expect(dispatchEventMock).toHaveBeenCalledWith(expect.any(Event)));
+
+  const eventSent = vi.mocked(dispatchEventMock).mock.calls[0][0];
+  expect((eventSent as Event).type).toBe('tooltip-show');
+});

packages/renderer/src/App.svelte

@@ -78,6 +78,14 @@ router.subscribe(function (navigation) {
   }
 });
 
+window.events?.receive('context-menu:visible', visible => {
+  if (visible) {
+    window.dispatchEvent(new Event('tooltip-hide'));
+  } else {
+    window.dispatchEvent(new Event('tooltip-show'));
+  }
+});
+
 window.events?.receive('navigate', (navigationRequest: unknown) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   handleNavigation(navigationRequest as NavigationRequest<any>);

packages/ui/src/lib/dropdownMenu/DropDownMenuItems.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { onMount } from 'svelte';
+import { onDestroy, onMount } from 'svelte';
 
 let dropDownHeight: number;
 let dropDownWidth: number;
@@ -28,6 +28,11 @@ onMount(() => {
   } else {
     sideAlign = 'left-0 origin-top-left';
   }
+  window.dispatchEvent(new Event('tooltip-hide'));
+});
+
+onDestroy(() => {
+  window.dispatchEvent(new Event('tooltip-show'));
 });
 </script>
 

packages/ui/src/lib/tooltip/Tooltip.spec.ts

@@ -0,0 +1,41 @@
+/**********************************************************************
+ * 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 { tick } from 'svelte';
+import { expect, test } from 'vitest';
+
+import Tooltip from './Tooltip.svelte';
+import { tooltipHidden } from './tooltip-store';
+
+test('tooltip is not empty string when tooltipHidden value false', async () => {
+  tooltipHidden.set(false);
+
+  render(Tooltip, { tip: 'test 1' });
+  expect(screen.queryByText('test 1')).toBeInTheDocument();
+
+  tooltipHidden.set(true);
+  await tick();
+  expect(screen.queryByText('test 1')).not.toBeInTheDocument();
+
+  tooltipHidden.set(false);
+  await tick();
+  expect(screen.queryByText('test 1')).toBeInTheDocument();
+});

packages/ui/src/lib/tooltip/Tooltip.svelte

@@ -50,6 +50,8 @@
 </style>
 
 <script lang="ts">
+import { tooltipHidden } from './tooltip-store';
+
 export let tip: string | undefined = undefined;
 export let top = false;
 export let topLeft = false;
@@ -75,14 +77,14 @@ export let left = false;
     class:top-right={topRight}
     class:bottom-left={bottomLeft}
     class:bottom-right={bottomRight}>
-    {#if tip}
+    {#if tip && !$tooltipHidden}
       <div
         class="inline-block py-2 px-4 rounded-md bg-[var(--pd-tooltip-bg)] text-[var(--pd-tooltip-text)] border-[1px] border-[var(--pd-tooltip-border)] {$$props.class}"
         aria-label="tooltip">
         {tip}
       </div>
     {/if}
-    {#if $$slots.tip && !tip}
+    {#if $$slots.tip && !tip && !$tooltipHidden}
       <div
         class="inline-block rounded-md bg-[var(--pd-tooltip-bg)] text-[var(--pd-tooltip-text)] border-[1px] border-[var(--pd-tooltip-border)]"
         aria-label="tooltip">

packages/ui/src/lib/tooltip/tooltip-store.spec.ts

@@ -0,0 +1,56 @@
+/**********************************************************************
+ * 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
+ ***********************************************************************/
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { get } from 'svelte/store';
+import { beforeEach, expect, test } from 'vitest';
+
+import { setup, tooltipHidden } from './tooltip-store';
+
+const callbacks = new Map<string, any>();
+const eventEmitter = {
+  receive: (message: string, callback: any): void => {
+    callbacks.set(message, callback);
+  },
+};
+
+beforeEach(() => {
+  (window as any).addEventListener = eventEmitter.receive;
+});
+
+test('tooltipHidden starts as false, then true on tooltip-hide and false on tooltip-show', async () => {
+  setup();
+
+  expect(get(tooltipHidden)).toBeFalsy();
+
+  // now we call the listener
+  let callback = callbacks.get('tooltip-hide');
+
+  expect(callback).toBeDefined();
+
+  callback();
+
+  expect(get(tooltipHidden)).toBeTruthy();
+
+  callback = callbacks.get('tooltip-show');
+
+  callback();
+
+  expect(get(tooltipHidden)).toBeFalsy();
+});

packages/ui/src/lib/tooltip/tooltip-store.ts

@@ -0,0 +1,35 @@
+/**********************************************************************
+ * 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 { type Writable, writable } from 'svelte/store';
+
+export const tooltipHidden = setup();
+
+export function setup(): Writable<boolean> {
+  const store = writable(false);
+
+  window.addEventListener('tooltip-show', () => {
+    tooltipHidden.set(false);
+  });
+
+  window.addEventListener('tooltip-hide', () => {
+    tooltipHidden.set(true);
+  });
+
+  return store;
+}