Merge branch 'master' into feat/heatmaps-opt-in

.github/workflows/ci-backend.yml

@@ -417,6 +417,7 @@ jobs:
                   echo running_time_run_id=${run_id} >> $GITHUB_ENV
                   echo running_time_run_started_at=${run_started_at} >> $GITHUB_ENV
             - name: Capture running time to PostHog
+              if: github.repository == 'PostHog/posthog'
               uses: PostHog/posthog-github-action@v0.1
               with:
                   posthog-token: ${{secrets.POSTHOG_API_TOKEN}}

.github/workflows/ci-e2e.yml

@@ -305,6 +305,7 @@ jobs:
                   echo running_time_run_id=${run_id} >> $GITHUB_ENV
                   echo running_time_run_started_at=${run_started_at} >> $GITHUB_ENV
             - name: Capture running time to PostHog
+              if: github.repository == 'PostHog/posthog'
               uses: PostHog/posthog-github-action@v0.1
               with:
                   posthog-token: ${{secrets.POSTHOG_API_TOKEN}}

.github/workflows/report-pr-age.yml

@@ -23,6 +23,7 @@ jobs:
                       echo is_revert=false >> $GITHUB_ENV
                   fi
             - name: Capture PR age to PostHog
+              if: github.repository == 'PostHog/posthog'
               uses: PostHog/posthog-github-action@v0.1
               with:
                   posthog-token: ${{secrets.POSTHOG_API_TOKEN}}

cypress/e2e/dashboard.cy.ts

@@ -100,6 +100,40 @@ describe('Dashboard', () => {
         cy.get('[data-attr^="breadcrumb-Dashboard:"]').should('have.text', TEST_DASHBOARD_NAME + 'UnnamedCancelSave')
     })
 
