qpp-style 9.16.7-beta.0 → 9.16.9

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -23,9 +23,11 @@ const NavLinkDrawer = ({
   isHighlighted,
   darkerBackground,
   leftBorderHighlightDisabled,
-  largerDrawerBottomPadding
+  hideLabelSection,
+  largerDrawerBottomPadding,
 }) => {
   const [isOpen, setIsOpen] = useState(openByDefault);
+  const MANAGE_ACCESS = '/user/manage-access';
 
   const toggleDrawer = () => {
     if (!isExpanded && typeof sidebarExpand === 'function') {
@@ -37,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) => {
@@ -59,7 +69,7 @@ const NavLinkDrawer = ({
 
   const buildLeftIconClasses = () => {
     let leftIcon = `left-icon`;
-    
+
     if (isAlwaysOpen) {
       leftIcon += ` always-open`;
     }
@@ -69,7 +79,7 @@ const NavLinkDrawer = ({
     }
 
     return leftIcon;
-  }
+  };
 
   // Classes for the link drawer button
   const currentPage = isCurrentPage(
@@ -80,43 +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) {
@@ -185,11 +201,16 @@ 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)}`}
       >
         <div className={isExpanded ? 'link-body' : 'link-body collapsed'}>
@@ -212,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>
@@ -243,7 +269,8 @@ NavLinkDrawer.propTypes = {
   isHighlighted: PropTypes.bool,
   darkerBackground: PropTypes.bool,
   leftBorderHighlightDisabled: PropTypes.bool,
-  largerDrawerBottomPadding: PropTypes.bool
+  hideLabelSection: PropTypes.bool,
+  largerDrawerBottomPadding: PropTypes.bool,
 };
 
 export default NavLinkDrawer;

package/components/SideNav/UI/SideNavUI.jsx

@@ -78,13 +78,10 @@ const SideNavUI = ({
     );
   };
 
-  const getDynamicContent = (contentItems, className, recursionId, hideLinkClass) => {
+  const getDynamicContent = (contentItems, className, recursionId) => {
     const { openDrawersByDefault, linkActiveFunc, linkCallback, useTooltips } =
       config;
     let linkClass = isExpandedState ? 'link-inline' : 'link-collapsed';
-    if (hideLinkClass) {
-      linkClass = '';
-    }
     const containerRecursionId = recursionId || 0;
 
     const getDynamicIcon = (icon) => {
@@ -108,8 +105,7 @@ const SideNavUI = ({
           container: getDynamicContent(
             item.items,
             item.className,
-            containerRecursionId + 1,
-            item.hideLinkClass
+            containerRecursionId + 1
           ),
           linkBack: (
             <AnimationGroup display={isExpandedState} key={key}>
@@ -183,6 +179,7 @@ const SideNavUI = ({
               isHighlighted={item.isHighlighted}
               darkerBackground={item.darkerBackground}
               leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
+              hideLabelSection={item.hideLabelSection}
               largerDrawerBottomPadding={item.largerDrawerBottomPadding}
             />
           ),