Merge pull request #603 from HHS/main

Excellent!

docs/boundary_diagram.md

@@ -1,7 +1,7 @@
 System Boundary Diagram
 =======================
 
-![rendered boundary diagram](http://www.plantuml.com/plantuml/png/dLPHRnit37xFh-3oKAH04sDfNpOCGvtOJJCagvjpsvS2WQoZRIqwIHKfkyRG_pvHELzySJCKVKYiayIF7qNoaruJgyYfiGU_6ATjgX6Mp85-7moYMfyi32_JB156xHsZunFjcu6ger5kPLD8W_DNnnEh77-ulXfOnKYSfsxFlMDb7CQJ8DXis29CfqEe6XKPtgOPp7nojOeRM1bS7qmmadT7eVmuj2_Wy67h1y9uc6U63j3Lnq87_1nu-GZpyFaMfyOLMf_HUZYZxUnXRtgLGNs4peP0kHekfjSPxwnbUQJM90m-LN3XL-VMf_hmEVnx0D3jq3AvyAkyhGnFyhZT0r1jYB6v7NzbGRfLThQx3QnNzV5CMULqOLSS3Q_ECeE-TUVbLWNJWnXEBlzdT_I9osdyySog3KRw4nvCxnT9_9R8u8t453V0KStdHWDXN1cDBVx3cR2V2LUj8zQ65HllkjKkT82k6exMwtKc7dey-cNn2MSm3C4QNU24qz--nh-g5p3-6Y9IJiCDAisoCZ8KCinzmhIt5ZLJ0QmLgnEuJfPDi0Z64SlP4iJad76B7CeUDn_lCBRq7f4gIq_nEalMolS4uzp71cPAtosY70C8PY4dV214hv7e--wrLOsIudbZB09fLNYMj9Qyg6RuKKQNZZ4wPK4zi87izy6az4SAKbEqxsWqArcePyBO4oyYLk-lOAHOpHJXjlXkHfKCMpE2jl_RatPpiqYnyztFuPC-wMKBNhs4MT9to8VTH6b9zX49I2f9mrpEGH4XFns5r9tqvOtyxiKmjeeoajBBClK-OKBmyzq4_UDd1Epl4-LTw-ZRWVnzExZlfAEtrRZAzl9JQ1gti0YLMJXuvpwxwpT3M1a5KzFWyPaYhALIm4UON7u4hMBzEU-gV8gwkB-8oZ5YeRihCGjIjwGKIGrWVJEydXoh4A9VPS1AgQfqLA-z7QuZMgEb674DDpBUPisuv1F1jNU6VImrboFAMtR5SGVWMZcrG0ZtHIpD0i_0-iKYcmfckHRWOZmTJDvL-T-7wM0qlXfFnt3qwjNBvnbTiDi6xo5733uo0QF51Zbk18vrw1dkAF-3G3Q5KzVGFqR3UKQ8Ph5ay0wiSNS7Gsj12xgMYYMeCHZDM8EA2EXqt0JvMXjUmlIgWbzFJY4vYqJWUObnRGX1SEkJ0tHr6GhhhgftxwtQhvtqNbl0p4el6tHCFVgzuBk8z_KwHF_LY6xXbuJ4zEEfsCFgSlFpe3sHx1HBb8TAk3j8WW97lprXsxPKH8u6LzZrn5wQzwjhnrmbNgAJ5cUaedjY-swOfq_twwerMc4qymsOMYnvinzxv_BCz9nsiXbHrJHOHoDUXJ4XGqJjOqq25-YBxSoxg7yMeKz0gctVV2lFOhiA6j3LmHl7-on-5cQFo5PwqNqHNIMHKWWggWQtZucovIaA7K2DtmM0Pv129jLU2Ac7s6bcgsNINrljFBySd8zWOW9Qut1VDCkRLf9mOLXkAr7sjzMnX1wzjIZtMuqWgaM6lRna-W3QH6rH6_5LXkUNZqHNxkX5UprMtTjfJtqx9fCqiuQMnR50vGMW_7rqUjgMViTwrxbl6iEmzFvE5CdCfQMtZ80znEJW_ZH2Tne5x07aqNDoXC7wJUzfuHrGqXg9vicsS1au8rsfpUteaN3VpzwqLsQPU8skJetz3m00)
+![rendered boundary diagram](http://www.plantuml.com/plantuml/svg/dLP1Rnkz4RtxLqnz26JWiuKwkRGeYiYMuhYm6yMh99S01iKThLXpoGrdA4Kjyj_BeLPhhHH_27AmnIKvRzvmPXxvbbW5ZhKz-OjnsiOIOSdSqD-7mw3M5vNXPPn7mg2zOtHyeNqzL6KmogriREBm-itvr2h7d-xlXbOn4gUfnsllM1c7uQ8HR3Pi4MQp4HIr2WplunpcFhfIXGsi3AvFfXZ8kq6JVnpQF-3qUUidmd2QPaOEq9NdGWVy0dXvW7bwjiCfSONM9xGUpdWtUzgRNYLG7w2p8L2kX9lPVSAxQbaEr9g4mPS2RlpgslfOdfx1_qwWYtI0jJBsaJ2iijjHhVxh7HIcRYp2H1QXo8imA2R5cN2OBOEFrH9c8HB9X8GZbFBkBLGY0T3HqEAvygkqDmylqdXB102A3J7MZvFlB7GVbPtlRmFhLNa-LrOvdM3RQ4PtL-AXPzrvULIDwK6CfhT_iZluo3dsVxooQeE1_WdFfjl576K-FdWdCOKDS52BXT4vNAEnnNy-UFPpuQfrmDAmOkDTjzg53dk9MA_NYNZJuz6llIyuXr7JMACpd73wjo_nNyKVCFdU1AIKwmTKccLbRAX9CDkgqDvQr4mPi5IiBk0-MZQIO-E8vMm9GdJEk4f2EUJcmnE6bju1gRpq4g-hQAryJp4iVAXXhlHJ5UGOG325NEO3JV0QYNxkNbjLAocUTyOYa5QPPqvhpekgHvzbTEiOWrCMr3CRI7wVJN8JnaPgYeuTZUSv2-LS67lYAc3nyGx6YjLS4UwAxs5SoB0r8sX5fZrfjp1L39tlVWvVz4clM_3YDSoZVa8-xIPotxCFI41IIHeMSWwA2FdbAAJkfFaVvFSeXebLb92KNkQfZn4ZWb_i9-W_Vax0Vfiexrf7FqxaxyV9jfC6xvCe97lvoJIDgon2OIe77znNT_zk12kZO6PgFBzIXALK2lW0qzlFe5KelwPTXOz1P_StGJb6p7JtTQmYzKXAaTG0bW-Z--cvQfhWLmcmKAh87TLhRuVhWDPeAKPSmuECTrapBlf8SE-TOHzopQM8qfPz1Tu3k5TELGZDjeYbMU0LM5zLoLGmyzq3DvFPSFgXIFy-pORZoTraDe71cpUlpnAwOBSDtaCEsFZ018mMQ-Im4JZMJSzmxtfv5iWwS-eQ-jTeECy8mLHB1k_06lTqCh8MjA1hgLY24XkZ6KjG0G6T3fj6ljQ6a-3V5V3NYqk8pY8HU5vYM1j24DpouWHTcOV2kglg_Sknz6idlTSMCBFIoneTKuz-B_WkucEzReB_RaIty5j4OlhrL1nXTRdvVT2UI7QA9Sf3ETmz9461mTzUi6rRAY07WoliUk8epOVLrJDNaPVefCKPAUkUs7uOfUdBmxhgZ5OOp683fXHBtXp7thcyCZsddMm6L2KDry68Ls5Co11G-r2Im3NqpNRcNTI_Yz0d8DLsRBwJPx5TDHhGbOqtZWzP_3xC8P5EUj5z4rqbaL9eL50rxXuJUSi1XME04dyA0AyWDebKUo747cAdcQsMIN_jjFFwTdWzXgbfq1g7nwAP7ywIX1l3Sbk9ihylpYNquAr5kTzA154jCkpb9TC7q2PeYzg8hpoylZqGNRcZg_PwBBgtqv7wTaocSMuDBRDZWKeBGEbxS7dPbdx7Uj-vhsl3iFJ-IHJ9BAIbTuo0FOJeO7iQJNSQ6UmPvE0vESR6-atlQU4TKDGQYHRHRk44-B0a3fxO1Rgo1vC9jX_K6lTjkaxz5VCxjNaS7rmQszc7V5st4syJJgpj_m40)
 
 UML Source
 ----------
@@ -26,6 +26,7 @@ Boundary(aws, "AWS GovCloud") {
       ContainerDb(www_redis, "Redis Database", "AWS Elasticache", "Queue of background jobs to work on")
     }
   }
+ Container(email_server, "Amazon Simple Email Server (SES)", "Through Truss", "TTA Hub mail server")
 }
 System(HSES, "HSES", "Single Sign On\nMFA via Time-Based App or PIV card\n\nSource of Grantee Data")
 Boundary(gsa_saas, "FedRAMP-approved SaaS") {
@@ -57,6 +58,8 @@ Boundary(development_saas, "CI/CD Pipeline") {
 Rel(developer, github, "Publish code", "git ssh (22)")
 Rel(github, circleci, "Commit hook notifies CircleCI to run CI/CD pipeline")
 Rel(circleci, cloudgov_api, "Deploy application on successful CI/CD run")
+Rel(www_app, email_server, "Send application notifications")
+Rel(email_server, personnel, "Send application notifications")
 Lay_D(personnel, aws)
 Lay_R(HSES, aws)
 @enduml
@@ -65,7 +68,7 @@ Lay_R(HSES, aws)
 Instructions
 ------------
 
-1. [Edit this diagram with plantuml.com](http://www.plantuml.com/plantuml/uml/dLPHRnit37xFh-3oKAH04sDfNpOCGvtOJJCagvjpsvS2WQoZRIqwIHKfkyRG_pvHELzySJCKVKYiayIF7qNoaruJgyYfiGU_6ATjgX6Mp85-7moYMfyi32_JB156xHsZunFjcu6ger5kPLD8W_DNnnEh77-ulXfOnKYSfsxFlMDb7CQJ8DXis29CfqEe6XKPtgOPp7nojOeRM1bS7qmmadT7eVmuj2_Wy67h1y9uc6U63j3Lnq87_1nu-GZpyFaMfyOLMf_HUZYZxUnXRtgLGNs4peP0kHekfjSPxwnbUQJM90m-LN3XL-VMf_hmEVnx0D3jq3AvyAkyhGnFyhZT0r1jYB6v7NzbGRfLThQx3QnNzV5CMULqOLSS3Q_ECeE-TUVbLWNJWnXEBlzdT_I9osdyySog3KRw4nvCxnT9_9R8u8t453V0KStdHWDXN1cDBVx3cR2V2LUj8zQ65HllkjKkT82k6exMwtKc7dey-cNn2MSm3C4QNU24qz--nh-g5p3-6Y9IJiCDAisoCZ8KCinzmhIt5ZLJ0QmLgnEuJfPDi0Z64SlP4iJad76B7CeUDn_lCBRq7f4gIq_nEalMolS4uzp71cPAtosY70C8PY4dV214hv7e--wrLOsIudbZB09fLNYMj9Qyg6RuKKQNZZ4wPK4zi87izy6az4SAKbEqxsWqArcePyBO4oyYLk-lOAHOpHJXjlXkHfKCMpE2jl_RatPpiqYnyztFuPC-wMKBNhs4MT9to8VTH6b9zX49I2f9mrpEGH4XFns5r9tqvOtyxiKmjeeoajBBClK-OKBmyzq4_UDd1Epl4-LTw-ZRWVnzExZlfAEtrRZAzl9JQ1gti0YLMJXuvpwxwpT3M1a5KzFWyPaYhALIm4UON7u4hMBzEU-gV8gwkB-8oZ5YeRihCGjIjwGKIGrWVJEydXoh4A9VPS1AgQfqLA-z7QuZMgEb674DDpBUPisuv1F1jNU6VImrboFAMtR5SGVWMZcrG0ZtHIpD0i_0-iKYcmfckHRWOZmTJDvL-T-7wM0qlXfFnt3qwjNBvnbTiDi6xo5733uo0QF51Zbk18vrw1dkAF-3G3Q5KzVGFqR3UKQ8Ph5ay0wiSNS7Gsj12xgMYYMeCHZDM8EA2EXqt0JvMXjUmlIgWbzFJY4vYqJWUObnRGX1SEkJ0tHr6GhhhgftxwtQhvtqNbl0p4el6tHCFVgzuBk8z_KwHF_LY6xXbuJ4zEEfsCFgSlFpe3sHx1HBb8TAk3j8WW97lprXsxPKH8u6LzZrn5wQzwjhnrmbNgAJ5cUaedjY-swOfq_twwerMc4qymsOMYnvinzxv_BCz9nsiXbHrJHOHoDUXJ4XGqJjOqq25-YBxSoxg7yMeKz0gctVV2lFOhiA6j3LmHl7-on-5cQFo5PwqNqHNIMHKWWggWQtZucovIaA7K2DtmM0Pv129jLU2Ac7s6bcgsNINrljFBySd8zWOW9Qut1VDCkRLf9mOLXkAr7sjzMnX1wzjIZtMuqWgaM6lRna-W3QH6rH6_5LXkUNZqHNxkX5UprMtTjfJtqx9fCqiuQMnR50vGMW_7rqUjgMViTwrxbl6iEmzFvE5CdCfQMtZ80znEJW_ZH2Tne5x07aqNDoXC7wJUzfuHrGqXg9vicsS1au8rsfpUteaN3VpzwqLsQPU8skJetz3m00)
+1. [Edit this diagram with plantuml.com](http://www.plantuml.com/plantuml/umla/dLRVRnk_3N_FNy7beN20Rs8ixSk6OQWJksc6P7LpRljI891rz5cBJhgAb5rlwFy-KJvVV7RpHL6WZNKI-U67uW_gBR4A76jxyXVZj8qbmfAveRyFXq6jBoh3opYFX45xn-ZuGljwgCfWb5lPsCJXzPlpgLMEFztV3QrY94vRZzT9MXc7uQ8HR3Pi4MQp4HIr2WplunpcFhfIXGsi3AvFfXZ8kq6JVnpQF-3qMVGJOJXDEoC7wCfpeGD-0Rmym3mzs-6Kk4Bh4reFPxpRFUrjhnAe3z3f42XNmitiFk5TjIm7Qat2u4i1DtvrRNqiJy_WVoS0dOIMpSglabXUNgHrAmDGR8YnVfnyPq5wL7Q-BmRMg_9yhgnoEhFBXaPtLub1NxkpygWQquCOJM__H3huoFas_l7AgWq6-YSygsuFIUncp-2T-1Gsm44j5aO3OLWPZIt-yvsmdmjNhGEMXXKRxxhJpdM0BXi6w_Kw4MzwFFffyGNdC6eQQtI64qx_zYN-g_W39j-RW9J2y81AivoC3JK9PXimxQr5pPG1IyNg0kwZPTDO1EE8vMu9GdJEk4fSEUJcmnE6bju1gNpq4g-hQAryJp4iVAXXhlHJ5UGQG30pEU43JV0QYNvkNbjLAqcUTyOYa5QPPmvhZekgHvzbTUiOWrCMr3CRI7QVLN9zn4PoYeuDZUSv2kLS67lYAc3nyGx6YjLS4UwIxs5SoB9L8sZhlxrfjp1L39tjVWnVj4clM_3YDSoZVa8-xJPoIR8FI42IIHeMSW-A2FbbBoJlf2uVvFV8XubLb92KNkQjZn4ZWb_i1-W_Vax0VXiexrf3Fqxa_rvmi5R6FaePO13mMltNEoXCBSaraKCeyY4CYabn9jPcosIXMi8iHABJDgKacRBq5YgP-t6oBTV1-wIOfEGdtuLnbSLaedBmmNrrz-z6i38APgR6yoj5M4ewWWymlVqCMeNoQv8gV0mw-tWJb6F4V2VxVQmYzKXAaIGQbW-Z--cvQfhWLmcmKAh8PTlh8GxN0QtHal6uXWTPxrB3kEWZmRrtXdr8bBD7IMI_0-y1t2kdAeHcMobIaV0AhA-gf2gOUVR0pMGsd7ueqfzFi-5uSZUPJM3mvithiuGks6qNwI47R7nW0aQBDNBO21phfgUuDrwUkt2TENLTuzTeECy8mLHB1k_06lTqCh8MjA1hAGk24XkZ6KjG0G6T3fj6ljQ6KrBS5V3NYqk8pY8HU5vYM1j24DpouWHTcPV2kYkT_U5O-hMJ0c-hX3abUOsEgKU_vtpdyV5GQ8B_RgGvuhU8nFJheJZ2wcBp-w2zJjorHMblbDtTGn8K6Fpj1Tssf09oCBZ2hYQEmdoONJrr5Nc9Jle88q5ito8VHcdxyZYlMgKL1hFOW2b5apV7ldSchqpFQDUR0wgIXkjWnAem9cG8g7qeIU0Q-cOxzSxhtqNe4v1iErRVpG3HNJKQq9MDDuwFMVmkp26Hhh-ZIpaKaQHVGwE2gd7tOiaYXnIE04hyAG2yWjWaKktKYJt4hcUslKpgQzSxhs-7rsEOcWQjSNZSDBSFvoHuOrX6edJszyMvk1wyjIX3j4IGhaM6lJoN-W3Q16rH6x6LbzUt1qrN7W9LEuEBxe5sr7qx9jCujuQMsR10fGEWz3sul6nJlsEzRzpNjM5OUlya7SaifAHtZ80zXEXWUnjDTniPx1dauCqwniRwJU_zalvHr1g95j6sS0duC2KEnd21hkp1P8Bj1xNAVPskKdz5_Kvj7iS7GsEx-z2EwxpnDk74sluV)
 1. Copy and paste the final UML into the UML Source section
 1. Update the img src and edit link target to the current values
 

docs/openapi/paths/index.yaml

@@ -48,8 +48,6 @@
   $ref: './files.yaml'
 '/grantee/{granteeId}':
   $ref: './grantee/grantee-id.yaml'
-'/widgets/dashboardOverview':
-  $ref: './widgets/dashboardOverview.yaml'
 '/widgets/overview':
   $ref: './widgets/overview.yaml'
 '/widgets/reasonList':

frontend/src/components/MultiSelect.js

@@ -20,13 +20,13 @@
   through to react-select. If the selected value is not in the options prop the multiselect box will
   display an empty tag.
 */
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Select, { components } from 'react-select';
 import Creatable from 'react-select/creatable';
 import { Controller } from 'react-hook-form/dist/index.ie11';
 import _ from 'lodash';
-
+import { v4 as uuidv4 } from 'uuid';
 import arrowBoth from '../images/arrow-both.svg';
 
 export const DropdownIndicator = (props) => (
@@ -57,6 +57,21 @@ function MultiSelect({
   onCreateOption,
   components: componentReplacements,
 }) {
+  const inputId = `select-${uuidv4()}`;
+
+  useEffect(() => {
+    /**
+     * unfortunately, given our support for ie11, we can't
+     * upgrade to react-select v5, which support a spellcheck
+     * attribute. Here is an awkward solution I've concocted
+     * in it's stead.
+     */
+    const input = document.querySelector(`#${inputId}`);
+    if (input) {
+      input.setAttribute('spellcheck', 'true');
+    }
+  });
+
   const styles = {
     container: (provided, state) => {
       // To match the focus indicator provided by uswds
@@ -142,42 +157,14 @@ function MultiSelect({
     }
   };
 
+  const Selector = canCreate ? Creatable : Select;
+
   return (
     <Controller
       render={({ onChange: controllerOnChange, value }) => {
         const values = value ? getValues(value) : value;
-        if (canCreate) {
-          return (
-            <Creatable
-              className="margin-top-1"
-              id={name}
-              value={values}
-              onChange={(event) => {
-                if (onItemSelected) {
-                  onItemSelected(event);
-                } else if (event) {
-                  onChange(event, controllerOnChange);
-                } else {
-                  controllerOnChange([]);
-                }
-              }}
-              styles={styles}
-              components={{ ...componentReplacements, DropdownIndicator }}
-              options={options}
-              isDisabled={disabled}
-              tabSelectsValue={false}
-              isClearable={multiSelectOptions.isClearable}
-              closeMenuOnSelect={multiSelectOptions.closeMenuOnSelect || false}
-              controlShouldRenderValue={multiSelectOptions.controlShouldRenderValue}
-              hideSelectedOptions={multiSelectOptions.hideSelectedOptions}
-              placeholder=""
-              onCreateOption={onCreateOption}
-              isMulti
-            />
-          );
-        }
         return (
-          <Select
+          <Selector
             className="margin-top-1"
             id={name}
             value={values}
@@ -190,6 +177,7 @@ function MultiSelect({
                 controllerOnChange([]);
               }
             }}
+            inputId={inputId}
             styles={styles}
             components={{ ...componentReplacements, DropdownIndicator }}
             options={options}
@@ -200,6 +188,7 @@ function MultiSelect({
             controlShouldRenderValue={multiSelectOptions.controlShouldRenderValue}
             hideSelectedOptions={multiSelectOptions.hideSelectedOptions}
             placeholder=""
+            onCreateOption={onCreateOption}
             isMulti
           />
         );

frontend/src/pages/ActivityReport/Pages/components/Objective.css

@@ -1,8 +1,13 @@
 .smart-hub--objective {
   background-color: #f8f8f8;
+  max-width: 470px;
   padding: 22px;
 }
 
+.smart-hub--objective-title {
+  overflow-wrap: break-word;
+}
+
 .smart-hub--objective-tag {
   text-transform: none;
   background-color: #e2eff7;

frontend/src/pages/ActivityReport/Pages/components/Objective.js

@@ -103,6 +103,7 @@ const Objective = ({
               onChange={onChange}
               inputRef={firstInput}
               value={title}
+              spellcheck="true"
             />
           </ObjectiveFormItem>
           <ObjectiveFormItem
@@ -164,7 +165,7 @@ const Objective = ({
               />
             </div>
           </div>
-          <p className="margin-top-0">
+          <p className="smart-hub--objective-title margin-top-0">
             <span className="text-bold">Objective: </span>
             {title}
           </p>

frontend/src/pages/ActivityReport/Pages/goalsObjectives.js

@@ -60,7 +60,7 @@ const GoalsObjectives = () => {
         )}
       <Fieldset className="smart-hub--report-legend margin-top-4" legend="Context">
         <Label htmlFor="context">OPTIONAL: Provide background or context for this activity</Label>
-        <div className="margin-top-1">
+        <div className="smart-hub--text-area__resize-vertical margin-top-1">
           <HookFormRichEditor ariaLabel="Context" name="context" id="context" />
         </div>
       </Fieldset>

frontend/src/pages/ActivityReport/Pages/nextSteps.js

@@ -32,7 +32,7 @@ const NoteEntry = ({
       name={name}
       label={label}
     >
-      <TextInput name={name} onChange={onUpdate} data-testid={`${name}-input`} defaultValue={input} />
+      <TextInput name={name} onChange={onUpdate} data-testid={`${name}-input`} defaultValue={input} spellcheck="true" />
       <Button outline disabled={!(input && input.trim())} onClick={onSubmit} data-testid={`${name}-button`} type="button">Save Next Step</Button>
       {!isRequired && <Button secondary onClick={onCancel} type="button" data-testid={`${name}-cancel-button`}>Cancel</Button>}
     </FormItem>

frontend/src/pages/ActivityReport/__tests__/index.js

@@ -175,6 +175,12 @@ describe('ActivityReport', () => {
       });
     });
 
+    it('displays the creator name', async () => {
+      fetchMock.get('/api/activity-reports/1', formData());
+      renderActivityReport(1);
+      expect(await screen.findByText(/creator:/i)).toBeVisible();
+    });
+
     it('calls "report update"', async () => {
       fetchMock.get('/api/activity-reports/1', formData());
       fetchMock.put('/api/activity-reports/1', {});

frontend/src/pages/ActivityReport/index.css

@@ -83,4 +83,8 @@
 
 .smart-hub--text-area__resize-vertical {
   resize: vertical;
+}
+
+.smart-hub--text-area__resize-vertical .rdw-editor-main {
+  resize: vertical;
 }

frontend/src/pages/ActivityReport/index.js

@@ -293,16 +293,31 @@ function ActivityReport({
   const reportCreator = { name: user.name, role: user.role };
   const tagClass = formData.calculatedStatus === REPORT_STATUSES.APPROVED ? 'smart-hub--tag-approved' : '';
 
+  const author = formData.author ? (
+    <>
+      <hr />
+      <p>
+        <strong>Creator:</strong>
+        {' '}
+        {formData.author.fullName}
+      </p>
+
+    </>
+  ) : null;
+
   return (
     <div className="smart-hub-activity-report">
       <Helmet titleTemplate="%s - Activity Report - TTA Hub" defaultTitle="TTA Hub - Activity Report" />
       <Grid row className="flex-justify">
         <Grid col="auto">
-          <h1 className="font-serif-2xl text-bold line-height-serif-2 margin-top-3 margin-bottom-5">
-            Activity report for Region
-            {' '}
-            {formData.regionId}
-          </h1>
+          <div className="margin-top-3 margin-bottom-5">
+            <h1 className="font-serif-2xl text-bold line-height-serif-2 margin-0">
+              Activity report for Region
+              {' '}
+              {formData.regionId}
+            </h1>
+            {author}
+          </div>
         </Grid>
         <Grid col="auto" className="flex-align-self-center">
           {formData.calculatedStatus && (

frontend/src/pages/GranteeRecord/__tests__/index.js

@@ -84,8 +84,8 @@ describe('grantee record page', () => {
 
   beforeEach(() => {
     fetchMock.get('/api/user', user);
-    fetchMock.get('/api/widgets/dashboardOverview', overview);
-    fetchMock.get('/api/widgets/dashboardOverview?region.in[]=45&granteeId.in[]=1', overview);
+    fetchMock.get('/api/widgets/overview', overview);
+    fetchMock.get('/api/widgets/overview?region.in[]=45&granteeId.in[]=1', overview);
   });
   afterEach(() => {
     fetchMock.restore();

frontend/src/pages/GranteeRecord/pages/__tests__/TTAHistory.js

@@ -35,7 +35,7 @@ describe('Grantee Record - TTA History', () => {
   };
 
   beforeEach(async () => {
-    const url = '/api/widgets/dashboardOverview?region.in[]=400&granteeId.in[]=100&modelType.is=grant';
+    const url = '/api/widgets/overview?region.in[]=400&granteeId.in[]=100&modelType.is=grant';
     fetchMock.get(url, response);
   });
 

frontend/src/pages/Landing/ReportMenu.css

@@ -0,0 +1,4 @@
+.tta-report-menu .smart-hub--reports-button {
+    display: inline;
+    width: auto;    
+}