@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.7 → 4.6.11-beta.9

package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import cx from 'classnames';
-import { SideNavLink, SideNav, SideNavItems, SideNavDivider, ComposedModal, ModalHeader, ModalBody, Dropdown, ModalFooter, Button, SkeletonPlaceholder, SideNavMenu } from '@carbon/react';
+import { SideNavLink, SideNav, SideNavItems, SideNavDivider, ComposedModal, ModalHeader, ModalBody, Dropdown, ModalFooter, Button } from '@carbon/react';
 import TooltipHover from '../TooltipHover/TooltipHover.js';
-import { ChatBot, Home, AddAlt, UserMultiple, User, Locked, Unlocked, ChevronRight, GroupAccount } from '@carbon/react/icons';
+import { ChatBot, Home, UserMultiple, AddAlt, Api, IntentRequestCreate, Folders, DocumentMultiple_02, Catalog, Settings, LicenseThirdParty } from '@carbon/react/icons';
 import { USER_PLATFORM_ROLE } from '../../constants/UserType.js';
 import { prefix } from '../../internal/settings.js';
 
@@ -12,8 +12,7 @@ IBM Confidential
 © Copyright IBM Corp. 2022, 2024
 */
 function AdvantageSideNav(props) {
-    const { app, appLink, regionalTeam, enableChatButton = true, showChatButton = true, showSelectTeamPurpose = false, homeLink, assistantLink, defaultAssistantLink, joinCreateTrigger, isLoading, isOpen, teams = [], triggerEvent, accounts = [], baseEnvUrl, className, navLinks, personalTeams = [], user, showChatTooltip, templateMeteringEvent, tooltipMessage, isLaunchpad = false, userTeamsError = false, userTeamsLoading = false, history, children, ...rest } = props;
-    const [activeSubmenu, setActiveSubmenu] = React.useState("");
+    const { app, appLink, regionalTeam, enableChatButton = true, showChatButton = true, showSelectTeamPurpose = false, homeLink, agentAssistantStudioLink, agentAssistantLibraryLink, assistantLink, defaultAssistantLink, documentCollectionsLink, settingsLink, toolsLink, joinCreateTrigger, isLoading, isOpen, teams = [], triggerEvent, accounts = [], baseEnvUrl, className, navLinks, navigation, personalTeams = [], user, showChatTooltip, templateMeteringEvent, tooltipMessage, isLaunchpad = false, history, children, ...rest } = props;
     const [activeMenu, setActiveMenu] = React.useState(false);
     const [teamList, setTeamList] = React.useState(null);
     const [regionalModalIsOpen, setRegionalModalIsOpen] = React.useState(false);
@@ -22,15 +21,37 @@ function AdvantageSideNav(props) {
     const windowLocation = window.location;
     const isPartnerUser = user?.type === USER_PLATFORM_ROLE.Partner;
     const joinButtontitle = showSelectTeamPurpose ? "Create Team" : "Create or Join Team";
-    const standardTeamsList = [...personalTeams.map((pteams) => ({ ...pteams, isPersonal: true })), ...teams];
-    const teamsMenuRef = React.useRef(null);
-    const accountsMenuRef = React.useRef(null);
     const hamburguerMenu = document.getElementById("header-sidenav-menu-button");
-    const noTeamsMessage = userTeamsError
-        ? "Failed to get teams, please try again later."
-        : "No teams or accounts available.";
-    const teamsRef = React.useRef([]);
-    const accountsRef = React.useRef([]);
+    // get current selected team
+    let teamSwitcherTeam = null;
+    if (personalTeams.length > 0) {
+        personalTeams.forEach((team) => {
+            if (team.id === user?.teamInstanceSwitcherDefault) {
+                teamSwitcherTeam = { ...team, isPersonal: true };
+            }
+        });
+    }
+    if (teams.length > 0) {
+        teams.forEach((team) => {
+            if (team.id === user?.teamInstanceSwitcherDefault) {
+                teamSwitcherTeam = { ...team, isStandard: true };
+            }
+        });
+    }
+    if (accounts.length > 0) {
+        accounts.forEach((account) => {
+            if (account.id === user?.teamInstanceSwitcherDefault) {
+                teamSwitcherTeam = { ...account, isAccount: true };
+            }
+            else if (account.projectTeams && account.projectTeams?.length > 0) {
+                account.projectTeams.forEach((projectTeam) => {
+                    if (projectTeam.id === user?.teamInstanceSwitcherDefault) {
+                        teamSwitcherTeam = { ...projectTeam, isProject: true };
+                    }
+                });
+            }
+        });
+    }
     // Functions to track IBM Instrumentation on Segment
     const handleHomeClick = () => {
         triggerEvent &&
@@ -44,6 +65,46 @@ function AdvantageSideNav(props) {
         const assistantLink = `${appLink?.newChatRedirect()}?teamName=${team.name}&teamId=${team.id}`;
         window.open(assistantLink, "_self", "noopener,noreferrer");
     };
+    const handleToolsClick = () => {
+        triggerEvent &&
+            triggerEvent({
+                action: "Clicked on SideNav Tools link",
+                category: "Sidenav",
+                destinationPath: toolsLink,
+            });
+    };
+    const handleAgentAssistantStudioClick = () => {
+        triggerEvent &&
+            triggerEvent({
+                action: "Clicked on SideNav Agent & Assistant Studio link",
+                category: "Sidenav",
+                destinationPath: agentAssistantStudioLink,
+            });
+    };
+    const handleAgentAssistantLibraryClick = () => {
+        triggerEvent &&
+            triggerEvent({
+                action: "Clicked on SideNav Agent & Assistant Library link",
+                category: "Sidenav",
+                destinationPath: agentAssistantLibraryLink,
+            });
+    };
+    const handleDocumentCollectionsClick = () => {
+        triggerEvent &&
+            triggerEvent({
+                action: "Clicked on SideNav Document Collections link",
+                category: "Sidenav",
+                destinationPath: documentCollectionsLink,
+            });
+    };
+    const handleSettingsClick = () => {
+        triggerEvent &&
+            triggerEvent({
+                action: "Clicked on SideNav Settings link",
+                category: "Sidenav",
+                destinationPath: settingsLink,
+            });
+    };
     const handleAssistantClick = () => {
         if (regionalTeam?.length > 1) {
             setRegionalModalIsOpen(true);
@@ -78,60 +139,31 @@ function AdvantageSideNav(props) {
                 teamType: type,
             });
     };
-    const handleServiceClick = ({ service, team }) => {
-        if (templateMeteringEvent) {
-            templateMeteringEvent({ service, team });
-        }
-        triggerEvent &&
-            triggerEvent({
-                action: "Clicked on SideNav Service link",
-                category: "Sidenav",
-                destinationPath: service.url,
-            });
-    };
     const handleLaunchpadLink = (event) => {
         event.preventDefault();
-        // remediation to close menu, submenu and accordion when select a team on Launchpad
-        //@ts-ignore
-        if (Boolean(teamsMenuRef.current?.ariaExpanded === "true")) {
-            //@ts-ignore
-            teamsMenuRef.current.click();
-        }
-        //@ts-ignore
-        if (Boolean(accountsMenuRef.current?.ariaExpanded === "true")) {
-            //@ts-ignore
-            accountsMenuRef.current.click();
-        }
         //@ts-ignore
         if (Boolean(hamburguerMenu) && hamburguerMenu.className.includes("active")) {
             //@ts-ignore
             Boolean(hamburguerMenu) && hamburguerMenu?.click();
         }
         setActiveMenu(false);
-        setActiveSubmenu("");
     };
-    // add or remove refs
-    if (teamsRef.current.length !== standardTeamsList?.length) {
-        //@ts-ignore
-        teamsRef.current = Array(standardTeamsList?.length).fill().map((_, i) => teamsRef.current[i] || React.createRef());
-    }
-    if (accountsRef.current.length !== accounts?.length) {
-        //@ts-ignore
-        accountsRef.current = Array(accounts?.length).fill().map((_, i) => accountsRef.current[i] || React.createRef());
-    }
     const assistantSideNavLink = (
-    // assistantLink && 
-    React.createElement(SideNavLink, { "data-testid": "sidenav-assistant-link", className: !enableChatButton ? `${prefix}--bmrg-advantage-sidenav__inactive-link` : "", disabled: Boolean(!enableChatButton), isActive: assistantLink ? windowLocation.href.includes(assistantLink) : '', renderIcon: ChatBot, href: enableChatButton && assistantLink, onClick: enableChatButton ? handleAssistantClick : (e) => e.preventDefault() }, `Start a ${defaultAssistantLink ? "" : "New "}Chat`));
+    // assistantLink &&
+    React.createElement(SideNavLink, { "data-testid": "sidenav-assistant-link", className: !enableChatButton ? `${prefix}--bmrg-advantage-sidenav__inactive-link` : "", disabled: Boolean(!enableChatButton), isActive: assistantLink ? windowLocation.href.includes(assistantLink) : "", renderIcon: ChatBot, href: enableChatButton && assistantLink, onClick: enableChatButton ? handleAssistantClick : (e) => e.preventDefault() }, "Chat"));
+    const catalogNavlink = navigation?.navigation?.find((navlink) => navlink.name === "Catalog");
+    const adminNavlink = navigation?.navigation?.find((navlink) => navlink.name === "Admin");
+    const showSecondDivider = (!isPartnerUser && showChatButton) ||
+        toolsLink ||
+        agentAssistantStudioLink ||
+        agentAssistantLibraryLink ||
+        documentCollectionsLink;
     return (React.createElement(SideNav, { "aria-label": "sidenav-container", className: cx(`${prefix}--bmrg-advantage-sidenav-container`, className, {
             "--closed": !isMenuOpen,
-        }), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen, onToggle: () => setActiveSubmenu(""), onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
+        }), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen, onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
             setActiveMenu(false);
-            setActiveSubmenu("");
         }, ...rest }, React.createElement(SideNavItems, null,
-        isMenuOpen && navLinks?.length ? (React.createElement("div", null,
-            navLinks.map((link) => (React.createElement(SideNavLink, { href: link.url, target: link.isExternal ? "_blank" : undefined, rel: link.isExternal ? "noopener noreferrer" : undefined }, link.name))),
-            React.createElement(SideNavDivider, null))) : null,
-        React.createElement("div", { onMouseEnter: () => setActiveSubmenu("") },
+        React.createElement("div", null,
             homeLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-home-link", isActive: `${baseEnvUrl}/${app}/`.includes(windowLocation.href), renderIcon: Home, href: homeLink, onClick: (e) => {
                     if (isLaunchpad) {
                         handleLaunchpadLink(e);
@@ -139,12 +171,56 @@ function AdvantageSideNav(props) {
                     }
                     handleHomeClick();
                 } }, "Home")) : null,
+            teamSwitcherTeam ? (React.createElement(SideNavLink, { title: teamSwitcherTeam.isAccount ? "Account Page" : "Team Page", name: teamSwitcherTeam.name, "data-testid": "sidenav-team-link", id: teamSwitcherTeam.id, isActive: windowLocation.href.includes(teamSwitcherTeam.id), className: `${prefix}--bmrg-advantage-sidenav-team`, renderIcon: UserMultiple, href: `${baseEnvUrl}/${app}/teams/${teamSwitcherTeam.id}`, onClick: (e) => {
+                    if (isLaunchpad) {
+                        handleLaunchpadLink(e);
+                        history.push(`/teams/${teamSwitcherTeam.id}`);
+                    }
+                    handleTeamClick({
+                        team: teamSwitcherTeam,
+                        type: teamSwitcherTeam.isPersonal
+                            ? "personal"
+                            : teamSwitcherTeam.isAccount
+                                ? "account"
+                                : teamSwitcherTeam.isproject
+                                    ? "project"
+                                    : "standard",
+                    });
+                } },
+                React.createElement("p", { className: `${prefix}--bmrg-advantage-sidenav-teams__title` }, teamSwitcherTeam.isAccount ? "Account Page" : "Team Page"))) : !isPartnerUser && joinCreateTrigger ? (React.createElement(SideNavLink, { "data-testid": "sidenav-create-join-trigger", renderIcon: AddAlt, onClick: (e) => {
+                    joinCreateTrigger(e);
+                    handleCreateJoinClick();
+                } }, joinButtontitle)) : null,
+            React.createElement(SideNavDivider, null),
             !isPartnerUser &&
                 // assistantLink &&
                 showChatButton &&
                 (showChatTooltip ? (React.createElement(TooltipHover, { className: `${prefix}--bmrg-side-nav__tooltip`, content: tooltipMessage, direction: "right" },
                     React.createElement("span", null, assistantSideNavLink))) : (assistantSideNavLink)),
-            regionalModalIsOpen && React.createElement(ComposedModal, { className: `${prefix}--teamSelectionModalContainer`, open: regionalModalIsOpen, onClose: () => setRegionalModalIsOpen(false), onKeyDown: (e) => e.stopPropagation(), "data-testid": "select-team-chat-modal" },
+            toolsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-tools-link", renderIcon: Api, href: toolsLink, onClick: (e) => {
+                    handleToolsClick();
+                } }, "Tools")) : null,
+            agentAssistantStudioLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-agent-assistant-studio-link", isActive: windowLocation.href.includes(`/launchpad/agent-assistant-studio`) ||
+                    windowLocation.href.includes(`/launchpad/agenticapps`), renderIcon: IntentRequestCreate, href: agentAssistantStudioLink, onClick: (e) => {
+                    if (isLaunchpad) {
+                        handleLaunchpadLink(e);
+                        history.push(agentAssistantStudioLink);
+                    }
+                    handleAgentAssistantStudioClick();
+                } }, "Agent & Assistant Studio")) : null,
+            agentAssistantLibraryLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-agent-assistant-library-link", renderIcon: Folders, href: agentAssistantLibraryLink, onClick: (e) => {
+                    handleAgentAssistantLibraryClick();
+                } }, "Agent & Assistant Library")) : null,
+            documentCollectionsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: DocumentMultiple_02, href: documentCollectionsLink, onClick: (e) => {
+                    handleDocumentCollectionsClick();
+                } }, "Document Collections")) : null,
+            showSecondDivider ? React.createElement(SideNavDivider, null) : null,
+            catalogNavlink ? (React.createElement(SideNavLink, { href: catalogNavlink.url, renderIcon: Catalog }, catalogNavlink.name)) : null,
+            settingsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: Settings, href: settingsLink, onClick: (e) => {
+                    handleSettingsClick();
+                } }, "Settings")) : null,
+            adminNavlink ? (React.createElement(SideNavLink, { href: adminNavlink.url, renderIcon: LicenseThirdParty }, adminNavlink.name)) : null,
+            regionalModalIsOpen && (React.createElement(ComposedModal, { className: `${prefix}--teamSelectionModalContainer`, open: regionalModalIsOpen, onClose: () => setRegionalModalIsOpen(false), onKeyDown: (e) => e.stopPropagation(), "data-testid": "select-team-chat-modal" },
                 React.createElement(ModalHeader, { title: "Select Team to Start a New Chat", closeModal: () => setRegionalModalIsOpen(false) }),
                 React.createElement(ModalBody, { className: `${prefix}--teamSelectModalBody` },
                     React.createElement(Dropdown, { items: teamList, disabled: !teamList?.length, id: "select-team-chat-modal-dropdown", selectedItem: selectedTeam, size: "md", "data-testid": "select-team-chat-modal-dropdown", itemToString: (item) => item?.name, label: "Choose a team", onChange: ({ selectedItem }) => setSelectedTeam(selectedItem) })),
@@ -156,97 +232,10 @@ function AdvantageSideNav(props) {
                                 setRegionalModalIsOpen(false);
                                 // closeModal();
                             }
-                        } }, "Continue"))),
-            !isPartnerUser && joinCreateTrigger ? (React.createElement(SideNavLink, { "data-testid": "sidenav-create-join-trigger", renderIcon: AddAlt, onClick: (e) => {
-                    joinCreateTrigger(e);
-                    handleCreateJoinClick();
-                } }, joinButtontitle)) : null),
+                        } }, "Continue"))))),
         children ? (React.createElement(React.Fragment, null,
             React.createElement(SideNavDivider, null),
-            children)) : null,
-        userTeamsLoading && isMenuOpen ? (React.createElement(React.Fragment, null,
-            React.createElement(SideNavDivider, null),
-            React.createElement("div", { className: `${prefix}--bmrg-advantage-sidenav-loading-container` },
-                React.createElement(SkeletonPlaceholder, { className: `${prefix}--bmrg-advantage-sidenav-loading` }),
-                React.createElement(SkeletonPlaceholder, { className: `${prefix}--bmrg-advantage-sidenav-loading` }),
-                React.createElement(SkeletonPlaceholder, { className: `${prefix}--bmrg-advantage-sidenav-loading` })))) : null,
-        ((!Boolean(standardTeamsList?.length) && !Boolean(accounts?.length) && !userTeamsLoading) ||
-            userTeamsError) &&
-            isMenuOpen ? (React.createElement(React.Fragment, null,
-            React.createElement("p", { className: `${prefix}--bmrg-advantage-sidenav-no-teams__text` }, noTeamsMessage))) : null,
-        Boolean(standardTeamsList?.length) ? (React.createElement(React.Fragment, null,
-            React.createElement(SideNavDivider, null),
-            React.createElement(SideNavMenu, { className: cx(`${prefix}--bmrg-advantage-sidenav-menu`, {
-                    "--active-closed": !isMenuOpen && standardTeamsList.some((t) => windowLocation.href.includes(t.id)),
-                }), renderIcon: UserMultiple, title: "Teams", "data-testid": "sidenav-teams", id: "sidenav-teams", ref: teamsMenuRef, isActive: standardTeamsList.some((t) => windowLocation.href.includes(t.id)), isSideNavExpanded: isMenuOpen }, isMenuOpen
-                ? standardTeamsList?.map((team, i) => {
-                    const topPosition = document?.getElementById(team.id)?.getBoundingClientRect()?.top ?? 0;
-                    const teamDisplayName = Boolean(team.displayName) ? team.displayName : team.name;
-                    return (React.createElement(React.Fragment, null,
-                        React.createElement("li", { className: `${prefix}--bmrg-advantage-sidenav-team-item` },
-                            React.createElement(SideNavLink, { title: teamDisplayName, name: team.name, "data-testid": "sidenav-team-link", id: team.id, isActive: windowLocation.href.includes(team.id), ref: teamsRef.current[i], className: `${prefix}--bmrg-advantage-sidenav-team`, renderIcon: team?.isPersonal ? User : team.privateTeam ? Locked : Unlocked, href: `${baseEnvUrl}/${app}/teams/${team.id}`, onMouseEnter: () => setActiveSubmenu(team.id), onFocus: () => setActiveSubmenu(team.id), onClick: (e) => {
-                                    if (isLaunchpad) {
-                                        handleLaunchpadLink(e);
-                                        history.push(`/teams/${team.id}`);
-                                    }
-                                    handleTeamClick({ team, type: team.isPersonal ? "personal" : "standard" });
-                                } },
-                                React.createElement("p", { className: `${prefix}--bmrg-advantage-sidenav-teams__title` }, teamDisplayName),
-                                Boolean(team?.services?.length) ? React.createElement(ChevronRight, null) : null),
-                            Boolean(team?.services?.length) && team.id === activeSubmenu ? (React.createElement("ul", { className: cx(`${prefix}--bmrg-advantage-sidenav-submenu`, {
-                                    "--open": team.id === activeSubmenu,
-                                }), style: { top: `${window.scrollY + topPosition}px` } },
-                                React.createElement("li", { className: `${prefix}--bmrg-advantage-sidenav-submenu-wrapper` },
-                                    React.createElement("ul", { className: `${prefix}--bmrg-advantage-sidenav-services-submenu` },
-                                        React.createElement(SideNavLink, { title: "Team Page", className: `${prefix}--bmrg-advantage-sidenav-submenu-link`, "data-testid": "sidenav-team-submenu-link", href: `${baseEnvUrl}/${app}/teams/${team.id}`, onClick: (e) => {
-                                                if (isLaunchpad) {
-                                                    handleLaunchpadLink(e);
-                                                    history.push(`/teams/${team.id}`);
-                                                }
-                                                handleTeamClick({ team, type: team.isPersonal ? "personal" : "standard" });
-                                            } }, "Team Page"),
-                                        team.services?.map((service) => (React.createElement(SideNavLink, { title: service.name, className: `${prefix}--bmrg-advantage-sidenav-submenu-link`, "data-testid": "sidenav-service-submenu-link", href: service.url, onClick: () => handleServiceClick({ service, team }) }, service.name))) ?? null)))) : null)));
-                })
-                : null))) : null,
-        Boolean(accounts?.length) ? (React.createElement(React.Fragment, null,
-            React.createElement(SideNavDivider, null),
-            React.createElement(SideNavMenu, { className: cx(`${prefix}--bmrg-advantage-sidenav-menu`, {
-                    "--active-closed": !isMenuOpen &&
-                        accounts.some((t) => {
-                            const pIds = t?.projectTeams?.map((project) => project.id) ?? [];
-                            return windowLocation.href.includes(t.id) || pIds.some((id) => windowLocation.href.includes(id));
-                        }),
-                }), renderIcon: GroupAccount, title: "Accounts", "data-testid": "sidenav-accounts", id: "sidenav-accounts", ref: accountsMenuRef, "aria-expanded": isMenuOpen, isSideNavExpanded: isMenuOpen }, isMenuOpen
-                ? accounts?.map((team, i) => {
-                    const topPosition = document?.getElementById(team.id)?.getBoundingClientRect()?.top ?? 0;
-                    const teamDisplayName = Boolean(team.displayName) ? team.displayName : team.name;
-                    const projectIds = team?.projectTeams?.map((project) => project.id) ?? [];
-                    const isAccountActive = windowLocation.href.includes(team.id) ||
-                        projectIds.some((id) => windowLocation.href.includes(id));
-                    return (React.createElement(React.Fragment, null,
-                        React.createElement("li", { className: `${prefix}--bmrg-advantage-sidenav-team-item` },
-                            React.createElement(SideNavLink, { title: teamDisplayName, id: team.id, isActive: isAccountActive, ref: accountsRef.current[i], className: `${prefix}--bmrg-advantage-sidenav-account`, href: `${baseEnvUrl}/${app}/teams/${team.id}`, onMouseEnter: () => setActiveSubmenu(team.id), onFocus: () => setActiveSubmenu(team.id), onClick: (e) => {
-                                    if (isLaunchpad) {
-                                        handleLaunchpadLink(e);
-                                        history.push(`/teams/${team.id}`);
-                                    }
-                                    handleTeamClick({ team, type: "account" });
-                                } },
-                                React.createElement("p", { className: `${prefix}--bmrg-advantage-sidenav-teams__title` }, teamDisplayName),
-                                Boolean(team?.projectTeams?.length) ? React.createElement(ChevronRight, null) : null),
-                            Boolean(team?.projectTeams?.length) && team.id === activeSubmenu ? (React.createElement("ul", { className: cx(`${prefix}--bmrg-advantage-sidenav-submenu`, {
-                                    "--open": team.id === activeSubmenu,
-                                }), style: { top: `${window.scrollY + topPosition}px` } },
-                                React.createElement("li", { className: `${prefix}--bmrg-advantage-sidenav-submenu-wrapper` },
-                                    React.createElement("ul", { className: `${prefix}--bmrg-advantage-sidenav-services-submenu` }, team.projectTeams?.map((accTeam) => (React.createElement(SideNavLink, { title: accTeam.name, className: `${prefix}--bmrg-advantage-sidenav-submenu-link`, "data-testid": "sidenav-account-submenu-link", href: `${baseEnvUrl}/${app}/teams/${accTeam.id}`, onClick: (e) => {
-                                            if (isLaunchpad) {
-                                                handleLaunchpadLink(e);
-                                                history.push(`/teams/${accTeam.id}`);
-                                            }
-                                            handleTeamClick({ team: accTeam, type: "project" });
-                                        } }, accTeam.name))) ?? null)))) : null)));
-                })
-                : null))) : null)));
+            children)) : null)));
 }
 
 export { AdvantageSideNav, AdvantageSideNav as default };

