improve navigation handling

PostHog · Sep 4, 2024 · 9f32c0c · 9f32c0c
1 parent c0e0d6f
commit 9f32c0c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts b/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts
@@ -1,4 +1,4 @@
-import { actions, kea, path, props, propsChanged, reducers, selectors } from 'kea'
+import { actions, kea, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
 import { isEmptyObject } from 'lib/utils'
 
 import { DashboardTemplateVariableType, FilterType, Optional } from '~/types'
@@ -26,7 +26,9 @@ export const dashboardTemplateVariablesLogic = kea<dashboardTemplateVariablesLog
         }),
         setActiveVariableIndex: (index: number) => ({ index }),
         incrementActiveVariableIndex: true,
+        possiblyIncrementActiveVariableIndex: true,
         resetVariable: (variableId: string) => ({ variableId }),
+        goToNextUntouchedActiveVariableIndex: true,
     }),
     reducers({
         variables: [
@@ -81,6 +83,27 @@ export const dashboardTemplateVariablesLogic = kea<dashboardTemplateVariablesLog
             },
         ],
     })),
+    listeners(({ actions, props, values }) => ({
+        possiblyIncrementActiveVariableIndex: () => {
+            if (props.variables.length > 0 && values.activeVariableIndex < props.variables.length - 1) {
+                actions.incrementActiveVariableIndex()
+            }
+        },
+        goToNextUntouchedActiveVariableIndex: () => {
+            let nextIndex = values.variables.findIndex((v, i) => !v.touched && i > values.activeVariableIndex)
+            if (nextIndex !== -1) {
+                actions.setActiveVariableIndex(nextIndex)
+                return
+            }
+            if (nextIndex == -1) {
+                nextIndex = values.variables.findIndex((v) => !v.touched)
+                if (nextIndex == -1) {
+                    nextIndex = values.activeVariableIndex
+                }
+            }
+            actions.setActiveVariableIndex(nextIndex)
+        },
+    })),
     propsChanged(({ actions, props }, oldProps) => {
         if (props.variables !== oldProps.variables) {
             actions.setVariables(props.variables)

diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx
@@ -18,7 +18,9 @@ function VariableSelector({
     const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({
         variables: activeDashboardTemplate?.variables || [],
     })
-    const { setVariable, resetVariable, incrementActiveVariableIndex } = useActions(theDashboardTemplateVariablesLogic)
+    const { setVariable, resetVariable, goToNextUntouchedActiveVariableIndex, incrementActiveVariableIndex } =
+        useActions(theDashboardTemplateVariablesLogic)
+    const { allVariablesAreTouched, variables, activeVariableIndex } = useValues(theDashboardTemplateVariablesLogic)
     const [customEventName, setCustomEventName] = useState<string | null>(null)
     const [showCustomEventField, setShowCustomEventField] = useState(false)
 
@@ -104,9 +106,24 @@ function VariableSelector({
             ) : (
                 <div className="flex">
                     {variable.touched ? (
-                        <LemonButton type="primary" status="alt" onClick={incrementActiveVariableIndex}>
-                            Continue
-                        </LemonButton>
+                        <>
+                            {!allVariablesAreTouched ||
+                            (allVariablesAreTouched && variables.length !== activeVariableIndex + 1) ? (
+                                <LemonButton
+                                    type="primary"
+                                    status="alt"
+                                    onClick={() =>
+                                        !allVariablesAreTouched
+                                            ? goToNextUntouchedActiveVariableIndex()
+                                            : variables.length !== activeVariableIndex + 1
+                                            ? incrementActiveVariableIndex()
+                                            : null
+                                    }
+                                >
+                                    Continue
+                                </LemonButton>
+                            ) : null}
+                        </>
                     ) : (
                         <div className="flex gap-x-2">
                             <LemonButton