qpp-style 1.0.0-ds.2 → 1.0.0-ds.3

package/.storybook/main.js

@@ -1,4 +1,5 @@
 const path = require('path');
+
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
@@ -19,31 +20,36 @@ module.exports = {
   ],
   webpackFinal: async (config) => {
     // do mutation to the config
-
     config.plugins.push(
-      new CopyWebpackPlugin([
-        {
-          from: path.join(__dirname, '..', '..', 'shared', 'fonts/'),
-          to: 'fonts/',
-        },
-        {
-          from: path.join(__dirname, '..', '..', 'shared', 'images/'),
-          to: 'images/',
-          force: true,
-        },
-      ])
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: path.join(__dirname, '..', '..', 'shared', 'fonts/'),
+            to: 'fonts/',
+          },
+          {
+            from: path.join(__dirname, '..', '..', 'shared', 'images/'),
+            to: 'images/',
+            force: true,
+          },
+        ],
+      })
     );
-
     config.module.rules.push({
       test: /\.scss$/,
       resolve: {
         extensions: ['.scss', '.sass'],
       },
       use: [
-        { loader: 'style-loader' },
+        {
+          loader: 'style-loader',
+        },
         {
           loader: 'css-loader',
-          options: { sourceMap: true, importLoaders: 1 },
+          options: {
+            sourceMap: true,
+            importLoaders: 1,
+          },
         },
         {
           loader: 'sass-loader',
@@ -53,26 +59,30 @@ module.exports = {
         },
       ],
     });
-
     config.module.rules.push({
       test: /\.svg$/,
-      use: [
-        'raw-loader',
-        {
-          loader: 'svgo-loader',
-          options: {
-            plugins: [
-              { removeTitle: true },
-              { convertColors: { shorthex: false } },
-              { convertPathData: false },
-            ],
-          },
+      type: 'asset/source',
+      use: {
+        loader: 'svgo-loader',
+        options: {
+          plugins: [
+            {
+              removeTitle: true,
+            },
+            {
+              convertColors: {
+                shorthex: false,
+              },
+            },
+            {
+              convertPathData: false,
+            },
+          ],
         },
-      ],
-    });
-
-    // Modify default storybook SVG loader so we can use the one expected by qpp-style
+      },
+    }); // Modify default storybook SVG loader so we can use the one expected by qpp-style
     // NOTE: When updating storybook dependency, double check this override.
