diff --git a/services/app-web/src/pages/CMSDashboard/RateReviewsDashboard/RateReviewsTable.test.tsx b/services/app-web/src/pages/CMSDashboard/RateReviewsDashboard/RateReviewsTable.test.tsx index 24bba02d77..6cd1f9e8ae 100644 --- a/services/app-web/src/pages/CMSDashboard/RateReviewsDashboard/RateReviewsTable.test.tsx +++ b/services/app-web/src/pages/CMSDashboard/RateReviewsDashboard/RateReviewsTable.test.tsx @@ -87,24 +87,19 @@ describe('RateReviewsTable', () => { await waitFor(() => { expect( - screen.getByText('Displaying 3 of 3 rate reviews') + screen.getByText('Displaying 2 of 3 rate reviews') ).toBeInTheDocument() }) // expect filter accordion to be present expect(screen.getByTestId('accordion')).toBeInTheDocument() expect( - screen.getByText('0 filters applied') - ).toBeInTheDocument() - - // expect table caption - expect( - screen.getByText('Test table caption') + screen.getByText('2 filters applied') ).toBeInTheDocument() const tableRows = screen.getAllByRole('row') // expect there to be 4 rows, one of which is the header row - expect(tableRows).toHaveLength(4) + expect(tableRows).toHaveLength(3) // expect rows to be in order where latest updatedAt is first in the array // expect statuses to be drawn from the consolidatedStatus field @@ -115,17 +110,17 @@ describe('RateReviewsTable', () => { within(tableRows[1]).getByText('Unlocked') ).toBeInTheDocument() expect( - within(tableRows[2]).getByText('rate-2-certification-name') - ).toBeInTheDocument() - expect( - within(tableRows[2]).getByText('Withdrawn') + within(tableRows[2]).getByText('rate-1-certification-name') ).toBeInTheDocument() expect( - within(tableRows[3]).getByText('rate-1-certification-name') + within(tableRows[2]).getByText('Submitted') ).toBeInTheDocument() + + // expect WITHDRAWN rates to be not visible expect( - within(tableRows[3]).getByText('Submitted') - ).toBeInTheDocument() + screen.queryByText('rate-2-certification-name') + ).toBeNull() + expect(screen.queryByText('Withdrawn')).toBeNull() }) it('renders rates table correctly without filters, captions and no rates', async () => { renderWithProviders(, { @@ -183,6 +178,12 @@ describe('RateReviewsTable', () => { await userEvent.click(accordionButton) }) + // clear out default status filter + const clearFilterButton = screen.getByRole('button', { + name: /Clear filters/, + }) + await userEvent.click(clearFilterButton) + //Look for state filter const stateCombobox = within(stateFilter).getByRole('combobox') expect(stateCombobox).toBeInTheDocument() @@ -233,7 +234,7 @@ describe('RateReviewsTable', () => { await waitFor(() => { expect( - screen.getByText('Displaying 3 of 3 rate reviews') + screen.getByText('Displaying 2 of 3 rate reviews') ).toBeInTheDocument() }) @@ -250,6 +251,14 @@ describe('RateReviewsTable', () => { await userEvent.click(accordionButton) }) + // clear out default status filter + const clearFilterButton = screen.getByRole('button', { + name: /Clear filters/, + }) + expect(clearFilterButton).toBeInTheDocument() + + await userEvent.click(clearFilterButton) + const ratingPeriodFilter = screen.getByTestId( 'filter-date-range-picker' ) @@ -317,11 +326,6 @@ describe('RateReviewsTable', () => { screen.getByText('Displaying 2 of 3 rate reviews') ).toBeInTheDocument() - const clearFilterButton = screen.getByRole('button', { - name: /Clear filters/, - }) - expect(clearFilterButton).toBeInTheDocument() - // Clear all filters await userEvent.click(clearFilterButton) @@ -357,6 +361,14 @@ describe('RateReviewsTable', () => { await userEvent.click(accordionButton) }) + // clear out default status filter + const clearFilterButton = screen.getByRole('button', { + name: /Clear filters/, + }) + expect(clearFilterButton).toBeInTheDocument() + + await userEvent.click(clearFilterButton) + //Look for status filter const statusCombobox = within(statusFilter).getByRole('combobox') diff --git a/services/app-web/src/pages/CMSDashboard/RateReviewsDashboard/RateReviewsTable.tsx b/services/app-web/src/pages/CMSDashboard/RateReviewsDashboard/RateReviewsTable.tsx index e849b234f6..f59ea2e9f4 100644 --- a/services/app-web/src/pages/CMSDashboard/RateReviewsDashboard/RateReviewsTable.tsx +++ b/services/app-web/src/pages/CMSDashboard/RateReviewsDashboard/RateReviewsTable.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useRef, useLayoutEffect } from 'react' +import React, { useEffect, useState, useRef } from 'react' import { ColumnFiltersState, createColumnHelper, @@ -13,9 +13,7 @@ import { FilterFn, } from '@tanstack/react-table' import { useAtom } from 'jotai/react' -import { atom } from 'jotai' import { atomWithHash } from 'jotai-location' -import { loadable } from 'jotai/vanilla/utils' import { HealthPlanPackageStatus, Program, @@ -34,7 +32,7 @@ import { import { pluralize, titleCaseString } from '@mc-review/common-code' import { DoubleColumnGrid } from '../../../components' import { FilterDateRangeRef } from '../../../components/FilterAccordion/FilterDateRange/FilterDateRange' -import { Loading, NavLinkWithLogging } from '../../../components' +import { NavLinkWithLogging } from '../../../components' import { useTealium } from '../../../hooks' import useDeepCompareEffect from 'use-deep-compare-effect' import { getTealiumFiltersChanged } from '../../../tealium/tealiumHelpers' @@ -151,10 +149,6 @@ const columnHash = atomWithHash('filters', [] as ColumnFiltersState, { deserialize: fromReadableUrlToColumnFilters, }) -/* This returns the url filters along with a loading status. This is used to prevent flickering on first load with filters - in the url. */ -const loadableColumnHash = loadable(atom(async (get) => get(columnHash))) - /* transform react-table's ColumnFilterState (stringified, formatted, and stored in the URL) to react-select's FilterOptionType and return only the items matching the FilterSelect component that's calling the function*/ const getSelectedFiltersFromColumnState = ( @@ -235,10 +229,6 @@ export const RateReviewsTable = ({ const lastClickedElement = useRef(null) const filterDateRangeRef = useRef(null) const [columnFilters, setColumnFilters] = useAtom(columnHash) - const [defaultFiltersFromUrl] = useAtom(loadableColumnHash) - const [defaultColumnFilters, setDefaultColumnState] = useState< - ColumnFiltersState | undefined - >(undefined) const [prevFilters, setPrevFilters] = useState<{ filtersForAnalytics: string results?: string @@ -516,15 +506,25 @@ export const RateReviewsTable = ({ ) }, [filtersApplied, submissionCount, caption, tableConfig.tableName]) - useLayoutEffect(() => { - // Do not set default column state again - if ( - defaultFiltersFromUrl.state === 'hasData' && - !defaultColumnFilters - ) { - setDefaultColumnState(defaultFiltersFromUrl.data) + useEffect(() => { + // if on root route + if (location.hash === '') { + updateFilters( + statusColumn, + [ + { + label: 'Submitted', + value: 'SUBMITTED', + }, + { + label: 'Unlocked', + value: 'UNLOCKED', + }, + ], + 'status' + ) } - }, [defaultFiltersFromUrl, defaultColumnFilters]) + }, [statusColumn]) useDeepCompareEffect(() => { const prevFiltersForAnalytics = prevFilters.filtersForAnalytics @@ -562,10 +562,6 @@ export const RateReviewsTable = ({ } }, [submissionCount, columnFilters, setPrevFilters, prevFilters]) - if (defaultColumnFilters === undefined) { - return - } - return ( <> {tableData.length ? ( @@ -580,10 +576,6 @@ export const RateReviewsTable = ({ columnFilters, 'stateName' )} - defaultValue={getSelectedFiltersFromColumnState( - defaultColumnFilters, - 'stateName' - )} name="state" label="State" filterOptions={stateFilterOptions} @@ -600,10 +592,6 @@ export const RateReviewsTable = ({ columnFilters, 'rateType' )} - defaultValue={getSelectedFiltersFromColumnState( - defaultColumnFilters, - 'rateType' - )} name="rateType" label="Rate Type" filterOptions={rateTypeOptions} @@ -625,7 +613,7 @@ export const RateReviewsTable = ({ id: 'ratingPeriodStartFrom', name: 'ratingPeriodStartFrom', defaultValue: getDateRangeFilterFromUrl( - defaultColumnFilters, + columnFilters, 'rateDateStart' )[0], onChange: (date) => @@ -641,7 +629,7 @@ export const RateReviewsTable = ({ id: 'ratingPeriodStartTo', name: 'ratingPeriodStartTo', defaultValue: getDateRangeFilterFromUrl( - defaultColumnFilters, + columnFilters, 'rateDateStart' )[1], onChange: (date) =>