qpp-style 9.17.1 → 9.18.0

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/NotificationBanner/CollapsedView.js

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { BellOutline } from '../../lib/SvgComponents.jsx';
+
+const CollapsedView = (
+  { expandNotification, label },
+  { collapsedWrapperRef, collapsedBannerRef }
+) => {
+  return (
+    <div
+      ref={collapsedWrapperRef}
+      className={`notification-banner-wrapper collapsed-view`}
+      onClick={expandNotification}
+    >
+      <button ref={collapsedBannerRef} className={`notification-banner-label`}>
+        {label}
+        <span className="bell-icon">
+          <svg aria-hidden="true" focusable="false">
+            <BellOutline />
+          </svg>
+        </span>
+      </button>
+    </div>
+  );
+};
+
+CollapsedView.propTypes = {
+  expandNotification: PropTypes.func,
+  label: PropTypes.string,
+};
+
+export default forwardRef(CollapsedView);

package/components/NotificationBanner/ExpandedView.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SanitizedContent from '../SanitizedContent';
+import { CloseXIcon } from '../../lib/SvgComponents.jsx';
+
+const ExpandedView = ({
+  label,
+  expanded,
+  content,
+  dismissable,
+  collapseNotification,
+}) => {
+  return (
+    <div className={`notification-banner-wrapper expanded-view`}>
+      <div className="notification-banner-label">{label}</div>
+      <div className="notification-banner-content">
+        <SanitizedContent
+          html={expanded ? content : '<p>No notifications to display</p>'}
+        />
+      </div>
+      {expanded && dismissable && (
+        <button
+          onClick={collapseNotification}
+          type="button"
+          className="notification-banner-close"
+        >
+          <svg className="close-icon" aria-hidden="true" focusable="false">
+            <CloseXIcon />
+          </svg>
+          <span className="sr-only">Close</span>
+        </button>
+      )}
+    </div>
+  );
+};
+
+ExpandedView.propTypes = {
+  label: PropTypes.string,
+  expanded: PropTypes.bool,
+  content: PropTypes.string,
+  dismissable: PropTypes.bool,
+  collapseNotification: PropTypes.func,
+};
+
+export default ExpandedView;

package/components/NotificationBanner/NotificationBanner.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import NotificationBanner from './index';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 
 export default {
   title: 'NotificationBanner',
@@ -11,11 +11,11 @@ export default {
 export const ExampleNotificationBanner = () => (
   <NotificationBanner
     result={{
-      content: 'CONTENT',
-      label: 'Label',
-      name: 'name',
+      display: true,
+      dismissable: true,
+      content: 'test',
+      label: 'Update',
       color: 'blue',
-      dismissable: boolean('dismissable', false),
     }}
   />
 );

package/components/NotificationBanner/index.js

@@ -1,80 +1,87 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-
-import SanitizedContent from '../SanitizedContent';
-import { CloseXIcon, BellOutline } from '../../lib/SvgComponents.jsx';
+import ExpandedView from './ExpandedView';
+import CollapsedView from './CollapsedView';
 import { withGetConfig } from '../hooks/useGetConfig';
 
-class NotificationBanner extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      height: '100%',
-      expanded: true,
-    };
-
-    this._renderCloseButton = this.renderCloseButton.bind(this);
-    this._collapseNotification = this.collapseNotification.bind(this);
-    this._expandNotification = this.expandNotification.bind(this);
-    this._setBannerHeight = this.setBannerHeight.bind(this);
-  }
+function debounce(fn, ms) {
+  let timer;
+  return () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      fn.apply(this, arguments);
+    }, ms);
+  };
+}
 