+
     const staticAssetLoader = config.module.rules.find((rule) => {
       const regExp = rule.test;
       const isRegExp = regExp && typeof regExp.test === 'function';
@@ -81,9 +91,13 @@ module.exports = {
 
     if (staticAssetLoader) {
       // remove svg matching from storybook's default static asset loader
-      staticAssetLoader.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
+      staticAssetLoader.test =
+        /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
     }
 
     return config;
   },
+  core: {
+    builder: 'webpack5',
+  },
 };

package/components/Header/HeaderMenuLink.js

@@ -33,6 +33,12 @@ const HeaderMenuLink = ({ href, name }) => {
       data-track-category="TopNav"
       data-track-action="click"
       data-track-label={name}
+      onKeyDown={(e) => {
+        if (e.key === ' ' || e.code === 'Space') {
+          window.location.href = window.location.origin + href;
+          setUtagLink('main navbar', 'keydown', href);
+        }
+      }}
       onClick={() => {
         setUtagLink('main navbar', 'click', href);
       }}

package/components/SideNav/Content/LevelOneContent.jsx

@@ -10,10 +10,10 @@ import {
   loadUserPermissions,
   getUrlConditionMap,
   isMultiRoleUser,
-  isReviewerOrSelfNomRole,
   getIcon,
   isImpersonating,
   isImpersonationLink,
+  loadSideNavContent,
 } from '../helpers';
 import SelectRole from './SelectRole';
 
@@ -32,27 +32,31 @@ const LevelOneContent = ({
     name = `${firstName} ${lastName}`;
   }
 
+  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
+
   const permissions = loadUserPermissions(document.cookie, selectedRole);
   const { internalReviewerNames } = permissions;
 
   const hasMultipleRoles = isMultiRoleUser(document.cookie);
-
-  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
-
   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;
-    }
+  if (isDevPre) {
+    content = levelOneContent?.devPre || defaultContent.devPre;
   } else {
-    if (selectedRole === 'Reviewer') {
-      content =
-        levelOneContent?.internalReviewers || defaultContent.internalReviewers;
+    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
+      );
     }
   }
 
@@ -60,8 +64,8 @@ const LevelOneContent = ({
   const urlConditionMap = getUrlConditionMap(permissions);
 
   const navLinks = content
-    // Filter out Exception & Targeted Review links for Helpdesk Viewer when not impersonating
     .filter((link) => {
+      // Filter out Exception & Targeted Review links for Helpdesk Viewer when not impersonating
       const isHelpdeskRoleNotImpersonating =
         selectedRole === 'Helpdesk Viewer' && !isImpersonating(document.cookie);
       if (isHelpdeskRoleNotImpersonating) {
@@ -70,6 +74,23 @@ const LevelOneContent = ({
           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) => {
@@ -80,7 +101,11 @@ const LevelOneContent = ({
         return acc;
       }
 
-      const IconComponent = getIcon(url);
+      const isContentMgrLink =
+        label === 'Manage Documents' || label === 'Author Content';
+      const IconComponent = isContentMgrLink
+        ? getIcon(null, label)
+        : getIcon(url);
       const Icon = IconComponent ? <IconComponent /> : null;
       const sharedProps = {
         url,
@@ -167,6 +192,7 @@ LevelOneContent.propTypes = {
     devPre: PropTypes.arrayOf(PropTypes.object),
     viewer: PropTypes.arrayOf(PropTypes.object),
     internalReviewers: PropTypes.arrayOf(PropTypes.object),
+    contentManager: PropTypes.arrayOf(PropTypes.object),
   }),
 };
 

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

@@ -28,8 +28,9 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
     const newRoleSelected = ROLE_OPTIONS.filter(
       (opt) => opt.value === dropdownValue
     )[0].value;
-    // Update localStorage with the current selected role in state & the new role selected
-    updateLocalStorageRoleState(selectedRole, newRoleSelected);
+
+    // Update localStorage with the new role selected
+    updateLocalStorageRoleState(newRoleSelected);
     setSelectedRole(newRoleSelected);
     redirectPage(newRoleSelected);
   };
@@ -37,9 +38,9 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
   // Set role on init render
   // below is executed on every page refresh including on side nav link navigation & on role selection
   useEffect(() => {
-    // Check localstorage & set initial selected role
-    const { selectedRole, previousSelectedRole } = getLocalStorageRoleState();
-    const roleValue = selectedRole || ROLE_OPTIONS[0].value;
+    // Check localStorage & set initial selected role
+    const { selectedUserRole } = getLocalStorageRoleState();
+    const roleValue = selectedUserRole || ROLE_OPTIONS[0].value;
 
     // Set localStorage values if not set
     initializeLocalStorageRoleState(roleValue);
@@ -47,10 +48,8 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
     // Update state
     setSelectedRole(roleValue);
 
-    // No previous role set && current role is QPP User in localStorage values indicates
-    // initial render, where a user has NOT used the dropdown to change the user role.
-    // If the above condition is not met, redirect to default page of selected role
-    if (!previousSelectedRole && selectedRole !== 'QPP User') {
+    //Redirect to role default page IF localStorage was not set (indicates initial login)
+    if (!selectedUserRole) {
       redirectPage(roleValue);
     }
   }, []);

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

@@ -21,7 +21,10 @@ const hasReviewerRole = (cmsInternalRoles) => {
   return cmsInternalRoles.some(
     (name) =>
       name === 'QPP Self-Nomination' ||
-      name === 'QPP Targeted Review & Exceptions'
+      name === 'QPP Targeted Review & Exceptions' ||
+      name === 'QPP Case Management - PIMMS Reviewer' ||
+      name === 'QPP Case Management - ACO PAC Reviewer' ||
+      name === 'QPP Case Management - CMS Reviewer'
   );
 };
 
@@ -35,6 +38,17 @@ const hasHelpdeskRole = (cmsInternalRoles) => {
   return cmsInternalRoles.includes('QPP Helpdesk');
 };
 
+const hasContentMgmtRole = (cmsInternalRoles) => {
+  if (!cmsInternalRoles) return false;
+  const cmsRoles = [
+    'QPP Content Management - Author',
+    'QPP Content Management - Approver',
+    'QPP Content Management - Admin',
+    'QPP Front-end - Author',
+  ];
+  return cmsInternalRoles.some((role) => cmsRoles.includes(role));
+};
+
 /**
  * Transforms cookie values into optios format for use in role seelction dropdown
  * @param {array} values extracted & parsed vookie values
@@ -53,6 +67,9 @@ const transformCookieValues = (values) => {
   if (hasHelpdeskRole(cmsInternalRoles)) {
     optionValues.push({ name: 'Helpdesk Viewer', value: 'Helpdesk Viewer' });
   }
+  if (hasContentMgmtRole(cmsInternalRoles)) {
+    optionValues.push({ name: 'Content Manager', value: 'Content Manager' });
+  }
   return optionValues;
 };
 
@@ -70,6 +87,7 @@ const defaultPageByRole = {
   'QPP User': '/user/submissions',
   'Helpdesk Viewer': '/user/helpdesk-viewing-tool',
   Reviewer: '/user/reviewers',
+  'Content Manager': '/user/content-management',
 };
 
 /**
@@ -89,8 +107,7 @@ export const redirectPage = (role) => {
  * @returns {object}
  */
 export const getLocalStorageRoleState = () => ({
-  selectedRole: localStorage.getItem('selectedRole'),
-  previousSelectedRole: localStorage.getItem('previousSelectedRole'),
+  selectedUserRole: localStorage.getItem('selectedUserRole'),
 });
 
 /**
@@ -101,20 +118,14 @@ export const getLocalStorageRoleState = () => ({
 export const initializeLocalStorageRoleState = (roleValue) => {
   const localStorageValues = getLocalStorageRoleState();
 
-  if (!localStorageValues.selectedRole) {
-    localStorage.setItem('selectedRole', roleValue);
-  }
-  if (!localStorageValues.previousSelectedRole) {
-    localStorage.setItem('previousSelectedRole', '');
+  if (!localStorageValues.selectedUserRole) {
+    localStorage.setItem('selectedUserRole', roleValue);
   }
 };
 
 /**
  * Update role values in localStorage
- * @param {string} currentRole current/existing user role
  * @param {string} updatedRole new user role selected from dropdown
  */
-export const updateLocalStorageRoleState = (currentRole, updatedRole) => {
-  localStorage.setItem('previousSelectedRole', currentRole);
-  localStorage.setItem('selectedRole', updatedRole);
-};
+export const updateLocalStorageRoleState = (updatedRole) =>
+  localStorage.setItem('selectedUserRole', updatedRole);

package/components/SideNav/UI/SideNavUI.jsx

@@ -304,6 +304,7 @@ SideNavUI.propTypes = {
       devPre: PropTypes.arrayOf(PropTypes.object),
       internalReviewers: PropTypes.arrayOf(PropTypes.object),
       viewer: PropTypes.arrayOf(PropTypes.object),
+      contentManager: PropTypes.arrayOf(PropTypes.object),
     }),
   }),
 };
@@ -326,6 +327,7 @@ SideNavUI.defaultProps = {
       devPre: [],
       internalReviewers: [],
       viewer: [],
+      contentManager: [],
     },
   },
 };

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

@@ -93,7 +93,25 @@
     {
       "url": "/self-nomination",
       "label": "Self Nomination"
+    },
+    {
+      "url": "/cases/needs-review",
+      "label": "Review Skip Requests"
     }
   ],
-  "viewer": []
+  "viewer": [],
+  "contentManager": [
+    {
+      "url": "/user/content-management",
+      "label": "Dashboard Home"
+    },
+    {
+      "url": "#",
+      "label": "Manage Documents"
+    },
+    {
+      "url": "#",
+      "label": "Author Content"
+    }
+  ]
 }

