chore(web): bump immich/ui for tooltips (#24632)

Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>

web/src/lib/components/TestWrapper.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import { TooltipProvider } from '@immich/ui';
+  import type { Component } from 'svelte';
+
+  type Props = {
+    component: Component<T>;
+    componentProps: T;
+  };
+
+  const { component: Test, componentProps }: Props = $props();
+</script>
+
+<TooltipProvider>
+  <Test {...componentProps} />
+</TooltipProvider>

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -1,4 +1,5 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
+import { renderWithTooltips } from '$tests/helpers';
 import { albumFactory } from '@test-data/factories/album-factory';
 import '@testing-library/jest-dom';
 import { render, waitFor, type RenderResult } from '@testing-library/svelte';
@@ -88,7 +89,7 @@ describe('AlbumCard component', () => {
     const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
 
     beforeEach(async () => {
-      sut = render(AlbumCard, { album, onShowContextMenu });
+      sut = renderWithTooltips(AlbumCard, { album, onShowContextMenu });
 
       const albumImgElement = sut.getByTestId('album-image');
       await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));

web/src/lib/components/asset-viewer/actions/delete-action.spec.ts

@@ -1,7 +1,7 @@
+import { renderWithTooltips } from '$tests/helpers';
 import type { AssetResponseDto } from '@immich/sdk';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/svelte';
 import DeleteAction from './delete-action.svelte';
 
 let asset: AssetResponseDto;
@@ -13,8 +13,12 @@ describe('DeleteAction component', () => {
     });
 
     it('displays a button to move the asset to the trash bin', () => {
-      const { getByTitle, queryByTitle } = render(DeleteAction, { asset, onAction: vi.fn(), preAction: vi.fn() });
-      expect(getByTitle('delete')).toBeInTheDocument();
+      const { getByLabelText, queryByTitle } = renderWithTooltips(DeleteAction, {
+        asset,
+        onAction: vi.fn(),
+        preAction: vi.fn(),
+      });
+      expect(getByLabelText('delete')).toBeInTheDocument();
       expect(queryByTitle('deletePermanently')).toBeNull();
     });
   });
@@ -25,8 +29,12 @@ describe('DeleteAction component', () => {
     });
 
     it('displays a button to permanently delete the asset', () => {
-      const { getByTitle, queryByTitle } = render(DeleteAction, { asset, onAction: vi.fn(), preAction: vi.fn() });
-      expect(getByTitle('permanently_delete')).toBeInTheDocument();
+      const { getByLabelText, queryByTitle } = renderWithTooltips(DeleteAction, {
+        asset,
+        onAction: vi.fn(),
+        preAction: vi.fn(),
+      });
+      expect(getByLabelText('permanently_delete')).toBeInTheDocument();
       expect(queryByTitle('delete')).toBeNull();
     });
   });

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts

@@ -1,9 +1,9 @@
 import { preferences as preferencesStore, resetSavedUser, user as userStore } from '$lib/stores/user.store';