-  componentDidMount() {
-    if (window.innerWidth <= 767) {
-      this.setState({
-        expanded: false,
-      });
+const NotificationBanner = ({ result }) => {
+  const {
+    color = 'blue',
+    content,
+    dismissable,
+    enabled,
+    label = 'Update',
+  } = result.content;
+
+  const bannerContainerRef = useRef(null);
+  const collapsedWrapperRef = useRef(null);
+  const collapsedBannerRef = useRef(null);
+  const VIEW_BREAKPOINT = 767;
+  const [height, setHeight] = useState('100%');
+  const [expanded, setExpanded] = useState();
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const cssDeterminesBannerView = expanded ? 'expanded' : 'collapsed';
+
+  useEffect(() => {
+    //setBannerHeight on Load & Resize
+    setBannerHeight();
+
+    if (window.innerWidth <= VIEW_BREAKPOINT) {
+      setExpanded(false);
     }
 
-    window.addEventListener('load', this._setBannerHeight);
-    window.addEventListener('resize', this._setBannerHeight);
-  }
+    const debounceBrowserResizeHandler = debounce(() => {
+      return setWindowWidth(window.innerWidth);
+    }, 600);
 
-  // Populate state with notification from localStorage
-  componentDidUpdate(prevProps) {
-    if (prevProps.result !== this.props?.result) {
-      const { result: notifications } = this.props;
-      if (Object.keys(notifications).length > 0) {
-        this.setState({
-          expanded: this.isNotificationExpanded(notifications.content),
-        });
-      }
-    }
-  }
+    window.addEventListener('resize', debounceBrowserResizeHandler);
 
-  setBannerHeight() {
-    const {
-      result: {
-        content: { content },
-      },
-    } = this.props;
-    if (content) {
-      this.bannerContainer.style.transition = 'none';
-
-      this.state.expanded
-        ? this.collapsedBanner.setAttribute('tabIndex', '-1')
-        : this.collapsedBanner.setAttribute('tabIndex', ' ');
+    return () => {
+      window.removeEventListener('resize', debounceBrowserResizeHandler);
+    };
+  }, [windowWidth]);
 
-      this.setState({
-        height: this.state.expanded
-          ? '100%'
-          : this.collapsedWrapper.offsetHeight + 'px',
-      });
+  useEffect(() => {
+    //  setExpanded => updates cssDeterminesBannerView
+    if (Object.keys(result).length > 0) {
+      setExpanded(isNotificationExpanded());
     }
-  }
+  }, [result]);
 
-  isNotificationExpanded(notification) {
-    const dateDismissed = new Date(notification.dateDismissed);
-    const dateUpdated = new Date(notification.dateUpdated);
+  const isNotificationExpanded = () => {
+    const dateDismissed = new Date(result.content.dateDismissed);
+    const dateUpdated = new Date(result.content.dateUpdated);
     const notDismissed =
-      (this.isDateValid(dateUpdated) &&
-        this.isDateValid(dateDismissed) &&
+      (isDateValid(dateUpdated) &&
+        isDateValid(dateDismissed) &&
         dateUpdated >= dateDismissed) ||
-      !this.isDateValid(dateDismissed);
-
+      !isDateValid(dateDismissed);
     return notDismissed;
-  }
+  };
+
+  const setBannerHeight = () => {
+    if (content) {
+      bannerContainerRef.current.style.transition = 'none';
+      expanded
+        ? collapsedBannerRef.current.setAttribute('tabIndex', '-1')
+        : collapsedBannerRef.current.setAttribute('tabIndex', ' ');
+
+      setHeight(
+        expanded ? '100%' : `${collapsedWrapperRef.current.offsetHeight}px`
+      );
+    }
+  };
 
   /**
    * Whether the date is valid, i.e. not null
@@ -82,17 +89,17 @@ class NotificationBanner extends Component {
    * @param {Date} date
    * @return {Boolean}
    */
-  isDateValid(date) {
-    return !isNaN(Date.parse(date));
-  }
 
+  const isDateValid = (date) => {
+    return !isNaN(Date.parse(date));
+  };
   /**
    * Try to find this NotificationBanner instance in localStorage, or else add
    * a minimal version of it, and mark it with a dateDismissed, then update
    * localStorage.
    */
-  markNotificationClosed() {
-    const { result } = this.props;
+
+  const markNotificationClosed = () => {
     const dateDismissed = new Date().toISOString();
     const storageNotification = result || {};
 
@@ -119,128 +126,76 @@ class NotificationBanner extends Component {
         })
       );
     }
-  }
+  };
 
   /**
    * Callback when the user dimisses a notification. Mark it as dismissed in
    * localStorage, empty the contents, and dispatch a custom event to notify
    * any observers that it has been dismissed.
    */
-  collapseNotification(e) {
+
+  const collapseNotification = (e) => {
     e.stopPropagation();
-    this.markNotificationClosed();
-    this.collapsedBanner.setAttribute('tabIndex', ' ');
-    this.bannerContainer.style.transition = 'height .2s ease-out';
-    this.setState({
-      expanded: false,
-      height: this.collapsedWrapper.offsetHeight + 'px',
-    });
-  }
+    markNotificationClosed();
+    collapsedBannerRef.current.setAttribute('tabIndex', ' ');
+    bannerContainerRef.current.style.transition = 'height .2s ease-out';
 
-  expandNotification() {
-    if (!this.state.expanded) {
-      this.collapsedBanner.setAttribute('tabIndex', '-1');
-      this.bannerContainer.style.transition = 'height .2s ease-out';
-      this.setState({
-        expanded: true,
-        height: '100%',
-      });
-    }
-  }
+    setExpanded(false);
+    setHeight(`${collapsedWrapperRef.current.offsetHeight}px`);
+  };
 
-  /**
-   * Renders the close button if the notification instance is dismissable.
-   *
-   * @return {String} HTML content
-   */
-  renderCloseButton() {
-    const {
-      result: {
-        content: { dismissable },
-      },
-    } = this.props;
-    if (dismissable) {
-      return (
-        <button
-          onClick={this._collapseNotification}
-          type="button"
-          className="notification-banner-close"
-        >
-          <svg className="close-icon" aria-hidden="true" focusable="false">
-            <CloseXIcon />
-          </svg>
-          <span className="sr-only">Close</span>
-        </button>
-      );
-    } else {
-      return '';
-    }
-  }
+  const expandNotification = () => {
+    collapsedBannerRef.current.setAttribute('tabIndex', '-1');
+    bannerContainerRef.current.style.transition = 'height .2s ease-out';
+    setExpanded(true);
+    setHeight('100%');
+  };
 
   /**
    * Render the notification if it has any contents.
    *
    * @return {String} HTML content
    */
-  render() {
-    const { expanded, height } = this.state;
-    const { result: { content: { enabled, content } = {} } = {} } = this.props;
-    if (!content || !enabled) {
-      return <div id="notification-banner" />;
-    } else {
-      const notificationStatus = expanded ? 'expanded' : 'collapsed';
-      const { color = 'blue', label = 'Update' } = content;
-      const className = `notification-banner  notification-banner-${color} ${notificationStatus}`;
 
-      return (
+  return (
+    <>
+      {!content || !enabled ? (
+        <div id="notification-banner" />
+      ) : (
         <div
+          ref={bannerContainerRef}
           style={{ height }}
-          ref={(elem) => (this.bannerContainer = elem)}
-          className={className}
+          className={`notification-banner notification-banner-${color} ${cssDeterminesBannerView}`}
         >
-          <div
-            ref={(elem) => (this.expandedWrapper = elem)}
-            className={`notification-banner-wrapper expanded-view`}
-          >
-            <div className="notification-banner-label">{label}</div>
-            <div className="notification-banner-content">
-              <SanitizedContent
-                html={expanded ? content : '<p>Nothing to see here</p>'}
-              />
-            </div>
-            {expanded && this._renderCloseButton()}
-          </div>
-
-          <div
-            ref={(elem) => (this.collapsedWrapper = elem)}
-            className={`notification-banner-wrapper collapsed-view`}
-            onClick={this._expandNotification}
-          >
-            <button
-              ref={(elem) => (this.collapsedBanner = elem)}
-              className={`notification-banner-label`}
-            >
-              {label}
-              <span className="bell-icon">
-                <svg aria-hidden="true" focusable="false">
-                  <BellOutline />
-                </svg>
-              </span>
-            </button>
-          </div>
+          <ExpandedView
+            label={label}
+            expanded={expanded}
+            content={content}
+            dismissable={dismissable}
+            collapseNotification={collapseNotification}
+          />
+
+          <CollapsedView
+            expandNotification={expandNotification}
+            label={label}
+            ref={{ collapsedWrapperRef, collapsedBannerRef }}
+          />
         </div>
-      );
-    }
-  }
-}
+      )}
+    </>
+  );
+};
 
 NotificationBanner.propTypes = {
   result: PropTypes.shape({
     content: PropTypes.shape({
-      content: PropTypes.string,
-      label: PropTypes.string,
       color: PropTypes.string,
+      content: PropTypes.string,
+      dateDismissed: PropTypes.string,
+      dateUpdated: PropTypes.string,
       dismissable: PropTypes.bool,
+      enabled: PropTypes.bool,
+      label: PropTypes.string,
     }),
   }),
 };
@@ -248,10 +203,11 @@ NotificationBanner.propTypes = {
 NotificationBanner.defaultProps = {
   result: {
     content: {
-      content: null,
-      label: 'Update',
       color: 'blue',
+      content: null,
       dismissable: true,
+      enabled: true,
+      label: 'Update',
     },
   },
 };

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,8 @@ 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 +37,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 +47,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);
     }
   }, []);