[TTAHUB-3603] Monitoring goals for AR

docs/logical_data_model.puml

@@ -86,6 +86,15 @@ class ActivityReportGoals{
  timeframe : text
 }
 
+class ActivityReportObjectiveCitations{
+ * id : integer : <generated>
+ * activityReportObjectiveId : integer
+ * citation : text
+ * createdAt : timestamp with time zone : now()
+ * monitoringReferences : jsonb
+ * updatedAt : timestamp with time zone : now()
+}
+
 class ActivityReportObjectiveCourses{
  * id : integer : <generated>
  * activityReportObjectiveId : integer : REFERENCES "ActivityReportObjectives".id
@@ -403,6 +412,7 @@ class GoalTemplates{
  * updatedAt : timestamp with time zone
  lastUsed : timestamp with time zone
  source : varchar(255)
+ standard : text
 }
 
 class Goals{
@@ -541,6 +551,7 @@ class Imports{
  * updatedAt : timestamp with time zone
  fileMask : text
  path : text
+ postProcessingActions : jsonb
 }
 
 class MailerLogs{
@@ -1242,6 +1253,20 @@ class ZALActivityReportGoals{
  session_sig : text
 }
 
+class ZALActivityReportObjectiveCitations{
+ * id : bigint : <generated>
+ * data_id : bigint
+ * dml_as : bigint
+ * dml_by : bigint
+ * dml_timestamp : timestamp with time zone
+ * dml_txid : uuid
+ * dml_type : enum
+ descriptor_id : integer
+ new_row_data : jsonb
+ old_row_data : jsonb
+ session_sig : text
+}
+
 class ZALActivityReportObjectiveCourses{
  * id : bigint : <generated>
  * data_id : bigint
@@ -2483,6 +2508,7 @@ Grants "1" --[#black,plain,thickness=2]-- "1" GrantNumberLinks : grant, grantNum
 ActivityReportCollaborators "1" --[#black,dashed,thickness=2]--{  "n" CollaboratorRoles : collaboratorRoles, activityReportCollaborator
 ActivityReportGoals "1" --[#black,dashed,thickness=2]--{  "n" ActivityReportGoalFieldResponses : activityReportGoal, activityReportGoalFieldResponses
 ActivityReportGoals "1" --[#black,dashed,thickness=2]--{  "n" ActivityReportGoalResources : activityReportGoal, activityReportGoalResources
+ActivityReportObjectives "1" --[#black,dashed,thickness=2]--{  "n" ActivityReportObjectiveCitations : activityReportObjective, activityReportObjectiveCitations
 ActivityReportObjectives "1" --[#black,dashed,thickness=2]--{  "n" ActivityReportObjectiveCourses : activityReportObjective, activityReportObjectiveCourses
 ActivityReportObjectives "1" --[#black,dashed,thickness=2]--{  "n" ActivityReportObjectiveFiles : activityReportObjective, activityReportObjectiveFiles
 ActivityReportObjectives "1" --[#black,dashed,thickness=2]--{  "n" ActivityReportObjectiveResources : activityReportObjective, activityReportObjectiveResources
@@ -2560,7 +2586,7 @@ MonitoringReviewLinks "1" --[#black,dashed,thickness=2]--{  "n" MonitoringReview
 MonitoringReviewStatusLinks "1" --[#black,dashed,thickness=2]--{  "n" MonitoringReviewStatuses : monitoringReviewStatuses, statusLink
 MonitoringReviewStatusLinks "1" --[#black,dashed,thickness=2]--{  "n" MonitoringReviews : monitoringReviews, statusLink
 MonitoringStandardLinks "1" --[#black,dashed,thickness=2]--{  "n" MonitoringFindingStandards : statusLink, monitoringFindingStandards
-MonitoringStandardLinks "1" --[#black,dashed,thickness=2]--{  "n" MonitoringStandards : monitoringStandardes, statusLink
+MonitoringStandardLinks "1" --[#black,dashed,thickness=2]--{  "n" MonitoringStandards : monitoringStandards, statusLink
 NationalCenters "1" --[#black,dashed,thickness=2]--{  "n" EventReportPilotNationalCenterUsers : nationalCenter, eventReportPilotNationalCenterUsers
 NationalCenters "1" --[#black,dashed,thickness=2]--{  "n" NationalCenterUsers : nationalCenter, nationalCenterUsers
 NationalCenters "1" --[#black,dashed,thickness=2]--{  "n" NationalCenters : mapsToNationalCenter, mapsFromNationalCenters

frontend/src/components/CitationDrawerContent.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { uniqueId } from 'lodash';
+import { fetchCitationTextByName } from '../fetchers/citations';
+
+export default function CitationDrawerContent({ citations }) {
+  const [content, setContent] = useState([]); // { text: string, citation: string }[]
+
+  useEffect(() => {
+    async function fetchCitations() {
+      try {
+        const response = await fetchCitationTextByName(citations);
+        setContent(response);
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+      }
+    }
+
+    fetchCitations();
+  }, [citations]);
+
+  return (
+    <div>
+      {content.map((standard) => (
+        <div key={uniqueId('citation-drawer-content-citation-')} className="margin-bottom-3">
+          <p className="text-bold usa-prose margin-0">{standard.citation}</p>
+          <p className="usa-prose margin-0">{standard.text}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+CitationDrawerContent.propTypes = {
+  citations: PropTypes.arrayOf(PropTypes.string).isRequired,
+};

frontend/src/components/GoalCards/EnteredBy.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Tooltip from '../Tooltip';
+
+const EnteredBy = ({
+  goalNumber, creatorRole, creatorName, moreThanOne,
+}) => (
+  <>
+    <p key={goalNumber} className="usa-prose margin-top-0 margin-bottom-1 bg-base-lightest radius-md padding-x-1 display-inline-flex flex-align-center flex-justify-between text-decoration-underline">
+      {moreThanOne && (
+      <>
+        <strong className="margin-right-1 text-no-wrap">{goalNumber}</strong>
+        {' '}
+      </>
+      )}
+      <Tooltip
+        displayText={creatorRole}
+        screenReadDisplayText={false}
+        buttonLabel={`reveal the full name of the creator of this goal: ${goalNumber}`}
+        tooltipText={creatorName}
+        underlineStyle="solid"
+        className="ttahub-goal-card__entered-by-tooltip"
+      />
+    </p>
+  </>
+);
+
+EnteredBy.propTypes = {
+  goalNumber: PropTypes.string.isRequired,
+  creatorRole: PropTypes.string.isRequired,
+  creatorName: PropTypes.string.isRequired,
+  moreThanOne: PropTypes.bool.isRequired,
+};
+
+export default EnteredBy;

frontend/src/components/GoalCards/GoalCard.js

@@ -35,13 +35,15 @@ export const ObjectiveSwitch = ({
   regionId,
   goalStatus,
   dispatchStatusChange,
+  isMonitoringGoal,
 }) => (
   <ObjectiveCard
     objective={objective}
     objectivesExpanded={objectivesExpanded}
     goalStatus={goalStatus}
     regionId={regionId}
     dispatchStatusChange={dispatchStatusChange}
+    isMonitoringGoal={isMonitoringGoal}
   />
 );
 
@@ -54,6 +56,7 @@ ObjectiveSwitch.propTypes = {
   regionId: PropTypes.number.isRequired,
   goalStatus: PropTypes.string.isRequired,
   dispatchStatusChange: PropTypes.func.isRequired,
+  isMonitoringGoal: PropTypes.bool.isRequired,
 };
 
 export default function GoalCard({
@@ -86,6 +89,14 @@ export default function GoalCard({
     isReopenedGoal,
   } = goal;
 
+  // Check for monitoring goal.
+  const reasonsToMonitor = [...reasons];
+  let isMonitoringGoal = false;
+  if (goal.createdVia === 'monitoring') {
+    reasonsToMonitor.push('Monitoring Goal');
+    isMonitoringGoal = true;
+  }
+
   const { user } = useContext(UserContext);
   const { setIsAppLoading } = useContext(AppLoadingContext);
   const [invalidStatusChangeAttempted, setInvalidStatusChangeAttempted] = useState();
@@ -206,6 +217,27 @@ export default function GoalCard({
     return responses.map((r) => r).join(', ');
   };
 
+  const renderEnteredBy = () => {
+    if (isMonitoringGoal) {
+      return (
+        <SpecialistTags
+          specialists={[{
+            name: 'System-generated',
+            roles: ['OHS'],
+          }]}
+        />
+      );
+    }
+    return (
+      <SpecialistTags
+        specialists={collaborators.filter((c) => c.goalCreatorName).map((c) => ({
+          name: c.goalCreatorName,
+          roles: [c.goalCreatorRoles].flat(),
+        }))}
+      />
+    );
+  };
+
   return (
     <DataCard
       testId="goalCard"
@@ -265,7 +297,7 @@ export default function GoalCard({
             {goalText}
             {' '}
             <FlagStatus
-              reasons={reasons}
+              reasons={reasonsToMonitor}
               goalNumbers={goalNumbers}
             />
           </p>
@@ -298,12 +330,9 @@ export default function GoalCard({
         </div>
         <div className="ttahub-goal-card__goal-column ttahub-goal-card__goal-column__entered-by padding-right-3">
           <p className="usa-prose text-bold margin-y-0">Entered by</p>
-          <SpecialistTags
-            specialists={collaborators.filter((c) => c.goalCreatorName).map((c) => ({
-              name: c.goalCreatorName,
-              roles: [c.goalCreatorRoles].flat(),
-            }))}
-          />
+          {
+            renderEnteredBy()
+          }
         </div>
       </div>
 
@@ -324,6 +353,7 @@ export default function GoalCard({
           goalStatus={goalStatus}
           regionId={parseInt(regionId, DECIMAL_BASE)}
           dispatchStatusChange={dispatchStatusChange}
+          isMonitoringGoal={isMonitoringGoal}
         />
       ))}
     </DataCard>

frontend/src/components/GoalCards/GoalCard.scss

@@ -57,7 +57,6 @@ $max-width-date-column: 50%;
 @media(min-width: 1475px) {
 
   .ttahub-goal-card__goal-column__goal-source p {
-    white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     max-width: 220px;

frontend/src/components/GoalCards/ObjectiveCard.css

@@ -5,5 +5,5 @@
  it was wrapping at minw-15) 
 **/
 .ttahub-goal-card__objective-list li span:first-child {
-    min-width: 130px;
+    min-width: 140px;
 }

frontend/src/components/GoalCards/ObjectiveCard.js

@@ -20,6 +20,7 @@ function ObjectiveCard({
   regionId,
   dispatchStatusChange,
   forceReadOnly,
+  isMonitoringGoal,
 }) {
   const {
     title,
@@ -31,6 +32,7 @@ function ObjectiveCard({
     activityReports,
     supportType,
     ids,
+    citations,
   } = objective;
   const modalRef = useRef(null);
   const [localStatus, setLocalStatus] = useState(status || 'Not Started');
@@ -106,6 +108,14 @@ function ObjectiveCard({
         <span className="margin-right-3 desktop:text-normal text-bold">Objective </span>
         <div>{title}</div>
       </li>
+      {
+        isMonitoringGoal && (
+          <li className="desktop:display-flex padding-bottom-05 flex-align-start">
+            <span className="margin-right-3 desktop:text-normal text-bold">Citations addressed </span>
+            <div>{citations.join(', ')}</div>
+          </li>
+        )
+      }
       <li className="desktop:display-flex padding-bottom-05 flex-align-start">
         <span className="margin-right-3 desktop:text-normal text-bold">Activity reports </span>
         <ul className="usa-list usa-list--unstyled">
@@ -205,6 +215,7 @@ export const objectivePropTypes = PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
   })),
+  citations: PropTypes.arrayOf(PropTypes.string),
   supportType: PropTypes.string,
   ids: PropTypes.arrayOf(PropTypes.number).isRequired,
 });
@@ -221,6 +232,7 @@ objectivePropTypes.defaultProps = {
 ObjectiveCard.propTypes = {
   objective: objectivePropTypes.isRequired,
   objectivesExpanded: PropTypes.bool.isRequired,
+  isMonitoringGoal: PropTypes.bool,
   goalStatus: PropTypes.string,
   regionId: PropTypes.number.isRequired,
   dispatchStatusChange: PropTypes.func,
@@ -231,6 +243,7 @@ ObjectiveCard.defaultProps = {
   dispatchStatusChange: () => {},
   goalStatus: null,
   forceReadOnly: false,
+  isMonitoringGoal: false,
 };
 
 export default ObjectiveCard;

frontend/src/components/GoalCards/__tests__/GoalCard.js

@@ -42,6 +42,7 @@ describe('GoalCard', () => {
         activityReports: [],
         grantNumbers: ['G-1'],
         topics: [],
+        citations: [],
       },
       {
         id: 2,
@@ -55,6 +56,7 @@ describe('GoalCard', () => {
         activityReports: [],
         grantNumbers: ['G-1'],
         topics: [],
+        citations: [],
       },
     ],
     previousStatus: null,
@@ -127,6 +129,20 @@ describe('GoalCard', () => {
     expect(objectives.length).toBe(2);
   });
 
+  it('shows the monitoring flag when the goal creatdVia is monitoring', () => {
+    renderGoalCard({ }, { ...goal, createdVia: 'monitoring' });
+    const monitoringToolTip = screen.getByRole('button', {
+      name: /reason for flag on goal g-1 is monitoring\. click button to visually reveal this information\./i,
+    });
+    expect(monitoringToolTip).toBeInTheDocument();
+  });
+
+  it('shows entered by as OHS when the goal createdVia is monitoring', () => {
+    renderGoalCard({ }, { ...goal, createdVia: 'monitoring' });
+    expect(screen.getByText(/entered by/i)).toBeInTheDocument();
+    expect(screen.getByText(/OHS/i)).toBeInTheDocument();
+  });
+
   it('shows goal source', () => {
     renderGoalCard();
 
@@ -396,6 +412,7 @@ describe('GoalCard', () => {
           activityReports: [],
           grantNumbers: ['G-1'],
           topics: [],
+          citations: [],
         },
         {
           id: 2,
@@ -408,6 +425,7 @@ describe('GoalCard', () => {
           activityReports: [],
           grantNumbers: ['G-2'],
           topics: [],
+          citations: [],
         },
       ],
     };
@@ -445,6 +463,7 @@ describe('GoalCard', () => {
           activityReports: [],
           grantNumbers: ['G-1'],
           topics: [],
+          citations: [],
           ids: [1],
         },
         {
@@ -459,6 +478,7 @@ describe('GoalCard', () => {
           activityReports: [],
           grantNumbers: ['G-2'],
           topics: [],
+          citations: [],
         },
       ],
     };
@@ -495,6 +515,7 @@ describe('GoalCard', () => {
           activityReports: [],
           grantNumbers: ['G-1'],
           topics: [],
+          citations: [],
           ids: [1],
         },
         {
@@ -509,6 +530,7 @@ describe('GoalCard', () => {
           activityReports: [],
           grantNumbers: ['G-2'],
           topics: [],
+          citations: [],
         },
       ],
     };