fix(web): user admin pages (#24185)

fix: user admin pages

web/src/lib/services/library.service.ts

@@ -7,7 +7,6 @@ import LibraryFolderAddModal from '$lib/modals/LibraryFolderAddModal.svelte';
 import LibraryFolderEditModal from '$lib/modals/LibraryFolderEditModal.svelte';
 import LibraryRenameModal from '$lib/modals/LibraryRenameModal.svelte';
 import LibraryUserPickerModal from '$lib/modals/LibraryUserPickerModal.svelte';
-import type { ActionItem } from '$lib/types';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -20,7 +19,7 @@ import {
   updateLibrary,
   type LibraryResponseDto,
 } from '@immich/sdk';
-import { modalManager, toastManager } from '@immich/ui';
+import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
@@ -28,13 +27,13 @@ export const getLibrariesActions = ($t: MessageFormatter) => {
   const ScanAll: ActionItem = {
     title: $t('scan_all_libraries'),
     icon: mdiSync,
-    onSelect: () => void handleScanAllLibraries(),
+    onAction: () => void handleScanAllLibraries(),
   };
 
   const Create: ActionItem = {
     title: $t('create_library'),
     icon: mdiPlusBoxOutline,
-    onSelect: () => void handleCreateLibrary(),
+    onAction: () => void handleCreateLibrary(),
   };
 
   return { ScanAll, Create };
@@ -44,32 +43,32 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
   const Rename: ActionItem = {
     icon: mdiPencilOutline,
     title: $t('rename'),
-    onSelect: () => void modalManager.show(LibraryRenameModal, { library }),
+    onAction: () => void modalManager.show(LibraryRenameModal, { library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     title: $t('delete'),
     color: 'danger',
-    onSelect: () => void handleDeleteLibrary(library),
+    onAction: () => void handleDeleteLibrary(library),
   };
 
   const AddFolder: ActionItem = {
     icon: mdiPlusBoxOutline,
     title: $t('add'),
-    onSelect: () => void modalManager.show(LibraryFolderAddModal, { library }),
+    onAction: () => void modalManager.show(LibraryFolderAddModal, { library }),
   };
 
   const AddExclusionPattern: ActionItem = {
     icon: mdiPlusBoxOutline,
     title: $t('add'),
-    onSelect: () => void modalManager.show(LibraryExclusionPatternAddModal, { library }),
+    onAction: () => void modalManager.show(LibraryExclusionPatternAddModal, { library }),
   };
 
   const Scan: ActionItem = {
     icon: mdiSync,
     title: $t('scan_library'),
-    onSelect: () => void handleScanLibrary(library),
+    onAction: () => void handleScanLibrary(library),
   };
 
   return { Rename, Delete, AddFolder, AddExclusionPattern, Scan };
@@ -79,13 +78,13 @@ export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryRe
   const Edit: ActionItem = {
     icon: mdiPencilOutline,
     title: $t('edit'),
-    onSelect: () => void modalManager.show(LibraryFolderEditModal, { folder, library }),
+    onAction: () => void modalManager.show(LibraryFolderEditModal, { folder, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     title: $t('delete'),
-    onSelect: () => void handleDeleteLibraryFolder(library, folder),
+    onAction: () => void handleDeleteLibraryFolder(library, folder),
   };
 
   return { Edit, Delete };
@@ -99,13 +98,13 @@ export const getLibraryExclusionPatternActions = (
   const Edit: ActionItem = {
     icon: mdiPencilOutline,
     title: $t('edit'),
-    onSelect: () => void modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
+    onAction: () => void modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     title: $t('delete'),
-    onSelect: () => void handleDeleteExclusionPattern(library, exclusionPattern),
+    onAction: () => void handleDeleteExclusionPattern(library, exclusionPattern),
   };
 
   return { Edit, Delete };

web/src/lib/services/shared-link.service.ts

@@ -16,48 +16,37 @@ import {
   type SharedLinkEditDto,
   type SharedLinkResponseDto,
 } from '@immich/sdk';
-import { MenuItemType, menuManager, modalManager, toastManager, type MenuItem } from '@immich/ui';
-import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiDotsVertical, mdiQrcode } from '@mdi/js';
+import { modalManager, toastManager, type ActionItem } from '@immich/ui';
+import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiQrcode } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
 export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLinkResponseDto) => {
-  const Edit: MenuItem = {
+  const Edit: ActionItem = {
     title: $t('edit_link'),
     icon: mdiCircleEditOutline,
-    onSelect: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
+    onAction: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
   };
 
-  const Delete: MenuItem = {
+  const Delete: ActionItem = {
     title: $t('delete_link'),
     icon: mdiDelete,
     color: 'danger',
-    onSelect: () => void handleDeleteSharedLink(sharedLink),
+    onAction: () => void handleDeleteSharedLink(sharedLink),
   };
 
-  const Copy: MenuItem = {
+  const Copy: ActionItem = {
     title: $t('copy_link'),
     icon: mdiContentCopy,
-    onSelect: () => void copyToClipboard(asUrl(sharedLink)),
+    onAction: () => void copyToClipboard(asUrl(sharedLink)),
   };
 
-  const ViewQrCode: MenuItem = {
+  const ViewQrCode: ActionItem = {
     title: $t('view_qr_code'),
     icon: mdiQrcode,
-    onSelect: () => void handleShowSharedLinkQrCode(sharedLink),
+    onAction: () => void handleShowSharedLinkQrCode(sharedLink),
   };
 
-  const ContextMenu: MenuItem = {
-    title: $t('shared_link_options'),
-    icon: mdiDotsVertical,
-    onSelect: ({ event }) =>
-      void menuManager.show({
-        target: event.currentTarget as HTMLElement,
-        position: 'top-right',
-        items: [Edit, Copy, MenuItemType.Divider, Delete],
-      }),
-  };
-
-  return { Edit, Delete, Copy, ViewQrCode, ContextMenu };
+  return { Edit, Delete, Copy, ViewQrCode };
 };
 
 const asUrl = (sharedLink: SharedLinkResponseDto) => {

web/src/lib/services/system-config.service.ts

@@ -1,12 +1,11 @@
 import { downloadManager } from '$lib/managers/download-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
-import type { ActionItem } from '$lib/types';
 import { copyToClipboard } from '$lib/utils';
 import { downloadBlob } from '$lib/utils/asset-utils';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import { getConfig, updateConfig, type ServerFeaturesDto, type SystemConfigDto } from '@immich/sdk';
-import { toastManager } from '@immich/ui';
+import { toastManager, type ActionItem } from '@immich/ui';
 import { mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
 import { isEqual } from 'lodash-es';
 import type { MessageFormatter } from 'svelte-i18n';
@@ -19,20 +18,20 @@ export const getSystemConfigActions = (
   const CopyToClipboard: ActionItem = {
     title: $t('copy_to_clipboard'),
     icon: mdiContentCopy,
-    onSelect: () => void handleCopyToClipboard(config),
+    onAction: () => void handleCopyToClipboard(config),
   };
 
   const Download: ActionItem = {
     title: $t('export_as_json'),
     icon: mdiDownload,
-    onSelect: () => handleDownloadConfig(config),
+    onAction: () => handleDownloadConfig(config),
   };
 
   const Upload: ActionItem = {
     title: $t('import_from_json'),
     icon: mdiUpload,
     $if: () => !featureFlags.configFile,
-    onSelect: () => handleUploadConfig(),
+    onAction: () => handleUploadConfig(),
   };
 
   return { CopyToClipboard, Download, Upload };

web/src/lib/services/user-admin.service.ts

@@ -1,13 +1,11 @@
 import { goto } from '$app/navigation';
 import { eventManager } from '$lib/managers/event-manager.svelte';
-import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
 import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
 import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
 import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
 import UserEditModal from '$lib/modals/UserEditModal.svelte';
 import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
 import { user as authUser } from '$lib/stores/user.store';
-import type { ActionItem } from '$lib/types';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -21,45 +19,33 @@ import {
   type UserAdminResponseDto,
   type UserAdminUpdateDto,
 } from '@immich/sdk';
-import { MenuItemType, menuManager, modalManager, toastManager } from '@immich/ui';
+import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import {
   mdiDeleteRestore,
-  mdiDotsVertical,
-  mdiEyeOutline,
   mdiLockReset,
   mdiLockSmart,
   mdiPencilOutline,
   mdiPlusBoxOutline,
   mdiTrashCanOutline,
 } from '@mdi/js';
-import { DateTime } from 'luxon';
 import type { MessageFormatter } from 'svelte-i18n';
 import { get } from 'svelte/store';
 
-const getDeleteDate = (deletedAt: string): Date =>
-  DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
-
 export const getUserAdminsActions = ($t: MessageFormatter) => {
   const Create: ActionItem = {
     title: $t('create_user'),
     icon: mdiPlusBoxOutline,
-    onSelect: () => void modalManager.show(UserCreateModal, {}),
+    onAction: () => void modalManager.show(UserCreateModal, {}),
   };
 
   return { Create };
 };
 
 export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminResponseDto) => {
-  const View: ActionItem = {
-    icon: mdiEyeOutline,
-    title: $t('view'),
-    onSelect: () => void goto(`/admin/users/${user.id}`),
-  };
-
   const Update: ActionItem = {
     icon: mdiPencilOutline,
     title: $t('edit'),
-    onSelect: () => void modalManager.show(UserEditModal, { user }),
+    onAction: () => void modalManager.show(UserEditModal, { user }),
   };
 
   const Delete: ActionItem = {
@@ -67,7 +53,7 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
     title: $t('delete'),
     color: 'danger',
     $if: () => get(authUser).id !== user.id && !user.deletedAt,
-    onSelect: () => void modalManager.show(UserDeleteConfirmModal, { user }),
+    onAction: () => void modalManager.show(UserDeleteConfirmModal, { user }),
   };
 
   const Restore: ActionItem = {
@@ -75,47 +61,23 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
     title: $t('restore'),
     color: 'primary',
     $if: () => !!user.deletedAt && user.status === UserStatus.Deleted,
-    onSelect: () => void modalManager.show(UserRestoreConfirmModal, { user }),
-    props: {
-      title: $t('admin.user_restore_scheduled_removal', {
-        values: { date: getDeleteDate(user.deletedAt!) },
-      }),
-    },
+    onAction: () => void modalManager.show(UserRestoreConfirmModal, { user }),
   };
 
   const ResetPassword: ActionItem = {
     icon: mdiLockReset,
     title: $t('reset_password'),
     $if: () => get(authUser).id !== user.id,
-    onSelect: () => void handleResetPasswordUserAdmin(user),
+    onAction: () => void handleResetPasswordUserAdmin(user),
   };
 
   const ResetPinCode: ActionItem = {
     icon: mdiLockSmart,
     title: $t('reset_pin_code'),
-    onSelect: () => void handleResetPinCodeUserAdmin(user),
+    onAction: () => void handleResetPinCodeUserAdmin(user),
   };
 
-  const ContextMenu: ActionItem = {
-    icon: mdiDotsVertical,
-    title: $t('actions'),
-    onSelect: ({ event }) =>
-      void menuManager.show({
-        target: event.currentTarget as HTMLElement,
-        position: 'top-right',
-        items: [
-          View,
-          Update,
-          ResetPassword,
-          ResetPinCode,
-          get(authUser).id === user.id ? undefined : MenuItemType.Divider,
-          Restore,
-          Delete,
-        ].filter(Boolean),
-      }),
-  };
-
-  return { View, Update, Delete, Restore, ResetPassword, ResetPinCode, ContextMenu };
+  return { Update, Delete, Restore, ResetPassword, ResetPinCode };
 };
 
 export const handleCreateUserAdmin = async (dto: UserAdminCreateDto) => {
@@ -172,6 +134,10 @@ export const handleRestoreUserAdmin = async (user: UserAdminResponseDto) => {
   }
 };
 
+export const handleNavigateUserAdmin = async (user: UserAdminResponseDto) => {
+  await goto(`/admin/users/${user.id}`);
+};
+
 // TODO move password reset server-side
 const generatePassword = (length: number = 16) => {
   let generatedPassword = '';