+import { renderWithTooltips } from '$tests/helpers';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import { preferencesFactory } from '@test-data/factories/preferences-factory';
 import { userAdminFactory } from '@test-data/factories/user-factory';
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/svelte';
 import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
 
 describe('AssetViewerNavBar component', () => {
@@ -16,12 +16,13 @@ describe('AssetViewerNavBar component', () => {
     showShareButton: false,
     preAction: () => {},
     onZoomImage: () => {},
-    onCopyImage: () => {},
     onAction: () => {},
     onRunJob: () => {},
     onPlaySlideshow: () => {},
     onShowDetail: () => {},
     onClose: () => {},
+    playOriginalVideo: false,
+    setPlayOriginalVideo: () => Promise.resolve(),
   };
 
   beforeAll(() => {
@@ -51,8 +52,8 @@ describe('AssetViewerNavBar component', () => {
     preferencesStore.set(prefs);
 
     const asset = assetFactory.build({ isTrashed: false });
-    const { getByTitle } = render(AssetViewerNavBar, { asset, ...additionalProps });
-    expect(getByTitle('go_back')).toBeInTheDocument();
+    const { getByLabelText } = renderWithTooltips(AssetViewerNavBar, { asset, ...additionalProps });
+    expect(getByLabelText('go_back')).toBeInTheDocument();
   });
 
   describe('if the current user owns the asset', () => {
@@ -65,8 +66,8 @@ describe('AssetViewerNavBar component', () => {
       const prefs = preferencesFactory.build({ cast: { gCastEnabled: false } });
       preferencesStore.set(prefs);
 
-      const { getByTitle } = render(AssetViewerNavBar, { asset, ...additionalProps });
-      expect(getByTitle('delete')).toBeInTheDocument();
+      const { getByLabelText } = renderWithTooltips(AssetViewerNavBar, { asset, ...additionalProps });
+      expect(getByLabelText('delete')).toBeInTheDocument();
     });
   });
 });

web/src/lib/components/faces-page/manage-people-visibility.spec.ts

@@ -1,119 +0,0 @@
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import ManagePeopleVisibility from '$lib/components/faces-page/manage-people-visibility.svelte';
-import type { PersonResponseDto } from '@immich/sdk';
-import { personFactory } from '@test-data/factories/person-factory';
-import { render } from '@testing-library/svelte';
-import { tick } from 'svelte';
-
-describe('ManagePeopleVisibility Component', () => {
-  let personVisible: PersonResponseDto;
-  let personHidden: PersonResponseDto;
-  let personWithoutName: PersonResponseDto;
-
-  beforeAll(() => {
-    // Prevents errors from `img.decode()` in ImageThumbnail
-    Object.defineProperty(HTMLImageElement.prototype, 'decode', {
-      value: vi.fn(),
-    });
-  });
-
-  beforeEach(() => {
-    vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
-    personVisible = personFactory.build({ isHidden: false });
-    personHidden = personFactory.build({ isHidden: true });
-    personWithoutName = personFactory.build({ isHidden: false, name: undefined });
-    sdkMock.updatePeople.mockResolvedValue([]);
-  });
-
-  afterEach(() => {
-    vi.resetAllMocks();
-  });
-
-  it('does not update people when no changes are made', () => {
-    const { getByText } = render(ManagePeopleVisibility, {
-      props: {
-        people: [personVisible, personHidden, personWithoutName],
-        totalPeopleCount: 3,
-        onClose: vi.fn(),
-        loadNextPage: vi.fn(),
-      },
-    });
-
-    const saveButton = getByText('done');
-    saveButton.click();
-    expect(sdkMock.updatePeople).not.toHaveBeenCalled();
-  });
-
-  // svelte animations require a real browser
-  it.skip('hides unnamed people on first button press', () => {
-    const { getByText, getByTitle } = render(ManagePeopleVisibility, {
-      props: {
-        people: [personVisible, personHidden, personWithoutName],
-        totalPeopleCount: 3,
-        onClose: vi.fn(),
-        loadNextPage: vi.fn(),
-      },
-    });
-
-    getByTitle('hide_unnamed_people').click();
-    getByText('done').click();
-
-    expect(sdkMock.updatePeople).toHaveBeenCalledWith({
-      peopleUpdateDto: {
-        people: [{ id: personWithoutName.id, isHidden: true }],
-      },
-    });
-  });
-
-  // svelte animations require a real browser
-  it.skip('hides all people on second button press', async () => {
-    const { getByText, getByTitle } = render(ManagePeopleVisibility, {
-      props: {
-        people: [personVisible, personHidden, personWithoutName],
-        totalPeopleCount: 3,
-        onClose: vi.fn(),
-        loadNextPage: vi.fn(),
-      },
-    });
-
-    getByTitle('hide_unnamed_people').click();
-    await tick();
-    getByTitle('hide_all_people').click();
-    getByText('done').click();
-
-    expect(sdkMock.updatePeople).toHaveBeenCalledWith({
-      peopleUpdateDto: {
-        people: expect.arrayContaining([
-          { id: personVisible.id, isHidden: true },
-          { id: personWithoutName.id, isHidden: true },
-        ]),
-      },
-    });
-  });
-
-  // svelte animations require a real browser
-  it.skip('shows all people on third button press', async () => {
-    const { getByText, getByTitle } = render(ManagePeopleVisibility, {
-      props: {
-        people: [personVisible, personHidden, personWithoutName],
-        totalPeopleCount: 3,
-        onClose: vi.fn(),
-        loadNextPage: vi.fn(),
-      },
-    });
-
-    getByTitle('hide_unnamed_people').click();
-    await tick();
-    getByTitle('hide_all_people').click();
-    await tick();
-    getByTitle('show_all_people').click();
-    getByText('done').click();
-
-    expect(sdkMock.updatePeople).toHaveBeenCalledWith({
-      peopleUpdateDto: {
-        people: [{ id: personHidden.id, isHidden: false }],
-      },
-    });
-  });
-});

web/src/lib/components/shared-components/__test__/combobox.spec.ts

@@ -1,30 +0,0 @@
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
-import Combobox from '$lib/components/shared-components/combobox.svelte';
-import { render, screen } from '@testing-library/svelte';
-
-describe('Combobox component', () => {
-  beforeAll(() => {
-    vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
-    vi.stubGlobal('visualViewport', getVisualViewportMock());
-  });
-
-  it('shows selected option', () => {
-    render(Combobox, {
-      label: 'test',
-      selectedOption: { label: 'option-1', value: 'option-1' },
-    });
-
-    expect(screen.getByRole('combobox')).toHaveValue('option-1');
-  });
-
-  it('clears the selected option when set to undefined', async () => {
-    const { rerender } = render(Combobox, {
-      label: 'test',
-      selectedOption: { label: 'option-1', value: 'option-1' },
-    });
-
-    await rerender({ selectedOption: undefined });
-    expect(screen.getByRole('combobox')).toHaveValue('');
-  });
-});

web/src/routes/+layout.svelte

@@ -21,7 +21,14 @@
   import { copyToClipboard, getReleaseType, semverToName } from '$lib/utils';
   import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
-  import { CommandPaletteContext, modalManager, setTranslations, toastManager, type ActionItem } from '@immich/ui';
+  import {
+    CommandPaletteDefaultProvider,
+    TooltipProvider,
+    modalManager,
+    setTranslations,
+    toastManager,
+    type ActionItem,
+  } from '@immich/ui';
   import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync, mdiThemeLightDark } from '@mdi/js';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -180,7 +187,7 @@
 </script>
 
 <OnEvents {onReleaseEvent} />
-<CommandPaletteContext {commands} />
+<CommandPaletteDefaultProvider name="Global" actions={commands} />
 
 <svelte:head>
   <title>{page.data.meta?.title || 'Web'} - Immich</title>
@@ -228,15 +235,17 @@
   }}
 />
 
