feat: persistent dates with default values

Unleash · Dec 17, 2024 · 1f0150c · 1f0150c
1 parent 4adcc6f
commit 1f0150c
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 12 deletions.
diff --git a/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx b/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
@@ -18,7 +18,7 @@ export interface IFilterDateItemProps {
         from: FilterItemParams;
         to: FilterItemParams;
     }) => void;
-    onChipClose: () => void;
+    onChipClose?: () => void;
     state: FilterItemParams | null | undefined;
     operators: [string, ...string[]];
 }
@@ -60,11 +60,13 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
         : [];
     const selectedDate = state ? new Date(state.values[0]) : null;
     const currentOperator = state ? state.operator : operators[0];
-    const onDelete = () => {
-        onChange({ operator: operators[0], values: [] });
-        onClose();
-        onChipClose();
-    };
+    const onDelete = onChipClose
+        ? () => {
+              onChange({ operator: operators[0], values: [] });
+              onClose();
+              onChipClose();
+          }
+        : undefined;
 
     useEffect(() => {
         if (state && !operators.includes(state.operator)) {

diff --git a/frontend/src/component/events/EventLog/EventLogFilters.tsx b/frontend/src/component/events/EventLog/EventLogFilters.tsx
@@ -59,6 +59,7 @@ export const useEventLogFilters = (
                 dateOperators: ['IS'],
                 fromFilterKey: 'from',
                 toFilterKey: 'to',
+                persistent: true,
             },
             {
                 label: 'Date To',
@@ -68,6 +69,7 @@ export const useEventLogFilters = (
                 dateOperators: ['IS'],
                 fromFilterKey: 'from',
                 toFilterKey: 'to',
+                persistent: true,
             },
             {
                 label: 'Created by',

diff --git a/frontend/src/component/events/EventLog/useEventLogSearch.ts b/frontend/src/component/events/EventLog/useEventLogSearch.ts
@@ -10,6 +10,7 @@ import mapValues from 'lodash.mapvalues';
 import { useEventSearch } from 'hooks/api/getters/useEventSearch/useEventSearch';
 import type { SearchEventsParams } from 'openapi';
 import type { FilterItemParamHolder } from 'component/filter/Filters/Filters';
+import { format, subMonths } from 'date-fns';
 
 type Log =
     | { type: 'global' }
@@ -60,8 +61,14 @@ export const useEventLogSearch = (
         offset: withDefault(NumberParam, 0),
         limit: withDefault(NumberParam, DEFAULT_PAGE_SIZE),
         query: StringParam,
-        from: FilterItemParam,
-        to: FilterItemParam,
+        from: withDefault(FilterItemParam, {
+            values: [format(subMonths(new Date(), 1), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
+        to: withDefault(FilterItemParam, {
+            values: [format(new Date(), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
         createdBy: FilterItemParam,
         type: FilterItemParam,
         ...extraParameters(logType),
@@ -81,6 +88,7 @@ export const useEventLogSearch = (
     const [tableState, setTableState] = usePersistentTableState(
         fullStorageKey,
         stateConfig,
+        ['from', 'to', 'offset'],
     );
 
     const filterState = (() => {

diff --git a/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx b/frontend/src/component/filter/FilterItem/FilterItemChip/FilterItemChip.tsx
@@ -31,6 +31,7 @@ const StyledLabel = styled('div')(({ theme }) => ({
     alignItems: 'center',
     justifyContent: 'space-between',
     fontWeight: theme.typography.fontWeightBold,
+    minHeight: theme.spacing(3.5),
 }));
 
 const StyledOptions = styled('button')(({ theme }) => ({

diff --git a/frontend/src/component/filter/Filters/Filters.tsx b/frontend/src/component/filter/Filters/Filters.tsx
@@ -43,6 +43,7 @@ type IDateFilterItem = IBaseFilterItem & {
     dateOperators: [string, ...string[]];
     fromFilterKey?: string;
     toFilterKey?: string;
+    persistent?: boolean;
 };
 
 export type IFilterItem = ITextFilterItem | IDateFilterItem;
@@ -166,7 +167,11 @@ export const Filters: FC<IFilterProps> = ({
                             }}
                             onRangeChange={rangeChangeHandler(filter)}
                             operators={filter.dateOperators}
-                            onChipClose={() => deselectFilter(filter.label)}
+                            onChipClose={
+                                filter.persistent
+                                    ? undefined
+                                    : () => deselectFilter(filter.label)
+                            }
                         />
                     );
                 }

diff --git a/frontend/src/component/insights/Insights.tsx b/frontend/src/component/insights/Insights.tsx
@@ -9,6 +9,8 @@ import { InsightsCharts } from './InsightsCharts';
 import { Sticky } from 'component/common/Sticky/Sticky';
 import { InsightsFilters } from './InsightsFilters';
 import { FilterItemParam } from '../../utils/serializeQueryParams';
+import { format, subMonths } from 'date-fns';
+import { withDefault } from 'use-query-params';
 
 const StyledWrapper = styled('div')(({ theme }) => ({
     paddingTop: theme.spacing(2),
@@ -32,10 +34,20 @@ export const Insights: FC<InsightsProps> = ({ withCharts = true }) => {
 
     const stateConfig = {
         project: FilterItemParam,
-        from: FilterItemParam,
-        to: FilterItemParam,
+        from: withDefault(FilterItemParam, {
+            values: [format(subMonths(new Date(), 1), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
+        to: withDefault(FilterItemParam, {
+            values: [format(new Date(), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
     };
-    const [state, setState] = usePersistentTableState('insights', stateConfig);
+    const [state, setState] = usePersistentTableState('insights', stateConfig, [
+        'from',
+        'to',
+    ]);
+
     const { insights, loading } = useInsights(
         state.from?.values[0],
         state.to?.values[0],

diff --git a/frontend/src/component/insights/InsightsFilters.tsx b/frontend/src/component/insights/InsightsFilters.tsx
@@ -36,6 +36,7 @@ export const InsightsFilters: FC<IFeatureToggleFiltersProps> = ({
                 dateOperators: ['IS'],
                 fromFilterKey: 'from',
                 toFilterKey: 'to',
+                persistent: true,
             },
             {
                 label: 'Date To',
@@ -45,6 +46,7 @@ export const InsightsFilters: FC<IFeatureToggleFiltersProps> = ({
                 dateOperators: ['IS'],
                 fromFilterKey: 'from',
                 toFilterKey: 'to',
+                persistent: true,
             },
             ...(hasMultipleProjects
                 ? ([