qpp-style 0.0.8 → 0.0.10

package/components/SideNav/Chart/__tests__/__snapshots__/ScoreChart.test.js.snap

@@ -1,44 +1,153 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ScoreChart component should match snapshot 1`] = `
-<ScoreChart
-  chartData={
-    Object {
-      "categories": Array [
-        Object {
-          "maxContribution": 60,
-          "name": "quality",
-          "value": 30,
-        },
-        Object {
-          "maxContribution": 30,
-          "name": "aci",
-          "value": 15,
-        },
-        Object {
-          "maxContribution": 10,
-          "name": "ia",
-          "value": 5,
-        },
-      ],
-      "finalScore": 50,
-      "submissionId": "x",
-    }
-  }
->
+<div>
   <div
-    className="chart"
+    class="chart"
   >
     <svg
-      className="score-chart"
+      class="score-chart"
       focusable="false"
-    />
+      height="210"
+      width="210"
+    >
+      <title
+        id="titleID"
+      >
+        Your submission score
+      </title>
+      <desc
+        id="descID"
+      >
+        50 out of 100
+      </desc>
+      <g
+        class="arcs"
+        role="presentation"
+      >
+        <g
+          class="arc quality filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Quality Measures 30 out of 60
+          </desc>
+          <path
+            d="M0,-103.5A103.5,103.5,0,0,1,101.778,18.799L78.669,14.531A80,80,0,0,0,0,-80Z"
+          />
+        </g>
+        <g
+          class="arc quality empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M101.778,18.799A103.5,103.5,0,0,1,-36.973,96.671L-28.578,74.721A80,80,0,0,0,78.669,14.531Z"
+          />
+        </g>
+        <g
+          class="arc quality transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-36.973,96.671A103.5,103.5,0,0,1,-50.655,90.257L-39.153,69.764A80,80,0,0,0,-28.578,74.721Z"
+          />
+        </g>
+        <g
+          class="arc aci filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Advancing Care Info 15 out of 30
+          </desc>
+          <path
+            d="M-50.655,90.257A103.5,103.5,0,0,1,-101.778,18.799L-78.669,14.531A80,80,0,0,0,-39.153,69.764Z"
+          />
+        </g>
+        <g
+          class="arc aci empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-101.778,18.799A103.5,103.5,0,0,1,-79.555,-66.206L-61.492,-51.174A80,80,0,0,0,-78.669,14.531Z"
+          />
+        </g>
+        <g
+          class="arc aci transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-79.555,-66.206A103.5,103.5,0,0,1,-69.067,-77.084L-53.386,-59.582A80,80,0,0,0,-61.492,-51.174Z"
+          />
+        </g>
+        <g
+          class="arc ia filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Improvement Activities 5 out of 10
+          </desc>
+          <path
+            d="M-69.067,-77.084A103.5,103.5,0,0,1,-43.931,-93.714L-33.957,-72.436A80,80,0,0,0,-53.386,-59.582Z"
+          />
+        </g>
+        <g
+          class="arc ia empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-43.931,-93.714A103.5,103.5,0,0,1,-15.07,-102.397L-11.648,-79.147A80,80,0,0,0,-33.957,-72.436Z"
+          />
+        </g>
+        <g
+          class="arc ia transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-15.07,-102.397A103.5,103.5,0,0,1,0,-103.5L0,-80A80,80,0,0,0,-11.648,-79.147Z"
+          />
+        </g>
+      </g>
+      <g
+        text-anchor="middle"
+        transform="translate(105, 105)"
+      >
+        <text
+          class="chart-title"
+          y="4"
+        >
+          50
+        </text>
+        <text
+          class="chart-subtitle"
+          y="24"
+        >
+          OUT OF 100
+        </text>
+      </g>
+    </svg>
     <div
-      className="chart-tooltip off"
+      class="chart-tooltip off"
     />
     <div
-      className="chart-legend-toggler"
-      onClick={[Function]}
+      class="chart-legend-toggler"
     >
       <button
         aria-pressed="false"
