MCR-4480: states see distinct table for rate questions (#2871)

* Render questions in two sections for state Q&A by rates page.

* Tests

* Reduce header margins to match other summary pages.

services/app-web/src/pages/QuestionResponse/QATable/CMSQuestionResponseTable.tsx

@@ -1,19 +1,14 @@
 import {
     ContractQuestionList,
     Division,
-    IndexContractQuestionsPayload,
-    IndexRateQuestionsPayload,
     RateQuestionList,
 } from '../../../gen/gqlClient'
 import type { QuestionRounds } from './QuestionResponseRound'
 import { QuestionResponseRound } from './QuestionResponseRound'
 import { NavLinkWithLogging, SectionHeader } from '../../../components'
 import styles from '../QuestionResponse.module.scss'
 import { useAuth } from '../../../contexts/AuthContext'
-
-type IndexQuestionType =
-    | IndexContractQuestionsPayload
-    | IndexRateQuestionsPayload
+import { IndexQuestionType } from '../QuestionResponseHelpers'
 
 type CMSQuestionResponseTableProps = {
     indexQuestions: IndexQuestionType

services/app-web/src/pages/QuestionResponse/QATable/QuestionResponseRound.tsx

@@ -1,7 +1,8 @@
 import { RateQuestion, ContractQuestion, User } from '../../../gen/gqlClient'
 import styles from './QATable.module.scss'
-import { LinkWithLogging } from '../../../components'
+import { LinkWithLogging, NavLinkWithLogging } from '../../../components'
 import { formatCalendarDate } from '../../../common-code/dateHelpers'
+import classNames from 'classnames'
 
 type QuestionType =
     | Omit<RateQuestion, 'rateID'>
@@ -61,10 +62,23 @@ export const QuestionResponseRound = ({
         return `${addedBy.givenName}`
     }
 
+    const classes = classNames('usa-button', {
+        'usa-button--outline': question.responses.length > 0,
+    })
+
     return (
-        <div>
+        <div data-testid="questionResponseRound">
             <div className={styles.tableHeader}>
                 <h4>{roundTitle}</h4>
+                {isStateUser && (
+                    <NavLinkWithLogging
+                        className={classes}
+                        variant="unstyled"
+                        to={`./${question.division.toLowerCase()}/${question.id}/upload-response`}
+                    >
+                        Upload response
+                    </NavLinkWithLogging>
+                )}
             </div>
             <table
                 className={`borderTopLinearGradient ${styles.qaDocumentTable}`}

services/app-web/src/pages/QuestionResponse/QATable/StateQuestionResponseTable.tsx

@@ -1,71 +1,107 @@
-import {
-    IndexContractQuestionsPayload,
-    IndexRateQuestionsPayload,
-} from '../../../gen/gqlClient'
+import { ContractQuestionList, RateQuestionList } from '../../../gen/gqlClient'
 import { SectionHeader } from '../../../components'
 import styles from '../QuestionResponse.module.scss'
 import { useAuth } from '../../../contexts/AuthContext'
-import { extractQuestions, QuestionData } from '../QuestionResponseHelpers'
-import { QATable } from './QATable'
-
-type Division = 'DMCO' |  'DMCP' | 'OACT'
-type IndexQuestionType =
-    | IndexContractQuestionsPayload
-    | IndexRateQuestionsPayload
+import { divisionFullNames } from '../QuestionResponseHelpers'
+import type { IndexQuestionType } from '../QuestionResponseHelpers'
+import { QuestionResponseRound, QuestionRounds } from './QuestionResponseRound'
 
 type StateQuestionResponseTableProps = {
     indexQuestions: IndexQuestionType
+    rateCertName?: string
 }
-type QuestionTableDataType = {
-    division: Division // eventually rip out division logic, replace with answered/unanswered
-    questions: QuestionData[]
-}
+
 export const StateQuestionResponseTable = ({
     indexQuestions,
+    rateCertName,
 }: StateQuestionResponseTableProps) => {
     const { loggedInUser } = useAuth()
-    const questions: QuestionTableDataType[] = []
-    const divisions: Division[] =   ['DMCO', 'DMCP', 'OACT']
-    divisions.forEach(
-        (division) =>
-            indexQuestions[`${division}Questions`].totalCount &&
-            questions.push({
-                division: division,
-                questions: extractQuestions(
-                    indexQuestions[`${division}Questions`].edges
-                ),
+    const answeredQuestions: QuestionRounds = []
+    const unansweredQuestions: QuestionRounds = []
+
+    // Bucket questions
+    Object.entries(indexQuestions).forEach(([key, value]) => {
+        if (key === '__typename') {
+            return
+        }
+        const questionsList: RateQuestionList | ContractQuestionList = value
+
+        // reverse questions to the earliest question first as rounds would be mismatched when looping through two arrays of different lengths
+        Array.from([...questionsList.edges])
+            .reverse()
+            .forEach(({ node }, index) => {
+                if (node.responses.length > 0) {
+                    if (!answeredQuestions[index]) {
+                        answeredQuestions[index] = []
+                    }
+                    answeredQuestions[index].push({
+                        roundTitle: `Asked by: ${divisionFullNames[node.division]}`,
+                        questionData: node,
+                    })
+                } else {
+                    if (!unansweredQuestions[index]) {
+                        unansweredQuestions[index] = []
+                    }
+                    unansweredQuestions[index].push({
+                        roundTitle: `Asked by: ${divisionFullNames[node.division]}`,
+                        questionData: node,
+                    })
+                }
             })
-    )
-const mapQASections = () =>
-    questions.map((divisionQuestions) => (
-        <section
-            key={divisionQuestions.division}
-            className={styles.questionSection}
-            data-testid={`${divisionQuestions.division.toLowerCase()}-qa-section`}
-        >
-            <h4>{`Asked by ${divisionQuestions.division}`}</h4>
-            {divisionQuestions.questions.map((question, index) => (
-                <QATable
-                    key={question.id}
-                    question={question}
-                    division={divisionQuestions.division}
-                    round={divisionQuestions.questions.length - index}
-                    user={loggedInUser!}
-                />
-            ))}
-        </section>
-    ))
+    })
 
     return (
         <>
-
+            <div className={styles.tableHeader}>
+                <SectionHeader
+                    header={`Rate questions: ${rateCertName}`}
+                    hideBorder
+                />
+            </div>
+            <section
+                className={styles.questionSection}
+                data-testid={'outstandingQuestions'}
+            >
+                <SectionHeader header="Outstanding questions" />
+                {unansweredQuestions.length ? (
+                    unansweredQuestions
+                        .reverse()
+                        .map((questionRound) =>
+                            questionRound.map(
+                                ({ roundTitle, questionData }) => (
+                                    <QuestionResponseRound
+                                        key={questionData.id}
+                                        question={questionData}
+                                        roundTitle={roundTitle}
+                                        currentUser={loggedInUser}
+                                    />
+                                )
+                            )
+                        )
+                ) : (
+                    <p>No questions have been submitted yet.</p>
+                )}
+            </section>
             <section
                 className={styles.questionSection}
-                data-testid={'questions'}
+                data-testid={'answeredQuestions'}
             >
-                <SectionHeader header="All questions" />
-                {questions.length ? (
-                  mapQASections()
+                <SectionHeader header="Answered questions" />
+                {answeredQuestions.length ? (
+                    answeredQuestions
+                        .reverse()
+                        .map((questionRound) =>
+                            questionRound.map(
+                                ({ roundTitle, questionData }) => (
+                                    <QuestionResponseRound
+                                        key={questionData.id}
+                                        question={questionData}
+                                        roundTitle={roundTitle}
+                                        currentUser={loggedInUser}
+                                    />
+                                )
+                            )
+                        )
                 ) : (
                     <p>No questions have been submitted yet.</p>
                 )}

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

@@ -11,6 +11,12 @@
     padding: 2rem 0;
 }
 
+.tableHeader {
+    h2 {
+        margin-bottom: 0;
+    }
+}
+
 %questionSection {
     margin: uswds.units(2) auto;
     background: custom.$mcr-foundation-white;
@@ -21,6 +27,7 @@
     @include uswds.u-radius('md');
 
     h2 {
+        margin: 0;
         font-weight: normal;
     }
 

services/app-web/src/pages/QuestionResponse/QuestionResponseHelpers/index.ts

@@ -1,2 +1,2 @@
-export { extractQuestions, getDivisionOrder, getUserDivision } from './questionResponseHelpers'
-export type { QuestionData, QuestionDocumentWithLink, DivisionQuestionDataType } from './questionResponseHelpers'
+export { extractQuestions, getDivisionOrder, getUserDivision, divisionFullNames } from './questionResponseHelpers'
+export type { QuestionData, QuestionDocumentWithLink, DivisionQuestionDataType, IndexQuestionType } from './questionResponseHelpers'

services/app-web/src/pages/QuestionResponse/QuestionResponseHelpers/questionResponseHelpers.ts

@@ -27,6 +27,16 @@ type QuestionDocumentWithLink = {
     url?: string | null
 }
 
+type IndexQuestionType =
+    | IndexContractQuestionsPayload
+    | IndexRateQuestionsPayload
+
+const divisionFullNames = {
+    DMCO: 'Division of Managed Care Operations (DMCO)',
+    DMCP: 'Division of Managed Care Policy (DMCP)',
+    OACT: 'Office of the Actuary (OACT)'
+}
+
 const extractQuestions = (edges?: (ContractQuestionEdge | RateQuestionEdge)[]): QuestionData[] => {
     if (!edges) {
         return []
@@ -63,10 +73,12 @@ export {
     extractQuestions,
     getUserDivision,
     getDivisionOrder,
+    divisionFullNames
 }
 
 export type {
     QuestionData,
     QuestionDocumentWithLink,
-    DivisionQuestionDataType
+    DivisionQuestionDataType,
+    IndexQuestionType
 }