qpp-style 9.16.8 → 9.16.9

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -24,9 +24,10 @@ const NavLinkDrawer = ({
   darkerBackground,
   leftBorderHighlightDisabled,
   hideLabelSection,
-  largerDrawerBottomPadding
+  largerDrawerBottomPadding,
 }) => {
   const [isOpen, setIsOpen] = useState(openByDefault);
+  const MANAGE_ACCESS = '/user/manage-access';
 
   const toggleDrawer = () => {
     if (!isExpanded && typeof sidebarExpand === 'function') {
@@ -38,6 +39,14 @@ const NavLinkDrawer = ({
     if (!isAlwaysOpen && !disabled) {
       setIsOpen(!isOpen);
     }
+
+    reRouteHandler();
+  };
+
+  const reRouteHandler = () => {
+    if (url === MANAGE_ACCESS) {
+      return (window.location.href = MANAGE_ACCESS);
+    }
   };
 
   const isLinkActive = (link, func) => {
@@ -60,7 +69,7 @@ const NavLinkDrawer = ({
 
   const buildLeftIconClasses = () => {
     let leftIcon = `left-icon`;
-    
+
     if (isAlwaysOpen) {
       leftIcon += ` always-open`;
     }
@@ -70,7 +79,7 @@ const NavLinkDrawer = ({
     }
 
     return leftIcon;
-  }
+  };
 
   // Classes for the link drawer button
   const currentPage = isCurrentPage(
@@ -81,47 +90,49 @@ const NavLinkDrawer = ({
 
   const renderLeftIcon = (leftIcon) => {
     if (leftIcon) {
-      return (<svg
-        className={`${buildLeftIconClasses()}`}
-        aria-hidden="true"
-        focusable="false"
+      return (
+        <svg
+          className={`${buildLeftIconClasses()}`}
+          aria-hidden="true"
+          focusable="false"
         >
-        {leftIcon}
-        </svg>)
+          {leftIcon}
+        </svg>
+      );
     }
-  }
+  };
 
   const hasDarkerBackground = (darkerBackground) => {
     return darkerBackground ? 'background-highlight' : '';
-  }
+  };
 
   const hasDarkerTitle = (darkerBackground) => {
     return darkerBackground ? 'expanded currentPage' : '';
-  }
+  };
 
   const isLeftBorderHighlightDisabled = (leftBorderHighlightDisabled) => {
-    return leftBorderHighlightDisabled ? 'left-border-disabled' : ''
-  }
+    return leftBorderHighlightDisabled ? 'left-border-disabled' : '';
+  };
 
   const isLabelSectionHidden = (hideLabelSection) => {
     return hideLabelSection ? 'hidden-label-section' : '';
-  }
+  };
 
   const isHiddenWhileCollapsed = (isLeftBorderDisabled, isExpanded) => {
     return isLeftBorderDisabled && !isExpanded ? 'hidden-nav-link-item' : '';
-  }
+  };
 
   const highlightTitle = (isHighlighted) => {
     return isHighlighted && isExpanded ? 'highlight' : '';
-  }
+  };
 
   const hasLargerDrawBottomPadding = (largerDrawerBottomPadding) => {
     return largerDrawerBottomPadding ? 'larger-drawer-bottom-padding' : '';
-  }
+  };
 
   const adjustItemSpacing = (largerDrawerBottomPadding) => {
     return largerDrawerBottomPadding ? 'larger-item-spacing' : '';
-  }
+  };
 
   useEffect(() => {
     if (disabled) {
@@ -190,11 +201,15 @@ const NavLinkDrawer = ({
         {...(!isAlwaysOpen ? { 'aria-pressed': isOpen } : {})}
         tabIndex="0"
         aria-label={label}
-        {...(isAlwaysOpen || disabled
+        {...((url !== MANAGE_ACCESS && isAlwaysOpen) || disabled
           ? { disabled: isAlwaysOpen || disabled }
           : {})}
-        className={`${className} ${expandedClass} ${highlightTitle(isHighlighted)} ${hasDarkerTitle(darkerBackground)}
-         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(leftBorderHighlightDisabled)}
+        className={`${className} ${expandedClass} ${highlightTitle(
+          isHighlighted
+        )} ${hasDarkerTitle(darkerBackground)}
+         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(
+          leftBorderHighlightDisabled
+        )}
          ${isLabelSectionHidden(hideLabelSection)}
          ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
       >
@@ -218,11 +233,16 @@ const NavLinkDrawer = ({
         <div
           className={`${currentPage ? 'currentPage' : ''} ${
             isOpen && !disabled ? 'drawer open' : 'drawer'
-          } ${hasDarkerBackground(darkerBackground)} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
+          } ${hasDarkerBackground(
+            darkerBackground
+          )} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
         >
           <ul aria-hidden={!isOpen}>
             {listOfLinks &&
-              renderDrawerLinksRecursively(listOfLinks, `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`)}
+              renderDrawerLinksRecursively(
+                listOfLinks,
+                `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`
+              )}
           </ul>
         </div>
       </AnimationGroup>
@@ -250,7 +270,7 @@ NavLinkDrawer.propTypes = {
   darkerBackground: PropTypes.bool,
   leftBorderHighlightDisabled: PropTypes.bool,
   hideLabelSection: PropTypes.bool,
-  largerDrawerBottomPadding: PropTypes.bool
+  largerDrawerBottomPadding: PropTypes.bool,
 };
 
 export default NavLinkDrawer;