qpp-style 9.37.1 → 9.38.0

package/components/Footer/FooterUI.jsx

@@ -97,6 +97,7 @@ const FooterUI = () => (
                 1-866-288-8292 (TRS: 711)
                 <span className="footer-trs-infotip">
                   <InfoTip
+                    aria-labelledby="footer-trs-infotip"
                     ariaLabel="TRS Communications Assistant Information"
                     label={infoTipLabel}
                   />

package/components/Header/HeaderMenuItem.jsx

@@ -101,7 +101,7 @@ const HeaderMenuItem = ({
       <button
         ref={menuButtonRef}
         className="menu-dropdown-toggle"
-        aria-label={`${name} navigation dropdown`}
+        aria-label={`${name} ${subtitle} navigation dropdown`}
         aria-expanded={isOpen}
         aria-controls={`nav-section-${menuIdentifier}`}
         data-toggle="dropdown"

package/components/Header/HeaderMenuLink.js

@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { submissionsUrl } from "../SideNav/helpers";
 import { useHeaderState } from "./hooks";
 import { setUtagLink } from "./utag-helpers";
 
+const submissionsUrl = "/user/submissions";
 // exclude submissions urls
 const isNotExcluded = (href) => !href.includes(submissionsUrl);
 

package/components/Header/ImpersonatorBanner.jsx

@@ -7,8 +7,8 @@ import {
   revertQppHasAuthsCookie,
   revertApmPaymentCookie,
 } from "../../session/logout";
-import { viewingToolUrl } from "../SideNav/helpers";
 
+const viewingToolUrl = "/user/helpdesk-viewing-tool";
 const getViewType = (viewType) =>
   ({
     username: "HARP ID",

package/components/Infotip/Infotip.jsx

@@ -37,7 +37,7 @@ const touchHandlers = {
  * Tooltip with styled information icon
  */
 const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
-  <InfotipContent label={label} {...props}>
+  <InfotipContent label={label} id="info-tip" {...props}>
     <button
       type="button"
       aria-label={ariaLabel}

package/components/Infotip/InfotipContent.jsx

@@ -10,7 +10,7 @@ import {
 const TEXT_COLOR = "#FFF";
 const BACKGROUND_COLOR = "#333";
 
-const InfotipContent = ({ children, label }) => {
+const InfotipContent = ({ children, label, id }) => {
   const tooltip = useTooltipState();
 
   const cssStyles = {
@@ -27,6 +27,7 @@ const InfotipContent = ({ children, label }) => {
         {children}
       </TooltipAnchor>
       <TooltipAriaKit
+        aria-labelledby={id}
         state={tooltip}
         className="tooltip-content"
         style={cssStyles}
@@ -41,6 +42,7 @@ const InfotipContent = ({ children, label }) => {
 InfotipContent.propTypes = {
   children: PropTypes.node.isRequired,
   label: PropTypes.node.isRequired,
+  id: PropTypes.node.isRequired,
 };
 
 export default InfotipContent;

package/components/SideNav/Content/LevelOneContent.jsx

@@ -4,11 +4,20 @@ import cookie from "cookie";
 import jwtDecode from "jwt-decode";
 import SanitizedContent from "../../SanitizedContent";
 import AnimationGroup from "../AnimationGroup/AnimationGroup";
-import { isMultiRoleUser } from "../helpers";
 import SelectRole from "./SelectRole";
+import { loadRoleOptions } from "./SelectRole/utils";
 
 const LevelOneContent = ({ isExpanded, levelOneContent }) => {
-  let { qpp_auth_token } = cookie.parse(document.cookie);
+  const {
+    qpp_auth_token,
+    qpp_has_authorizations: hasAuthorizations,
+    qpp_cms_internal_authorized: cmsInternalRoleValues,
+  } = cookie.parse(document.cookie);
+
+  const roleOptions = loadRoleOptions([
+    hasAuthorizations,
+    cmsInternalRoleValues,
+  ]);
 
   const [selectedRole, setSelectedRole] = useState("");
 
@@ -20,7 +29,7 @@ const LevelOneContent = ({ isExpanded, levelOneContent }) => {
   const path = window.location.pathname;
   document.cookie = `current_path=${path}; Path=/;`;
 
-  const hasMultipleRoles = isMultiRoleUser(document.cookie);
+  const hasMultipleRoles = roleOptions.length > 1;
 
   return (
     <div className="sidebar-content">
@@ -32,6 +41,7 @@ const LevelOneContent = ({ isExpanded, levelOneContent }) => {
           <SelectRole
             selectedRole={selectedRole}
             setSelectedRole={setSelectedRole}
+            roleOptions={roleOptions}
           />
         )}
 

package/components/SideNav/Content/SelectRole/index.js

@@ -3,29 +3,20 @@ import PropTypes from "prop-types";
 import cookie from "cookie";
 import Dropdown from "../../../Dropdown";
 import {
-  loadRoleOptions,
   redirectPage,
   getLocalStorageRoleState,
   initializeLocalStorageRoleState,
   updateLocalStorageRoleState,
 } from "./utils";
 
-const SelectRole = ({ selectedRole, setSelectedRole }) => {
-  const {
-    qpp_has_authorizations: hasAuthorizations,
-    qpp_cms_internal_authorized: cmsInternalRoleValues,
-    qpp_impersonated_user: isHelpdeskRoleAndImpersonating,
-  } = cookie.parse(document.cookie);
-
-  const ROLE_OPTIONS = loadRoleOptions([
-    hasAuthorizations,
-    cmsInternalRoleValues,
-  ]);
+const SelectRole = ({ selectedRole, setSelectedRole, roleOptions }) => {
+  const { qpp_impersonated_user: isHelpdeskRoleAndImpersonating } =
+    cookie.parse(document.cookie);
 
   const handleSelection = (e) => {
     e.preventDefault();
     const dropdownValue = e.target.value;
-    const newRoleSelected = ROLE_OPTIONS.filter(
+    const newRoleSelected = roleOptions.filter(
       (opt) => opt.value === dropdownValue,
     )[0].value;
     // Update localStorage with the new role selected
@@ -39,7 +30,7 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
   useEffect(() => {
     // Check localStorage & set initial selected role
     const { selectedUserRole } = getLocalStorageRoleState();
-    const roleValue = selectedUserRole || ROLE_OPTIONS[0].value;
+    const roleValue = selectedUserRole || roleOptions[0].value;
 
     // Set localStorage values if not set
     initializeLocalStorageRoleState(roleValue);
@@ -62,7 +53,7 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
         name="user-role-selection"
         ariaLabel="Select User Role"
         className="qpp-u-width--100 SelectRole__Dropdown"
-        options={ROLE_OPTIONS}
+        options={roleOptions}
         onChange={handleSelection}
         disabled={isHelpdeskRoleAndImpersonating}
       />
@@ -73,6 +64,7 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
 SelectRole.propTypes = {
   selectedRole: PropTypes.string,
   setSelectedRole: PropTypes.func,
+  roleOptions: PropTypes.array,
 };
 
 export default SelectRole;

package/components/SideNav/Content/SelectRole/utils.js

@@ -35,13 +35,6 @@ export const isReviewerRole = (cmsInternalRole) => {
   return reviewerRoles.includes(cmsInternalRole);
 };
 
-// Check if internal cms role in a Content Mgr role
-// @param {string} cmsInternalRole
-// @returns {boolean}
-export const isContentMgmtRole = (cmsInternalRole) => {
-  return cmsRoles.includes(cmsInternalRole);
-};
-
 /**
  * Check if internal cms roles has Reviewer role
  * @param {array} cmsInternalRoles array of values

package/components/SideNav/helpers.js

@@ -1,46 +1,4 @@
 import cookie from "cookie";
-import {
-  AccountHomeIcon,
-  DashboardIcon,
-  FacilityBasedPreviewIcon,
-  HardshipIcon,
-  HelpSupportIcon,
-  ManageUsersIcon,
-  MyApplicationsIcon,
-  MyTestDataIcon,
-  PaymentIcon,
-  PhysicianCompareIcon,
-  StarIcon,
-  TargetIcon,
-  IndividualReporting,
-  ManageDocumentsIcon,
-  AuthorContentIcon,
-  RegistrationIcon,
-} from "../../lib/SvgComponents";
-import { isReviewerRole, isContentMgmtRole } from "./Content/SelectRole/utils";
-
-const submissionsUrl = "/user/submissions";
-const dashboardUrl = "/user/dashboard";
-const manageUrl = "/user/manage-access";
-const feedbackUrl = `${submissionsUrl}/feedback`;
-const physicianCompareUrl = `${submissionsUrl}/doctors-clinicians-preview`;
-const reportsPortalUrl = `${submissionsUrl}/reports`;
-const facilityBasedPreviewBaseUrl = `${submissionsUrl}/facility-based-preview`;
-const viewingToolUrl = "/user/helpdesk-viewing-tool";
-const contentMgrDashboardUrl = "/user/content-management";
-const registrationUrl = "/user/registration/";
-
-const performanceFeedbackUrl = (performanceYear) => {
-  if (performanceYear) {
-    return `${feedbackUrl}/${performanceYear}`;
-  } else {
-    return feedbackUrl;
-  }
-};
-
-const facilityBasedPreviewUrl = (performanceYear) => {
-  return `${facilityBasedPreviewBaseUrl}/${performanceYear}`;
-};
 
 const handleNavigation = (e, linkCallbackFunction, label) => {
   if (linkCallbackFunction) {
@@ -59,293 +17,6 @@ const handleNavigation = (e, linkCallbackFunction, label) => {
   });
 };
 
-/**
- * Load icon by url
- * @param {string} url
- * @returns svg icon
- */
-const getIcon = (url, linkLabel) => {
-  const icons = {
-    [dashboardUrl]: DashboardIcon,
-    [feedbackUrl]: StarIcon,
-    [manageUrl]: ManageUsersIcon,
-    [physicianCompareUrl]: PhysicianCompareIcon,
-    [reportsPortalUrl]: HardshipIcon,
-    [submissionsUrl]: AccountHomeIcon,
-    [facilityBasedPreviewBaseUrl]: FacilityBasedPreviewIcon,
-    [registrationUrl]: RegistrationIcon,
-    "/developers": HelpSupportIcon,
-    "/resources/help-and-support": HelpSupportIcon,
-    "/user/apm-incentive-payments": PaymentIcon,
-    "/user/applications": MyApplicationsIcon,
-    "/user/exception/#/landing": HardshipIcon,
-    "/user/targeted-review/#/landing": TargetIcon,
-    "/user/test-data": MyTestDataIcon,
-    "/user/self-nomination/#/landing": IndividualReporting,
-    "/user/reviewers": AccountHomeIcon,
-    "/reviewer/exception": HardshipIcon,
-    "/reviewer/targeted-review": TargetIcon,
-    "/self-nomination": IndividualReporting,
-    "/case-management": FacilityBasedPreviewIcon,
-    [contentMgrDashboardUrl]: AccountHomeIcon,
-    "Manage Documents": ManageDocumentsIcon,
-    "Author Content": AuthorContentIcon,
-  };
-
-  if (linkLabel) return icons[linkLabel];
-  return icons[url];
-};
-
-const singleRoleContentMap = {
-  "QPP Content Management - Author": "contentManager",
-  "QPP Content Management - Approver": "contentManager",
-  "QPP Content Management - Admin": "contentManager",
-  "QPP Front-end - Author": "contentManager",
-  "QPP Self-Nomination": "internalReviewers",
-  "QPP Targeted Review & Exceptions": "internalReviewers",
-  "QPP Case Management - PIMMS Reviewer": "internalReviewers",
-  "QPP Case Management - ACO PAC Reviewer": "internalReviewers",
-  "QPP Case Management - CMS Reviewer": "internalReviewers",
-};
-
-const multiRoleContentMap = {
-  Reviewer: "internalReviewers",
-  "Content Manager": "contentManager",
-};
-
-const replaceDefaultContentMgrLinks = (defaultContent) => {
-  const host = window.location.host;
-  const updatedDefaultContent = {
-    ...defaultContent,
-    contentManager: [
-      defaultContent.contentManager.find(
-        (obj) => obj.label === "Dashboard Home",
-      ),
-      {
-        url: `${host}.qpp.cms.gov/cm/`,
-        label: "Manage Documents",
-      },
-      {
-        url: `${host}.qpp.cms.gov/content-management/`,
-        label: "Author Content",
-      },
-    ],
-  };
-  return updatedDefaultContent;
-};
-
-/**
- * Load the side nav content for the given role
- * @param {string} roleName role of given user from internalReviewerNames
- * @param {object} navContent object of side nav links by role (levelOneContent & defaultContent)
- * @returns {array} returns an array of objects (side nav menu links) from levelOneContent
- * || defaultContent
- */
-const loadSideNavContent = (roleName, navContent, isMultiRoleUser = false) => {
-  const { levelOneContent, defaultContent } = navContent;
-  const updatedDefaultContent = replaceDefaultContentMgrLinks(defaultContent);
-  const roleContentMap = isMultiRoleUser
-    ? multiRoleContentMap
-    : singleRoleContentMap;
-  const contentByRole = roleContentMap[roleName];
-  if (levelOneContent) {
-    return levelOneContent[contentByRole] || levelOneContent.default;
-  }
-  return updatedDefaultContent[contentByRole] || updatedDefaultContent.default;
-};
-
-/**
- * Check if user is currently impersonating
- * @param {string} docCookie document cookie
- * @returns {boolean}
- */
-const isImpersonating = (docCookie) => {
-  const parsedCookies = cookie.parse(docCookie);
-  return (
-    parsedCookies.qpp_can_impersonate && parsedCookies.qpp_impersonated_user
-  );
-};
-
-/**
- * Check if user has multiple roles, used to display Select Role dropdown
- * @param {string} docCookie document cookie
- * @returns {boolean}
- */
-const isMultiRoleUser = (docCookie) => {
-  const activeRoles = new Set();
-  const {
-    qpp_cms_internal_authorized,
-    qpp_has_authorizations,
-    qpp_is_dev_pre,
-  } = cookie.parse(docCookie);
-
-  let internalAuthz = [];
-
-  if (qpp_cms_internal_authorized) {
-    internalAuthz = JSON.parse(qpp_cms_internal_authorized);
-  }
-  // Filter out test internalCms authz
-  const filteredInternalAuthz = internalAuthz.filter((internalAuth) => {
-    return (
-      internalAuth !== "Test internalCms Resource" &&
-      internalAuth !== "Test internalCms Resource 2"
-    );
-  });
-
-  filteredInternalAuthz.forEach((element) => {
-    if (isReviewerRole(element)) {
-      return activeRoles.add("reviewer");
-    }
-    if (isContentMgmtRole(element)) {
-      return activeRoles.add("content manager");
-    }
-    return activeRoles.add(element);
-  });
-
-  if (qpp_has_authorizations === "true") {
-    activeRoles.add("qpp user");
-  }
-
-  if (qpp_is_dev_pre === "true") {
-    activeRoles.clear(); // reset roles since there is no dropdown in devpre
-    activeRoles.add("devpre user");
-  }
-
-  return activeRoles.size > 1;
-};
-
-/**
- * Transform cookie values to permissions object
- * @param {object} cookies parsed document.cookie values
- * @returns {object}
- */
-const transformCookieValues = (cookies) => {
-  const {
-    qpp_can_impersonate,
-    qpp_has_authorizations,
-    user_has_apm_payments,
-    qpp_cms_internal_authorized,
-    qpp_ehr_authorized,
-    qpp_has_non_registry_authorizations,
-  } = cookies;
-  return {
-    canImpersonate: qpp_can_impersonate === "true",
-    hasAuthorizations: qpp_has_authorizations === "true",
-    hasApmPayments: user_has_apm_payments === "true",
-    internalReviewerNames: qpp_cms_internal_authorized
-      ? JSON.parse(qpp_cms_internal_authorized)
-      : [],
-    ehrAuthorized: qpp_ehr_authorized === "true",
-    hasNonRegistryAuthorizations:
-      qpp_has_non_registry_authorizations === "true",
-  };
-};
-
-const permissionsByRole = {
-  "QPP User": {
-    canImpersonate: false,
-    hasAuthorizations: true,
-    hasApmPayments: true,
-  },
-  Reviewer: {
-    hasAuthorizations: false,
-    hasApmPaymentss: false,
-  },
-  "Helpdesk Viewer": {
-    hasAuthorizations: false,
-    hasApmPayments: false,
-    hasNonRegistryAuthorizations: false,
-    internalReviewerNames: ["QPP Helpdesk"],
-  },
-  // Helpdesk role && impersonating (use impersonated user authz values)
-  Impersonation: {
-    internalReviewerNames: ["QPP Helpdesk"],
-  },
-  "Content Manager": {
-    hasAuthorizations: false,
-    hasApmPaymentss: false,
-    hasNonRegistryAuthorizations: false,
-  },
-};
-
-/**
- * Return permissions by role
- * @param {string} selectedRole selected user role
- * @param {object} permissionValues default permission values from transformed parsed cookie
- * @returns {object}
- */
-const loadUserPermissionsByRole = (selectedRole, permissionValues) => {
-  return {
-    ...permissionValues,
-    ...permissionsByRole[selectedRole],
-  };
-};
-
-/**
- * Helper fn to return user permissions/properties from cookies set on login
- * @param {string} docCookie cookie values set on login
- * @param {string} selectedRole string of selected role if user has multiple roles
- * @returns {object}
- */
-const loadUserPermissions = (docCookie, selectedRole) => {
-  const parsedCookies = cookie.parse(docCookie);
-  const permissionValues = transformCookieValues(parsedCookies);
-  const impersonating = isImpersonating(docCookie);
-  const role = impersonating ? "Impersonation" : selectedRole;
-
-  if (role) {
-    return loadUserPermissionsByRole(role, permissionValues);
-  }
-
-  return permissionValues;
-};
-
-/**
- * Return map of link conditionals based on user cookies for side nav
- * @param {object} userPermissions user permissions/properties derived from cookies set on login
- * @returns {object}
- */
-const getUrlConditionMap = (userPermissions) => {
-  return {
-    [dashboardUrl]: userPermissions.hasAuthorizations,
-    [feedbackUrl]: userPermissions.hasAuthorizations,
-    "/user/apm-incentive-payments": userPermissions.hasApmPayments,
-    [physicianCompareUrl]: userPermissions.hasNonRegistryAuthorizations,
-    [registrationUrl]: userPermissions.hasAuthorizations,
-    [reportsPortalUrl]: userPermissions.hasAuthorizations,
-    [facilityBasedPreviewBaseUrl]: userPermissions.hasAuthorizations,
-    "/user/helpdesk-viewing-tool": userPermissions.canImpersonate,
-    "/reviewer/exception": userPermissions.internalReviewerNames?.includes(
-      "QPP Targeted Review & Exceptions",
-    ),
-    "/reviewer/targeted-review":
-      userPermissions.internalReviewerNames?.includes(
-        "QPP Targeted Review & Exceptions",
-      ),
-    "/self-nomination": userPermissions.internalReviewerNames?.includes(
-      "QPP Self-Nomination",
-    ),
-
-    "/case-management": userPermissions.internalReviewerNames?.some((val) =>
-      [
-        "QPP Case Management - PIMMS Reviewer",
-        "QPP Case Management - ACO PAC Reviewer",
-        "QPP Case Management - CMS Reviewer",
-      ].includes(val),
-    ),
-
-    // dev pre
-    "/user/applications": userPermissions.ehrAuthorized,
-    "/user/test-data": userPermissions.ehrAuthorized,
-  };
-};
-
-const isImpersonationLink = (docCookie, linkLabel) => {
-  if (!isImpersonating(docCookie)) return;
-  const helpdeskLinks = ["Account Home", "Manage Access", "Help and Support"];
-  return !helpdeskLinks.includes(linkLabel);
-};
-
 /**
  * Sets the qpp_side_nav_expanded cookie value
  * @param {Document} document object
@@ -374,26 +45,4 @@ const isSideNavExpanded = (_document) => {
   return parsedCookies.qpp_side_nav_expanded === "true";
 };
 
-module.exports = {
-  submissionsUrl,
-  dashboardUrl,
-  feedbackUrl,
-  manageUrl,
-  physicianCompareUrl,
-  registrationUrl,
-  performanceFeedbackUrl,
-  facilityBasedPreviewUrl,
-  handleNavigation,
-  reportsPortalUrl,
-  facilityBasedPreviewBaseUrl,
-  viewingToolUrl,
-  loadUserPermissions,
-  getUrlConditionMap,
-  isMultiRoleUser,
-  getIcon,
-  isImpersonating,
-  isImpersonationLink,
-  loadSideNavContent,
-  setSideNavExpanded,
-  isSideNavExpanded,
-};
+export { handleNavigation, setSideNavExpanded, isSideNavExpanded };