package/dist/esm/components/Header/Header.js

@@ -1,19 +1,22 @@
 import React from 'react';
+import { useQuery } from 'react-query';
 import { Theme, Header as Header$1, SkipToContent, HeaderName, HeaderNavigation, HeaderMenuItem, HeaderGlobalBar, HeaderPanel, HeaderMenuButton, SideNav, SideNavItems, SideNavLink } from '@carbon/react';
 import { Wikis, Checkmark, Collaborate, NotificationNew, Notification, Help, UserAvatar, Close, Switcher, OpenPanelFilledRight } from '@carbon/react/icons';
 import HeaderAppSwitcher from './HeaderAppSwitcher.js';
+import HeaderTeamSwitcher from './HeaderTeamSwitcher.js';
 import HeaderMenu from './HeaderMenu.js';
 import NotificationsContainer from '../Notifications/NotificationsContainer.js';
 import PlatformNotificationsContainer from '../PlatformNotifications/PlatformNotificationsContainer.js';
 import UserRequests from './UserRequests.js';
 import useHeaderMenu from '../../hooks/useHeaderMenu.js';
 import useWindowSize from '../../hooks/useWindowSize.js';
+import { resolver, serviceUrl } from '../../config/servicesConfig.js';
 import { prefix } from '../../internal/settings.js';
 
 /*
 IBM Confidential
 694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
+© Copyright IBM Corp. 2022, 2025
 */
 const MenuListId = {
     Notifcations: "header-notifications-dialog",
@@ -24,6 +27,7 @@ const MenuListId = {
     Support: "header-support-menu",
     instanceSwitcher: "header-instanceSwitcher-menu",
     Switcher: "header-switcher-menu",
+    TeamSwitcher: "header-team-switcher-menu",
 };
 const MenuButtonId = {
     Notifcations: "header-notifications-dialog-button",
@@ -34,6 +38,7 @@ const MenuButtonId = {
     Support: "header-support-menu-button",
     InstanceSwitcher: "header-instanceSwitcher-menu-button",
     Switcher: "header-switcher-menu-button",
+    TeamSwitcher: "header-team-switcher-menu-button",
 };
 const MenuAriaLabelRecord = {
     Notifcations: "Notifications dialog",
@@ -44,11 +49,19 @@ const MenuAriaLabelRecord = {
     instanceSwitcher: "Instance Switcher Menu",
     Support: "Support menu",
     Switcher: "Switcher menu",
+    TeamSwitcher: "Team Switcher menu",
 };
 const headerButtonClassNames = "cds--btn--icon-only cds--header__action cds--btn cds--btn--primary cds--btn--icon-only cds--btn cds--btn--primary";
 const instanceCheckMarkContainerClass = "instance-checkmark-style-container";
 function Header(props) {
-    const { productName, baseEnvUrl, baseServicesUrl, carbonTheme = "g10", className, navLinks, platform, prefixName = "", rightPanel, skipToContentProps, templateMeteringEvent, triggerEvent, userTeams, } = props;
+    const { analyticsHelpers, productName, baseEnvUrl, baseServicesUrl, carbonTheme = "g10", className, createJoinTeamTrigger, history, isLaunchpad = false, isLoadingTeamSwitcher, isSuccessTeamSwitcher, setIsSuccessTeamSwitcher, navLinks, platform, prefixName = "", rightPanel, skipToContentProps, templateMeteringEvent, trackEvent, triggerEvent, user, userTeams, } = props;
+    const hasUserTeams = Boolean(userTeams);
+    const userTeamsUrl = serviceUrl.getUserTeamsServices({ baseServicesUrl });
+    const teamsQuery = useQuery({
+        queryKey: userTeamsUrl,
+        queryFn: resolver.query(userTeamsUrl, null),
+        enabled: !hasUserTeams && Boolean(baseServicesUrl),
+    });
     return (React.createElement(React.Fragment, null,
         React.createElement(Theme, { theme: carbonTheme },
             React.createElement(Header$1, { "aria-label": "App navigation header", className: className },
@@ -59,12 +72,13 @@ function Header(props) {
                     ? navLinks.map((link) => (React.createElement(HeaderMenuItem, { "aria-label": `Link for ${link.name}`, "data-testid": "header-menu-link", href: link.url, isCurrentPage: window?.location?.href && link.url ? window.location.href.startsWith(link.url) : false, key: link.name, target: link.isExternal ? "_blank" : undefined, rel: link.isExternal ? "noopener noreferrer" : undefined }, link.name)))
                     : null),
                 React.createElement(HeaderGlobalBar, null,
+                    React.createElement(HeaderTeamSwitcher, { analyticsHelpers: analyticsHelpers, baseServicesUrl: baseServicesUrl, createJoinTeamTrigger: createJoinTeamTrigger, history: history, isLaunchpad: isLaunchpad, isLoadingTeamSwitcher: isLoadingTeamSwitcher, isSuccessTeamSwitcher: isSuccessTeamSwitcher, setIsSuccessTeamSwitcher: setIsSuccessTeamSwitcher, menuAriaLabelRecord: MenuAriaLabelRecord.TeamSwitcher, menuButtonId: MenuButtonId.TeamSwitcher, menuListId: MenuListId.TeamSwitcher, navigationPlatform: platform, teamsQuery: teamsQuery, trackEvent: trackEvent, user: user, userTeams: userTeams }),
                     props?.instanceSwitcherEnabled && (React.createElement(InstanceSwitcherMenu, { enabled: Boolean(props.instanceSwitcherEnabled), menuItems: platform?.instances })),
                     React.createElement(RequestsMenu, { baseEnvUrl: baseEnvUrl, enabled: Boolean(props.requestSummary), summary: props.requestSummary }),
                     React.createElement(NotificationsMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: Boolean(props.enableNotifications), countEnabled: Boolean(props.enableNotificationsCount) }),
                     React.createElement(SupportMenu, { enabled: Array.isArray(props.supportMenuItems) && props.supportMenuItems.length > 0, menuItems: props.supportMenuItems }),
                     React.createElement(ProfileMenu, { enabled: Array.isArray(props.profileMenuItems) && props.profileMenuItems.length > 0, menuItems: props.profileMenuItems }),
-                    React.createElement(AppSwitcherMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: props.enableAppSwitcher, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent, userTeams: userTeams }),
+                    React.createElement(AppSwitcherMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: props.enableAppSwitcher, teamsQuery: teamsQuery, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent, userTeams: userTeams }),
                     React.createElement(RightPanelMenu, { enabled: Boolean(rightPanel && Object.keys(rightPanel).length), ...rightPanel })))),
         React.createElement(NotificationsContainer, { enableMultiContainer: true, containerId: `${prefix}--bmrg-header-notifications` })));
 }
