From 0a64b3202478351215d570b1be2183b914de767d Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Fri, 13 Oct 2023 19:38:07 +0200
Subject: [PATCH] fix(settings): use correct name instead of hardcoded
 'dark-mode'

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
---
 .../editor/indent-with-tabs-setting-button-group.tsx |  1 +
 .../editor/ligature-setting-button-group.tsx         |  2 +-
 .../editor/line-wrapping-setting-button-group.tsx    |  2 +-
 .../editor/smart-paste-setting-button-group.tsx      |  2 +-
 .../editor/spellcheck-setting-button-group.tsx       |  2 +-
 .../editor/sync-scroll-setting-button-group.tsx      |  2 +-
 .../__snapshots__/on-off-button-group.spec.tsx.snap  | 12 ++++++------
 .../utils/on-off-button-group.spec.tsx               |  5 +++--
 .../settings-dialog/utils/on-off-button-group.tsx    |  5 ++++-
 9 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/global-dialogs/settings-dialog/editor/indent-with-tabs-setting-button-group.tsx b/frontend/src/components/global-dialogs/settings-dialog/editor/indent-with-tabs-setting-button-group.tsx
index 5ecb9901b..94770efca 100644
--- a/frontend/src/components/global-dialogs/settings-dialog/editor/indent-with-tabs-setting-button-group.tsx
+++ b/frontend/src/components/global-dialogs/settings-dialog/editor/indent-with-tabs-setting-button-group.tsx
@@ -16,6 +16,7 @@ export const IndentWithTabsSettingButtonGroup: React.FC = () => {
   return (
     <OnOffButtonGroup
       value={enabled}
+      name={'settings-indent-with-tabs'}
       onSelect={setEditorIndentWithTabs}
       overrideButtonOnI18nKey={'settings.editor.indentWithTabs.tabs'}
       overrideButtonOffI18nKey={'settings.editor.indentWithTabs.spaces'}
diff --git a/frontend/src/components/global-dialogs/settings-dialog/editor/ligature-setting-button-group.tsx b/frontend/src/components/global-dialogs/settings-dialog/editor/ligature-setting-button-group.tsx
index 8a28e097b..4a3efe55b 100644
--- a/frontend/src/components/global-dialogs/settings-dialog/editor/ligature-setting-button-group.tsx
+++ b/frontend/src/components/global-dialogs/settings-dialog/editor/ligature-setting-button-group.tsx
@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const LigatureSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.ligatures)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorLigatures} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorLigatures} name={'settings-ligatures'} />
 }
diff --git a/frontend/src/components/global-dialogs/settings-dialog/editor/line-wrapping-setting-button-group.tsx b/frontend/src/components/global-dialogs/settings-dialog/editor/line-wrapping-setting-button-group.tsx
index 416c424c1..866476ca5 100644
--- a/frontend/src/components/global-dialogs/settings-dialog/editor/line-wrapping-setting-button-group.tsx
+++ b/frontend/src/components/global-dialogs/settings-dialog/editor/line-wrapping-setting-button-group.tsx
@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const LineWrappingSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.lineWrapping)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorLineWrapping} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorLineWrapping} name={'settings-line-wrapping'} />
 }
diff --git a/frontend/src/components/global-dialogs/settings-dialog/editor/smart-paste-setting-button-group.tsx b/frontend/src/components/global-dialogs/settings-dialog/editor/smart-paste-setting-button-group.tsx
index d54d7af61..1b6dd43bd 100644
--- a/frontend/src/components/global-dialogs/settings-dialog/editor/smart-paste-setting-button-group.tsx
+++ b/frontend/src/components/global-dialogs/settings-dialog/editor/smart-paste-setting-button-group.tsx
@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const SmartPasteSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.smartPaste)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorSmartPaste} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorSmartPaste} name={'settings-smart-paste'} />
 }
diff --git a/frontend/src/components/global-dialogs/settings-dialog/editor/spellcheck-setting-button-group.tsx b/frontend/src/components/global-dialogs/settings-dialog/editor/spellcheck-setting-button-group.tsx
index c06bb89de..6e6903f15 100644
--- a/frontend/src/components/global-dialogs/settings-dialog/editor/spellcheck-setting-button-group.tsx
+++ b/frontend/src/components/global-dialogs/settings-dialog/editor/spellcheck-setting-button-group.tsx
@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const SpellcheckSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.spellCheck)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorSpellCheck} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorSpellCheck} name={'settings-spell-check'} />
 }
diff --git a/frontend/src/components/global-dialogs/settings-dialog/editor/sync-scroll-setting-button-group.tsx b/frontend/src/components/global-dialogs/settings-dialog/editor/sync-scroll-setting-button-group.tsx
index e68712530..ef50a1b90 100644
--- a/frontend/src/components/global-dialogs/settings-dialog/editor/sync-scroll-setting-button-group.tsx
+++ b/frontend/src/components/global-dialogs/settings-dialog/editor/sync-scroll-setting-button-group.tsx
@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const SyncScrollSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.syncScroll)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorSyncScroll} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorSyncScroll} name={'settings-sync-scroll'} />
 }
