qpp-style 9.8.6 → 9.9.0

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/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';
@@ -126,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

@@ -59,6 +59,7 @@ const LevelOneContent = ({
     qpp_ehr_authorized,
     qpp_has_non_registry_authorizations,
     qpp_auth_token,
+    qpp_can_impersonate,
   } = cookie.parse(document.cookie);
 
   let name = '';
@@ -67,6 +68,7 @@ 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';
@@ -85,6 +87,7 @@ const LevelOneContent = ({
     [physicianCompareUrl]: hasNonRegistryAuthorizations,
     [reportsPortalUrl]: hasAuthorizations,
     [facilityBasedPreviewBaseUrl]: hasAuthorizations,
+    '/user/impersonate': canImpersonate,
 
     // dev pre
     '/user/applications': ehrAuthorized,
@@ -109,10 +112,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 +127,7 @@ const LevelOneContent = ({
         <NavLinkDrawer
           key={`nav-drawer-${url}-${label}`}
           leftIcon={Icon}
-          listOfLinks={listOfLinks}
+          listOfLinks={filteredListOfLinks}
           isExpanded={isExpanded}
           staticDrawer={false}
           openByDefault

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",