@@ -145,7 +159,7 @@ function AppSwitcherMenu(props) {
     }
     return (React.createElement("div", { ref: ref },
         React.createElement("button", { "aria-controls": MenuListId.Switcher, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Switcher, className: headerButtonClassNames, "data-testid": "header-appswitcher-link", id: MenuButtonId.Switcher, onClick: toggleActive }, isOpen ? React.createElement(Close, { size: 20 }) : React.createElement(Switcher, { size: 20 })),
-        React.createElement(HeaderAppSwitcher, { baseEnvUrl: props.baseEnvUrl, baseServicesUrl: props.baseServicesUrl, id: MenuListId.Switcher, isOpen: isOpen, templateMeteringEvent: props.templateMeteringEvent, triggerEvent: props.triggerEvent, userTeams: props.userTeams })));
+        React.createElement(HeaderAppSwitcher, { baseEnvUrl: props.baseEnvUrl, baseServicesUrl: props.baseServicesUrl, id: MenuListId.Switcher, isOpen: isOpen, teamsQuery: props.teamsQuery, templateMeteringEvent: props.templateMeteringEvent, triggerEvent: props.triggerEvent, userTeams: props.userTeams })));
 }
 function RightPanelMenu(props) {
     const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.RightPanel);

package/dist/esm/components/Header/HeaderAppSwitcher.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import { useQuery } from 'react-query';
 import { HeaderPanel, SkeletonText, SwitcherDivider, SideNavMenu, SideNavMenuItem } from '@carbon/react';
 import { Launch } from '@carbon/react/icons';
 import Error from '../ErrorMessage/ErrorMessage.js';
 import cx from 'classnames';
