From 5c31acbcf0d84f6fc217012acfb6646fb8067cfd Mon Sep 17 00:00:00 2001
From: mcarbonne <46689813+mcarbonne@users.noreply.github.com>
Date: Sat, 9 Nov 2024 19:11:20 +0100
Subject: [PATCH] feat(web): stable json settings export (#14036)

* recursively sort json output (settings)

* fix format/lint/...g
---
 .../routes/admin/system-settings/+page.svelte    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index f724e2d145951..9eb7351060048 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -64,8 +64,20 @@
 
   type SettingsComponent = ComponentType<SvelteComponent<SettingsComponentProps>>;
 
+  // https://stackoverflow.com/questions/16167581/sort-object-properties-and-json-stringify/43636793#43636793
+  const jsonReplacer = (key: string, value: unknown) =>
+    value instanceof Object && !Array.isArray(value)
+      ? Object.keys(value)
+          .sort()
+          // eslint-disable-next-line unicorn/no-array-reduce
+          .reduce((sorted: { [key: string]: unknown }, key) => {
+            sorted[key] = (value as { [key: string]: unknown })[key];
+            return sorted;
+          }, {})
+      : value;
+
   const downloadConfig = () => {
-    const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
+    const blob = new Blob([JSON.stringify(config, jsonReplacer, 2)], { type: 'application/json' });
     const downloadKey = 'immich-config.json';
     downloadManager.add(downloadKey, blob.size);
     downloadManager.update(downloadKey, blob.size);
@@ -240,7 +252,7 @@
       <div class="hidden lg:block">
         <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
       </div>
-      <LinkButton on:click={() => copyToClipboard(JSON.stringify(config, null, 2))}>
+      <LinkButton on:click={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}>
         <div class="flex place-items-center gap-2 text-sm">
           <Icon path={mdiContentCopy} size="18" />
           {$t('copy_to_clipboard')}