diff --git a/frontend/src/components/global-dialogs/settings-dialog/utils/__snapshots__/on-off-button-group.spec.tsx.snap b/frontend/src/components/global-dialogs/settings-dialog/utils/__snapshots__/on-off-button-group.spec.tsx.snap
index 17dd70d3c..1dcfd5494 100644
--- a/frontend/src/components/global-dialogs/settings-dialog/utils/__snapshots__/on-off-button-group.spec.tsx.snap
+++ b/frontend/src/components/global-dialogs/settings-dialog/utils/__snapshots__/on-off-button-group.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`Settings On-Off Button Group accepts custom labels 1`] = `
     <button
       class="btn btn-secondary"
       data-testid="onOffButtonGroupOn"
-      name="dark-mode"
+      name="test"
       title="test.custom-on"
       type="radio"
     >
@@ -18,7 +18,7 @@ exports[`Settings On-Off Button Group accepts custom labels 1`] = `
     <button
       class="btn btn-outline-secondary"
       data-testid="onOffButtonGroupOff"
-      name="dark-mode"
+      name="test"
       title="test.custom-off"
       type="radio"
     >
@@ -37,7 +37,7 @@ exports[`Settings On-Off Button Group can switch value 1`] = `
     <button
       class="btn btn-outline-secondary"
       data-testid="onOffButtonGroupOn"
-      name="dark-mode"
+      name="test"
       title="common.on"
       type="radio"
     >
@@ -46,7 +46,7 @@ exports[`Settings On-Off Button Group can switch value 1`] = `
     <button
       class="btn btn-secondary"
       data-testid="onOffButtonGroupOff"
-      name="dark-mode"
+      name="test"
       title="common.off"
       type="radio"
     >
@@ -65,7 +65,7 @@ exports[`Settings On-Off Button Group can switch value 2`] = `
     <button
       class="btn btn-secondary"
       data-testid="onOffButtonGroupOn"
-      name="dark-mode"
+      name="test"
       title="common.on"
       type="radio"
     >
@@ -74,7 +74,7 @@ exports[`Settings On-Off Button Group can switch value 2`] = `
     <button
       class="btn btn-outline-secondary"
       data-testid="onOffButtonGroupOff"
-      name="dark-mode"
+      name="test"
       title="common.off"
       type="radio"
     >
diff --git a/frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.spec.tsx b/frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.spec.tsx
index 1ba81399c..bfe485622 100644
--- a/frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.spec.tsx
+++ b/frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.spec.tsx
@@ -14,7 +14,7 @@ describe('Settings On-Off Button Group', () => {
     let value = false
     const onSelect = (newValue: boolean) => (value = newValue)
 
-    const view = render(<OnOffButtonGroup value={value} onSelect={onSelect} />)
+    const view = render(<OnOffButtonGroup name={'test'} value={value} onSelect={onSelect} />)
     expect(view.container).toMatchSnapshot()
     const onButton = await screen.findByTestId('onOffButtonGroupOn')
     await act<void>(() => {
@@ -22,7 +22,7 @@ describe('Settings On-Off Button Group', () => {
     })
     expect(value).toBeTruthy()
 
-    view.rerender(<OnOffButtonGroup value={value} onSelect={onSelect} />)
+    view.rerender(<OnOffButtonGroup name={'test'} value={value} onSelect={onSelect} />)
     expect(view.container).toMatchSnapshot()
     const offButton = await screen.findByTestId('onOffButtonGroupOff')
     await act<void>(() => {
@@ -34,6 +34,7 @@ describe('Settings On-Off Button Group', () => {
   it('accepts custom labels', () => {
     const view = render(
       <OnOffButtonGroup
+        name={'test'}
         value={true}
         onSelect={() => {}}
         overrideButtonOnI18nKey={'test.custom-on'}
diff --git a/frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.tsx b/frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.tsx
index df2be405a..922f47374 100644
--- a/frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.tsx
+++ b/frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.tsx
@@ -16,6 +16,7 @@ enum OnOffState {
 export interface OnOffButtonGroupProps {
   value: boolean
   onSelect: (value: boolean) => void
+  name: string
   overrideButtonOnI18nKey?: string
   overrideButtonOffI18nKey?: string
 }
@@ -25,12 +26,14 @@ export interface OnOffButtonGroupProps {
  *
  * @param onSelect callback that is executed if the on/off value has changed
  * @param value the current on/off value that should be visible
+ * @param name A unique name for the button group to allow the browser to distinguish between multiple ones
  * @param overrideButtonOnI18nKey Set to override the i18n key for the on-button
  * @param overrideButtonOffI18nKey Set to override the i18n key for the off-button
  */
 export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({
   onSelect,
   value,
+  name,
   overrideButtonOffI18nKey,
   overrideButtonOnI18nKey
 }) => {
@@ -43,7 +46,7 @@ export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({
   )
 
   return (
-    <ToggleButtonGroup type='radio' name='dark-mode' value={buttonGroupValue}>
+    <ToggleButtonGroup type='radio' name={name} value={buttonGroupValue}>
       <SettingsToggleButton
         onSelect={onButtonSelect}
         selected={buttonGroupValue === OnOffState.ON}