qpp-style 9.26.1 → 9.28.0

package/README.md

@@ -43,3 +43,18 @@ npm publish
 ```
 
 7. Once published successfully, merge into main.
+
+The Side Nav contains multiple item array types: divider, container, linkBack, linkHome, practiceDetails, individualDetails, linkDrawer, custom, chart, and switchLink.
+
+| Item Array Type   | Description                                                                                                                                                                                                                                                                                    |
+|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| divider           | <hr> element that is located above and below the practice container.                                                                                                                                                                                                                           |
+| container         | gets Dynamic Content of multiple items and contains the linkDrawer item. Level One and Level Two content are located in this container.                                                                                                                                                        |
+| linkBack          | <button> that links the user back to a URL. This uses a chevron Left icon.                                                                                                                                                                                                                     |
+| linkHome          | <a> tag element which sends the user back to the “Account Home” page /user/submissions. This uses the home icon SVG and is located at the top of the side nav.                                                                                                                                 |
+| practiceDetails   | <div> element with the class name practice-container. Inside this container is the <h2> element which includes the Practice Name and the <p> element which is the Practice Tin. The Practice Tin shows either the CPC+ ID, PCF ID, APM Entity ID, VG ID, or Practice Tin.                      |
+| individualDetails | <div> element with the class name “individual-container”. This parent element contains two other elements which are the <h3> Individual Name and the <p> Individual NPI.                                                                                                                       |
+| linkDrawer        | This is the most complex item type. This item displays the Level One and Level Two <button> elements which contain navigation links depending on each page as well as specific SVG icons. Depending on the page there can be multiple links to the user can access quickly using the side nav. |
+| custom            | This option is for sanitized HTML content. This custom HTML will be cleaned of any potentially harmful elements that could compromise the security of the web app.                                                                                                                             |
+| chart             | This option uses the ScoreChart component to display Chart Data on the Side Nav. This data includes categories from Quality Measures, Advancing Care Info, Promoting Interoperability, Improvement Activities, and Cost.                                                                       |
+| switchLink        | This is an implementation of the “Switch Practice” button for the Side Nav. Clicking 'Switch Practice' will take the user back to the TIN list for the part of the application they are viewing.                                                                                               |

package/components/NotificationBanner/ExpandedView.js

@@ -13,7 +13,7 @@ const ExpandedView = ({
   return (
     <div className={`notification-banner-wrapper expanded-view`}>
       <div className="notification-banner-label">{label}</div>
-      <div className="notification-banner-content">
+      <div className="notification-banner-content qppds">
         <SanitizedContent
           html={expanded ? content : '<p>No notifications to display</p>'}
         />

package/components/SanitizedContent/index.jsx

@@ -86,6 +86,9 @@ const defaultAllowedTags = [
   'circle',
   'g',
   'path',
+  'rect',
+  'polygon',
+  'line',
 ];
 
 // Override the default allowed HTML attributes for all tags
@@ -152,8 +155,10 @@ const defaultAllowedAttributes = {
     'width',
     'wrap',
     'fill',
+    'fill-rule',
+    'transform',
     'stroke',
-    ' stroke-width',
+    'stroke-width',
     'd',
     'points',
     'viewbox',
@@ -168,6 +173,12 @@ const defaultAllowedAttributes = {
     'version',
     'preserveaspectratio',
     'enable-background',
+    'points',
+    'stroke-linecap',
+    'x1',
+    'x2',
+    'y1',
+    'y2',
   ],
 };
 

package/components/SideNav/Content/LevelOneContent.jsx

@@ -2,27 +2,13 @@ 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 SanitizedContent from '../../SanitizedContent';
 import AnimationGroup from '../AnimationGroup/AnimationGroup';
-import defaultContent from '../UI/default-content';
-import {
-  loadUserPermissions,
-  getUrlConditionMap,
-  isMultiRoleUser,
-  getIcon,
-  isImpersonating,
-  isImpersonationLink,
-  loadSideNavContent,
-} from '../helpers';
+import { isMultiRoleUser } from '../helpers';
 import SelectRole from './SelectRole';
 
-const LevelOneContent = ({
-  isExpanded,
-  config: { linkCallback, useTooltips } = {},
-  levelOneContent,
-}) => {
-  let { qpp_is_dev_pre, qpp_auth_token } = cookie.parse(document.cookie);
+const LevelOneContent = ({ isExpanded, levelOneContent }) => {
+  let { qpp_auth_token } = cookie.parse(document.cookie);
 
   const [selectedRole, setSelectedRole] = useState('');
 
@@ -31,140 +17,10 @@ const LevelOneContent = ({
     const { firstName, lastName } = jwtDecode(qpp_auth_token);
     name = `${firstName} ${lastName}`;
   }
-
-  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
-
-  const permissions = loadUserPermissions(document.cookie, selectedRole);
-  const { internalReviewerNames } = permissions;
+  const path = window.location.pathname;
+  document.cookie = `current_path=${path}; Path=/;`;
 
   const hasMultipleRoles = isMultiRoleUser(document.cookie);
-  const isDevPre = qpp_is_dev_pre === 'true';
-  let content;
-
-  if (isDevPre) {
-    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
-      );
-    }
-  }
-
-  // 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'
-        );
-      }
-
-      // 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 (!contentMgrCanManageDocs) {
-        return link.label !== 'Manage Documents';
-      }
-      if (!contentMgrFrontendAuthor) {
-        return link.label !== 'Author Content';
-      }
-
-      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 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`;
-      }
-
-      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;
-    }, []);
 
   return (
     <div className="sidebar-content">
@@ -178,7 +34,8 @@ const LevelOneContent = ({
             setSelectedRole={setSelectedRole}
           />
         )}
-        <NavLinkContainer listOfLinks={navLinks} />
+
+        <SanitizedContent html={levelOneContent} />
       </div>
     </div>
   );
