feat: preview dashboard filter changes

cypress/e2e/dashboard.cy.ts

@@ -95,7 +95,7 @@
         // refresh the dashboard by changing date range
         cy.get('[data-attr="date-filter"]').click()
         cy.contains('span', 'Last 14 days').click()
-        cy.contains('span', 'Apply and save dashboard').click()
+        cy.contains('span', 'Save').click()
 
         cy.contains('span[class="text-primary text-sm font-medium"]', 'Refreshing').should('not.exist')
         cy.get('span').contains('Refreshing').should('not.exist')
@@ -163,7 +163,7 @@
         cy.get('[data-attr=date-filter]').contains('No date range override').click()
         cy.get('div').contains('Yesterday').should('exist').click()
         cy.get('[data-attr=date-filter]').contains('Yesterday')
-        cy.get('button').contains('Apply and save dashboard').click()
+        cy.get('button').contains('Save').click()
         cy.get('.InsightCard h5').should('have.length', 1).contains('Yesterday')
         // Cool, now back to A and make sure the insight is still using the original range there, not the one from B
         cy.clickNavMenu('dashboards')
@@ -347,7 +347,7 @@
      * This throws the error Code: 386. DB::Exception: There is no supertype for types String, Float64 because some of them are String/FixedString and some of them are not. (NO_COMMON_TYPE)
      * All the 'app_ratings' are extracted as strings and 5. is a float
      */
     // it('Opens dashboard item in insights', () => {
     //     cy.get('[data-attr=dashboard-name]').contains('App Analytics').click()
     //     cy.get('.InsightCard [data-attr=insight-card-title]').first().click()
     //     cy.location('pathname').should('include', '/insights')

cypress/productAnalytics/index.ts

@@ -176,7 +176,7 @@ export const dashboard = {
         cy.get('[data-attr="prop-filter-event_properties-0"]').click({ force: true }).wait(1000)
         cy.get('.LemonInput').type(value)
         cy.contains('.LemonButton__content', value).click({ force: true })
-        cy.get('button').contains('Apply and save dashboard').click()
+        cy.get('button').contains('Save').click()
     },
     addAnyFilter(): void {
         cy.get('.PropertyFilterButton').should('have.length', 0)
@@ -188,7 +188,7 @@ export const dashboard = {
         // click .dashboard to blur
         cy.get('.dashboard').click({ force: true })
         cy.get('.PropertyFilterButton').should('have.length', 1)
-        cy.get('button').contains('Apply and save dashboard').click()
+        cy.get('button').contains('Save').click()
     },
 }
 

frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx

@@ -33,8 +33,6 @@ export interface InsightCardProps extends Resizeable, React.HTMLAttributes<HTMLD
     loadingQueued?: boolean
     /** Whether the insight is loading. */
     loading?: boolean
-    /** Whether the insight likely showing stale data. */
-    stale?: boolean
     /** Whether an error occurred on the server. */
     apiErrored?: boolean
     /** Whether the card should be highlighted with a blue border. */
