feat(insights): Add edit button for dashboard filters

cypress/e2e/dashboard.cy.ts

@@ -91,9 +91,11 @@ describe('Dashboard', () => {
         cy.get('[data-attr=date-filter]').contains('No date range override')
         cy.get('.InsightCard h5').should('have.length', 1).contains('Last 7 days')
         // Override the time range on dashboard B
+        cy.get('button').contains('Edit filters').click()
         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('.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')

cypress/productAnalytics/index.ts

@@ -170,21 +170,27 @@ export const dashboard = {
         cy.wait('@postInsight')
     },
     addPropertyFilter(type: string = 'Browser', value: string = 'Chrome'): void {
+        cy.get('button').contains('Edit filters').click()
         cy.get('.PropertyFilterButton').should('have.length', 0)
         cy.get('[data-attr="property-filter-0"]').click()
         cy.get('[data-attr="taxonomic-filter-searchfield"]').click().type('Browser').wait(1000)
         cy.get('[data-attr="prop-filter-event_properties-0"]').click({ force: true })
         cy.get('.LemonInput').type(value)
         cy.contains('.LemonButton__content', value).click({ force: true })
+        cy.get('button').contains('Apply and save dashboard').click()
     },
     addAnyFilter(): void {
+        cy.get('button').contains('Edit filters').click()
         cy.get('.PropertyFilterButton').should('have.length', 0)
         cy.get('[data-attr="property-filter-0"]').click()
         cy.get('[data-attr="taxonomic-filter-searchfield"]').click()
         cy.get('[data-attr="prop-filter-event_properties-1"]').click({ force: true })
         cy.get('[data-attr="prop-val"]').click()
         cy.get('[data-attr="prop-val-0"]').click({ force: true })
+        // 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()
     },
 }
 

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

@@ -132,6 +132,8 @@ 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. */
@@ -164,7 +166,7 @@ function VizComponentFallback(): JSX.Element {
 }
 
 export interface FilterBasedCardContentProps
-    extends Pick<InsightCardProps, 'insight' | 'loading' | 'apiErrored' | 'timedOut' | 'style'> {
+    extends Pick<InsightCardProps, 'insight' | 'loading' | 'apiErrored' | 'timedOut' | 'style' | 'stale'> {
     insightProps: InsightLogicProps
     tooFewFunnelSteps?: boolean
     validationError?: string | null
@@ -185,6 +187,7 @@ export function FilterBasedCardContent({
     tooFewFunnelSteps,
     validationError,
     context,
+    stale,
 }: FilterBasedCardContentProps): JSX.Element {
     const displayedType = getDisplayedType(insight.filters)
     const VizComponent = displayMap[displayedType]?.element || VizComponentFallback
@@ -210,6 +213,7 @@ export function FilterBasedCardContent({
                         : undefined
                 }
             >
+                {stale && !loading && <SpinnerOverlay mode="editing" />}
                 {loading && <SpinnerOverlay />}
                 {tooFewFunnelSteps ? (
                     <FunnelSingleStepState actionable={false} />
@@ -236,6 +240,7 @@ function InsightCardInternal(
         ribbonColor,
         loadingQueued,
         loading,
+        stale,
         apiErrored,
         timedOut,
         highlighted,
@@ -325,6 +330,7 @@ function InsightCardInternal(
                         insight={insight}
                         insightProps={insightLogicProps}
                         loading={loading}
+                        stale={stale}
                         apiErrored={apiErrored}
                         timedOut={timedOut}
                         empty={empty}

frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx

@@ -37,6 +37,7 @@ interface PropertyFiltersProps {
     errorMessages?: JSX.Element[] | null
     propertyAllowList?: { [key in TaxonomicFilterGroupType]?: string[] }
     allowRelativeDateOptions?: boolean
+    disabled?: boolean
 }
 
 export function PropertyFilters({
@@ -63,6 +64,7 @@ export function PropertyFilters({
     errorMessages = null,
     propertyAllowList,
     allowRelativeDateOptions,
+    disabled = false,
 }: PropertyFiltersProps): JSX.Element {
     const logicProps = { propertyFilters, onChange, pageKey, sendAllKeyUpdates }
     const { filters, filtersWithNew } = useValues(propertyFilterLogic(logicProps))
@@ -128,6 +130,7 @@ export function PropertyFilters({
                                     )}
                                     errorMessage={errorMessages && errorMessages[index]}
                                     openOnInsert={allowOpenOnInsert && openOnInsert}
+                                    disabled={disabled}
                                 />
                             </React.Fragment>
                         )

frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx

@@ -26,6 +26,7 @@ interface FilterRowProps {
     onRemove: (index: number) => void
     orFiltering?: boolean
     errorMessage?: JSX.Element | null
+    disabled?: boolean
 }
 
 export const FilterRow = React.memo(function FilterRow({
@@ -42,6 +43,7 @@ export const FilterRow = React.memo(function FilterRow({
     onRemove,
     orFiltering,
     errorMessage,
+    disabled,
 }: FilterRowProps) {
     const [open, setOpen] = useState(false)
 
@@ -92,8 +94,9 @@ export const FilterRow = React.memo(function FilterRow({
                                 onClick={() => setOpen(!open)}
                                 onClose={() => onRemove(index)}
                                 item={item}
+                                disabled={disabled}
                             />
-                        ) : (
+                        ) : !disabled ? (
                             <LemonButton
                                 onClick={() => setOpen(!open)}
                                 className="new-prop-filter"
@@ -105,7 +108,7 @@ export const FilterRow = React.memo(function FilterRow({
                             >
                                 {label}
                             </LemonButton>
-                        )}
+                        ) : undefined}
                     </Popover>
                 )}
                 {key && showConditionBadge && index + 1 < totalCount && <OperandTag operand="and" />}

frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss

@@ -14,7 +14,12 @@
     outline: 0;
     transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-    &:hover,
+    &[aria-disabled='true']:not(.LemonButton--loading) {
+        cursor: not-allowed;
+        opacity: var(--opacity-disabled);
+    }
+
+    &:hover:not([aria-disabled='true']),
     &:focus {
         border-color: var(--border-bold);
     }

frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx

@@ -19,10 +19,11 @@ export interface PropertyFilterButtonProps {
     onClose?: () => void
     children?: string
     item: AnyPropertyFilter
+    disabled?: boolean
 }
 
 export const PropertyFilterButton = React.forwardRef<HTMLElement, PropertyFilterButtonProps>(
-    function PropertyFilterButton({ onClick, onClose, children, item }, ref): JSX.Element {
+    function PropertyFilterButton({ onClick, onClose, children, item, disabled }, ref): JSX.Element {
         const { cohortsById } = useValues(cohortsModel)
         const { formatPropertyValueForDisplay } = useValues(propertyDefinitionsModel)
 
@@ -37,18 +38,19 @@ export const PropertyFilterButton = React.forwardRef<HTMLElement, PropertyFilter
         return (
             <ButtonComponent
                 ref={ref as any}
-                onClick={onClick}
+                onClick={disabled ? undefined : onClick}
                 className={clsx('PropertyFilterButton', {
                     'PropertyFilterButton--closeable': closable,
                     'PropertyFilterButton--clickable': clickable,
                     'ph-no-capture': true,
                 })}
+                aria-disabled={disabled}
             >
                 <PropertyFilterIcon type={item.type} />
                 <span className="PropertyFilterButton-content" title={label}>
                     {midEllipsis(label, 32)}
                 </span>
-                {closable && (
+                {closable && !disabled && (
                     <LemonButton
                         size="xsmall"
                         icon={<IconX />}

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

@@ -96,7 +96,7 @@ export function AsOverlay(): JSX.Element {
     )
 }
 
-export function asOverlayWaiting(): JSX.Element {
+export function asOverlayEditing(): JSX.Element {
     return (
         <div className="relative">
             <h1>Hey there</h1>
@@ -109,7 +109,7 @@ export function asOverlayWaiting(): JSX.Element {
                 about to happen.
             </p>
 
-            <SpinnerOverlay mode="waiting" />
+            <SpinnerOverlay mode="editing" />
         </div>
     )
 }

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

@@ -1,6 +1,6 @@
 import './Spinner.scss'
 
-import { IconClock } from '@posthog/icons'
+import { IconPencil } from '@posthog/icons'
 import { twJoin, twMerge } from 'tailwind-merge'
 
 export interface SpinnerProps {
@@ -38,12 +38,12 @@ export function SpinnerOverlay({
     /** @default true */
     visible?: boolean
     /** @default "spinning" */
-    mode?: 'spinning' | 'waiting'
+    mode?: 'spinning' | 'editing'
 }): JSX.Element {
     return (
         <div className={twJoin('SpinnerOverlay', sceneLevel && 'SpinnerOverlay--scene-level')} aria-hidden={!visible}>
-            {mode === 'waiting' ? (
-                <IconClock className="text-5xl text-primary z-10 animate-pulse drop-shadow-xl" />
+            {mode === 'editing' ? (
+                <IconPencil className="text-5xl text-primary z-10 drop-shadow-xl" />
             ) : (
                 <Spinner className={twMerge('text-5xl', className)} {...spinnerProps} />
             )}

frontend/src/scenes/dashboard/Dashboard.tsx

@@ -1,13 +1,10 @@
-import { IconCalendar } from '@posthog/icons'
 import { LemonButton } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
-import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { NotFound } from 'lib/components/NotFound'
-import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
 import { DashboardEventSource } from 'lib/utils/eventUsageLogic'
 import { useEffect } from 'react'
+import { DashboardEditBar } from 'scenes/dashboard/DashboardEditBar'
 import { DashboardItems } from 'scenes/dashboard/DashboardItems'
 import { dashboardLogic, DashboardLogicProps } from 'scenes/dashboard/dashboardLogic'
 import { DashboardReloadAction, LastRefreshText } from 'scenes/dashboard/DashboardReloadAction'
@@ -17,7 +14,6 @@ import { urls } from 'scenes/urls'
 
 import { DashboardMode, DashboardPlacement, DashboardType } from '~/types'
 
-import { groupsModel } from '../../models/groupsModel'
 import { DashboardHeader } from './DashboardHeader'
 import { EmptyDashboardComponent } from './EmptyDashboardComponent'
 
@@ -45,19 +41,9 @@ export function Dashboard({ id, dashboard, placement }: DashboardProps = {}): JS
 }
 
 function DashboardScene(): JSX.Element {
-    const {
-        placement,
-        dashboard,
-        canEditDashboard,
-        tiles,
-        itemsLoading,
-        filters: dashboardFilters,
-        dashboardMode,
-        dashboardFailedToLoad,
-    } = useValues(dashboardLogic)
-    const { setDashboardMode, setDates, reportDashboardViewed, setProperties, abortAnyRunningQuery } =
-        useActions(dashboardLogic)
-    const { groupsTaxonomicTypes } = useValues(groupsModel)
+    const { placement, dashboard, canEditDashboard, tiles, itemsLoading, dashboardMode, dashboardFailedToLoad } =
+        useValues(dashboardLogic)
+    const { setDashboardMode, reportDashboardViewed, abortAnyRunningQuery } = useActions(dashboardLogic)
 
     useEffect(() => {
         reportDashboardViewed()
@@ -115,37 +101,12 @@ function DashboardScene(): JSX.Element {
                             DashboardPlacement.Public,
                             DashboardPlacement.Export,
                             DashboardPlacement.FeatureFlag,
-                        ].includes(placement) && (
-                            <div className="flex space-x-4 items-center">
-                                <DateFilter
-                                    showCustom
-                                    dateFrom={dashboardFilters?.date_from ?? undefined}
-                                    dateTo={dashboardFilters?.date_to ?? undefined}
-                                    onChange={setDates}
-                                    disabled={!canEditDashboard}
-                                    makeLabel={(key) => (
-                                        <>
-                                            <IconCalendar />
-                                            <span className="hide-when-small"> {key}</span>
-                                        </>
-                                    )}
-                                />
-                                <PropertyFilters
-                                    onChange={setProperties}
-                                    pageKey={'dashboard_' + dashboard?.id}
-                                    propertyFilters={dashboard?.filters.properties}
-                                    taxonomicGroupTypes={[
-                                        TaxonomicFilterGroupType.EventProperties,
-                                        TaxonomicFilterGroupType.PersonProperties,
-                                        TaxonomicFilterGroupType.EventFeatureFlags,
-                                        ...groupsTaxonomicTypes,
-                                        TaxonomicFilterGroupType.Cohorts,
-                                        TaxonomicFilterGroupType.Elements,
-                                        TaxonomicFilterGroupType.HogQLExpression,
-                                    ]}
-                                />
-                            </div>
-                        )}
+                        ].includes(placement) &&
+                            dashboard && (
+                                <div className="flex space-x-4 items-center">
+                                    <DashboardEditBar />
+                                </div>
+                            )}
                         {placement === DashboardPlacement.FeatureFlag && dashboard?.id && (
                             <LemonButton type="secondary" size="small" to={urls.dashboard(dashboard.id)}>
                                 Edit dashboard

frontend/src/scenes/dashboard/DashboardEditBar.tsx

@@ -0,0 +1,67 @@
+import { IconCalendar } from '@posthog/icons'
+import { LemonButton } from '@posthog/lemon-ui'
+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'
+
+export function DashboardEditBar(): JSX.Element {
+    const { dashboard, canEditDashboard, editMode, temporaryFilters, stale } = useValues(dashboardLogic)
+    const { setDates, setProperties, cancelTemporary, applyTemporary, setEditMode } = useActions(dashboardLogic)
+    const { groupsTaxonomicTypes } = useValues(groupsModel)
+
+    return (
+        <div className="flex gap-2 items-center justify-between flex-wrap">
+            <DateFilter
+                showCustom
+                dateFrom={temporaryFilters.date_from}
+                dateTo={temporaryFilters.date_to}
+                onChange={setDates}
+                disabled={!canEditDashboard || !editMode}
+                makeLabel={(key) => (
+                    <>
+                        <IconCalendar />
+                        <span className="hide-when-small"> {key}</span>
+                    </>
+                )}
+            />
+            <PropertyFilters
+                disabled={!canEditDashboard || !editMode}
+                onChange={setProperties}
+                pageKey={'dashboard_' + dashboard?.id}
+                propertyFilters={temporaryFilters.properties}
+                taxonomicGroupTypes={[
+                    TaxonomicFilterGroupType.EventProperties,
+                    TaxonomicFilterGroupType.PersonProperties,
+                    TaxonomicFilterGroupType.EventFeatureFlags,
+                    ...groupsTaxonomicTypes,
+                    TaxonomicFilterGroupType.Cohorts,
+                    TaxonomicFilterGroupType.Elements,
+                    TaxonomicFilterGroupType.HogQLExpression,
+                ]}
+            />
+            {canEditDashboard && !editMode ? (
+                <LemonButton type="secondary" size="small" onClick={() => setEditMode(true)}>
+                    Edit filters
+                </LemonButton>
+            ) : (
+                <>
+                    <LemonButton onClick={cancelTemporary} type="secondary" size="small" className="ml-4">
+                        Cancel
+                    </LemonButton>
+                    <LemonButton
+                        onClick={applyTemporary}
+                        type="primary"
+                        size="small"
+                        disabledReason={!stale ? 'No changes to apply' : undefined}
+                    >
+                        Apply and save dashboard
+                    </LemonButton>
+                </>
+            )}
+        </div>
+    )
+}