@@ -47,18 +156,18 @@ exports[`ScoreChart component should match snapshot 1`] = `
         Show Legend
         <svg
           aria-hidden="true"
-          className="right-icon"
+          class="right-icon"
           focusable="false"
         >
           <use
-            xlinkHref="#chevron-down"
+            xlink:href="#chevron-down"
           />
         </svg>
       </button>
     </div>
     <ul
-      className="chart-legend"
+      class="chart-legend"
     />
   </div>
-</ScoreChart>
+</div>
 `;

package/components/SideNav/Chart/index.js

@@ -1,3 +1,3 @@
 import ScoreChart from './ScoreChart';
 
-export { ScoreChart };
+export default ScoreChart;

package/components/SideNav/Content/LevelOneContent.jsx

@@ -1,293 +1,184 @@
-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 * as SVG from '../../../lib/SvgComponents';
+import defaultContent from '../UI/default-content';
 import {
-  physicianCompareUrl,
-  facilityBasedPreviewUrl,
-  feedbackUrl,
-  reportsPortalUrl,
+  loadUserPermissions,
+  getUrlConditionMap,
+  isMultiRoleUser,
+  getIcon,
+  isImpersonating,
+  isImpersonationLink,
+  loadSideNavContent,
 } from '../helpers';
-import PropTypes from 'prop-types';
+import SelectRole from './SelectRole';
 
 const LevelOneContent = ({
   isExpanded,
-  showDevPreDfpLink,
-  showPhysicianCompareLink,
-  showFacilityBasedPreviewLink,
-  showApmIncentivePaymentLink,
-  performanceYear,
-  fbpPerformanceYear,
-  showSelfNomination,
-  style,
   config: { linkCallback, useTooltips } = {},
-  showReportsPortal,
-  showTargetedReviewLink,
+  levelOneContent,
 }) => {
-  let name = '';
-  let hasAuthorizations = true;
-  let isDevPre = false;
-  let ehrAuthorized = false;
-  let hasApmPayments = false;
-  let hasNonRegistryAuthorizations = false;
-  let cookies = cookie.parse(document.cookie);
-
-  if (cookies.hasOwnProperty('qpp_auth_token')) {
-    const { data } = jwtDecode(cookies.qpp_auth_token);
-    name = `${data.firstName} ${data.lastName}`;
-  }
-
-  if (cookies.hasOwnProperty('qpp_has_authorizations')) {
-    hasAuthorizations = cookies.qpp_has_authorizations === 'true';
-  }
+  let { qpp_is_dev_pre, qpp_auth_token } = cookie.parse(document.cookie);
 
-  if (cookies.hasOwnProperty('user_has_apm_payments')) {
-    hasApmPayments = cookies.user_has_apm_payments === 'true';
-  }
+  const [selectedRole, setSelectedRole] = useState('');
 
-  if (cookies.hasOwnProperty('qpp_is_dev_pre')) {
-    isDevPre = cookies.qpp_is_dev_pre === 'true';
+  let name = '';
+  if (qpp_auth_token) {
+    const { firstName, lastName } = jwtDecode(qpp_auth_token);
+    name = `${firstName} ${lastName}`;
   }
 
-  if (cookies.hasOwnProperty('qpp_ehr_authorized')) {
-    ehrAuthorized = cookies.qpp_ehr_authorized === 'true';
-  }
+  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
 
-  if (cookies.hasOwnProperty('qpp_has_non_registry_authorizations')) {
-    hasNonRegistryAuthorizations =
-      cookies.qpp_has_non_registry_authorizations === 'true';
-  }
+  const permissions = loadUserPermissions(document.cookie, selectedRole);
+  const { internalReviewerNames } = permissions;
 
-  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
-  const listOfLinks = [];
+  const hasMultipleRoles = isMultiRoleUser(document.cookie);
+  const isDevPre = qpp_is_dev_pre === 'true';
+  let content;
 
   if (isDevPre) {
-    if (ehrAuthorized) {
-      listOfLinks.push(
-        <NavLinkInline
-          icon={<SVG.MyApplicationsIcon />}
-          className={linkClass}
-          url="/user/applications"
-          label="My Applications"
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
+    content = levelOneContent?.devPre || defaultContent.devPre;
+  } else {
+    if (!hasMultipleRoles) {
+      // internalReviewerNames has 1 value b/c !hasMultipleRoles
+      const reviewerRoleName = internalReviewerNames[0];
+      content = loadSideNavContent(reviewerRoleName, {
+        levelOneContent,
+        defaultContent,
+      });
+    } else {
+      content = loadSideNavContent(
+        selectedRole,
+        { levelOneContent, defaultContent },
+        true
       );
-      if (showDevPreDfpLink) {
-        listOfLinks.push(
-          <NavLinkInline
-            icon={<SVG.MyTestDataIcon />}
-            className={linkClass}
-            url="/user/test-data"
-            label="My Test Data"
-            showLabel={isExpanded}
-            useTooltips={useTooltips}
-          />
+    }
+  }
+
+  // Mapping side nav link urls to the conditions that determine their inclusion in the side nav
+  const urlConditionMap = getUrlConditionMap(permissions);
+
+  const navLinks = content
+    .filter((link) => {
+      // Filter out Exception & Targeted Review links for Helpdesk Viewer when not impersonating
+      const isHelpdeskRoleNotImpersonating =
+        selectedRole === 'Helpdesk Viewer' && !isImpersonating(document.cookie);
+      if (isHelpdeskRoleNotImpersonating) {
+        return (
+          link.url !== '/user/exception/#/landing' &&
+          link.url !== '/user/targeted-review/#/landing'
         );
       }
-    }
-    listOfLinks.push(
-      <NavLinkInline
-        icon={<SVG.ManageUsersIcon />}
-        className={linkClass}
-        url="/user/manage-access"
-        label="Manage Access"
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
-    listOfLinks.push(
-      <NavLinkInline
-        icon={<SVG.HelpSupportIcon />}
-        className={linkClass}
-        url="/developers"
-        label="Developer Tools"
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
-  } else {
-    listOfLinks.push(
-      <NavLinkInline
-        key="account-dashboard-link"
-        icon={<SVG.AccountHomeIcon />}
-        className={linkClass}
-        url="/user/submissions"
-        label="Account Home"
-        linkCallback={linkCallback}
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
 
-    if (hasAuthorizations) {
-      listOfLinks.push(
-        <NavLinkInline
-          key="eligibility-link"
-          icon={<SVG.DashboardIcon />}
-          className={linkClass}
-          url="/user/dashboard"
-          label="Eligibility & Reporting"
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
+      // Filter Content Manager links
+      // Check if user has content mgmt. admin || frontend author roles
+      const contentMgrCanManageDocs = internalReviewerNames.some((name) =>
+        name.includes('QPP Content Management')
+      );
+      const contentMgrFrontendAuthor = internalReviewerNames.includes(
+        'QPP Front-end - Author'
       );
 
-      if (showFacilityBasedPreviewLink) {
-        const facilityBasedPreviewUrlYear =
-          fbpPerformanceYear || performanceYear;
-        listOfLinks.push(
-          <NavLinkInline
-            icon={<SVG.FacilityBasedPreviewIcon />}
-            className={linkClass}
-            url={facilityBasedPreviewUrl(facilityBasedPreviewUrlYear)}
-            label="Facility Based Preview"
-            linkCallback={linkCallback}
-            showLabel={isExpanded}
-            useTooltips={useTooltips}
-          />
-        );
+      if (!contentMgrCanManageDocs) {
+        return link.label !== 'Manage Documents';
+      }
+      if (!contentMgrFrontendAuthor) {
+        return link.label !== 'Author Content';
       }
 
-      if (performanceYear) {
-        listOfLinks.push(
-          <NavLinkInline
-            icon={<SVG.StarIcon />}
-            className={linkClass}
-            urlExpressionToMatch={`${feedbackUrl}/[0-9][0-9][0-9][0-9]`}
-            url={feedbackUrl}
-            label="Performance Feedback"
-            linkCallback={linkCallback}
-            showLabel={isExpanded}
-            useTooltips={useTooltips}
-          />
-        );
+      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;
       }
 
-      if (showApmIncentivePaymentLink && hasApmPayments) {
-        listOfLinks.push(
-          <NavLinkInline
-            icon={<SVG.PaymentIcon />}
-            className={linkClass}
-            url="/user/apm-incentive-payments"
-            label="APM Incentive Payments"
-            linkCallback={linkCallback}
-            showLabel={isExpanded}
-            useTooltips={useTooltips}
-          />
-        );
+      const isContentMgrLink =
+        label === 'Manage Documents' || label === 'Author Content';
+      const IconComponent = isContentMgrLink
+        ? getIcon(null, label)
+        : 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`;
       }
 
-      if (showPhysicianCompareLink && hasNonRegistryAuthorizations) {
-        listOfLinks.push(
+      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
-            icon={<SVG.PhysicianCompareIcon />}
-            className={linkClass}
-            url={physicianCompareUrl}
-            label="Doctors & Clinicians Preview"
-            linkCallback={linkCallback}
-            showLabel={isExpanded}
+            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}
           />
         );
       }
-    }
-
-    listOfLinks.push(
-      <NavLinkInline
-        icon={<SVG.HardshipIcon />}
-        className={linkClass}
-        url="/user/exception/#/landing"
-        label="Exceptions Application"
-        linkCallback={linkCallback}
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
-
-    if (showTargetedReviewLink) {
-      listOfLinks.push(
-        <NavLinkInline
-          icon={<SVG.TargetIcon />}
-          className={linkClass + ' stroke-based-icon'}
-          url="/user/targeted-review/#/landing"
-          label="Targeted Review"
-          linkCallback={linkCallback}
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
-      );
-    }
-
-    if (showReportsPortal) {
-      listOfLinks.push(
-        <NavLinkInline
-          icon={<SVG.HardshipIcon />}
-          className={linkClass}
-          url={reportsPortalUrl}
-          label="Reports"
-          linkCallback={linkCallback}
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
-      );
-    }
+      return acc;
+    }, []);
 
-    if (showSelfNomination) {
-      listOfLinks.push(
-        <NavLinkDrawer
-          key="connected-clinicians-link"
-          isAlwaysOpen
-          url="/user/manage-access"
-          isExpanded={isExpanded}
-          openByDefault={true}
-          leftIcon={<SVG.ManageUsersIcon />}
-          className={linkClass}
-          label="Manage Access"
-          linkCallback={linkCallback}
-          listOfLinks={[
-            {
-              url: '/user/self-nomination/#/landing',
-              label: 'Registry/QCDR Self-Nomination',
-              items: [],
-            },
-          ]}
-          staticDrawer={false}
-        />
-      );
-    } else {
-      listOfLinks.push(
-        <NavLinkInline
-          icon={<SVG.ManageUsersIcon />}
-          className={linkClass}
-          url="/user/manage-access"
-          label="Manage Access"
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
-      );
-    }
-
-    listOfLinks.push(
-      <NavLinkInline
-        icon={<SVG.HelpSupportIcon />}
-        className={linkClass}
-        url="/about/help-and-support"
-        label="Help and Support"
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
-  }
   return (
     <div className="sidebar-content">
       <AnimationGroup display={isExpanded}>
         <h1 className="label">{name}</h1>
       </AnimationGroup>
-      <div style={style} className="level-one-nav animation-flat">
-        <NavLinkContainer listOfLinks={listOfLinks} />
+      <div className="level-one-nav animation-flat">
+        {hasMultipleRoles && (
+          <SelectRole
+            selectedRole={selectedRole}
+            setSelectedRole={setSelectedRole}
+          />
+        )}
+        <NavLinkContainer listOfLinks={navLinks} />
       </div>
     </div>
   );
@@ -296,16 +187,13 @@ const LevelOneContent = ({
 LevelOneContent.propTypes = {
   isExpanded: PropTypes.bool,
   config: PropTypes.object,
-  showDevPreDfpLink: PropTypes.bool,
-  showPhysicianCompareLink: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
-  showApmIncentivePaymentLink: PropTypes.bool,
-  performanceYear: PropTypes.string,
-  fbpPerformanceYear: PropTypes.string,
-  showSelfNomination: PropTypes.bool,
-  style: PropTypes.object,
-  showReportsPortal: PropTypes.bool,
-  showTargetedReviewLink: PropTypes.bool,
+  levelOneContent: PropTypes.shape({
+    default: PropTypes.arrayOf(PropTypes.object),
+    devPre: PropTypes.arrayOf(PropTypes.object),
+    viewer: PropTypes.arrayOf(PropTypes.object),
+    internalReviewers: PropTypes.arrayOf(PropTypes.object),
+    contentManager: PropTypes.arrayOf(PropTypes.object),
+  }),
 };
 
 export default LevelOneContent;