@@ -186,14 +43,7 @@ const LevelOneContent = ({
 
 LevelOneContent.propTypes = {
   isExpanded: PropTypes.bool,
-  config: PropTypes.object,
-  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),
-  }),
+  levelOneContent: PropTypes.object,
 };
 
 export default LevelOneContent;

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

@@ -46,6 +46,7 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
 
     // Update state
     setSelectedRole(roleValue);
+    document.cookie = `selected_role=${roleValue}; Path=/;`;
 
     //Redirect to role default page IF localStorage was not set (indicates initial login)
     if (!selectedUserRole) {

package/components/SideNav/Content/index.js

@@ -1,4 +1,3 @@
 import LevelOneContent from './LevelOneContent';
-import LevelTwoContent from './LevelTwoContent';
 
-export { LevelOneContent, LevelTwoContent };
+export { LevelOneContent };

package/components/SideNav/Links/NavLinkInline.jsx

@@ -14,7 +14,6 @@ const NavLinkInline = ({
   showLabel,
   linkCallback,
   disabled,
-  useTooltips,
   target,
 }) => {
   const localUrl = urlExpressionToMatch || url;
@@ -26,12 +25,12 @@ const NavLinkInline = ({
   const tooltipRef = React.useRef();
 
   React.useEffect(() => {
-    if (!showLabel && useTooltips && svgRef.current) {
+    if (!showLabel && svgRef.current) {
       const existingMouseenter = svgRef.current.onmouseover;
       const existingMouseout = svgRef.current.onmouseout;
 
       svgRef.current.onmouseover = () => {
-        if (tooltipRef.current && useTooltips) {
+        if (tooltipRef.current) {
           const svgOffset = svgRef.current.getBoundingClientRect();
           tooltipRef.current.style.top = `${svgOffset.top - 5}px`;
           tooltipRef.current.style.display = 'block';
@@ -105,7 +104,6 @@ NavLinkInline.propTypes = {
   showLabel: PropTypes.bool,
   linkCallback: PropTypes.func,
   disabled: PropTypes.bool,
-  useTooltips: PropTypes.bool,
   target: PropTypes.string,
 };
 

package/components/SideNav/UI/SideNavUI.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { withGetConfig } from '../../hooks/useGetConfig';
-import { LevelOneContent, LevelTwoContent } from '../Content';
+import { sideNavExpandedStorage } from '../helpers';
+import { LevelOneContent } from '../Content';
 import {
   NavLinkContainer,
   NavLinkInline,
@@ -16,27 +16,26 @@ import SanitizedContent from '../../SanitizedContent';
 import * as SvgComponents from '../../../lib/SvgComponents.jsx';
 import CmsSwitchLink from '../Links/CmsSwitchLink';
 import defaultContent from './default-content';
+import axios from 'axios';
 
 const SideNavUI = ({
-  chartData,
   config,
-  currentLevel,
   isAltStyle,
-  isExpanded,
   items,
   onCollapsed,
   onExpanded,
   performanceYear,
-  showReportingLinks,
-  result,
 }) => {
-  const [isExpandedState, setIsExpandedState] = useState(isExpanded);
-  const [itemsState, setItemsState] = useState(items);
-  const [currentLevelState, setCurrentLevelState] = useState(currentLevel);
+  // Use localStorage value to set init state, default to true
+  const [isExpandedState, setIsExpandedState] = useState(
+    sideNavExpandedStorage.setDefault()
+  );
+  const [sideNavContent, setSideNavContent] = useState({});
 
   const collapseRef = useRef(null);
 
   const expand = () => {
+    sideNavExpandedStorage.toggle();
     setIsExpandedState(true);
     if (onExpanded) {
       onExpanded();
@@ -44,6 +43,7 @@ const SideNavUI = ({
   };
 
   const collapse = () => {
+    sideNavExpandedStorage.toggle();
     setIsExpandedState(false);
     if (onCollapsed) {
       onCollapsed();
@@ -54,30 +54,30 @@ const SideNavUI = ({
     isExpandedState ? collapse() : expand();
   };
 
-  const getLevelContent = () => {
-    return (
-      {
-        2: (
-          <LevelTwoContent
-            showReportingLinks={showReportingLinks}
-            isExpanded={isExpandedState}
-            chartData={chartData}
-            config={config}
-          />
-        ),
-      }[currentLevelState] || (
-        <LevelOneContent
-          levelOneContent={result?.content}
-          isExpanded={isExpandedState}
-          config={config}
-        />
-      )
-    );
-  };
+  useEffect(() => {
+    let cancelRequest = false;
+    const { origin } = window.location;
+    let sideNavMenuItems;
+
+    async function getSideNavConfig() {
+      try {
+        const { data } = await axios.get(`${origin}/config/side-navigation`);
+        sideNavMenuItems = data.markup;
+      } catch (error) {
+        sideNavMenuItems = { content: defaultContent };
+      }
+      if (!cancelRequest) {
+        setSideNavContent(sideNavMenuItems);
+      }
+    }
+    getSideNavConfig();
+    return () => {
+      cancelRequest = true;
+    };
+  }, []);
 
   const getDynamicContent = (contentItems, className, recursionId) => {
-    const { openDrawersByDefault, linkActiveFunc, linkCallback, useTooltips } =
-      config;
+    const { openDrawersByDefault, linkActiveFunc, linkCallback } = config;
     let linkClass = isExpandedState ? 'link-inline' : 'link-collapsed';
     const containerRecursionId = recursionId || 0;
 
@@ -117,7 +117,6 @@ const SideNavUI = ({
                 label={item.label}
                 linkCallback={linkCallback}
                 showLabel={true}
-                useTooltips={useTooltips}
               />
             </AnimationGroup>
           ),
@@ -130,7 +129,6 @@ const SideNavUI = ({
                 label={item.label}
                 linkCallback={linkCallback}
                 showLabel={true}
-                useTooltips={useTooltips}
               />
             </AnimationGroup>
           ),
@@ -220,7 +218,6 @@ const SideNavUI = ({
             linkCallback={linkCallback}
             showLabel={isExpandedState}
             disabled={item.disabled}
-            useTooltips={useTooltips}
             target={item.target}
           />
         )
@@ -244,24 +241,23 @@ const SideNavUI = ({
     }
   };
 
-  const content = itemsState
-    ? getDynamicContent(
-        itemsState,
-        'sidebar-content' + (isAltStyle ? ' alt-style' : '')
-      )
-    : getLevelContent();
-
-  useEffect(() => {
-    setIsExpandedState(isExpanded);
-  }, [isExpanded]);
-
+  // Set side nav expanded state in localStorage on initial render
   useEffect(() => {
-    setCurrentLevelState(currentLevel);
-  }, [currentLevel]);
+    sideNavExpandedStorage.init();
+  }, []);
 
-  useEffect(() => {
-    setItemsState(items);
-  }, [items]);
+  const content = !items?.length ? (
+    <LevelOneContent
+      levelOneContent={sideNavContent}
+      isExpanded={isExpandedState}
+      config={config}
+    />
+  ) : (
+    getDynamicContent(
+      items,
+      'sidebar-content' + (isAltStyle ? ' alt-style' : '')
+    )
+  );
 
   return (
     <aside
@@ -284,7 +280,6 @@ const SideNavUI = ({
 
 SideNavUI.propTypes = {
   currentLevel: PropTypes.number,
-  isExpanded: PropTypes.bool,
   onExpanded: PropTypes.func,
   onCollapsed: PropTypes.func,
   chartData: PropTypes.object,
@@ -293,20 +288,10 @@ SideNavUI.propTypes = {
   isAltStyle: PropTypes.bool,
   showReportingLinks: PropTypes.bool,
   performanceYear: PropTypes.string,
-  result: PropTypes.shape({
-    content: PropTypes.shape({
-      default: PropTypes.arrayOf(PropTypes.object),
-      devPre: PropTypes.arrayOf(PropTypes.object),
-      internalReviewers: PropTypes.arrayOf(PropTypes.object),
-      viewer: PropTypes.arrayOf(PropTypes.object),
-      contentManager: PropTypes.arrayOf(PropTypes.object),
-    }),
-  }),
 };
 
 SideNavUI.defaultProps = {
   currentLevel: 1,
-  isExpanded: true,
   onExpanded: () => {},
   onCollapsed: () => {},
   chartData: {},
@@ -315,20 +300,6 @@ SideNavUI.defaultProps = {
   isAltStyle: false,
   showReportingLinks: false,
   performanceYear: '2017',
-  result: {
-    content: {
-      default: [],
-      devPre: [],
-      internalReviewers: [],
-      viewer: [],
-      contentManager: [],
-    },
-  },
 };
 
-export default withGetConfig(SideNavUI, {
-  timeout: 5,
-  url: '/config/side-navigation',
-  localStorageName: 'qpp_side_navigation',
-  defaultContent,
-});
+export default SideNavUI;

package/components/SideNav/helpers.js

@@ -328,6 +328,44 @@ const isImpersonationLink = (docCookie, linkLabel) => {
   return !helpdeskLinks.includes(linkLabel);
 };
 
+/**
+ * Set SideNav expanded state as qpp_side_nav_expanded in localStorage
+ */
+const sideNavExpandedStorage = {
+  isNullOrUndefined: function () {
+    const sideNavExpandedValue = localStorage.getItem('qpp_side_nav_expanded');
+    return sideNavExpandedValue === null || sideNavExpandedValue === undefined;
+  },
+  init: function () {
+    if (this.isNullOrUndefined()) {
+      localStorage.setItem('qpp_side_nav_expanded', true);
+    }
+  },
+  toggle: function () {
+    const isSideNavExpanded = JSON.parse(
+      localStorage.getItem('qpp_side_nav_expanded')
+    );
+    if (!isSideNavExpanded) {
+      localStorage.setItem('qpp_side_nav_expanded', true);
+    } else {
+      localStorage.setItem('qpp_side_nav_expanded', false);
+    }
+  },
+  get: function () {
+    return JSON.parse(localStorage.getItem('qpp_side_nav_expanded'));
+  },
+  remove: function () {
+    localStorage.removeItem('qpp_side_nav_expanded');
+  },
+  setDefault: function () {
+    let defaultValue = true;
+    if (!this.isNullOrUndefined()) {
+      defaultValue = this.get();
+    }
+    return defaultValue;
+  },
+};
+
 module.exports = {
   submissionsUrl,
   dashboardUrl,
@@ -348,4 +386,5 @@ module.exports = {
   isImpersonating,
   isImpersonationLink,
   loadSideNavContent,
+  sideNavExpandedStorage,
 };

package/components/SideNav/index.js

@@ -5,7 +5,6 @@ import { SideNavUI } from './UI';
 const SideNav = (options = {}) => {
   const {
     rootElement,
-    isExpanded,
     onExpanded,
     onCollapsed,
     chartData,
@@ -26,7 +25,6 @@ const SideNav = (options = {}) => {
 
   const { expand, collapse } = render(
     <SideNavUI
-      isExpanded={isExpanded}
       onExpanded={onExpanded}
       onCollapsed={onCollapsed}
       chartData={chartData}