-{#if page.data.error}
-  <ErrorLayout error={page.data.error}></ErrorLayout>
-{:else}
-  {@render children?.()}
-{/if}
+<TooltipProvider>
+  {#if page.data.error}
+    <ErrorLayout error={page.data.error}></ErrorLayout>
+  {:else}
+    {@render children?.()}
+  {/if}
 
-{#if showNavigationLoadingBar}
-  <NavigationLoadingBar />
-{/if}
+  {#if showNavigationLoadingBar}
+    <NavigationLoadingBar />
+  {/if}
 
-<DownloadPanel />
-<UploadPanel />
+  <DownloadPanel />
+  <UploadPanel />
+</TooltipProvider>

web/src/routes/admin/library-management/(list)/+layout.svelte

@@ -8,7 +8,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
   import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteContext } from '@immich/ui';
+  import { Button, CommandPaletteDefaultProvider } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -51,7 +51,7 @@
 
 <OnEvents {onLibraryCreate} {onLibraryUpdate} {onLibraryDelete} />
 
-<CommandPaletteContext commands={[Create, ScanAll]} />
+<CommandPaletteDefaultProvider name={$t('library')} actions={[Create, ScanAll]} />
 
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ScanAll, Create]}>
   <section class="my-4">

web/src/routes/admin/library-management/[id]/+layout.svelte

@@ -16,7 +16,7 @@
   } from '$lib/services/library.service';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
   import type { LibraryResponseDto } from '@immich/sdk';
