-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(insights): Add edit button for dashboard filters #21841
Merged
Merged
Changes from 11 commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
39a8d5c
Add edit switch to dashboard to make clear these are changing dashboard
webjunkie 5e0b618
Add DashboardEditBar to encapsulate
webjunkie f5f9949
Update UI snapshots for `chromium` (1)
github-actions[bot] 9d0aff7
Update UI snapshots for `chromium` (2)
github-actions[bot] e4bd5b2
Update UI snapshots for `chromium` (2)
github-actions[bot] 495d876
Disable and do not hide filters
webjunkie 39e96dc
Mark dashboard stale
webjunkie f5d4877
Update UI snapshots for `chromium` (1)
github-actions[bot] a743bd5
Fix taxonomicGroupTypes prop
webjunkie 3f6c277
Update UI snapshots for `chromium` (2)
github-actions[bot] c8b172f
Update UI snapshots for `chromium` (2)
github-actions[bot] bc685a2
Merge branch 'master' into feature/dashboard-edit-switch
webjunkie 9629517
Move logic inside DashboardEditBar
webjunkie 6bf1227
Move all into logic
webjunkie 437b291
Fix Cypress tests
webjunkie b6358f9
Fix jest test
webjunkie cd9657f
Fix test
webjunkie 0a4510c
Reverse format
webjunkie 12e940d
Update UI snapshots for `chromium` (1)
github-actions[bot] a46a0b4
Update UI snapshots for `chromium` (1)
github-actions[bot] 20557e9
Fix spinner story
webjunkie a422c18
Update UI snapshots for `chromium` (1)
github-actions[bot] 39dd51c
Update UI snapshots for `chromium` (1)
github-actions[bot] File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
Binary file modified
BIN
-598 Bytes
(98%)
frontend/__snapshots__/filters-property-filter-button--pseudo-states--light.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-2.17 KB
(98%)
frontend/__snapshots__/posthog-3000-navigation--navigation-3000--dark.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-2.17 KB
(98%)
frontend/__snapshots__/posthog-3000-navigation--navigation-3000--light.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-2.86 KB
(97%)
frontend/__snapshots__/posthog-3000-navigation--navigation-base--dark.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-2.97 KB
(97%)
frontend/__snapshots__/posthog-3000-navigation--navigation-base--light.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,114 @@ | ||
import { IconCalendar } from '@posthog/icons' | ||
import { LemonButton } from '@posthog/lemon-ui' | ||
import { DateFilter } from 'lib/components/DateFilter/DateFilter' | ||
import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters' | ||
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' | ||
import { useEffect, useState } from 'react' | ||
|
||
import { AnyPropertyFilter, DashboardType, FilterType } from '~/types' | ||
|
||
type Dates = { dateFrom?: string | null; dateTo?: string | null } | ||
|
||
interface DashboardEditBarProps { | ||
dashboard: DashboardType | ||
dashboardFilters: FilterType | ||
canEditDashboard: boolean | ||
setDates: (dateFrom: string | null, dateTo: string | null) => void | ||
setProperties: (properties: AnyPropertyFilter[]) => void | ||
taxonomicGroupTypes: TaxonomicFilterGroupType[] | ||
onPendingChanges?: (stale: boolean) => void | ||
} | ||
|
||
export function DashboardEditBar({ | ||
dashboard, | ||
dashboardFilters, | ||
canEditDashboard, | ||
setDates, | ||
setProperties, | ||
taxonomicGroupTypes, | ||
onPendingChanges, | ||
}: DashboardEditBarProps): JSX.Element { | ||
const [editMode, setEditMode] = useState(false) | ||
const [tempDates, setTempDates] = useState<Dates>({ | ||
dateFrom: dashboardFilters?.date_from, | ||
dateTo: dashboardFilters?.date_to, | ||
}) | ||
const [tempProperties, setTempProperties] = useState<AnyPropertyFilter[] | undefined>( | ||
dashboard?.filters.properties ?? undefined | ||
) | ||
|
||
useEffect(() => { | ||
const hasPendingChanges = | ||
tempDates.dateFrom !== dashboardFilters?.date_from || | ||
tempDates.dateTo !== dashboardFilters?.date_to || | ||
JSON.stringify(tempProperties) !== JSON.stringify(dashboard?.filters.properties) | ||
if (onPendingChanges) { | ||
onPendingChanges(hasPendingChanges) | ||
} | ||
}, [tempDates, tempProperties]) | ||
|
||
const handleSave: () => void = () => { | ||
if (!canEditDashboard) { | ||
return | ||
} | ||
setDates(tempDates.dateFrom ?? null, tempDates.dateTo ?? null) | ||
if (tempProperties) { | ||
setProperties(tempProperties) | ||
} | ||
if (onPendingChanges) { | ||
onPendingChanges(false) | ||
} | ||
setEditMode(false) | ||
} | ||
|
||
const handleCancel: () => void = () => { | ||
setTempDates({ | ||
dateFrom: dashboardFilters?.date_from, | ||
dateTo: dashboardFilters?.date_to, | ||
}) | ||
setTempProperties(dashboard?.filters.properties ?? undefined) | ||
setEditMode(false) | ||
if (onPendingChanges) { | ||
onPendingChanges(false) | ||
} | ||
} | ||
|
||
return ( | ||
<div className="flex gap-2 items-center justify-between flex-wrap"> | ||
<DateFilter | ||
showCustom | ||
dateFrom={tempDates.dateFrom} | ||
dateTo={tempDates.dateTo} | ||
onChange={(dateFrom, dateTo) => setTempDates({ dateFrom, dateTo })} | ||
disabled={!canEditDashboard || !editMode} | ||
makeLabel={(key) => ( | ||
<> | ||
<IconCalendar /> | ||
<span className="hide-when-small"> {key}</span> | ||
</> | ||
)} | ||
/> | ||
<PropertyFilters | ||
disabled={!canEditDashboard || !editMode} | ||
onChange={setTempProperties} | ||
pageKey={'dashboard_' + dashboard?.id} | ||
propertyFilters={tempProperties} | ||
taxonomicGroupTypes={taxonomicGroupTypes} | ||
/> | ||
{canEditDashboard && !editMode ? ( | ||
<LemonButton type="secondary" size="small" onClick={() => setEditMode(true)}> | ||
Edit filters | ||
</LemonButton> | ||
) : ( | ||
<> | ||
<LemonButton onClick={handleCancel} type="secondary" size="small" className="ml-4"> | ||
Cancel | ||
</LemonButton> | ||
<LemonButton onClick={handleSave} type="primary" size="small"> | ||
Apply and save dashboard | ||
</LemonButton> | ||
</> | ||
)} | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks like it could be a logic. We do try to avoid react state as much as possible