fix(settings): Fix back button when linking to settings

PostHog · Dec 5, 2024 · c6f06e7 · c6f06e7
1 parent b4a3b1f
commit c6f06e7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/frontend/src/scenes/settings/Settings.tsx b/frontend/src/scenes/settings/Settings.tsx
@@ -10,6 +10,7 @@ import { IconChevronRight, IconLink } from 'lib/lemon-ui/icons'
 import { capitalizeFirstLetter, inStorybookTestRunner } from 'lib/utils'
 import React from 'react'
 import { teamLogic } from 'scenes/teamLogic'
+import { urls } from 'scenes/urls'
 
 import { settingsLogic } from './settingsLogic'
 import { SettingsLogicProps } from './types'
@@ -56,7 +57,13 @@ export function Settings({
                                 {levels.map((level) => (
                                     <li key={level} className="space-y-px">
                                         <LemonButton
-                                            onClick={() => selectLevel(level)}
+                                            // We only want this to be a link if rendering /settings
+                                            to={props.logicKey === 'settingsScene' ? urls.settings(level) : undefined}
+                                            onClick={
+                                                props.logicKey !== 'settingsScene'
+                                                    ? () => selectLevel(level)
+                                                    : undefined
+                                            }
                                             size="small"
                                             fullWidth
                                             active={selectedLevel === level && !selectedSectionId}
@@ -70,7 +77,17 @@ export function Settings({
                                                 .map((section) => (
                                                     <li key={section.id} className="pl-4">
                                                         <LemonButton
-                                                            onClick={() => selectSection(section.id, section.level)}
+                                                            to={
+                                                                // We only want this to be a link if rendering /settings
+                                                                props.logicKey === 'settingsScene'
+                                                                    ? urls.settings(section.id)
+                                                                    : undefined
+                                                            }
+                                                            onClick={
+                                                                props.logicKey !== 'settingsScene'
+                                                                    ? () => selectSection(section.id, section.level)
+                                                                    : undefined
+                                                            }
                                                             size="small"
                                                             fullWidth
                                                             active={selectedSectionId === section.id}
@@ -126,7 +143,13 @@ function SettingsRenderer(props: SettingsLogicProps): JSX.Element {
                     <div key={x.id} className="relative">
                         <h2 id={x.id} className="flex gap-2 items-center">
                             {x.title}
-                            <LemonButton icon={<IconLink />} size="small" onClick={() => selectSetting?.(x.id)} />
+                            <LemonButton
+                                icon={<IconLink />}
+                                size="small"
+                                // We only want this to be a link if rendering /settings
+                                to={props.logicKey === 'settingsScene' ? urls.settings(undefined, x.id) : undefined}
+                                onClick={props.logicKey !== 'settingsScene' ? () => selectSetting(x.id) : undefined}
+                            />
                         </h2>
                         {x.description && <p>{x.description}</p>}
 

diff --git a/frontend/src/scenes/settings/settingsSceneLogic.ts b/frontend/src/scenes/settings/settingsSceneLogic.ts
@@ -73,16 +73,15 @@ export const settingsSceneLogic = kea<settingsSceneLogicType>([
     })),
 
     actionToUrl(({ values }) => ({
+        // Replacing history item instead of pushing, so that the environments<>project redirect doesn't affect history
         selectLevel({ level }) {
-            return [urls.settings(level), router.values.searchParams, router.values.hashParams]
+            return [urls.settings(level), router.values.searchParams, router.values.hashParams, { replace: true }]
         },
         selectSection({ section }) {
-            return [urls.settings(section), router.values.searchParams, router.values.hashParams]
+            return [urls.settings(section), router.values.searchParams, router.values.hashParams, { replace: true }]
         },
         selectSetting({ setting }) {
-            const url = urls.settings(values.selectedSectionId ?? values.selectedLevel, setting)
-
-            return [url]
+            return [urls.settings(values.selectedSectionId ?? values.selectedLevel, setting), { replace: true }]
         },
     })),
 ])