MCR-2553: CMS can navigate to rate review q&a via sidebar (#2847)

* Add route for rate summary Q&A page

* Add rate summary sidenav, set up routes, update RateQ&A component to work with CMS users.

* Add tests for rate summary side nav and Q&A page

* Styling of Q&A headers.

* Fix scrollbar moving content to the left.

* Align setting page background with other pages.

* Clean up redundant code.

* Fix comments

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

@@ -19,6 +19,7 @@ const ROUTES = [
     'AUTOMATED_EMAILS',
     'SUPPORT_EMAILS',
     'RATES_SUMMARY',
+    'RATES_SUMMARY_QUESTIONS_AND_ANSWERS',
     'RATE_EDIT',
     'REPLACE_RATE',
     'SUBMISSIONS',
@@ -64,6 +65,7 @@ const RoutesRecord: Record<RouteT, string> = {
     AUTOMATED_EMAILS: '/mc-review-settings/automated-emails',
     SUPPORT_EMAILS: '/mc-review-settings/support-emails',
     RATES_SUMMARY: '/rates/:id',
+    RATES_SUMMARY_QUESTIONS_AND_ANSWERS: '/rates/:id/question-and-answers',
     RATE_EDIT: '/rates/:id/edit',
     REPLACE_RATE: '/submissions/:id/replace-rate/:rateID',
     SUBMISSIONS: '/submissions',
@@ -152,6 +154,7 @@ const PageTitlesRecord: Record<RouteT | 'UNKNOWN_ROUTE', string> = {
     DASHBOARD_RATES: 'Rate review dashboard',
     DASHBOARD_SUBMISSIONS: 'Dashboard',
     RATES_SUMMARY: 'Rate summary',
+    RATES_SUMMARY_QUESTIONS_AND_ANSWERS: 'Q&A',
     RATE_EDIT: 'Edit rate',
     REPLACE_RATE: 'Replace rate',
     SUBMISSIONS: 'Submissions',

services/app-web/src/pages/App/AppBody.module.scss

@@ -5,6 +5,7 @@
     display: flex;
     min-height: 100vh;
     flex-direction: column;
+    width: 100vw;
 }
 
 .mainContent {

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

@@ -48,6 +48,7 @@ import {
     DivisionAssignmentTable,
 } from '../Settings/SettingsTables'
 import { EditStateAssign } from '../Settings/EditStateAssign/EditStateAssign'
+import { RateSummarySideNav } from '../SubmissionSideNav/RateSummarySideNav'
 import { RateQuestionResponse } from '../QuestionResponse/RateQuestionResponse'
 
 function componentForAuthMode(
@@ -183,6 +184,11 @@ const CMSUserRoutes = ({
     setAlert?: React.Dispatch<React.ReactElement>
     stageName?: string
 }): React.ReactElement => {
+    const ldClient = useLDClient()
+    const showQAbyRates: boolean = ldClient?.variation(
+        featureFlags.QA_BY_RATES.flag,
+        featureFlags.QA_BY_RATES.defaultValue
+    )
     return (
         <AuthenticatedRouteWrapper>
             <Routes>
@@ -224,10 +230,33 @@ const CMSUserRoutes = ({
                     />
                 </Route>
 
-                <Route
-                    path={RoutesRecord.RATES_SUMMARY}
-                    element={<RateSummary />}
-                />
+                {showQAbyRates ? (
+                    <>
+                        <Route element={<RateSummarySideNav />}>
+                            <Route
+                                path={RoutesRecord.RATES_SUMMARY}
+                                element={<RateSummary />}
+                            />
+                            <Route
+                                path={
+                                    RoutesRecord.RATES_SUMMARY_QUESTIONS_AND_ANSWERS
+                                }
+                                element={<RateQuestionResponse />}
+                            />
+                            {/*This route will cause the RateSummarySideNav to redirect to rate summary Q&A page*/}
+                            <Route
+                                path={
+                                    RoutesRecord.SUBMISSIONS_RATE_QUESTIONS_AND_ANSWERS
+                                }
+                            />
+                        </Route>
+                    </>
+                ) : (
+                    <Route
+                        path={RoutesRecord.RATES_SUMMARY}
+                        element={<RateSummary />}
+                    />
+                )}
 
                 <Route
                     path={RoutesRecord.SUBMISSIONS_MCCRSID}

services/app-web/src/pages/QuestionResponse/QuestionResponse.module.scss

@@ -11,7 +11,7 @@
     padding: 2rem 0;
 }
 
-.questionSection {
+%questionSection {
     margin: uswds.units(2) auto;
     background: custom.$mcr-foundation-white;
     padding: uswds.units(4) uswds.units(4);
@@ -20,6 +20,10 @@
     width: 100%;
     @include uswds.u-radius('md');
 
+    h2 {
+        font-weight: normal;
+    }
+
     h3 {
         display: flex;
         justify-content: space-between;
@@ -29,6 +33,17 @@
     }
 }
 
+.questionSection {
+    @extend %questionSection;
+}
+
+.yourQuestionSection {
+    @extend %questionSection;
+    h2 {
+        font-weight: bold;
+    }
+}
+
 .breadcrumbs {
     background: none;
     margin: uswds.units(2) auto;