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>
containers · Jan 4, 2024 · 7bbfd8c · 7bbfd8c
1 parent c8ecdfb
commit 7bbfd8c
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 9 deletions.
diff --git 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 = () => {};
 </script>
 
 {#if dropdownMenu}
-  <DropdownMenu onBeforeToggle="{onBeforeToggle}"><slot /></DropdownMenu>
+  <DropdownMenu shownAsMenuActionItem="{dropdownMenuAsMenuActionItem}" onBeforeToggle="{onBeforeToggle}"
+    ><slot /></DropdownMenu>
 {:else}
   <FlatMenu><slot /></FlatMenu>
 {/if}
diff --git a/packages/renderer/src/lib/image/ImageActions.spec.ts 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
@@ -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}
 
-  <ContributionActions
-    args="{[image]}"
-    dropdownMenu="{dropdownMenu}"
-    contributions="{contributions}"
-    contextPrefix="imageItem"
-    detailed="{detailed}"
-    onError="{onError}" />
+  <ActionsWrapper dropdownMenu="{groupingContributions}" dropdownMenuAsMenuActionItem="{groupingContributions}">
+    <ContributionActions
+      args="{[image]}"
+      dropdownMenu="{groupingContributions ? true : dropdownMenu}"
+      contributions="{contributions}"
+      contextPrefix="imageItem"
+      detailed="{detailed}"
+      onError="{onError}" />
+  </ActionsWrapper>
 
   {#if errorMessage}
     <div class="modal fixed w-full h-full top-0 left-0 flex items-center justify-center p-8 lg:p-0 z-50" tabindex="-1">

diff --git 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}" />
     <svelte:fragment slot="tabs">
       <Tab title="Summary" url="summary" />
       <Tab title="History" url="history" />