must select site before can fill vars

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

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx
@@ -112,7 +112,7 @@ export const OnboardingDashboardTemplateConfigureStep = ({
                                 For each action below, select an element on your site that indicates when that action is
                                 taken, or enter a custom event name that you'll send from your backend.
                             </p>
-                            <DashboardTemplateVariables />
+                            <DashboardTemplateVariables hasSelectedSite={!!browserUrl} />
                             <LemonButton
                                 type="primary"
                                 status="alt"

diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx
@@ -1,13 +1,19 @@
 import { IconCheckCircle, IconInfo, IconTrash } from '@posthog/icons'
-import { LemonButton, LemonCollapse, LemonInput, LemonLabel } from '@posthog/lemon-ui'
+import { LemonBanner, LemonButton, LemonCollapse, LemonInput, LemonLabel } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { useEffect, useState } from 'react'
 import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTemplateVariablesLogic'
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
 
 import { DashboardTemplateVariableType } from '~/types'
 
-function VariableSelector({ variable }: { variable: DashboardTemplateVariableType }): JSX.Element {
+function VariableSelector({
+    variable,
+    hasSelectedSite,
+}: {
+    variable: DashboardTemplateVariableType
+    hasSelectedSite: boolean
+}): JSX.Element {
     const { activeDashboardTemplate } = useValues(newDashboardLogic)
     const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({
         variables: activeDashboardTemplate?.variables || [],
@@ -93,34 +99,38 @@ function VariableSelector({ variable }: { variable: DashboardTemplateVariableTyp
                     </div>
                 </div>
             )}
-            <div className="flex">
-                {variable.touched ? (
-                    <LemonButton type="primary" status="alt" onClick={incrementActiveVariableIndex}>
-                        Continue
-                    </LemonButton>
-                ) : (
-                    <div className="flex gap-x-2">
-                        <LemonButton
-                            type="primary"
-                            status="alt"
-                            onClick={() => {
-                                setShowCustomEventField(false)
-                                setVariable(variable.name, { events: [FALLBACK_EVENT] })
-                            }}
-                        >
-                            Select from site
-                        </LemonButton>
-                        <LemonButton type="secondary" onClick={() => setShowCustomEventField(true)}>
-                            Use custom event
+            {!hasSelectedSite ? (
+                <LemonBanner type="warning">Please select a site to continue. </LemonBanner>
+            ) : (
+                <div className="flex">
+                    {variable.touched ? (
+                        <LemonButton type="primary" status="alt" onClick={incrementActiveVariableIndex}>
+                            Continue
                         </LemonButton>
-                    </div>
-                )}
-            </div>
+                    ) : (
+                        <div className="flex gap-x-2">
+                            <LemonButton
+                                type="primary"
+                                status="alt"
+                                onClick={() => {
+                                    setShowCustomEventField(false)
+                                    setVariable(variable.name, { events: [FALLBACK_EVENT] })
+                                }}
+                            >
+                                Select from site
+                            </LemonButton>
+                            <LemonButton type="secondary" onClick={() => setShowCustomEventField(true)}>
+                                Use custom event
+                            </LemonButton>
+                        </div>
+                    )}
+                </div>
+            )}
         </div>
     )
 }
 
-export function DashboardTemplateVariables(): JSX.Element {
+export function DashboardTemplateVariables({ hasSelectedSite }: { hasSelectedSite: boolean }): JSX.Element {
     const { activeDashboardTemplate } = useValues(newDashboardLogic)
     const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({
         variables: activeDashboardTemplate?.variables || [],
@@ -145,7 +155,7 @@ export function DashboardTemplateVariables(): JSX.Element {
                             {v.touched && <IconCheckCircle className="text-success ml-2 text-base" />}
                         </div>
                     ),
-                    content: <VariableSelector variable={v} {...v} />,
+                    content: <VariableSelector variable={v} {...v} hasSelectedSite={hasSelectedSite} />,
                     className: 'p-4 bg-white',
                     onHeaderClick: () => {
                         setActiveVariableIndex(i)