package/components/SideNav/helpers.js

@@ -13,6 +13,8 @@ import {
   StarIcon,
   TargetIcon,
   IndividualReporting,
+  ManageDocumentsIcon,
+  AuthorContentIcon,
 } from '../../lib/SvgComponents';
 
 const submissionsUrl = '/user/submissions';
@@ -23,6 +25,7 @@ const physicianCompareUrl = `${submissionsUrl}/doctors-clinicians-preview`;
 const reportsPortalUrl = `${submissionsUrl}/reports`;
 const facilityBasedPreviewBaseUrl = `${submissionsUrl}/facility-based-preview`;
 const viewingToolUrl = '/user/helpdesk-viewing-tool';
+const contentMgrDashboardUrl = '/user/content-management';
 
 const performanceFeedbackUrl = (performanceYear) => {
   if (performanceYear) {
@@ -58,7 +61,7 @@ const handleNavigation = (e, linkCallbackFunction, label) => {
  * @param {string} url
  * @returns svg icon
  */
-const getIcon = (url) => {
+const getIcon = (url, linkLabel) => {
   const icons = {
     [dashboardUrl]: DashboardIcon,
     [feedbackUrl]: StarIcon,
@@ -79,17 +82,70 @@ const getIcon = (url) => {
     '/reviewer/exception': HardshipIcon,
     '/reviewer/targeted-review': TargetIcon,
     '/self-nomination': IndividualReporting,
+    '/cases/needs-review': FacilityBasedPreviewIcon,
+    [contentMgrDashboardUrl]: AccountHomeIcon,
+    'Manage Documents': ManageDocumentsIcon,
+    'Author Content': AuthorContentIcon,
   };
+
+  if (linkLabel) return icons[linkLabel];
   return icons[url];
 };
 
+const singleRoleContentMap = {
+  'QPP Content Management - Author': 'contentManager',
+  'QPP Content Management - Approver': 'contentManager',
+  'QPP Content Management - Admin': 'contentManager',
+  'QPP Front-end - Author': 'contentManager',
+  'QPP Self-Nomination': 'internalReviewers',
+  'QPP Targeted Review & Exceptions': 'internalReviewers',
+};
+
+const multiRoleContentMap = {
+  Reviewer: 'internalReviewers',
+  'Content Manager': 'contentManager',
+};
+
+const replaceDefaultContentMgrLinks = (defaultContent) => {
+  const host = window.location.host;
+  const updatedDefaultContent = {
+    ...defaultContent,
+    contentManager: [
+      defaultContent.contentManager.find(
+        (obj) => obj.label === 'Dashboard Home'
+      ),
+      {
+        url: `${host}.qpp.cms.gov/cm/`,
+        label: 'Manage Documents',
+      },
+      {
+        url: `${host}.qpp.cms.gov/content-management/`,
+        label: 'Author Content',
+      },
+    ],
+  };
+  return updatedDefaultContent;
+};
+
 /**
- * Check if Reviewer or Self-Nom role
- * @param {string} name
- * @returns {boolean}
+ * Load the side nav content for the given role
+ * @param {sting} roleName role of given user from internalReviewerNames
+ * @param {object} navContent object of side nav links by role (levelOneContent & defaultContent)
+ * @returns {array} returns an array of objects (side nav menu links) from levelOneContent
+ * || defaultContent
  */
-const isReviewerOrSelfNomRole = (name) =>
-  name === 'QPP Self-Nomination' || name === 'QPP Targeted Review & Exceptions';
+const loadSideNavContent = (roleName, navContent, isMultiRoleUser = false) => {
+  const { levelOneContent, defaultContent } = navContent;
+  const updatedDefaultContent = replaceDefaultContentMgrLinks(defaultContent);
+  const roleContentMap = isMultiRoleUser
+    ? multiRoleContentMap
+    : singleRoleContentMap;
+  const contentByRole = roleContentMap[roleName];
+  if (levelOneContent) {
+    return levelOneContent[contentByRole] || levelOneContent.default;
+  }
+  return updatedDefaultContent[contentByRole] || updatedDefaultContent.default;
+};
 
 /**
  * Check if user is currently impersonating
@@ -171,6 +227,11 @@ const permissionsByRole = {
   Impersonation: {
     internalReviewerNames: ['QPP Helpdesk'],
   },
+  'Content Manager': {
+    hasAuthorizations: false,
+    hasApmPaymentss: false,
+    hasNonRegistryAuthorizations: false,
+  },
 };
 
 /**
@@ -230,6 +291,14 @@ const getUrlConditionMap = (userPermissions) => {
       'QPP Self-Nomination'
     ),
 
+    '/cases/needs-review': userPermissions.internalReviewerNames?.some((val) =>
+      [
+        'QPP Case Management - PIMMS Reviewer',
+        'QPP Case Management - ACO PAC Reviewer',
+        'QPP Case Management - CMS Reviewer',
+      ].includes(val)
+    ),
+
     // dev pre
     '/user/applications': userPermissions.ehrAuthorized,
     '/user/test-data': userPermissions.ehrAuthorized,
@@ -257,8 +326,8 @@ module.exports = {
   loadUserPermissions,
   getUrlConditionMap,
   isMultiRoleUser,
-  isReviewerOrSelfNomRole,
   getIcon,
   isImpersonating,
   isImpersonationLink,
+  loadSideNavContent,
 };