MCR-4653: CMS does not see withdrawn rate reviews on dashboard by def…

…ault (#3083) * Simplify getting filters from url and add default status filters * Rate table tests
Enterprise-CMCS · Jan 16, 2025 · 50536aa · 50536aa
1 parent fd462d9
commit 50536aa
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 55 deletions.
diff --git 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(<RateReviewsTable tableData={[]} />, {
@@ -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
@@ -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<string | null>(null)
     const filterDateRangeRef = useRef<FilterDateRangeRef>(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 <Loading />
-    }
-
     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) =>