From 4ec47b4186403a3d2e179b554b0d7102138ce2cd Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Sat, 8 Jun 2024 11:57:18 +0200
Subject: [PATCH] fix(web): storage migration description (#10041)

---
 .../lib/components/admin-page/jobs/job-tile.svelte  |  9 ++++-----
 .../components/admin-page/jobs/jobs-panel.svelte    | 13 +++++--------
 .../jobs/storage-migration-description.svelte       |  9 ++++++---
 web/src/lib/constants.ts                            |  2 +-
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/web/src/lib/components/admin-page/jobs/job-tile.svelte
index 1d6667072e..673aaf76e6 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile.svelte
@@ -12,7 +12,7 @@
     mdiPlay,
     mdiSelectionSearch,
   } from '@mdi/js';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, type ComponentType } from 'svelte';
   import JobTileButton from './job-tile-button.svelte';
   import JobTileStatus from './job-tile-status.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
@@ -20,6 +20,7 @@
 
   export let title: string;
   export let subtitle: string | undefined;
+  export let description: ComponentType | undefined;
   export let jobCounts: JobCountsDto;
   export let queueStatus: QueueStatusDto;
   export let allowForceCommand = true;
@@ -29,8 +30,6 @@
   export let allText: string;
   export let missingText: string;
 
-  const slots = $$props.$$slots;
-
   $: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
   $: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
 
@@ -86,9 +85,9 @@
         <div class="whitespace-pre-line text-sm dark:text-white">{subtitle}</div>
       {/if}
 
-      {#if slots?.description}
+      {#if description}
         <div class="text-sm dark:text-white">
-          <slot name="description" />
+          <svelte:component this={description} />
         </div>
       {/if}
 
diff --git a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
index 915a57a621..b49baad423 100644
--- a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
+++ b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
@@ -30,12 +30,12 @@
   interface JobDetails {
     title: string;
     subtitle?: string;
+    description?: ComponentType;
     allText?: string;
     missingText?: string;
     disabled?: boolean;
     icon: string;
     allowForceCommand?: boolean;
-    component?: ComponentType;
     handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
   }
 
@@ -120,7 +120,7 @@
       icon: mdiFolderMove,
       title: getJobName(JobName.StorageTemplateMigration),
       allowForceCommand: false,
-      component: StorageMigrationDescription,
+      description: StorageMigrationDescription,
     },
     [JobName.Migration]: {
       icon: mdiFolderMove,
@@ -153,23 +153,20 @@
 </script>
 
 <div class="flex flex-col gap-7">
-  {#each jobList as [jobName, { title, subtitle, disabled, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
+  {#each jobList as [jobName, { title, subtitle, description, disabled, allText, missingText, allowForceCommand, icon, handleCommand: handleCommandOverride }]}
     {@const { jobCounts, queueStatus } = jobs[jobName]}
     <JobTile
       {icon}
       {title}
       {disabled}
       {subtitle}
+      {description}
       allText={allText || $t('all').toUpperCase()}
       missingText={missingText || $t('missing').toUpperCase()}
       {allowForceCommand}
       {jobCounts}
       {queueStatus}
       on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
-    >
-      {#if component}
-        <svelte:component this={component} slot="description" />
-      {/if}
-    </JobTile>
+    />
   {/each}
 </div>
diff --git a/web/src/lib/components/admin-page/jobs/storage-migration-description.svelte b/web/src/lib/components/admin-page/jobs/storage-migration-description.svelte
index 4de943d64a..f4392ac136 100644
--- a/web/src/lib/components/admin-page/jobs/storage-migration-description.svelte
+++ b/web/src/lib/components/admin-page/jobs/storage-migration-description.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
-  import { AppRoute } from '$lib/constants';
+  import { AppRoute, OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
   import { t } from 'svelte-i18n';
 </script>
 
 Apply the current
-<a href="{AppRoute.ADMIN_SETTINGS}?open=storageTemplate" class="text-immich-primary dark:text-immich-dark-primary"
-  >{$t('admin.storage_template_settings')}</a
+<a
+  href="{AppRoute.ADMIN_SETTINGS}?{QueryParameter.IS_OPEN}={OpenSettingQueryParameterValue.STORAGE_TEMPLATE}"
+  class="text-immich-primary dark:text-immich-dark-primary"
 >
+  {$t('admin.storage_template_settings')}
+</a>
 to previously uploaded assets
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index 3ed8f9da5d..5de3e3fdd6 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -80,7 +80,7 @@ export enum QueryParameter {
 export enum OpenSettingQueryParameterValue {
   OAUTH = 'oauth',
   JOB = 'job',
-  STORAGE_TEMPLATE = 'storageTemplate',
+  STORAGE_TEMPLATE = 'storage-template',
 }
 
 export enum ActionQueryParameterValue {