Pass start and end dates to filter component. Closes #2646.

src/app/(main)/reports/[reportId]/FilterParameters.tsx

@@ -55,6 +55,8 @@ export function FilterParameters() {
             <FilterSelectForm
               websiteId={websiteId}
               fields={fields.filter(({ name }) => !filters.find(f => f.name === name))}
+              startDate={dateRange?.startDate}
+              endDate={dateRange?.endDate}
               onChange={handleAdd}
             />
           </PopupForm>

src/app/(main)/reports/[reportId]/FilterSelectForm.tsx

@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import FieldSelectForm from './FieldSelectForm';
 import FieldFilterEditForm from './FieldFilterEditForm';
-import { useDateRange } from 'components/hooks';
 
 export interface FilterSelectFormProps {
   websiteId?: string;
   fields: any[];
+  startDate?: Date;
+  endDate?: Date;
   onChange?: (filter: { name: string; type: string; operator: string; value: string }) => void;
   allowFilterSelect?: boolean;
 }
@@ -13,11 +14,12 @@ export interface FilterSelectFormProps {
 export default function FilterSelectForm({
   websiteId,
   fields,
+  startDate,
+  endDate,
   onChange,
   allowFilterSelect,
 }: FilterSelectFormProps) {
   const [field, setField] = useState<{ name: string; label: string; type: string }>();
-  const [{ startDate, endDate }] = useDateRange(websiteId);
 
   if (!field) {
     return <FieldSelectForm fields={fields} onSelect={setField} showType={false} />;

src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
 import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
 import FilterSelectForm from 'app/(main)/reports/[reportId]/FilterSelectForm';
-import { useFields, useMessages, useNavigation } from 'components/hooks';
+import { useFields, useMessages, useNavigation, useDateRange } from 'components/hooks';
 import { OPERATOR_PREFIXES } from 'lib/constants';
 import styles from './WebsiteFilterButton.module.css';
 
@@ -16,6 +16,7 @@ export function WebsiteFilterButton({
   const { formatMessage, labels } = useMessages();
   const { renderUrl, router } = useNavigation();
   const { fields } = useFields();
+  const [{ startDate, endDate }] = useDateRange(websiteId);
 
   const handleAddFilter = ({ name, operator, value }) => {
     const prefix = OPERATOR_PREFIXES[operator];
@@ -38,6 +39,8 @@ export function WebsiteFilterButton({
               <FilterSelectForm
                 websiteId={websiteId}
                 fields={fields}
+                startDate={startDate}
+                endDate={endDate}
                 onChange={value => {
                   handleAddFilter(value);
                   close();