feat: adjust codecov time selector to use codecov context

Author: adrianviquez

static/app/components/codecov/datePicker/datePicker.spec.tsx

@@ -1,152 +1,53 @@
-import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import {initializeUrlState} from 'sentry/actionCreators/pageFilters';
+import CodecovQueryParamsProvider from 'sentry/components/codecov/container/codecovParamsProvider';
 import {DatePicker} from 'sentry/components/codecov/datePicker/datePicker';
-import OrganizationStore from 'sentry/stores/organizationStore';
-import PageFiltersStore from 'sentry/stores/pageFiltersStore';
-
-const {organization, router} = initializeOrg({
-  router: {
-    location: {
-      query: {},
-      pathname: '/codecov/tests',
-    },
-    params: {},
-  },
-});
 
 describe('DatePicker', function () {
-  beforeEach(() => {
-    PageFiltersStore.init();
-    OrganizationStore.init();
-
-    OrganizationStore.onUpdate(organization, {replace: true});
-    PageFiltersStore.onInitializeUrlState(
+  it('can change period', async function () {
+    const {router} = render(
+      <CodecovQueryParamsProvider>
+        <DatePicker />
+      </CodecovQueryParamsProvider>,
       {
-        projects: [],
-        environments: [],
-        datetime: {
-          period: '7d',
-          start: null,
-          end: null,
-          utc: false,
+        initialRouterConfig: {
+          location: {
+            pathname: '/codecov/tests',
+            query: {codecovPeriod: '7d'},
+          },
         },
-      },
-      new Set(['datetime'])
+      }
     );
-  });
-
-  it('can change period', async function () {
-    render(<DatePicker />, {
-      router,
-      deprecatedRouterMocks: true,
-    });
 
     await userEvent.click(screen.getByRole('button', {name: '7D', expanded: false}));
     await userEvent.click(screen.getByRole('option', {name: 'Last 30 days'}));
 
+    expect(router.location.search).toBe('?codecovPeriod=30d');
+
     expect(
       screen.getByRole('button', {name: '30D', expanded: false})
     ).toBeInTheDocument();
-    expect(router.push).toHaveBeenCalledWith(
-      expect.objectContaining({query: {statsPeriod: '30d'}})
-    );
-    expect(PageFiltersStore.getState()).toEqual({
-      isReady: true,
-      shouldPersist: true,
-      desyncedFilters: new Set(),
-      pinnedFilters: new Set(['datetime']),
-      selection: {
-        datetime: {
-          period: '30d',
-          end: null,
-          start: null,
-          utc: false,
-        },
-        environments: [],
-        projects: [],
-      },
-    });
   });
 
-  it('adjusts period if invalid', async function () {
-    PageFiltersStore.reset();
-    PageFiltersStore.onInitializeUrlState(
+  it('displays invalid button for invalid values', async function () {
+    render(
+      <CodecovQueryParamsProvider>
+        <DatePicker />
+      </CodecovQueryParamsProvider>,
       {
-        projects: [],
-        environments: [],
-        datetime: {
-          period: '123d',
-          start: null,
-          end: null,
-          utc: false,
+        initialRouterConfig: {
+          location: {
+            pathname: '/codecov/tests',
+            query: {codecovPeriod: '123Dd12'},
+          },
         },
-      },
-      new Set(['datetime'])
+      }
     );
 
-    render(<DatePicker />, {
-      router,
-      deprecatedRouterMocks: true,
+    const button = await screen.findByRole('button', {
+      name: 'Invalid Period',
+      expanded: false,
     });
-
-    // Confirm selection changed to default Codecov period
-    const button = await screen.findByRole('button', {name: '24H', expanded: false});
     expect(button).toBeInTheDocument();
-    expect(router.push).toHaveBeenCalledWith(
-      expect.objectContaining({query: {statsPeriod: '24h'}})
-    );
-    expect(PageFiltersStore.getState()).toEqual({
-      isReady: true,
-      shouldPersist: true,
-      desyncedFilters: new Set(),
-      pinnedFilters: new Set(['datetime']),
-      selection: {
-        datetime: {
-          period: '24h',
-          end: null,
-          start: null,
-          utc: false,
-        },
-        environments: [],
-        projects: [],
-      },
-    });
-  });
-
-  it('displays a desynced state message', async function () {
-    const {organization: desyncOrganization, router: desyncRouter} = initializeOrg({
-      router: {
-        location: {
-          query: {statsPeriod: '7d'},
-          pathname: '/codecov/test',
-        },
-        params: {},
-      },
-    });
-
-    PageFiltersStore.reset();
-    initializeUrlState({
-      memberProjects: [],
-      nonMemberProjects: [],
-      organization: desyncOrganization,
-      queryParams: {statsPeriod: '30d'},
-      router: desyncRouter,
-      shouldEnforceSingleProject: false,
-    });
-
-    render(<DatePicker />, {
-      router: desyncRouter,
-      organization: desyncOrganization,
-      deprecatedRouterMocks: true,
-    });
-
-    await userEvent.click(screen.getByRole('button', {name: '30D', expanded: false}));
-    expect(screen.getByText('Filters Updated')).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', {name: 'Restore Previous Values'})
-    ).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'Got It'})).toBeInTheDocument();
   });
 });

static/app/components/codecov/datePicker/datePicker.tsx

@@ -1,64 +1,23 @@
-import {useEffect} from 'react';
+import {useSearchParams} from 'react-router-dom';
 
-import {updateDateTime} from 'sentry/actionCreators/pageFilters';
-import type {DateSelectorProps} from 'sentry/components/codecov/datePicker/dateSelector';
+import {useCodecovContext} from 'sentry/components/codecov/context/codecovContext';
 import {DateSelector} from 'sentry/components/codecov/datePicker/dateSelector';
-import {isValidCodecovRelativePeriod} from 'sentry/components/codecov/utils';
-import {DesyncedFilterMessage} from 'sentry/components/organizations/pageFilters/desyncedFilter';
-import {t} from 'sentry/locale';
-import usePageFilters from 'sentry/utils/usePageFilters';
-import useRouter from 'sentry/utils/useRouter';
 
-const CODECOV_DEFAULT_RELATIVE_PERIOD = '24h';
-export const CODECOV_DEFAULT_RELATIVE_PERIODS = {
-  '24h': t('Last 24 hours'),
-  '7d': t('Last 7 days'),
-  '30d': t('Last 30 days'),
-};
-
-interface DatePickerProps
-  extends Partial<Partial<Omit<DateSelectorProps, 'relative' | 'menuBody'>>> {}
-
-export function DatePicker({
-  onChange,
-  menuTitle,
-  menuWidth,
-  triggerProps = {},
-  ...selectProps
-}: DatePickerProps) {
-  const router = useRouter();
-  const {selection, desyncedFilters} = usePageFilters();
-  const desynced = desyncedFilters.has('datetime');
-  const period = selection.datetime?.period;
-
-  // Adjusts to valid Codecov relative period since Codecov only accepts a subset of dates other components accept, defined in CODECOV_DEFAULT_RELATIVE_PERIODS
-  useEffect(() => {
-    if (!isValidCodecovRelativePeriod(period)) {
-      const newTimePeriod = {period: CODECOV_DEFAULT_RELATIVE_PERIOD};
-      updateDateTime(newTimePeriod, router, {
-        save: true,
-      });
-    }
-  }, [period, router]);
+export function DatePicker() {
+  const {codecovPeriod} = useCodecovContext();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   return (
     <DateSelector
-      {...selectProps}
-      relative={period}
-      desynced={desynced}
-      onChange={timePeriodUpdate => {
-        const {relative} = timePeriodUpdate;
-        const newTimePeriod = {period: relative};
-
-        onChange?.(timePeriodUpdate);
-        updateDateTime(newTimePeriod, router, {
-          save: true,
-        });
+      relativeDate={codecovPeriod}
+      onChange={newCodecovPeriod => {
+        const currentParams = Object.fromEntries(searchParams.entries());
+        const updatedParams = {
+          ...currentParams,
+          codecovPeriod: newCodecovPeriod,
+        };
+        setSearchParams(updatedParams);
       }}
-      menuTitle={menuTitle ?? t('Filter Time Range')}
-      menuWidth={(menuWidth ?? desynced) ? '22em' : undefined}
-      menuBody={desynced && <DesyncedFilterMessage />}
-      triggerProps={triggerProps}
     />
   );
 }

static/app/components/codecov/datePicker/dateSelector.spec.tsx

@@ -4,12 +4,12 @@ import {DateSelector} from 'sentry/components/codecov/datePicker/dateSelector';
 
 describe('DateSelector', function () {
   it('renders when given relative period', async function () {
-    render(<DateSelector relative="7d" />);
+    render(<DateSelector relativeDate="7d" onChange={() => {}} />);
     expect(await screen.findByRole('button', {name: '7D'})).toBeInTheDocument();
   });
 
   it('renders when given an invalid relative period', async function () {
-    render(<DateSelector relative="1y" />);
+    render(<DateSelector relativeDate="1y" onChange={() => {}} />);
     expect(
       await screen.findByRole('button', {name: 'Invalid Period'})
     ).toBeInTheDocument();