@@ -71,7 +69,6 @@ function InsightCardInternal(
         ribbonColor,
         loadingQueued,
         loading,
-        stale,
         apiErrored,
         timedOut,
         highlighted,
@@ -152,7 +149,6 @@ function InsightCardInternal(
                             context={{
                                 insightProps: insightLogicProps,
                             }}
-                            stale={stale}
                             readOnly
                             embedded
                         />

frontend/src/lib/utils/eventUsageLogic.ts

@@ -71,7 +71,9 @@ import type { eventUsageLogicType } from './eventUsageLogicType'
 export enum DashboardEventSource {
     LongPress = 'long_press',
     MoreDropdown = 'more_dropdown',
-    DashboardHeader = 'dashboard_header',
+    DashboardHeaderSaveDashboard = 'dashboard_header_save_dashboard',
+    DashboardHeaderDiscardChanges = 'dashboard_header_discard_changes',
+    DashboardHeaderExitFullscreen = 'dashboard_header_exit_fullscreen',
     Hotkey = 'hotkey',
     InputEnter = 'input_enter',
     Toast = 'toast',

frontend/src/queries/Query/Query.tsx

@@ -1,5 +1,4 @@
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { SpinnerOverlay } from 'lib/lemon-ui/Spinner'
 import { useEffect, useState } from 'react'
 import { HogDebug } from 'scenes/debug/HogDebug'
 
@@ -38,14 +37,12 @@ export interface QueryProps<Q extends Node> {
     cachedResults?: AnyResponseType
     /** Disable any changes to the query */
     readOnly?: boolean
-    /** Show a stale overlay */
-    stale?: boolean
     /** Reduce UI elements to only show data */
     embedded?: boolean
 }
 
 export function Query<Q extends Node>(props: QueryProps<Q>): JSX.Element | null {
-    const { query: propsQuery, setQuery: propsSetQuery, readOnly, stale, embedded } = props
+    const { query: propsQuery, setQuery: propsSetQuery, readOnly, embedded } = props
 
     const [localQuery, localSetQuery] = useState(propsQuery)
     useEffect(() => {
@@ -139,7 +136,6 @@ export function Query<Q extends Node>(props: QueryProps<Q>): JSX.Element | null
                             </div>
                         </>
                     ) : null}
-                    {stale && <SpinnerOverlay mode="editing" />}
                     {component}
                 </>
             </ErrorBoundary>

frontend/src/scenes/dashboard/Dashboard.tsx

@@ -117,9 +117,9 @@ function DashboardScene(): JSX.Element {
                                 >
                                     {[DashboardPlacement.Public].includes(placement) ? (
                                         <LastRefreshText />
-                                    ) : (
+                                    ) : !(dashboardMode === DashboardMode.Edit) ? (
                                         <DashboardReloadAction />
-                                    )}
+                                    ) : null}
                                 </div>
                             </div>
                         )}

frontend/src/scenes/dashboard/DashboardEditBar.tsx

@@ -1,79 +1,60 @@
 import { IconCalendar } from '@posthog/icons'
-import { LemonButton, Popover } from '@posthog/lemon-ui'
-import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { dashboardLogic } from 'scenes/dashboard/dashboardLogic'
 
 import { groupsModel } from '~/models/groupsModel'
+import { DashboardMode } from '~/types'
 
 export function DashboardEditBar(): JSX.Element {
-    const { dashboard, canEditDashboard, temporaryFilters, stale } = useValues(dashboardLogic)
-    const { setDates, setProperties, cancelTemporary, applyTemporary } = useActions(dashboardLogic)
+    const { dashboard, canEditDashboard, temporaryFilters, dashboardMode } = useValues(dashboardLogic)
+    const { setDates, setProperties, setDashboardMode } = useActions(dashboardLogic)
     const { groupsTaxonomicTypes } = useValues(groupsModel)
 
-    const isEditInProgress: boolean = canEditDashboard && stale
     const disabledReason = !canEditDashboard ? "You don't have permission to edit this dashboard" : undefined
 
     return (
-        <Popover
-            visible={isEditInProgress}
-            className="z-1" // So that Cancel/Apply isn't above filter popovers
-            overlay={
-                <div className="flex items-center gap-2 m-1">
-                    <LemonButton onClick={cancelTemporary} type="secondary" size="small">
-                        Cancel changes
-                    </LemonButton>
-                    <LemonButton
-                        onClick={applyTemporary}
-                        type="primary"
-                        size="small"
-                        disabledReason={!stale ? 'No changes to apply' : undefined}
-                    >
-                        Apply and save dashboard
-                    </LemonButton>
-                </div>
-            }
-            placement="right"
-            showArrow
-        >
-            <div
-                className={clsx(
-                    'flex gap-2 items-center justify-between flex-wrap border',
-                    isEditInProgress ? '-m-1.5 p-1.5 border-border-bold border-dashed rounded-lg' : 'border-transparent'
+        <div className="flex gap-2 items-center justify-between flex-wrap">
+            <DateFilter
+                showCustom
+                dateFrom={temporaryFilters.date_from}
+                dateTo={temporaryFilters.date_to}
+                onChange={(from_date, to_date) => {
+                    if (dashboardMode !== DashboardMode.Edit) {
+                        setDashboardMode(DashboardMode.Edit, null)
+                    }
+                    setDates(from_date, to_date)
+                }}
+                disabledReason={disabledReason}
+                makeLabel={(key) => (
+                    <>
+                        <IconCalendar />
+                        <span className="hide-when-small"> {key}</span>
+                    </>
                 )}
-            >
-                <DateFilter
-                    showCustom
-                    dateFrom={temporaryFilters.date_from}
-                    dateTo={temporaryFilters.date_to}
-                    onChange={setDates}
-                    disabledReason={disabledReason}
-                    makeLabel={(key) => (
-                        <>
-                            <IconCalendar />
-                            <span className="hide-when-small"> {key}</span>
-                        </>
-                    )}
-                />
-                <PropertyFilters
-                    disabledReason={disabledReason}
-                    onChange={setProperties}
-                    pageKey={'dashboard_' + dashboard?.id}
-                    propertyFilters={temporaryFilters.properties}
-                    taxonomicGroupTypes={[
-                        TaxonomicFilterGroupType.EventProperties,
-                        TaxonomicFilterGroupType.PersonProperties,
-                        TaxonomicFilterGroupType.EventFeatureFlags,
-                        ...groupsTaxonomicTypes,
-                        TaxonomicFilterGroupType.Cohorts,
-                        TaxonomicFilterGroupType.Elements,
-                        TaxonomicFilterGroupType.HogQLExpression,
-                    ]}
-                />
-            </div>
-        </Popover>
+            />
+            <PropertyFilters
+                disabledReason={disabledReason}
+                onChange={(properties) => {
+                    if (dashboardMode !== DashboardMode.Edit) {
+                        setDashboardMode(DashboardMode.Edit, null)
+                    }
+                    setProperties(properties)
+                }}
+                pageKey={'dashboard_' + dashboard?.id}
+                propertyFilters={temporaryFilters.properties}
+                taxonomicGroupTypes={[
+                    TaxonomicFilterGroupType.EventProperties,
+                    TaxonomicFilterGroupType.PersonProperties,
+                    TaxonomicFilterGroupType.EventFeatureFlags,
+                    ...groupsTaxonomicTypes,
+                    TaxonomicFilterGroupType.Cohorts,
+                    TaxonomicFilterGroupType.Elements,
+                    TaxonomicFilterGroupType.HogQLExpression,
+                ]}
+            />
+        </div>
     )
 }

frontend/src/scenes/dashboard/DashboardHeader.tsx

@@ -120,19 +120,33 @@ export function DashboardHeader(): JSX.Element | null {
             <PageHeader
                 buttons={
                     dashboardMode === DashboardMode.Edit ? (
-                        <LemonButton
-                            data-attr="dashboard-edit-mode-save"
-                            type="primary"
-                            onClick={() => setDashboardMode(null, DashboardEventSource.DashboardHeader)}
-                            tabIndex={10}
-                            disabled={dashboardLoading}
-                        >
-                            Done editing
-                        </LemonButton>
+                        <>
+                            <LemonButton
+                                data-attr="dashboard-edit-mode-discard"
+                                type="secondary"
+                                onClick={() =>
+                                    setDashboardMode(null, DashboardEventSource.DashboardHeaderDiscardChanges)
+                                }
+                                tabIndex={9}
+                            >
+                                Cancel
+                            </LemonButton>
+                            <LemonButton
+                                data-attr="dashboard-edit-mode-save"
+                                type="primary"
+                                onClick={() =>
+                                    setDashboardMode(null, DashboardEventSource.DashboardHeaderSaveDashboard)
+                                }
+                                tabIndex={10}
+                                disabled={dashboardLoading}
+                            >
+                                Save
+                            </LemonButton>
+                        </>
                     ) : dashboardMode === DashboardMode.Fullscreen ? (
                         <LemonButton
                             type="secondary"
-                            onClick={() => setDashboardMode(null, DashboardEventSource.DashboardHeader)}
+                            onClick={() => setDashboardMode(null, DashboardEventSource.DashboardHeaderExitFullscreen)}
                             data-attr="dashboard-exit-presentation-mode"
                             disabled={dashboardLoading}
                         >

frontend/src/scenes/dashboard/DashboardItems.tsx

@@ -26,7 +26,6 @@ export function DashboardItems(): JSX.Element {
         highlightedInsightId,
         refreshStatus,
         canEditDashboard,
-        stale,
         itemsLoading,
     } = useValues(dashboardLogic)
     const {
@@ -139,7 +138,6 @@ export function DashboardItems(): JSX.Element {
                                 <InsightCard
                                     key={tile.id}
                                     insight={insight}
-                                    stale={stale}
                                     loadingQueued={isRefreshingQueued(insight.short_id)}
                                     loading={isRefreshing(insight.short_id)}
                                     apiErrored={refreshStatus[insight.short_id]?.error || false}

frontend/src/scenes/dashboard/dashboardLogic.test.ts

@@ -15,7 +15,7 @@ import { examples } from '~/queries/examples'
 import { getQueryBasedDashboard } from '~/queries/nodes/InsightViz/utils'
 import { DashboardFilter, InsightVizNode, TrendsQuery } from '~/queries/schema'
 import { initKeaTests } from '~/test/init'
-import { DashboardTile, DashboardType, InsightColor, InsightShortId, QueryBasedInsightModel, TileLayout } from '~/types'
+import { DashboardTile, DashboardType, InsightColor, InsightShortId, QueryBasedInsightModel } from '~/types'
 
 import _dashboardJson from './__mocks__/dashboard.json'
 
@@ -300,11 +300,13 @@ describe('dashboardLogic', () => {
             logic.mount()
         })
 
-        it('saving layouts with no provided tiles updates all tiles', async () => {
+        it('saving layouts creates api call with all tiles', async () => {
+            await expectLogic(logic).toFinishAllListeners()
+
             jest.spyOn(api, 'update')
 
             await expectLogic(logic, () => {
-                logic.actions.saveLayouts()
+                logic.actions.updateFiltersAndLayouts()
             }).toFinishAllListeners()
 
             expect(api.update).toHaveBeenCalledWith(`api/projects/${MOCK_TEAM_ID}/dashboards/5`, {
@@ -322,23 +324,11 @@ describe('dashboardLogic', () => {
                         layouts: {},
                     },
                 ],
-            })
-        })
-
-        it('saving layouts with provided tiles updates only those tiles', async () => {
-            jest.spyOn(api, 'update')
-
-            await expectLogic(logic, () => {
-                logic.actions.saveLayouts([{ id: 1, layouts: { sm: {} as TileLayout, xs: {} as TileLayout } }])
-            }).toFinishAllListeners()
-
-            expect(api.update).toHaveBeenCalledWith(`api/projects/${MOCK_TEAM_ID}/dashboards/5`, {
-                tiles: [
-                    {
-                        id: 1,
-                        layouts: { sm: {} as TileLayout, xs: {} as TileLayout },
-                    },
-                ],
+                filters: {
+                    date_from: null,
+                    date_to: null,
+                    properties: [],
+                },
             })
         })
     })