From 378deec0baf3b9d2699a701cf84a8576ff1bde1b Mon Sep 17 00:00:00 2001 From: baristaGeek Date: Wed, 27 Dec 2023 18:37:03 -0500 Subject: [PATCH 1/3] Add conditional rendering based on the length of the sorted dashboards array --- .../saved-insights/SavedInsightsFilters.tsx | 124 ++++++++++-------- 1 file changed, 69 insertions(+), 55 deletions(-) diff --git a/frontend/src/scenes/saved-insights/SavedInsightsFilters.tsx b/frontend/src/scenes/saved-insights/SavedInsightsFilters.tsx index 7859518c22366..b3e32b650d8f3 100644 --- a/frontend/src/scenes/saved-insights/SavedInsightsFilters.tsx +++ b/frontend/src/scenes/saved-insights/SavedInsightsFilters.tsx @@ -1,9 +1,9 @@ import { IconCalendar } from '@posthog/icons' import { useActions, useValues } from 'kea' import { DateFilter } from 'lib/components/DateFilter/DateFilter' -import { MemberSelect } from 'lib/components/MemberSelect' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { LemonSelect } from 'lib/lemon-ui/LemonSelect' +import { membersLogic } from 'scenes/organization/membersLogic' import { INSIGHT_TYPE_OPTIONS } from 'scenes/saved-insights/SavedInsights' import { savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic' @@ -17,6 +17,8 @@ export function SavedInsightsFilters(): JSX.Element { const { tab, createdBy, insightType, dateFrom, dateTo, dashboardId, search } = filters + const { meFirstMembers } = useValues(membersLogic) + return (
setSavedInsightsFilters({ search: value })} value={search || ''} /> -
-
- On dashboard: - ({ - value: nsd.id, - label: nsd.name, - }))} - value={dashboardId} - onChange={(newValue) => { - setSavedInsightsFilters({ dashboardId: newValue }) - }} - dropdownMatchSelectWidth={false} - data-attr="insight-on-dashboard" - allowClear={true} - /> -
-
- Type: - setSavedInsightsFilters({ insightType: v })} - dropdownMatchSelectWidth={false} - data-attr="insight-type" - /> -
-
- Last modified: - - setSavedInsightsFilters({ dateFrom: fromDate, dateTo: toDate ?? undefined }) - } - makeLabel={(key) => ( - <> - - {key} - - )} - /> -
- {tab !== SavedInsightsTabs.Yours ? ( + {nameSortedDashboards.length > 0 && ( +
+
+ On dashboard: + ({ + value: nsd.id, + label: nsd.name, + }))} + value={dashboardId} + onChange={(newValue) => { + setSavedInsightsFilters({ dashboardId: newValue }) + }} + dropdownMatchSelectWidth={false} + data-attr="insight-on-dashboard" + allowClear={true} + /> +
- Created by: - Type: + setSavedInsightsFilters({ createdBy: user?.id || 'All users' })} + options={INSIGHT_TYPE_OPTIONS} + value={insightType} + onChange={(v: any): void => setSavedInsightsFilters({ insightType: v })} + dropdownMatchSelectWidth={false} + data-attr="insight-type" + /> +
+
+ Last modified: + + setSavedInsightsFilters({ dateFrom: fromDate, dateTo: toDate ?? undefined }) + } + makeLabel={(key) => ( + <> + + {key} + + )} />
- ) : null} -
+ {tab !== SavedInsightsTabs.Yours ? ( +
+ Created by: + {/* TODO: Fix issues with user name order due to numbers having priority */} + ({ + value: x.user.id, + label: x.user.first_name, + })), + ]} + value={createdBy} + onChange={(v: any): void => { + setSavedInsightsFilters({ createdBy: v }) + }} + dropdownMatchSelectWidth={false} + /> +
+ ) : null} +
+ )}
) } From bc14827745dcea6d5ee80b4c53bcd526bfeeac3f Mon Sep 17 00:00:00 2001 From: Esteban Vargas Date: Wed, 27 Dec 2023 18:44:05 -0500 Subject: [PATCH 2/3] Add conditional rendering to dashboard selection From 48835346044622192a662bb82a09537cdf8652b3 Mon Sep 17 00:00:00 2001 From: Esteban Vargas Date: Tue, 2 Jan 2024 19:33:47 -0500 Subject: [PATCH 3/3] Only hide the dashboards filter --- .../saved-insights/SavedInsightsFilters.tsx | 92 ++++++++----------- 1 file changed, 39 insertions(+), 53 deletions(-) diff --git a/frontend/src/scenes/saved-insights/SavedInsightsFilters.tsx b/frontend/src/scenes/saved-insights/SavedInsightsFilters.tsx index b3e32b650d8f3..c8d5351301553 100644 --- a/frontend/src/scenes/saved-insights/SavedInsightsFilters.tsx +++ b/frontend/src/scenes/saved-insights/SavedInsightsFilters.tsx @@ -1,9 +1,9 @@ import { IconCalendar } from '@posthog/icons' import { useActions, useValues } from 'kea' import { DateFilter } from 'lib/components/DateFilter/DateFilter' +import { MemberSelect } from 'lib/components/MemberSelect' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { LemonSelect } from 'lib/lemon-ui/LemonSelect' -import { membersLogic } from 'scenes/organization/membersLogic' import { INSIGHT_TYPE_OPTIONS } from 'scenes/saved-insights/SavedInsights' import { savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic' @@ -17,8 +17,6 @@ export function SavedInsightsFilters(): JSX.Element { const { tab, createdBy, insightType, dateFrom, dateTo, dashboardId, search } = filters - const { meFirstMembers } = useValues(membersLogic) - return (
setSavedInsightsFilters({ search: value })} value={search || ''} /> - {nameSortedDashboards.length > 0 && ( -
+
+ {nameSortedDashboards.length > 0 && (
On dashboard:
+ )} +
+ Type: + setSavedInsightsFilters({ insightType: v })} + dropdownMatchSelectWidth={false} + data-attr="insight-type" + /> +
+
+ Last modified: + + setSavedInsightsFilters({ dateFrom: fromDate, dateTo: toDate ?? undefined }) + } + makeLabel={(key) => ( + <> + + {key} + + )} + /> +
+ {tab !== SavedInsightsTabs.Yours ? (
- Type: - setSavedInsightsFilters({ insightType: v })} - dropdownMatchSelectWidth={false} - data-attr="insight-type" - /> -
-
- Last modified: - - setSavedInsightsFilters({ dateFrom: fromDate, dateTo: toDate ?? undefined }) - } - makeLabel={(key) => ( - <> - - {key} - - )} + Created by: + setSavedInsightsFilters({ createdBy: user?.id || 'All users' })} />
- {tab !== SavedInsightsTabs.Yours ? ( -
- Created by: - {/* TODO: Fix issues with user name order due to numbers having priority */} - ({ - value: x.user.id, - label: x.user.first_name, - })), - ]} - value={createdBy} - onChange={(v: any): void => { - setSavedInsightsFilters({ createdBy: v }) - }} - dropdownMatchSelectWidth={false} - /> -
- ) : null} -
- )} + ) : null} +
) }