-import { resolver, serviceUrl } from '../../config/servicesConfig.js';
 import { prefix } from '../../internal/settings.js';
 
 /*
@@ -19,14 +17,8 @@ const externalProps = {
 const panelClassName = `${prefix}--bmrg-header-switcher-panel`;
 const contentClassName = `${prefix}--bmrg-header-switcher`;
 const skeletonClassName = `${prefix}--bmrg-header-switcher__skeleton`;
-function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, templateMeteringEvent, triggerEvent, userTeams }) {
+function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, teamsQuery, templateMeteringEvent, triggerEvent, userTeams, }) {
     const hasUserTeams = Boolean(userTeams);
-    const userTeamsUrl = serviceUrl.getUserTeamsServices({ baseServicesUrl });
-    const teamsQuery = useQuery({
-        queryKey: userTeamsUrl,
-        queryFn: resolver.query(userTeamsUrl, null),
-        enabled: !hasUserTeams
-    });
     if (userTeams?.isLoading || teamsQuery?.isLoading) {
         return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, expanded: isOpen, id: id, role: "menu" },
             React.createElement("div", { className: cx(contentClassName, "--is-loading", { "--is-hidden": !isOpen }) },
@@ -69,7 +61,7 @@ function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, templateMe
     }
     return null;
 }
-function TeamServiceListMenu({ baseEnvUrl, isAccount, isMember, team, templateMeteringEvent, triggerEvent }) {
+function TeamServiceListMenu({ baseEnvUrl, isAccount, isMember, team, templateMeteringEvent, triggerEvent, }) {
     const { name, displayName, services } = team;
     const nameToDisplay = displayName ? displayName : name;
     const isNameTruncated = nameToDisplay?.length > 30;