From 7bbfd8c6f806d2ba52f0e926da897d484b0c6b13 Mon Sep 17 00:00:00 2001 From: axel7083 <42176370+axel7083@users.noreply.github.com> Date: Thu, 4 Jan 2024 14:50:35 +0100 Subject: [PATCH] feat: adding groupContributions logic (#5415) * feat: adding groupContributions logic Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix: moving to onMount assign logic Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix: making kebab menu background darker Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * test: adding tests for ImageActions Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix: misconfigured property Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * test: ensure the text and icon is visible when dropdownMenu on and groupContributions off Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> --------- Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> --- .../renderer/src/lib/image/ActionsMenu.svelte | 4 +- .../src/lib/image/ImageActions.spec.ts | 102 ++++++++++++++++++ .../src/lib/image/ImageActions.svelte | 19 ++-- .../src/lib/image/ImageDetails.svelte | 3 +- 4 files changed, 119 insertions(+), 9 deletions(-) create mode 100644 packages/renderer/src/lib/image/ImageActions.spec.ts diff --git a/packages/renderer/src/lib/image/ActionsMenu.svelte b/packages/renderer/src/lib/image/ActionsMenu.svelte index a33b8a1f92ae..e19f9cdc2c33 100644 --- a/packages/renderer/src/lib/image/ActionsMenu.svelte +++ b/packages/renderer/src/lib/image/ActionsMenu.svelte @@ -3,11 +3,13 @@ import DropdownMenu from '../ui/DropdownMenu.svelte'; import FlatMenu from '../ui/FlatMenu.svelte'; export let dropdownMenu = false; +export let dropdownMenuAsMenuActionItem = false; export let onBeforeToggle = () => {}; {#if dropdownMenu} - + {:else} {/if} diff --git a/packages/renderer/src/lib/image/ImageActions.spec.ts b/packages/renderer/src/lib/image/ImageActions.spec.ts new file mode 100644 index 000000000000..6f7734c4f4df --- /dev/null +++ b/packages/renderer/src/lib/image/ImageActions.spec.ts @@ -0,0 +1,102 @@ +import '@testing-library/jest-dom/vitest'; +import { test, expect, vi, beforeAll } from 'vitest'; +import { render, screen, waitFor, fireEvent } from '@testing-library/svelte'; +import ImageActions from '/@/lib/image/ImageActions.svelte'; +import type { ImageInfoUI } from '/@/lib/image/ImageInfoUI'; + +const getContributedMenusMock = vi.fn(); + +beforeAll(() => { + (window as any).getContributedMenus = getContributedMenusMock; + + (window as any).hasAuthconfigForImage = vi.fn(); + (window as any).hasAuthconfigForImage.mockImplementation(() => Promise.resolve(false)); +}); + +const fakedImage: ImageInfoUI = { + id: 'dummy', + name: 'dummy', +} as unknown as ImageInfoUI; + +test('Expect no dropdown when one contribution and dropdownMenu off', async () => { + // Since we only have one contribution, we do not use a dropdown + getContributedMenusMock.mockImplementation(_context => + Promise.resolve([{ command: 'valid-command', title: 'dummy-contrib' }]), + ); + + render(ImageActions, { + onPushImage: vi.fn(), + onRenameImage: vi.fn(), + image: fakedImage, + dropdownMenu: false, + detailed: true, + groupContributions: true, + }); + + expect(getContributedMenusMock).toHaveBeenCalled(); + + await waitFor(() => { + const div = screen.getByTitle('dummy-contrib').parentElement; + expect(div).toBeDefined(); + expect(div?.classList).toHaveLength(0); + }); +}); + +test('Expect contribution in dropdown when several contributions and dropdownMenu off', async () => { + // Since we have more than one contribution we group them in a dropdown + getContributedMenusMock.mockImplementation(_context => + Promise.resolve([ + { command: 'valid-command', title: 'dummy-contrib' }, + { command: 'valid-command-2', title: 'dummy-contrib-2' }, + ]), + ); + + render(ImageActions, { + onPushImage: vi.fn(), + onRenameImage: vi.fn(), + image: fakedImage, + dropdownMenu: false, + detailed: true, + groupContributions: true, + }); + + expect(getContributedMenusMock).toHaveBeenCalled(); + + await waitFor(() => { + const button = screen.getByLabelText('kebab menu'); + expect(button).toBeDefined(); + expect(button.parentElement).toBeDefined(); + expect(button.parentElement?.classList?.length).toBeGreaterThan(0); + }); +}); + +test('Expect no dropdown when several contributions and dropdownMenu mode on', async () => { + // Simulate with multiple contributions + getContributedMenusMock.mockImplementation(_context => + Promise.resolve([ + { command: 'valid-command', title: 'dummy-contrib' }, + { command: 'valid-command-2', title: 'dummy-contrib-2' }, + ]), + ); + + render(ImageActions, { + onPushImage: vi.fn(), + onRenameImage: vi.fn(), + image: fakedImage, + dropdownMenu: true, // We are showing all actions in a Dropdown + detailed: true, + groupContributions: false, // we do not group them since we are in a dropdown + }); + + expect(getContributedMenusMock).toHaveBeenCalled(); + + await fireEvent.click(screen.getByLabelText('kebab menu')); + + await waitFor(() => { + const button = screen.getByTitle('dummy-contrib'); + expect(button).toBeDefined(); + expect(button.firstChild?.nodeName.toLowerCase()).toBe('svg'); + expect(button.lastChild?.nodeName.toLowerCase()).toBe('span'); + expect(button.lastChild?.textContent).toBe('dummy-contrib'); + }); +}); diff --git a/packages/renderer/src/lib/image/ImageActions.svelte b/packages/renderer/src/lib/image/ImageActions.svelte index dc4a998acab5..8b260b8a530e 100644 --- a/packages/renderer/src/lib/image/ImageActions.svelte +++ b/packages/renderer/src/lib/image/ImageActions.svelte @@ -29,6 +29,7 @@ export let onRenameImage: (imageInfo: ImageInfoUI) => void; export let image: ImageInfoUI; export let dropdownMenu = false; export let detailed = false; +export let groupContributions = false; let errorTitle: string | undefined = undefined; let errorMessage: string | undefined = undefined; @@ -38,9 +39,11 @@ const imageUtils = new ImageUtils(); let contributions: Menu[] = []; let globalContext: ContextUI; let contextsUnsubscribe: Unsubscriber; +let groupingContributions = false; onMount(async () => { contributions = await window.getContributedMenus(MenuContext.DASHBOARD_IMAGE); + groupingContributions = groupContributions && !dropdownMenu && contributions.length > 1; contextsUnsubscribe = context.subscribe(value => { globalContext = value; }); @@ -127,13 +130,15 @@ function onError(error: string): void { icon="{faLayerGroup}" /> {/if} - + + + {#if errorMessage}
diff --git a/packages/renderer/src/lib/image/ImageDetails.svelte b/packages/renderer/src/lib/image/ImageDetails.svelte index f6e0f0e641a9..4025b75b6102 100644 --- a/packages/renderer/src/lib/image/ImageDetails.svelte +++ b/packages/renderer/src/lib/image/ImageDetails.svelte @@ -83,7 +83,8 @@ onDestroy(() => { onPushImage="{handlePushImageModal}" onRenameImage="{handleRenameImageModal}" detailed="{true}" - dropdownMenu="{false}" /> + dropdownMenu="{false}" + groupContributions="{true}" />