+    const assertVariablesConfigurationScreenIsShown = (): void => {
+        cy.get('[data-attr="new-dashboard-chooser"]').contains('Unique variable name').should('exist')
+    }
+
+    it('Allow reselecting a dashboard after pressing back', () => {
+        cy.intercept('GET', /\/api\/projects\/\d+\/dashboard_templates/, (req) => {
+            req.reply((response) => {
+                response.body.results[0].variables = [
+                    {
+                        id: 'id',
+                        name: 'Unique variable name',
+                        type: 'event',
+                        default: {},
+                        required: true,
+                        description: 'description',
+                    },
+                ]
+                return response
+            })
+        })
+
+        // Request templates again.
+        cy.clickNavMenu('dashboards')
+
+        cy.get('[data-attr="new-dashboard"]').click()
+        cy.get('[data-attr="create-dashboard-from-template"]').click()
+        assertVariablesConfigurationScreenIsShown()
+
+        cy.contains('.LemonButton', 'Back').click()
+
+        cy.get('[data-attr="create-dashboard-from-template"]').click()
+        assertVariablesConfigurationScreenIsShown()
+    })
+
     it('Click on a dashboard item dropdown and view graph', () => {
         cy.get('[data-attr=dashboard-name]').contains('Web Analytics').click()
         cy.get('.InsightCard [data-attr=more-button]').first().click()

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.stories.tsx

@@ -83,7 +83,7 @@ ShowTime.args = {
     showTime: true,
 }
 
-export const FromToday: Story = BasicTemplate.bind({})
-FromToday.args = {
-    fromToday: true,
+export const OnlyAllowUpcoming: Story = BasicTemplate.bind({})
+OnlyAllowUpcoming.args = {
+    onlyAllowUpcoming: true,
 }

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.tsx

@@ -28,7 +28,7 @@ export interface LemonCalendarProps {
     /** Show a time picker */
     showTime?: boolean
     /** Only allow upcoming dates */
-    fromToday?: boolean
+    onlyAllowUpcoming?: boolean
 }
 
 export interface GetLemonButtonPropsOpts {
@@ -137,7 +137,7 @@ export const LemonCalendar = forwardRef(function LemonCalendar(
                                                 LemonCalendar__today: date.isSame(today, 'd'),
                                             }),
                                             disabledReason:
-                                                props.fromToday && pastDate
+                                                props.onlyAllowUpcoming && pastDate
                                                     ? 'Cannot select dates in the past'
                                                     : undefined,
                                         }

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.test.tsx

@@ -113,4 +113,66 @@ describe('LemonCalendarSelect', () => {
         // only changes the hour
         expect(onChange).toHaveBeenCalledWith(dayjs('2023-01-15T08:42:00.000Z'))
     })
+
+    test('onlyAllowUpcoming', async () => {
+        const onClose = jest.fn()
+        const onChange = jest.fn()
+        window.HTMLElement.prototype.scrollIntoView = jest.fn()
+
+        jest.useFakeTimers().setSystemTime(new Date('2023-01-10 17:22:08'))
+
+        function TestSelect(): JSX.Element {
+            const [value, setValue] = useState<dayjs.Dayjs | null>(null)
+            return (
+                <LemonCalendarSelect
+                    months={1}
+                    value={value}
+                    onClose={onClose}
+                    onChange={(value) => {
+                        setValue(value)
+                        onChange(value)
+                    }}
+                    showTime
+                    onlyAllowUpcoming
+                />
+            )
+        }
+        const { container } = render(<TestSelect />)
+
+        async function clickOnDate(day: string): Promise<void> {
+            const element = container.querySelector('.LemonCalendar__month') as HTMLElement
+            if (element) {
+                userEvent.click(await within(element).findByText(day))
+                userEvent.click(getByDataAttr(container, 'lemon-calendar-select-apply'))
+            }
+        }
+
+        async function clickOnTime(props: GetLemonButtonTimePropsOpts): Promise<void> {
+            const element = getTimeElement(container.querySelector('.LemonCalendar__time'), props)
+            if (element) {
+                userEvent.click(element)
+                userEvent.click(getByDataAttr(container, 'lemon-calendar-select-apply'))
+            }
+        }
+
+        // click on minute
+        await clickOnTime({ unit: 'm', value: 42 })
+        // time is disabled until a date is clicked
+        expect(onChange).not.toHaveBeenCalled()
+
+        // click on current date
+        await clickOnDate('9')
+        // cannot select a date in the past
+        expect(onChange).not.toHaveBeenCalled()
+
+        // click on current date
+        await clickOnDate('10')
+        // chooses the current date and sets the time to the current hour and minute
+        expect(onChange).toHaveBeenCalledWith(dayjs('2023-01-10T17:22:00.000Z'))
+
+        // click on an earlier hour
+        await clickOnTime({ unit: 'a', value: 'am' })
+        // does not update the date because it is in the past
+        expect(onChange).lastCalledWith(dayjs('2023-01-10T17:22:00.000Z'))
+    })
 })

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.tsx

@@ -1,6 +1,6 @@
 import { IconX } from '@posthog/icons'
 import { dayjs } from 'lib/dayjs'
-import { LemonButton, LemonButtonWithSideActionProps, SideAction } from 'lib/lemon-ui/LemonButton'
+import { LemonButton, LemonButtonProps, LemonButtonWithSideActionProps, SideAction } from 'lib/lemon-ui/LemonButton'
 import { GetLemonButtonTimePropsOpts, LemonCalendar } from 'lib/lemon-ui/LemonCalendar/LemonCalendar'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
@@ -28,13 +28,27 @@ function scrollToTimeElement(
     })
 }
 