-  import { Code, CommandPaletteContext, Container, Heading, modalManager } from '@immich/ui';
+  import { Code, CommandPaletteDefaultProvider, Container, Heading, modalManager } from '@immich/ui';
   import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -51,7 +51,7 @@
 
 <OnEvents {onLibraryUpdate} {onLibraryDelete} />
 
-<CommandPaletteContext commands={[Edit, Delete, AddFolder, AddExclusionPattern, Scan]} />
+<CommandPaletteDefaultProvider name={$t('library')} actions={[Edit, Delete, AddFolder, AddExclusionPattern, Scan]} />
 
 <AdminPageLayout
   breadcrumbs={[{ title: $t('external_libraries'), href: AppRoute.ADMIN_LIBRARIES }, { title: library.name }]}

web/src/routes/admin/queues/+page.svelte

@@ -5,7 +5,7 @@
   import { queueManager } from '$lib/managers/queue-manager.svelte';
   import { getQueuesActions } from '$lib/services/queue.service';
   import { type QueueResponseDto } from '@immich/sdk';
-  import { CommandPaletteContext, Container, type ActionItem } from '@immich/ui';
+  import { CommandPaletteDefaultProvider, Container, type ActionItem } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -33,7 +33,7 @@
   };
 </script>
 
-<CommandPaletteContext {commands} />
+<CommandPaletteDefaultProvider name={$t('admin.queues')} actions={commands} />
 
 <OnEvents {onQueueUpdate} />
 

web/src/routes/admin/system-settings/+page.svelte

@@ -26,7 +26,7 @@
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { getSystemConfigActions } from '$lib/services/system-config.service';
-  import { Alert, CommandPaletteContext, Container } from '@immich/ui';
+  import { Alert, CommandPaletteDefaultProvider, Container } from '@immich/ui';
   import {
     mdiAccountOutline,
     mdiBackupRestore,
@@ -214,7 +214,7 @@
   );
 </script>
 
-<CommandPaletteContext commands={[CopyToClipboard, Upload, Download]} />
+<CommandPaletteDefaultProvider name={$t('admin.system_settings')} actions={[CopyToClipboard, Upload, Download]} />
 
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[CopyToClipboard, Download, Upload]}>
   <Container size="large" center>

web/src/routes/admin/users/(list)/+layout.svelte

@@ -5,7 +5,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteContext, Container, Icon } from '@immich/ui';
+  import { Button, CommandPaletteDefaultProvider, Container, Icon } from '@immich/ui';
   import { mdiInfinity } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -44,7 +44,7 @@
   {onUserAdminDeleted}
 />
 
-<CommandPaletteContext commands={[Create]} />
+<CommandPaletteDefaultProvider name={$t('users')} actions={[Create]} />
 
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[Create]}>
   <Container center size="large">

web/src/routes/admin/users/[id]/+layout.svelte

@@ -17,7 +17,7 @@
     Alert,
     Badge,
     Code,
-    CommandPaletteContext,
+    CommandPaletteDefaultProvider,
     Container,
     getByteUnitString,
     Heading,
@@ -99,7 +99,7 @@
   {onUserAdminDeleted}
 />
 
-<CommandPaletteContext commands={[ResetPassword, ResetPinCode, Update, Delete, Restore]} />
+<CommandPaletteDefaultProvider name={$t('user')} actions={[ResetPassword, ResetPinCode, Update, Delete, Restore]} />
 
 <AdminPageLayout
   breadcrumbs={[{ title: $t('admin.user_management'), href: AppRoute.ADMIN_USERS }, { title: user.name }]}