From 7bb1fcdd4b062ce452d591f6a7a2403d8c5eb421 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Sat, 31 May 2025 03:12:44 +0000
Subject: [PATCH] fix(ui): DevFlags order in TOML export (#4155)

* fix(ui): update artist link rendering and improve button styles

Signed-off-by: Deluan <deluan@navidrome.org>

* fix(ui): Move Dev* flags before sections in export

---------

Signed-off-by: Deluan <deluan@navidrome.org>
Co-authored-by: Deluan <deluan@navidrome.org>
---
 ui/src/utils/toml.js      | 22 +++++++++++-----------
 ui/src/utils/toml.test.js | 23 +++++++++++++++++++----
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/ui/src/utils/toml.js b/ui/src/utils/toml.js
index e4b91bf69..1bb0aeea2 100644
--- a/ui/src/utils/toml.js
+++ b/ui/src/utils/toml.js
@@ -127,17 +127,6 @@ export const configToToml = (configData, translate = (key) => key) => {
     tomlContent += '\n'
   }
 
-  // Add sections
-  Object.keys(regularSections)
-    .sort()
-    .forEach((sectionName) => {
-      tomlContent += `[${sectionName}]\n`
-      regularSections[sectionName].forEach(({ key, value }) => {
-        tomlContent += `${key} = ${formatTomlValue(value)}\n`
-      })
-      tomlContent += '\n'
-    })
-
   // Add dev configs if any
   if (devConfigs.length > 0) {
     tomlContent += `# ${translate('about.config.devFlagsHeader')}\n`
@@ -166,5 +155,16 @@ export const configToToml = (configData, translate = (key) => key) => {
       })
   }
 
+  // Add sections
+  Object.keys(regularSections)
+    .sort()
+    .forEach((sectionName) => {
+      tomlContent += `[${sectionName}]\n`
+      regularSections[sectionName].forEach(({ key, value }) => {
+        tomlContent += `${key} = ${formatTomlValue(value)}\n`
+      })
+      tomlContent += '\n'
+    })
+
   return tomlContent
 }
diff --git a/ui/src/utils/toml.test.js b/ui/src/utils/toml.test.js
index ab49defce..2f1ab1afc 100644
--- a/ui/src/utils/toml.test.js
+++ b/ui/src/utils/toml.test.js
@@ -199,15 +199,30 @@ describe('configToToml', () => {
         { key: 'RootKey', value: 'rootValue' },
         { key: 'Section.NestedKey', value: 'nestedValue' },
         { key: 'Section.AnotherKey', value: 'anotherValue' },
+        { key: 'DevA', value: 'DevValue' },
       ],
     }
 
     const result = configToToml(configData, mockTranslate)
+    // Fields in a section are sorted alphabetically
+    const fields = [
+      'RootKey = "rootValue"',
+      'DevA = "DevValue"',
+      '[Section]',
+      'AnotherKey = "anotherValue"',
+      'NestedKey = "nestedValue"',
+    ]
 
-    expect(result).toContain('RootKey = "rootValue"')
-    expect(result).toContain('[Section]')
-    expect(result).toContain('NestedKey = "nestedValue"')
-    expect(result).toContain('AnotherKey = "anotherValue"')
+    for (let idx = 0; idx < fields.length - 1; idx++) {
+      expect(result).toContain(fields[idx])
+
+      const idxA = result.indexOf(fields[idx])
+      const idxB = result.indexOf(fields[idx + 1])
+
+      expect(idxA).toBeLessThan(idxB)
+    }
+
+    expect(result).toContain(fields[fields.length - 1])
   })
 
   it('includes dev flags header when dev configs exist', () => {