+function proposedDate(target: dayjs.Dayjs | null, { value, unit }: GetLemonButtonTimePropsOpts): dayjs.Dayjs {
+    let date = target || dayjs().startOf('day')
+    if (value != date.format(unit)) {
+        if (unit === 'h') {
+            date = date.hour(date.format('a') === 'am' || value === 12 ? Number(value) : Number(value) + 12)
+        } else if (unit === 'm') {
+            date = date.minute(Number(value))
+        } else if (unit === 'a') {
+            date = value === 'am' ? date.subtract(12, 'hour') : date.add(12, 'hour')
+        }
+    }
+    return date
+}
+
 export interface LemonCalendarSelectProps {
     value?: dayjs.Dayjs | null
     onChange: (date: dayjs.Dayjs) => void
     months?: number
     onClose?: () => void
     showTime?: boolean
-    fromToday?: boolean
+    onlyAllowUpcoming?: boolean
 }
 
 export function LemonCalendarSelect({
@@ -43,13 +57,14 @@ export function LemonCalendarSelect({
     months,
     onClose,
     showTime,
-    fromToday,
+    onlyAllowUpcoming,
 }: LemonCalendarSelectProps): JSX.Element {
     const calendarRef = useRef<HTMLDivElement | null>(null)
     const [selectValue, setSelectValue] = useState<dayjs.Dayjs | null>(
         value ? (showTime ? value : value.startOf('day')) : null
     )
 
+    const now = dayjs()
     const isAM = useMemo(() => selectValue?.format('a') === 'am', [selectValue])
 
     const scrollToTime = (date: dayjs.Dayjs, skipAnimation: boolean): void => {
@@ -62,8 +77,6 @@ export function LemonCalendarSelect({
     }
 
     const onDateClick = (date: dayjs.Dayjs | null): void => {
-        const now = dayjs()
-
         if (date) {
             date = showTime ? date.hour(selectValue === null ? now.hour() : selectValue.hour()) : date.startOf('hour')
             date = showTime
@@ -82,17 +95,7 @@ export function LemonCalendarSelect({
     }, [])
 
     const onTimeClick = (props: GetLemonButtonTimePropsOpts): void => {
-        const { value, unit } = props
-
-        let date = selectValue || dayjs().startOf('day')
-        if (unit === 'h') {
-            date = date.hour(date.format('a') === 'am' ? Number(value) : Number(value) + 12)
-        } else if (unit === 'm') {
-            date = date.minute(Number(value))
-        } else if (unit === 'a') {
-            date = value === 'am' ? date.subtract(12, 'hour') : date.add(12, 'hour')
-        }
-
+        const date = proposedDate(selectValue, props)
         scrollToTime(date, false)
         setSelectValue(date)
     }
@@ -111,17 +114,40 @@ export function LemonCalendarSelect({
                 leftmostMonth={selectValue?.startOf('month')}
                 months={months}
                 getLemonButtonProps={({ date, props }) => {
+                    const modifiedProps: LemonButtonProps = { ...props }
+                    const isDisabled =
+                        onlyAllowUpcoming &&
+                        selectValue &&
+                        date.isSame(now.tz('utc'), 'date') &&
+                        (selectValue.hour() < now.hour() ||
+                            (selectValue.hour() === now.hour() && selectValue.minute() <= now.minute()))
+
+                    if (isDisabled) {
+                        modifiedProps.disabledReason = 'Pick a time in the future first'
+                    }
+
                     if (date.isSame(selectValue, 'd')) {
-                        return { ...props, status: 'default', type: 'primary' }
+                        return { ...modifiedProps, status: 'default', type: 'primary' }
                     }
-                    return props
+                    return modifiedProps
                 }}
                 getLemonButtonTimeProps={(props) => {
                     const selected = selectValue ? selectValue.format(props.unit) : null
+                    const newDate = proposedDate(selectValue, props)
+
+                    const disabledReason = onlyAllowUpcoming
+                        ? selectValue
+                            ? newDate.isBefore(now)
+                                ? 'Cannot choose a time in the past'
+                                : undefined
+                            : 'Choose a date first'
+                        : undefined
+
                     return {
                         active: selected === String(props.value),
                         className: 'rounded-none',
                         'data-attr': timeDataAttr(props),
+                        disabledReason: disabledReason,
                         onClick: () => {
                             if (selected != props.value) {
                                 onTimeClick(props)
@@ -130,7 +156,7 @@ export function LemonCalendarSelect({
                     }
                 }}
                 showTime={showTime}
-                fromToday={fromToday}
+                onlyAllowUpcoming={onlyAllowUpcoming}
             />
             <div className="flex space-x-2 justify-end items-center border-t p-2 pt-4">
                 <LemonButton type="secondary" onClick={onClose} data-attr="lemon-calendar-select-cancel">

frontend/src/scenes/dashboard/NewDashboardModal.tsx

@@ -34,6 +34,7 @@ export function NewDashboardModal(): JSX.Element {
             onClose={hideNewDashboardModal}
             isOpen={newDashboardModalVisible}
             title={activeDashboardTemplate ? 'Choose your events' : 'Create a dashboard'}
+            data-attr="new-dashboard-chooser"
             description={
                 activeDashboardTemplate ? (
                     <p>

frontend/src/scenes/dashboard/newDashboardLogic.ts

@@ -89,6 +89,7 @@ export const newDashboardLogic = kea<newDashboardLogicType>([
                 hideNewDashboardModal: () => false,
                 submitNewDashboardSuccess: () => false,
                 submitNewDashboardFailure: () => false,
+                clearActiveDashboardTemplate: () => false,
             },
         ],
         newDashboardModalVisible: [

frontend/src/scenes/experiments/ExperimentView/Goal.tsx

@@ -91,7 +91,9 @@ export function ExposureMetric({ experimentId }: { experimentId: Experiment['id'
 }
 
 export function ExperimentGoalModal({ experimentId }: { experimentId: Experiment['id'] }): JSX.Element {
-    const { experiment, isExperimentGoalModalOpen, experimentLoading } = useValues(experimentLogic({ experimentId }))
+    const { experiment, isExperimentGoalModalOpen, experimentLoading, goalInsightDataLoading } = useValues(
+        experimentLogic({ experimentId })
+    )
     const { closeExperimentGoalModal, updateExperimentGoal, setNewExperimentInsight } = useActions(
         experimentLogic({ experimentId })
     )
@@ -108,6 +110,9 @@ export function ExperimentGoalModal({ experimentId }: { experimentId: Experiment
                         Cancel
                     </LemonButton>
                     <LemonButton
+                        disabledReason={
+                            goalInsightDataLoading && 'The insight needs to be loaded before saving the goal'
+                        }
                         form="edit-experiment-goal-form"
                         onClick={() => {
                             updateExperimentGoal(experiment.filters)

frontend/src/scenes/experiments/experimentLogic.tsx

@@ -106,6 +106,8 @@ export const experimentLogic = kea<experimentLogicType>([
             ['conversionMetrics'],
             trendsDataLogic({ dashboardItemId: EXPERIMENT_INSIGHT_ID }),
             ['results as trendResults'],
+            insightDataLogic({ dashboardItemId: EXPERIMENT_INSIGHT_ID }),
+            ['insightDataLoading as goalInsightDataLoading'],
         ],
         actions: [
             experimentsLogic,
@@ -309,7 +311,7 @@ export const experimentLogic = kea<experimentLogicType>([
             // Terminate if the insight did not manage to load in time
             if (!minimumDetectableChange) {
                 eventUsageLogic.actions.reportExperimentInsightLoadFailed()
-                lemonToast.error(
+                return lemonToast.error(
                     'Failed to load insight. Experiment cannot be saved without this value. Try changing the experiment goal.'
                 )
             }
@@ -481,10 +483,26 @@ export const experimentLogic = kea<experimentLogicType>([
             values.experiment && actions.reportExperimentArchived(values.experiment)
         },
         updateExperimentGoal: async ({ filters }) => {
-            // We never want to update global properties in the experiment
+            const { recommendedRunningTime, recommendedSampleSize, minimumDetectableChange } = values
+            if (!minimumDetectableChange) {
+                eventUsageLogic.actions.reportExperimentInsightLoadFailed()
+                return lemonToast.error(
+                    'Failed to load insight. Experiment cannot be saved without this value. Try changing the experiment goal.'
+                )
+            }
+
             const filtersToUpdate = { ...filters }
             delete filtersToUpdate.properties
-            actions.updateExperiment({ filters: filtersToUpdate })
+
+            actions.updateExperiment({
+                filters: filtersToUpdate,
+                parameters: {
+                    ...values.experiment?.parameters,
+                    recommended_running_time: recommendedRunningTime,
+                    recommended_sample_size: recommendedSampleSize,
+                    minimum_detectable_effect: minimumDetectableChange,
+                },
+            })
             actions.closeExperimentGoalModal()
         },
         updateExperimentExposure: async ({ filters }) => {

frontend/src/scenes/feature-flags/FeatureFlagSchedule.tsx

@@ -164,8 +164,8 @@ export default function FeatureFlagSchedule(): JSX.Element {
                         value={scheduleDateMarker}
                         onChange={(value) => setScheduleDateMarker(value)}
                         placeholder="Select date"
+                        onlyAllowUpcoming
                         showTime
-                        fromToday
                     />
                 </div>
             </div>