qpp-style 1.0.0-cc.77 → 1.0.0-cc.78

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -32,6 +32,24 @@ export const ExampleLightBreadcrumb = () => (
 
 ExampleLightBreadcrumb.storyName = 'Light';
 
+export const ExampleScreenreaderOnlyBreadcrumb = () => (
+  <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
+    <Breadcrumb
+      newBreadcrumb={boolean('newBreadcrumb', true)}
+      crumbs={[
+        {
+          url: '/',
+          category: 'MainContent',
+          label: 'Home',
+          title: 'Home',
+        },
+        'Mips Overview',
+      ]}
+    />
+  </div>
+);
+ExampleScreenreaderOnlyBreadcrumb.storyName = 'SR Only Breadcrumb';
+
 export const ExampleDarkBreadcrumb = () => (
   <div className="qppds qpp-u-padding--16">
     <Breadcrumb

package/components/Breadcrumb/index.js

@@ -50,12 +50,12 @@ const Breadcrumb = ({
             return (
               <li
                 key={crumb}
-                className="qpp-c-breadcrumbs__list-item qpp-c-breadcrumbs__list-item--current"
+                className={`${
+                  i === crumbs.length - 1 ? 'sr-only' : ''
+                } qpp-c-breadcrumbs__list-itemqpp-c-breadcrumbs__list-item--current`}
                 aria-current="page"
               >
-                <span className={i === crumbs.length - 1 ? 'sr-only' : ''}>
-                  {crumb}
-                </span>
+                <span>{crumb}</span>
               </li>
             );
           }

package/components/Header/HeaderMenuItem.jsx

@@ -33,7 +33,6 @@ const excludedClickOutClasses = [
 
 const HeaderMenuItem = ({
   handleClick,
-  isMobileMenuExpanded,
   columns,
   menuName,
   rows,
@@ -77,19 +76,12 @@ const HeaderMenuItem = ({
       ) {
         return;
       }
-      setOpenMobileSubMenu('')
       closeMenus();
     };
     document.addEventListener('mousedown', listener);
     return () => document.removeEventListener('mousedown', listener);
   }, [menuRef]);
 
-  useEffect(() => {
-    if (!isMobileMenuExpanded || !isOpen){
-      setOpenMobileSubMenu('')
-    }
-  }, [isMobileMenuExpanded, isOpen])
-
   return (
     <li
       key={`header-item-${menuIdentifier}`}
@@ -170,7 +162,7 @@ const HeaderMenuItem = ({
                       >
                         <Accordion
                           title={c.heading}
-                          isOpen={isMobileMenuExpanded && openMobileSubMenu === c.heading}
+                          isOpen={openMobileSubMenu === c.heading}
                         >
                           <ul>
                             {c.items.map((item) => {
@@ -220,7 +212,6 @@ HeaderMenuItem.propTypes = {
   subtitle: PropTypes.string.isRequired,
   className: PropTypes.string,
   handleClick: PropTypes.func.isRequired,
-  isMobileMenuExpanded: PropTypes.bool.isRequired,
 };
 HeaderMenuItem.defaultProps = {
   menuName: '',

package/components/Header/HeaderUI.jsx

@@ -6,6 +6,7 @@ import HeaderCancel from './HeaderCancel.jsx';
 import HeaderContainer from './HeaderContainer';
 import HeaderMenuItem from './HeaderMenuItem';
 import HeaderMobileButton from './HeaderMobileButton';
+import ImpersonatorBanner from './ImpersonatorBanner';
 import HelpIcon from './HelpIcon';
 import defaultHeaderContent from './default-content.json';
 import { HeaderStateProvider } from './hooks';
@@ -110,7 +111,6 @@ const HeaderUI = ({
                 handleClick={() => {
                   setIsMobileMenuExpanded(!isMobileMenuExpanded);
                 }}
-                isMobileMenuExpanded={isMobileMenuExpanded}
                 key={header.name}
                 {...header}
               />
@@ -127,6 +127,7 @@ const HeaderUI = ({
           </ul>
         </nav>
       </HeaderContainer>
+      <ImpersonatorBanner />
     </HeaderStateProvider>
   );
 };

package/components/Header/ImpersonatorBanner.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import cookie from 'cookie';
+import axios from 'axios';
+import CloseIcon from '@material-ui/icons/Close';
+
+import { TextButton } from '../Button';
+import { deleteImpersonatedUser } from '../../session/logout';
+
+const ImpersonatorBanner = () => {
+  const { qpp_auth_token: token = null, qpp_impersonated_user: user = null } =
+    cookie.parse(document.cookie);
+
+  const className = [
+    'qpp-u-display--flex',
+    'qpp-u-justify-content--between',
+    'qpp-u-fill--gold-20',
+    'qpp-u-padding-x--40',
+    'qpp-u-padding-y--24',
+    'qpp-u-font-size--14',
+    'qpp-u-color--gray-80',
+  ].join(' ');
+
+  const onClick = () => {
+    const fn = () => {
+      deleteImpersonatedUser({ qpp_impersonated_user: user });
+      window.location.reload();
+    };
+    return axios
+      .delete('/api/auth/users/impersonate', {
+        headers: {
+          Accept: 'application/vnd.qpp.cms.gov.v1+json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then(fn, fn);
+  };
+
+  return (
+    token &&
+    user && (
+      <div className={className}>
+        <div>
+          VIEW ONLY | You are currently impersonating HARP user:{' '}
+          <strong>{user}</strong>
+        </div>
+        <TextButton onClick={onClick} className="qpp-u-color--gray-80">
+          Exit Impersonation Mode
+          <CloseIcon />
+        </TextButton>
+      </div>
+    )
+  );
+};
+
+export default ImpersonatorBanner;

package/components/SideNav/Content/LevelOneContent.jsx

@@ -18,6 +18,7 @@ import {
   PhysicianCompareIcon,
   StarIcon,
   TargetIcon,
+  IndividualReporting,
 } from '../../../lib/SvgComponents';
 import {
   dashboardUrl,
@@ -45,6 +46,7 @@ const getIcon = (url) =>
     '/user/exception/#/landing': HardshipIcon,
     '/user/targeted-review/#/landing': TargetIcon,
     '/user/test-data': MyTestDataIcon,
+    '/user/self-nomination/#/landing': IndividualReporting,
   }[url] || null);
 
 const LevelOneContent = ({
@@ -59,6 +61,8 @@ const LevelOneContent = ({
     qpp_ehr_authorized,
     qpp_has_non_registry_authorizations,
     qpp_auth_token,
+    qpp_cms_internal_authorized,
+    qpp_can_impersonate,
   } = cookie.parse(document.cookie);
 
   let name = '';
@@ -67,15 +71,20 @@ 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 isInternalReviewer = qpp_cms_internal_authorized === 'true';
   const ehrAuthorized = qpp_ehr_authorized === 'true';
   const hasNonRegistryAuthorizations =
     qpp_has_non_registry_authorizations === 'true';
 
   const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
-  const content = isDevPre ? levelOneContent?.devPre : levelOneContent?.default;
+  let content = isDevPre ? levelOneContent?.devPre : levelOneContent?.default;
+  if (isInternalReviewer) {
+    content = levelOneContent?.internalReviewers
+  }
 
   // Mapping side nav link urls to the conditions that determine their inclusion in the side nav
   const urlConditionMap = {
@@ -85,6 +94,7 @@ const LevelOneContent = ({
     [physicianCompareUrl]: hasNonRegistryAuthorizations,
     [reportsPortalUrl]: hasAuthorizations,
     [facilityBasedPreviewBaseUrl]: hasAuthorizations,
+    '/user/impersonate': canImpersonate,
 
     // dev pre
     '/user/applications': ehrAuthorized,
@@ -109,10 +119,13 @@ const LevelOneContent = ({
     };
 
     const { pathname, hash } = window.location;
+    const filteredListOfLinks = (listOfLinks || []).filter((sublink) => {
+      return !(sublink.url in urlConditionMap && !urlConditionMap[sublink.url]);
+    });
     if (
-      listOfLinks &&
+      filteredListOfLinks?.length > 0 &&
       (pathname === url ||
-        listOfLinks.some(
+        filteredListOfLinks.some(
           (sublink) =>
             pathname === sublink.url || `${pathname}${hash}` === sublink.url
         ))
@@ -121,7 +134,7 @@ const LevelOneContent = ({
         <NavLinkDrawer
           key={`nav-drawer-${url}-${label}`}
           leftIcon={Icon}
-          listOfLinks={listOfLinks}
+          listOfLinks={filteredListOfLinks}
           isExpanded={isExpanded}
           staticDrawer={false}
           openByDefault
@@ -164,6 +177,7 @@ LevelOneContent.propTypes = {
     default: PropTypes.arrayOf(PropTypes.object),
     devPre: PropTypes.arrayOf(PropTypes.object),
     viewer: PropTypes.arrayOf(PropTypes.object),
+    internalReviewers: PropTypes.arrayOf(PropTypes.object),
   }),
 };
 

package/components/SideNav/UI/SideNavUI.jsx

@@ -297,6 +297,7 @@ SideNavUI.propTypes = {
     content: PropTypes.shape({
       default: PropTypes.arrayOf(PropTypes.object),
       devPre: PropTypes.arrayOf(PropTypes.object),
+      internalReviewers: PropTypes.arrayOf(PropTypes.object),
       viewer: PropTypes.arrayOf(PropTypes.object),
     }),
   }),
@@ -318,6 +319,7 @@ SideNavUI.defaultProps = {
     content: {
       default: [],
       devPre: [],
+      internalReviewers: [],
       viewer: [],
     },
   },

package/components/SideNav/UI/default-content.json

@@ -42,6 +42,10 @@
       "url": "/user/manage-access",
       "label": "Manage Access",
       "listOfLinks": [
+        {
+          "url": "/user/impersonate",
+          "label": "QPP User Impersonation"
+        },
         {
           "url": "/user/self-nomination/#/landing",
           "label": "Registry/QCDR Self-Nomination",
@@ -72,5 +76,24 @@
       "label": "Developer Tools"
     }
   ],
+  "internalReviewers": [
+    {
+      "url": "/user/submissions",
+      "label": "Dashboard Home"
+    },
+    {
+      "url": "/user/exception/#/landing",
+      "label": "Exceptions Application"
+    },
+    {
+      "className": "stroke-based-icon",
+      "url": "/user/targeted-review/#/landing",
+      "label": "Targeted Review"
+    },
+    {
+      "url": "/user/self-nomination/#/landing",
+      "label": "Self Nomination"
+    }
+  ],
   "viewer": []
 }