qpp-style 9.51.5 → 9.53.0

package/components/Header/HeaderUI.jsx

@@ -68,7 +68,7 @@ const HeaderUI = ({
   const sharedHeaderProps = {
     skipToContentId,
     includeSkipToSidebar,
-    showSearchBar: headerContent.showSearchBar,
+    showSearchBar: !!headerContent.showSearchBar,
   };
 
   const displayCancelContent = () => (

package/components/SideNav/Content/LevelOneContent.jsx

@@ -1,25 +1,19 @@
-import { useState } from "react";
 import PropTypes from "prop-types";
 import { parse } from "cookie";
 import { jwtDecode } from "jwt-decode";
 import SanitizedContent from "../../SanitizedContent";
 import AnimationGroup from "../AnimationGroup/AnimationGroup";
 import SelectRole from "./SelectRole";
-import { loadRoleOptions } from "./SelectRole/utils";
 
-const LevelOneContent = ({ isExpanded, levelOneContent }) => {
-  const {
-    qpp_auth_token,
-    qpp_has_authorizations: hasAuthorizations,
-    qpp_cms_internal_authorized: cmsInternalRoleValues,
-  } = parse(document.cookie);
-
-  const roleOptions = loadRoleOptions([
-    hasAuthorizations,
-    cmsInternalRoleValues,
-  ]);
-
-  const [selectedRole, setSelectedRole] = useState("");
+const LevelOneContent = ({
+  isExpanded,
+  levelOneContent,
+  sideNavOptions = [],
+  hasMultipleRoles = false,
+  selectedRole,
+  onRoleChange = () => {},
+}) => {
+  const { qpp_auth_token } = parse(document.cookie);
 
   let name = "";
   if (qpp_auth_token) {
@@ -29,8 +23,6 @@ const LevelOneContent = ({ isExpanded, levelOneContent }) => {
   const path = window.location.pathname;
   document.cookie = `current_path=${path}; Path=/;`;
 
-  const hasMultipleRoles = roleOptions.length > 1;
-
   return (
     <div className="sidebar-content">
       <AnimationGroup display={isExpanded}>
@@ -39,9 +31,9 @@ const LevelOneContent = ({ isExpanded, levelOneContent }) => {
       <div className="level-one-nav animation-flat">
         {hasMultipleRoles && (
           <SelectRole
-            selectedRole={selectedRole}
-            setSelectedRole={setSelectedRole}
-            roleOptions={roleOptions}
+            selectedRole={selectedRole || sideNavOptions[0]?.value}
+            setSelectedRole={onRoleChange}
+            roleOptions={sideNavOptions}
           />
         )}
 
@@ -53,7 +45,16 @@ const LevelOneContent = ({ isExpanded, levelOneContent }) => {
 
 LevelOneContent.propTypes = {
   isExpanded: PropTypes.bool,
-  levelOneContent: PropTypes.object,
+  levelOneContent: PropTypes.string,
+  sideNavOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  ),
+  hasMultipleRoles: PropTypes.bool,
+  selectedRole: PropTypes.string,
+  onRoleChange: PropTypes.func,
 };
 
 export default LevelOneContent;

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

@@ -114,6 +114,19 @@ export const redirectPage = (role) => {
   else window.location.assign(defaultPage);
 };
 
+/**
+ * Mirrors redirectPage's own decision so callers can know ahead of time
+ * whether selecting a role will trigger a full-page navigation (in which
+ * case an in-place config refetch would be redundant/wasted work, since
+ * the navigation will remount the app and fetch fresh config anyway).
+ * @param {string} role
+ * @returns {boolean}
+ */
+export const willRedirectPage = (role) => {
+  const defaultPage = defaultPageByRole[role];
+  return Boolean(defaultPage) && window.location.pathname !== defaultPage;
+};
+
 /**
  * Get localStorage values related to user role
  * @returns {object}

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -25,6 +25,7 @@ const NavLinkDrawer = ({
   leftBorderHighlightDisabled,
   hideLabelSection,
   largerDrawerBottomPadding,
+  disableActiveLinkHighlight
 }) => {
   const [isOpen, setIsOpen] = useState(openByDefault);
   const MANAGE_ACCESS = "/user/manage-access";
@@ -70,6 +71,9 @@ const NavLinkDrawer = ({
     if (typeof func === "function") {
       return func(link);
     }
+    if (link.disableActiveLinkHighlight === true) {
+      return false;
+    }
     return window.location.href.indexOf(link.url) > 0;
   };
 
@@ -291,6 +295,7 @@ NavLinkDrawer.propTypes = {
   leftBorderHighlightDisabled: PropTypes.bool,
   hideLabelSection: PropTypes.bool,
   largerDrawerBottomPadding: PropTypes.bool,
+  disableActiveLinkHighlight: PropTypes.bool,
 };
 
 export default NavLinkDrawer;

package/components/SideNav/UI/SideNavUI.jsx

@@ -1,11 +1,13 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
+import { parse } from "cookie";
 
 import { setSideNavExpanded, isSideNavExpanded } from "../helpers";
 import { LevelOneContent } from "../Content";
 import DynamicContent from "./DynamicContent";
 import { NavLinkToggle } from "../Links";
 import defaultMarkup from "./default-markup";
+import { willRedirectPage } from "../Content/SelectRole/utils";
 
 // TODO: For an SSR version of the SideNavUI we would need to have
 // the whole SideNav markup render on the server. Less reliance on
@@ -41,6 +43,27 @@ const SideNavUI = ({
     return isSideNavExpanded(window.document);
   });
   const [sideNavContent, setSideNavContent] = useState("<nav></nav>");
+  const [sideNavOptions, setSideNavOptions] = useState([]);
+  const [sideNavHasMultipleRoles, setSideNavHasMultipleRoles] = useState(false);
+  const [selectedRole, setSelectedRoleState] = useState(
+    () => parse(document.cookie).selected_role || undefined,
+  );
+  const selectedRoleRef = useRef(selectedRole);
+  useEffect(() => {
+    selectedRoleRef.current = selectedRole;
+  }, [selectedRole]);
+
+  // Guards against updating state from a fetch that resolves after the
+  // component unmounts. Reset on every (re)mount so React StrictMode's
+  // dev-only mount -> cleanup -> remount cycle doesn't leave this stuck
+  // at false, which would otherwise silently drop the fetched config.
+  const isMountedRef = useRef(true);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
 
   const collapseRef = useRef(null);
 
@@ -74,35 +97,66 @@ const SideNavUI = ({
     }
   }, [isExpanded, isExpandedPropSet]);
 
-  useEffect(() => {
-    const path = window.location.pathname;
-    document.cookie = `current_path=${path}; Path=/;`;
-    isSideNavExpanded(window.document);
-    let cancelRequest = false;
+  const getSideNavConfig = useCallback(async (role) => {
     const { origin } = window.location;
     const isRunningLocally = origin.includes("localhost");
     let sideNavMenuItems;
+    let roleOptions = [];
+    let hasMultipleRoles = false;
 
-    async function getSideNavConfig() {
-      try {
-        const response = await fetch(`${origin}/config/side-navigation`);
-        const data = await response.json();
-        sideNavMenuItems = data.markup;
-      } catch (error) {
-        if (isRunningLocally) {
-          sideNavMenuItems = defaultMarkup;
-        } else {
-          sideNavMenuItems = "<nav></nav>";
-        }
-      }
-      if (!cancelRequest) {
-        setSideNavContent(sideNavMenuItems);
+    try {
+      const url = role
+        ? `${origin}/config/side-navigation?role=${encodeURIComponent(role)}`
+        : `${origin}/config/side-navigation`;
+      const response = await fetch(url);
+      const data = await response.json();
+      sideNavMenuItems = data.markup;
+      // Older/unupgraded backends may not return these fields yet, so
+      // default gracefully instead of assuming every consumer has them.
+      roleOptions = data.sideNavOptions || [];
+      hasMultipleRoles = Boolean(data.hasMultipleRoles);
+    } catch (error) {
+      if (isRunningLocally) {
+        sideNavMenuItems = defaultMarkup;
+      } else {
+        sideNavMenuItems = "<nav></nav>";
       }
+      roleOptions = [];
+      hasMultipleRoles = false;
     }
-    getSideNavConfig();
-    return () => {
-      cancelRequest = true;
-    };
+    if (isMountedRef.current) {
+      setSideNavContent(sideNavMenuItems);
+      setSideNavOptions(roleOptions);
+      setSideNavHasMultipleRoles(hasMultipleRoles);
+    }
+  }, []);
+
+  // Updates the selected_role cookie and re-fetches /config/side-navigation
+  // so the sidenav markup reflects the newly selected role. If the role
+  // change also triggers a redirect to the role's default page, skip the
+  // in-place refetch here - the resulting page reload will remount this
+  // component and fetch fresh config anyway, so fetching now would just be
+  // wasted/duplicate work.
+  const handleRoleChange = useCallback(
+    (role) => {
+      if (role === selectedRoleRef.current) {
+        return;
+      }
+      document.cookie = `selected_role=${role}; Path=/;`;
+      setSelectedRoleState(role);
+      if (!willRedirectPage(role)) {
+        getSideNavConfig(role);
+      }
+    },
+    [getSideNavConfig],
+  );
+
+  useEffect(() => {
+    const path = window.location.pathname;
+    document.cookie = `current_path=${path}; Path=/;`;
+    isSideNavExpanded(window.document);
+    getSideNavConfig(selectedRoleRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname]);
 
   const content = !items?.length ? (
@@ -110,6 +164,10 @@ const SideNavUI = ({
       levelOneContent={sideNavContent}
       isExpanded={isExpandedState}
       config={config}
+      sideNavOptions={sideNavOptions}
+      hasMultipleRoles={sideNavHasMultipleRoles}
+      selectedRole={selectedRole}
+      onRoleChange={handleRoleChange}
     />
   ) : (
     <DynamicContent