qpp-style 9.16.9 → 9.17.0

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd react
+npm run precommit

package/components/Alert/Alert.stories.js

@@ -11,7 +11,7 @@ export const Default = () => (
   <div className="qpp-u-padding--16">
     <h1 className="h3">Information</h1>
     <Alert
-      title='Information Alert'
+      title="Information Alert"
       description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida."
     />
     <h2 className="h3">Warning</h2>

package/components/Alert/index.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Alert = ({ title, children, description, variant, className, ...rest }) => {
+const Alert = ({
+  title,
+  children,
+  description,
+  variant,
+  className,
+  ...rest
+}) => {
   const HeadingComponent = title?.headingLevel || 'h2';
   return (
     <div

package/components/GovBanner/index.js

@@ -1,95 +1,103 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 
 const GovBanner = () => {
-  const [hideContent, setHideContent] = useState(true)
+  const [hideContent, setHideContent] = useState(true);
 
   return (
-    <section className='qpp-c-gov-banner' aria-label='Official government website'>
-      <div className='qpp-c-gov-banner__expand-wrap'>
-        <header 
-          className={ `qpp-c-gov-banner__header ${!hideContent ? 'qpp-c-gov-banner__header--expanded' : ''}` }
+    <section
+      className="qpp-c-gov-banner"
+      aria-label="Official government website"
+    >
+      <div className="qpp-c-gov-banner__expand-wrap">
+        <header
+          className={`qpp-c-gov-banner__header ${
+            !hideContent ? 'qpp-c-gov-banner__header--expanded' : ''
+          }`}
         >
-          <div className='qpp-c-gov-banner__inner'>
-            <div className='qpp-c-gov-banner__header-col1'>
+          <div className="qpp-c-gov-banner__inner">
+            <div className="qpp-c-gov-banner__header-col1">
               <img
-                className='qpp-c-gov-banner__header-flag'
-                src='/images/us_flag_small.png'
-                alt='U.S. flag'
+                className="qpp-c-gov-banner__header-flag"
+                src="/images/us_flag_small.png"
+                alt="U.S. flag"
               />
             </div>
-            <div className='qpp-c-gov-banner__header-col2'>
-              <p className='qpp-c-gov-banner__header-text'>
+            <div className="qpp-c-gov-banner__header-col2">
+              <p className="qpp-c-gov-banner__header-text">
                 An official website of the United States government
               </p>
-              <p className='qpp-c-gov-banner__header-action' aria-hidden='true'>
-                <span className='qpp-c-gov-banner__header-action-text qpp-c-button qpp-c-button--text'>Here’s how you know</span><span className='qpp-c-gov-banner__header-action-icon qpp-c-button qpp-c-button--text'></span>
+              <p className="qpp-c-gov-banner__header-action" aria-hidden="true">
+                <span className="qpp-c-gov-banner__header-action-text qpp-c-button qpp-c-button--text">
+                  Here’s how you know
+                </span>
+                <span className="qpp-c-gov-banner__header-action-icon qpp-c-button qpp-c-button--text"></span>
               </p>
             </div>
             <button
-              className='qpp-c-gov-banner__button qpp-c-button qpp-c-button--icon-after qpp-c-button--text'
-              aria-expanded={ !hideContent }
-              aria-controls='qpp-gov-banner-content'
-              onClick={ () => setHideContent(!hideContent) }
+              className="qpp-c-gov-banner__button qpp-c-button qpp-c-button--icon-after qpp-c-button--text"
+              aria-expanded={!hideContent}
+              aria-controls="qpp-gov-banner-content"
+              onClick={() => setHideContent(!hideContent)}
             >
-              <span className='qpp-c-gov-banner__button-text'>Here’s how you know</span>
+              <span className="qpp-c-gov-banner__button-text">
+                Here’s how you know
+              </span>
             </button>
           </div>
         </header>
         <div
-          className='qpp-c-gov-banner__content'
-          id='qpp-gov-banner-content'
-          hidden={ hideContent }
+          className="qpp-c-gov-banner__content"
+          id="qpp-gov-banner-content"
+          hidden={hideContent}
         >
-          <div className='qpp-u-display--flex qpp-u-flex-direction--column qpp-u-xs-flex-direction--row qpp-u-flex-gap--24'>
-            <div className='qpp-c-gov-banner__guidance'>
+          <div className="qpp-u-display--flex qpp-u-flex-direction--column qpp-u-xs-flex-direction--row qpp-u-flex-gap--24">
+            <div className="qpp-c-gov-banner__guidance">
               <img
-                className='qpp-c-gov-banner__icon'
-                src='/images/icon-dot-gov.svg'
-                role='img'
-                alt=''
-                aria-hidden='true'
+                className="qpp-c-gov-banner__icon"
+                src="/images/icon-dot-gov.svg"
+                role="img"
+                alt=""
+                aria-hidden="true"
               />
               <div>
                 <p>
                   <strong> Official websites use .gov </strong>
-                  <br />
-                  A <strong>.gov</strong> website belongs to an official
+                  <br />A <strong>.gov</strong> website belongs to an official
                   government organization in the United States.
                 </p>
               </div>
             </div>
-            <div className='qpp-c-gov-banner__guidance'>
+            <div className="qpp-c-gov-banner__guidance">
               <img
-                className='qpp-c-gov-banner__icon'
-                src='/images/icon-https.svg'
-                role='img'
-                alt=''
-                aria-hidden='true'
+                className="qpp-c-gov-banner__icon"
+                src="/images/icon-https.svg"
+                role="img"
+                alt=""
+                aria-hidden="true"
               />
               <div>
                 <p>
                   <strong> Secure .gov websites use HTTPS </strong>
-                  <br />
-                  A <strong>lock</strong> (
-                  <span className='icon-lock'>
+                  <br />A <strong>lock</strong> (
+                  <span className="icon-lock">
                     <svg
-                      xmlns='http://www.w3.org/2000/svg'
-                      width='52'
-                      height='64'
-                      viewBox='0 0 52 64'
-                      className='qpp-c-gov-banner__lock-image '
-                      role='img'
-                      aria-labelledby='banner-lock-title-default banner-lock-description-default'
-                      focusable='false'
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="52"
+                      height="64"
+                      viewBox="0 0 52 64"
+                      className="qpp-c-gov-banner__lock-image "
+                      role="img"
+                      aria-labelledby="banner-lock-title-default banner-lock-description-default"
+                      focusable="false"
                     >
-                      <title id='banner-lock-title-default'>Lock</title>
-                      <desc id='banner-lock-description-default'>
+                      <title id="banner-lock-title-default">Lock</title>
+                      <desc id="banner-lock-description-default">
                         A locked padlock
                       </desc>
                       <path
-                        fill='#000000'
-                        fillRule='evenodd'
-                        d='M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z'
+                        fill="#000000"
+                        fillRule="evenodd"
+                        d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                       />
                     </svg>
                   </span>
@@ -103,7 +111,7 @@ const GovBanner = () => {
         </div>
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default GovBanner
+export default GovBanner;

package/components/Header/HeaderContainer.jsx

@@ -40,7 +40,7 @@ const HeaderContainer = ({
       </a>
     )}
     <GovBanner />
-    {!isIESupportPage && <NotificationBanner />}    
+    {!isIESupportPage && <NotificationBanner />}
     <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
       <HeaderLogo />
       {children}

package/components/Header/HeaderMenuItem.jsx

@@ -77,7 +77,7 @@ const HeaderMenuItem = ({
       ) {
         return;
       }
-      setOpenMobileSubMenu('')
+      setOpenMobileSubMenu('');
       closeMenus();
     };
     document.addEventListener('mousedown', listener);
@@ -85,10 +85,10 @@ const HeaderMenuItem = ({
   }, [menuRef]);
 
   useEffect(() => {
-    if (!isMobileMenuExpanded || !isOpen){
-      setOpenMobileSubMenu('')
+    if (!isMobileMenuExpanded || !isOpen) {
+      setOpenMobileSubMenu('');
     }
-  }, [isMobileMenuExpanded, isOpen])
+  }, [isMobileMenuExpanded, isOpen]);
 
   return (
     <li
@@ -148,7 +148,11 @@ const HeaderMenuItem = ({
                             <li
                               onClick={handleClick}
                               key={`item-link-${item.name}`}
-                              className={isSubLink ? 'nav-link-li sublink' : 'nav-link-li'}
+                              className={
+                                isSubLink
+                                  ? 'nav-link-li sublink'
+                                  : 'nav-link-li'
+                              }
                             >
                               <SubMenuComponent
                                 href={item.href}
@@ -170,7 +174,10 @@ const HeaderMenuItem = ({
                       >
                         <Accordion
                           title={c.heading}
-                          isOpen={isMobileMenuExpanded && openMobileSubMenu === c.heading}
+                          isOpen={
+                            isMobileMenuExpanded &&
+                            openMobileSubMenu === c.heading
+                          }
                         >
                           <ul>
                             {c.items.map((item) => {

package/components/Modal/Modal.jsx

@@ -72,7 +72,7 @@ const Modal = ({
         id="modal-body"
         className="qpp-c-modal__body"
         ref={contentRef}
-        tabIndex={overflowSeparator ? "0" : undefined}
+        tabIndex={overflowSeparator ? '0' : undefined}
       >
         {children}
       </div>

package/components/SideNav/AnimationGroup/AnimationGroup.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const hasDarkerBackground = (darkerBackground) => {
   return darkerBackground ? 'background-highlight' : '';
-}
+};
 
 const AnimationGroup = ({ display, className, children, darkerBackground }) => {
   return (
@@ -21,7 +21,7 @@ AnimationGroup.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   display: PropTypes.bool,
-  darkerBackground: PropTypes.bool
+  darkerBackground: PropTypes.bool,
 };
 
 export default AnimationGroup;

package/components/SideNav/Content/LevelOneContent.jsx

@@ -1,74 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'cookie';
 import jwtDecode from 'jwt-decode';
-
+import { EyeIcon } from '../../../lib/SvgComponents';
 import { NavLinkContainer, NavLinkInline, NavLinkDrawer } from '../Links';
 import AnimationGroup from '../AnimationGroup/AnimationGroup';
 import defaultContent from '../UI/default-content';
 import {
-  AccountHomeIcon,
-  DashboardIcon,
-  FacilityBasedPreviewIcon,
-  HardshipIcon,
-  HelpSupportIcon,
-  ManageUsersIcon,
-  MyApplicationsIcon,
-  MyTestDataIcon,
-  PaymentIcon,
-  PhysicianCompareIcon,
-  StarIcon,
-  TargetIcon,
-  IndividualReporting,
-} from '../../../lib/SvgComponents';
-import {
-  dashboardUrl,
-  facilityBasedPreviewBaseUrl,
-  feedbackUrl,
-  manageUrl,
-  physicianCompareUrl,
-  reportsPortalUrl,
-  submissionsUrl,
+  loadUserPermissions,
+  getUrlConditionMap,
+  isMultiRoleUser,
+  isReviewerOrSelfNomRole,
+  getIcon,
+  isImpersonating,
+  isImpersonationLink,
 } from '../helpers';
-
-const getIcon = (url) =>
-  ({
-    [dashboardUrl]: DashboardIcon,
-    [feedbackUrl]: StarIcon,
-    [manageUrl]: ManageUsersIcon,
-    [physicianCompareUrl]: PhysicianCompareIcon,
-    [reportsPortalUrl]: HardshipIcon,
-    [submissionsUrl]: AccountHomeIcon,
-    [facilityBasedPreviewBaseUrl]: FacilityBasedPreviewIcon,
-    '/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': DashboardIcon,
-    '/reviewer/exception': HardshipIcon,
-    '/reviewer/targeted-review': TargetIcon,
-    '/self-nomination': IndividualReporting,
-  }[url] || null);
+import SelectRole from './SelectRole';
 
 const LevelOneContent = ({
   isExpanded,
   config: { linkCallback, useTooltips } = {},
   levelOneContent,
 }) => {
-  let {
-    qpp_has_authorizations,
-    user_has_apm_payments,
-    qpp_is_dev_pre,
-    qpp_ehr_authorized,
-    qpp_has_non_registry_authorizations,
-    qpp_auth_token,
-    qpp_cms_internal_authorized,
-    qpp_can_impersonate,
-  } = cookie.parse(document.cookie);
+  let { qpp_is_dev_pre, qpp_auth_token } = cookie.parse(document.cookie);
+
+  const [selectedRole, setSelectedRole] = useState('');
 
   let name = '';
   if (qpp_auth_token) {
@@ -76,111 +32,114 @@ const LevelOneContent = ({
     name = `${firstName} ${lastName}`;
   }
 
-  const canImpersonate = qpp_can_impersonate === 'true';
-  const hasAuthorizations = qpp_has_authorizations === 'true';
-  const hasApmPayments = user_has_apm_payments === 'true';
-  const isDevPre = qpp_is_dev_pre === 'true';
-  const internalReviewerNames = JSON.parse(
-    qpp_cms_internal_authorized || 'null'
-  );
-  const ehrAuthorized = qpp_ehr_authorized === 'true';
-  const hasNonRegistryAuthorizations =
-    qpp_has_non_registry_authorizations === 'true';
+  const permissions = loadUserPermissions(document.cookie, selectedRole);
+  const { internalReviewerNames } = permissions;
+
+  const hasMultipleRoles = isMultiRoleUser(document.cookie);
 
   const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
-  let content = isDevPre ? levelOneContent?.devPre : levelOneContent?.default;
-  if (
-    (internalReviewerNames || []).some(
-      (name) =>
-        name === 'QPP Self-Nomination' ||
-        name === 'QPP Targeted Review & Exceptions'
-    )
-  ) {
-    content =
-      levelOneContent?.internalReviewers || defaultContent.internalReviewers;
+
+  const isDevPre = qpp_is_dev_pre === 'true';
+
+  let content;
+  content = isDevPre ? levelOneContent?.devPre : levelOneContent?.default;
+
+  if (!hasMultipleRoles) {
+    if (internalReviewerNames?.some(isReviewerOrSelfNomRole)) {
+      content =
+        levelOneContent?.internalReviewers || defaultContent.internalReviewers;
+    }
+  } else {
+    if (selectedRole === 'Reviewer') {
+      content =
+        levelOneContent?.internalReviewers || defaultContent.internalReviewers;
+    }
   }
 
   // Mapping side nav link urls to the conditions that determine their inclusion in the side nav
-  const urlConditionMap = {
-    [dashboardUrl]: hasAuthorizations,
-    [feedbackUrl]: hasAuthorizations,
-    '/user/apm-incentive-payments': hasApmPayments,
-    [physicianCompareUrl]: hasNonRegistryAuthorizations,
-    [reportsPortalUrl]: hasAuthorizations,
-    [facilityBasedPreviewBaseUrl]: hasAuthorizations,
-    '/user/helpdesk-viewing-tool': canImpersonate,
-
-    '/reviewer/exception': (internalReviewerNames || []).includes(
-      'QPP Targeted Review & Exceptions'
-    ),
-    '/reviewer/targeted-review': (internalReviewerNames || []).includes(
-      'QPP Targeted Review & Exceptions'
-    ),
-    '/self-nomination': (internalReviewerNames || []).includes(
-      'QPP Self-Nomination'
-    ),
-
-    // dev pre
-    '/user/applications': ehrAuthorized,
-    '/user/test-data': ehrAuthorized,
-  };
-
-  const navLinks = content.reduce((acc, link) => {
-    const { url, label, className, listOfLinks, ...rest } = link;
-
-    // Any links failing the corresponding condition in the urlConditionMap are skipped
-    if (url in urlConditionMap && !urlConditionMap[url]) {
+  const urlConditionMap = getUrlConditionMap(permissions);
+
+  const navLinks = content
+    // Filter out Exception & Targeted Review links for Helpdesk Viewer when not impersonating
+    .filter((link) => {
+      const isHelpdeskRoleNotImpersonating =
+        selectedRole === 'Helpdesk Viewer' && !isImpersonating(document.cookie);
+      if (isHelpdeskRoleNotImpersonating) {
+        return (
+          link.url !== '/user/exception/#/landing' &&
+          link.url !== '/user/targeted-review/#/landing'
+        );
+      }
+      return link;
+    })
+    .reduce((acc, link) => {
+      const { url, label, className, listOfLinks, ...rest } = link;
+
+      // Any links failing the corresponding condition in the urlConditionMap are skipped
+      if (url in urlConditionMap && !urlConditionMap[url]) {
+        return acc;
+      }
+
+      const IconComponent = getIcon(url);
+      const Icon = IconComponent ? <IconComponent /> : null;
+      const sharedProps = {
+        url,
+        label,
+        linkCallback,
+        className: className ? `${linkClass} ${className}` : linkClass,
+      };
+
+      if (isImpersonating(document.cookie)) {
+        sharedProps.className = `${sharedProps.className} includes-read-only`;
+      }
+
+      const { pathname, hash } = window.location;
+      const filteredListOfLinks = (listOfLinks || []).filter((sublink) => {
+        return !(
+          sublink.url in urlConditionMap && !urlConditionMap[sublink.url]
+        );
+      });
+      if (
+        filteredListOfLinks?.length > 0 &&
+        (pathname === url ||
+          filteredListOfLinks.some(
+            (sublink) =>
+              pathname === sublink.url || `${pathname}${hash}` === sublink.url
+          ))
+      ) {
+        acc.push(
+          <NavLinkDrawer
+            key={`nav-drawer-${url}-${label}`}
+            leftIcon={Icon}
+            listOfLinks={filteredListOfLinks}
+            isExpanded={isExpanded}
+            staticDrawer={false}
+            openByDefault
+            isAlwaysOpen
+            {...sharedProps}
+            {...rest}
+          />
+        );
+      } else {
+        // Check if link is associated with the impersonated user not the Helpdesk Viewer user
+        const impersonationLink = isImpersonationLink(document.cookie, label);
+        acc.push(
+          <NavLinkInline
+            key={`nav-link-${url}-${label}`}
+            icon={Icon}
+            className={impersonationLink ? 'read-only-link' : ''}
+            {...(impersonationLink
+              ? { rightIcon: <EyeIcon classes="read-only-icon" /> }
+              : null)}
+            useTooltips={useTooltips}
+            showLabel={isExpanded}
+            {...sharedProps}
+            {...rest}
+          />
+        );
+      }
       return acc;
-    }
-
-    const IconComponent = getIcon(url);
-    const Icon = IconComponent ? <IconComponent /> : null;
-    const sharedProps = {
-      url,
-      label,
-      linkCallback,
-      className: className ? `${linkClass} ${className}` : linkClass,
-    };
-
-    const { pathname, hash } = window.location;
-    const filteredListOfLinks = (listOfLinks || []).filter((sublink) => {
-      return !(sublink.url in urlConditionMap && !urlConditionMap[sublink.url]);
-    });
-    if (
-      filteredListOfLinks?.length > 0 &&
-      (pathname === url ||
-        filteredListOfLinks.some(
-          (sublink) =>
-            pathname === sublink.url || `${pathname}${hash}` === sublink.url
-        ))
-    ) {
-      acc.push(
-        <NavLinkDrawer
-          key={`nav-drawer-${url}-${label}`}
-          leftIcon={Icon}
-          listOfLinks={filteredListOfLinks}
-          isExpanded={isExpanded}
-          staticDrawer={false}
-          openByDefault
-          isAlwaysOpen
-          {...sharedProps}
-          {...rest}
-        />
-      );
-    } else {
-      acc.push(
-        <NavLinkInline
-          key={`nav-link-${url}-${label}`}
-          icon={Icon}
-          useTooltips={useTooltips}
-          showLabel={isExpanded}
-          {...sharedProps}
-          {...rest}
-        />
-      );
-    }
-    return acc;
-  }, []);
+    }, []);
 
   return (
     <div className="sidebar-content">
@@ -188,6 +147,12 @@ const LevelOneContent = ({
         <h1 className="label">{name}</h1>
       </AnimationGroup>
       <div className="level-one-nav animation-flat">
+        {hasMultipleRoles && (
+          <SelectRole
+            selectedRole={selectedRole}
+            setSelectedRole={setSelectedRole}
+          />
+        )}
         <NavLinkContainer listOfLinks={navLinks} />
       </div>
     </div>