MCR-3793: state routing for unlocked rates

services/app-web/src/constants/routes.ts

@@ -12,6 +12,7 @@ const ROUTES = [
     'HELP',
     'SETTINGS',
     'RATES_SUMMARY',
+    'RATE_EDIT',
     'SUBMISSIONS',
     'SUBMISSIONS_NEW',
     'SUBMISSIONS_TYPE',
@@ -47,6 +48,7 @@ const RoutesRecord: Record<RouteT, string> = {
     HELP: '/help',
     SETTINGS: '/settings',
     RATES_SUMMARY: 'rates/:id',
+    RATE_EDIT: '/:id/edit',
     SUBMISSIONS: '/submissions',
     SUBMISSIONS_NEW: '/submissions/new',
     SUBMISSIONS_EDIT_TOP_LEVEL: '/submissions/:id/edit/*',
@@ -122,6 +124,7 @@ const PageTitlesRecord: Record<RouteT | 'UNKNOWN_ROUTE', string> = {
     DASHBOARD_RATES: 'Rate review dashboard',
     DASHBOARD_SUBMISSIONS: 'Dashboard',
     RATES_SUMMARY: 'Rate summary',
+    RATE_EDIT: 'Edit rate',
     SUBMISSIONS: 'Submissions',
     SUBMISSIONS_NEW: 'New submission',
     SUBMISSIONS_EDIT_TOP_LEVEL: 'Submissions',

services/app-web/src/constants/tealium.ts

@@ -38,6 +38,7 @@ const CONTENT_TYPE_BY_ROUTE: Record<RouteT | 'UNKNOWN_ROUTE', string> = {
     GRAPHQL_EXPLORER: 'dev',
     SETTINGS: 'table',
     RATES_SUMMARY: 'summary',
+    RATE_EDIT: 'form',
     SUBMISSIONS: 'form',
     SUBMISSIONS_NEW: 'form',
     SUBMISSIONS_EDIT_TOP_LEVEL: 'form',

services/app-web/src/pages/App/AppRoutes.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, useEffect, useState } from 'react'
 import { useNavigate, useLocation, Navigate } from 'react-router'
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes, useParams } from 'react-router-dom'
 import { useLDClient } from 'launchdarkly-react-client-sdk'
 import { extendSession, idmRedirectURL } from '../../pages/Auth/cognitoAuth'
 import { assertNever, AuthModeType } from '../../common-code/config'
@@ -61,6 +61,11 @@ const UniversalRoutes = (
         <Route path={RoutesRecord.HELP} element={<Help />} />
     </Fragment>
 )
+//Doing this in order to pass the :id for redirecting '/:id' to ':id/edit' for state users viewing rates
+const RateEditRouteRedirect = () => {
+    const { id } = useParams();
+    return <Navigate to={`/${id}/edit`} />
+}
 
 const StateUserRoutes = ({
     authMode,
@@ -75,7 +80,7 @@ const StateUserRoutes = ({
 }): React.ReactElement => {
     // feature flag
     const ldClient = useLDClient()
-    const showRateSummaryPage: boolean = ldClient?.variation(
+    const showRateEditPage: boolean = ldClient?.variation(
         featureFlags.RATE_EDIT_UNLOCK.flag,
         featureFlags.RATE_EDIT_UNLOCK.defaultValue
     )
@@ -94,6 +99,12 @@ const StateUserRoutes = ({
                         <Navigate to={RoutesRecord.DASHBOARD_SUBMISSIONS} />
                     }
                 />
+                {showRateEditPage && (
+                    <Route 
+                        path="/:id"
+                        element={<RateEditRouteRedirect />} 
+                    />
+                )}
                 <Route
                     path={RoutesRecord.DASHBOARD_SUBMISSIONS}
                     element={<StateDashboard />}
@@ -106,7 +117,13 @@ const StateUserRoutes = ({
                     path={RoutesRecord.SUBMISSIONS_NEW}
                     element={<NewStateSubmissionForm />}
                 />
-                {showRateSummaryPage && (
+                {showRateEditPage && (
+                    <Route 
+                        path={RoutesRecord.RATE_EDIT}
+                        element={<RateSummary />}
+                />
+                )}
+                {showRateEditPage && (
                     <Route
                         path={RoutesRecord.RATES_SUMMARY}
                         element={<RateSummary />}

services/app-web/src/pages/RateEdit/RateEdit.test.tsx

@@ -0,0 +1,37 @@
+import { screen, waitFor } from '@testing-library/react'
+import { ldUseClientSpy, renderWithProviders } from "../../testHelpers"
+import { RateEdit } from "./RateEdit"
+import { fetchCurrentUserMock, fetchRateMockSuccess, mockValidStateUser } from "../../testHelpers/apolloMocks"
+
+describe('RateEdit', () => {
+  afterAll(() => jest.clearAllMocks())
+
+  describe('Viewing RateEdit as a state user', () => {
+    beforeEach(() => {
+      ldUseClientSpy({'rate-edit-unlock': true})
+    })
+
+    it('renders without errors', async () => {
+      renderWithProviders(<RateEdit />, {
+        apolloProvider: {
+          mocks: [
+            fetchCurrentUserMock({
+              user: mockValidStateUser(),
+              statusCode: 200,
+            }),
+            fetchRateMockSuccess({ rate: { id: '1337' } }),
+          ],
+        },
+        routerProvider: {
+          route: '/rates/1337'
+        },
+      })
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('rate-edit')).toBeInTheDocument()
+      })
+    })
+  })
+})
+
+

services/app-web/src/pages/RateEdit/RateEdit.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export const RateEdit = (): React.ReactElement => {
+  return (
+    <h1 data-testid="rate-edit">
+      You've reached the ':id/edit' url placeholder for the incoming standalone edit rate form 
+      <br/>
+      Ticket: <a href="https://qmacbis.atlassian.net/browse/MCR-3771">MCR-3771</a>
+    </h1>
+  )
+}

services/app-web/src/pages/SubmissionSummary/RateSummary/RateSummary.test.tsx

@@ -116,7 +116,7 @@ describe('RateSummary', () => {
             ldUseClientSpy({'rate-edit-unlock': true})
         })
 
-        it('renders without errors', async () => {
+        it('renders SingleRateSummarySection component without errors for locked rate', async () => {
             renderWithProviders(wrapInRoutes(<RateSummary />), {
                 apolloProvider: {
                     mocks: [
@@ -141,6 +141,27 @@ describe('RateSummary', () => {
             ).toBeInTheDocument()
         })
 
+        it('renders RateEdit component without errors for unlocked rate', async () => {
+            renderWithProviders(wrapInRoutes(<RateSummary />), {
+                apolloProvider: {
+                    mocks: [
+                        fetchCurrentUserMock({
+                            user: mockValidStateUser(),
+                            statusCode: 200,
+                        }),
+                        fetchRateMockSuccess({ rate: { id: '1337', status: 'UNLOCKED' } }),
+                    ],
+                },
+                routerProvider: {
+                    route: '/rates/1337'
+                },
+            })
+
+            await waitFor(() => {
+                expect(screen.queryByTestId('rate-edit')).toBeInTheDocument()
+            })
+        })
+
         it('renders expected error page when rate ID is invalid', async () => {
             renderWithProviders(wrapInRoutes(<RateSummary />), {
                 apolloProvider: {

services/app-web/src/pages/SubmissionSummary/RateSummary/RateSummary.tsx

@@ -10,6 +10,7 @@ import { GenericErrorPage } from '../../Errors/GenericErrorPage'
 import { RoutesRecord } from '../../../constants'
 import { SingleRateSummarySection } from '../../../components/SubmissionSummarySection/RateDetailsSummarySection/SingleRateSummarySection'
 import { useAuth } from '../../../contexts/AuthContext'
+import { RateEdit } from '../../RateEdit/RateEdit'
 
 type RouteParams = {
     id: string
@@ -68,8 +69,7 @@ export const RateSummary = (): React.ReactElement => {
                 <div>
                     <Link
                         asCustom={NavLink}
-                        //TODO: Will have to remove this conditional along with associated loggedInUser prop once the rate dashboard
-                        //is made available to state users
+                        //TODO: Will have to remove this conditional once the rate dashboard is made available to state users
                         to={{
                             pathname: loggedInUser?.__typename === 'StateUser' ? RoutesRecord.DASHBOARD : RoutesRecord.DASHBOARD_RATES,
                         }}
@@ -78,11 +78,14 @@ export const RateSummary = (): React.ReactElement => {
                         <span>&nbsp;Back to dashboard</span>
                     </Link>
                 </div>
-                <SingleRateSummarySection
-                    rate={rate}
-                    isSubmitted // can assume isSubmitted because we are building for CMS users
-                    statePrograms={rate.state.programs}
-                />
+                {loggedInUser?.__typename === 'StateUser' && rate.status === 'UNLOCKED' ?
+                    <RateEdit /> :
+                    <SingleRateSummarySection
+                        rate={rate}
+                        isSubmitted // can assume isSubmitted because we are building for CMS users
+                        statePrograms={rate.state.programs}
+                    />
+                }
             </GridContainer>
         </div>
     )