@boomerang-io/carbon-addons-boomerang-react 4.6.10-beta.2 → 4.6.10-beta.4

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

@@ -0,0 +1,235 @@
+import React from 'react';
+import cx from 'classnames';
+import { SideNavLink, SideNav, SideNavItems, SideNavDivider, ComposedModal, ModalHeader, ModalBody, Dropdown, ModalFooter, Button } from '@carbon/react';
+import TooltipHover from '../TooltipHover/TooltipHover.js';
+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';
+
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+function AdvantageSideNav(props) {
+    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);
+    const [selectedTeam, setSelectedTeam] = React.useState(null);
+    const isMenuOpen = isOpen || activeMenu;
+    const windowLocation = window.location;
+    const isPartnerUser = user?.type === USER_PLATFORM_ROLE.Partner;
+    const joinButtontitle = showSelectTeamPurpose ? "Create Team" : "Create or Join Team";
+    const hamburguerMenu = document.getElementById("header-sidenav-menu-button");
+    // 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 &&
+            triggerEvent({
+                action: "Clicked on SideNav Home link",
+                category: "Sidenav",
+                destinationPath: homeLink,
+            });
+    };
+    const handleRegionalNewStartNewChat = (team) => {
+        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);
+            setTeamList(regionalTeam?.map((team) => ({
+                id: team.id,
+                name: team.name,
+            })));
+        }
+        triggerEvent &&
+            triggerEvent({
+                action: "Clicked on SideNav Assistant link",
+                category: "Sidenav",
+                destinationPath: assistantLink,
+            });
+    };
+    const handleCreateJoinClick = () => {
+        triggerEvent &&
+            triggerEvent({
+                action: "Clicked on SideNav Create/Join link",
+                category: "Sidenav",
+                CTA: "Create/Join team cliked",
+                type: "Button",
+            });
+    };
+    const handleTeamClick = ({ team, type }) => {
+        triggerEvent &&
+            triggerEvent({
+                action: "Clicked on SideNav Team link",
+                category: "Sidenav",
+                destinationPath: `${baseEnvUrl}/${app}/teams/${team.id}`,
+                teamId: team.id,
+                teamType: type,
+            });
+    };
+    const handleLaunchpadLink = (event) => {
+        event.preventDefault();
+        //@ts-ignore
+        if (Boolean(hamburguerMenu) && hamburguerMenu.className.includes("active")) {
+            //@ts-ignore
+            Boolean(hamburguerMenu) && hamburguerMenu?.click();
+        }
+        setActiveMenu(false);
+    };
+    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() }, "Chat"));
+    const catalogNavlink = navigation?.navigation?.find((navlink) => navlink.name === "Catalog");
+    const adminNavlink = navigation?.navigation?.find((navlink) => navlink.name === "Admin");
+    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, onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
+            setActiveMenu(false);
+        }, ...rest }, React.createElement(SideNavItems, null,
+        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);
+                        history.push(homeLink);
+                    }
+                    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)),
+            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: `${baseEnvUrl}/${app}/agent-assistant-studio`.includes(windowLocation.href), 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,
+            React.createElement(SideNavDivider, 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) })),
+                React.createElement(ModalFooter, null,
+                    React.createElement(Button, { kind: "secondary", "data-testid": "select-team-chat-modal-cancel-button", onClick: () => setRegionalModalIsOpen(false) }, "Cancel"),
+                    React.createElement(Button, { "data-modal-primary-focus": true, kind: "primary", disabled: !selectedTeam, "data-testid": "select-team-chat-modal-continue-button", onClick: () => {
+                            if (selectedTeam) {
+                                handleRegionalNewStartNewChat(selectedTeam);
+                                setRegionalModalIsOpen(false);
+                                // closeModal();
+                            }
+                        } }, "Continue"))))),
+        children ? (React.createElement(React.Fragment, null,
+            React.createElement(SideNavDivider, null),
+            children)) : null)));
+}
+
+export { AdvantageSideNav, AdvantageSideNav as default };

package/dist/esm/{src/components → components}/Header/Header.js

@@ -54,13 +54,13 @@ const MenuAriaLabelRecord = {
 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 { analyticsHelpers, productName, baseEnvUrl, baseServicesUrl, carbonTheme = "g10", className, createJoinTeamTrigger, history, isLaunchpad = false, navLinks, platform, prefixName = "", rightPanel, skipToContentProps, templateMeteringEvent, trackEvent, triggerEvent, user, 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,
+        enabled: !hasUserTeams && Boolean(baseServicesUrl),
     });
     return (React.createElement(React.Fragment, null,
         React.createElement(Theme, { theme: carbonTheme },
@@ -72,7 +72,7 @@ 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, menuAriaLabelRecord: MenuAriaLabelRecord.TeamSwitcher, menuButtonId: MenuButtonId.TeamSwitcher, menuListId: MenuListId.TeamSwitcher, navigationPlatform: platform, teamsQuery: teamsQuery, trackEvent: trackEvent, user: user, userTeams: userTeams }),
+                    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) }),

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

@@ -0,0 +1,311 @@
+import React, { useState, useEffect } from 'react';
+import { useQueryClient, useMutation } from 'react-query';
+import { InlineLoading, HeaderMenu, HeaderMenuItem } from '@carbon/react';
+import { CheckmarkFilled, AddAlt, GroupAccount, ChevronDown } from '@carbon/react/icons';
+import sortBy from 'lodash.sortby';
+import HeaderMenu$1 from './HeaderMenu.js';
+import { resolver, serviceUrl } from '../../config/servicesConfig.js';
+import { prefix } from '../../internal/settings.js';
+
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2025
+*/
+const headerDropdownMenuContainerClassname = `${prefix}--header-dropdown-menu-container`;
+const headerDropdownMenuLoadingClassname = `${prefix}--header-dropdown-menu-loading`;
+const headerDropdownMenuSuccessClassname = `${prefix}--header-dropdown-menu-success`;
+const headerDropdownMenuClassname = `${prefix}--header-dropdown-menu`;
+const headerDropdownMenuListClassname = `${prefix}--bmrg-header-drop-down`;
+const headerDropdownMenuItemContainerClassname = `${prefix}--header-dropdown-menu-item-container`;
+const headerDropdownMenuItemClassname = `${prefix}--header-dropdown-menu-item`;
+const headerDropdownMenuItemTextIconClassname = `${prefix}--header-dropdown-menu-item-text-icon`;
+const headerDropdownMenuItemTextClassname = `${prefix}--header-dropdown-menu-item-text`;
+const headerDropdownMenuItemIconClassname = `${prefix}--header-dropdown-menu-item-icon`;
+const headerDropdownMenuItemAccountContainerClassname = `${prefix}--header-dropdown-menu-item-account-container`;
+const headerDropdownMenuItemAccountClassname = `${prefix}--header-dropdown-menu-item-account`;
+const headerDropdownMenuItemAccountIconsClassname = `${prefix}--header-dropdown-menu-item-account-icons`;
+const headerDropdownMenuItemAccountGroupIconClassname = `${prefix}--header-dropdown-menu-item-account-group-icon`;
+const headerDropdownMenuItemAccountChevronIconClassname = `${prefix}--header-dropdown-menu-item-account-chevron-icon`;
+const headerDropdownMenuItemAccountSubmenuClassname = `${prefix}--header-dropdown-menu-item-account-submenu`;
+const headerTeamSwitcherCreateTeamButtonContainerClassname = `${prefix}--header-team-switcher-create-team-button-container`;
+const headerTeamSwitcherCreateTeamButtonClassname = `${prefix}--header-team-switcher-create-team-button`;
+const headerTeamSwitcherCreateTeamButtonTextClassname = `${prefix}--header-team-switcher-create-team-button-text`;
+const headerTeamSwitcherCreateTeamButtonIconClassname = `${prefix}--header-team-switcher-create-team-button-icon`;
+function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamTrigger, history, isLaunchpad, isLoadingTeamSwitcher, isSuccessTeamSwitcher, setIsSuccessTeamSwitcher, menuAriaLabelRecord, menuButtonId, menuListId, navigationPlatform, teamsQuery, trackEvent, user, userTeams, }) {
+    const queryClient = useQueryClient();
+    const [selectedTeam, setSelectedTeam] = useState();
+    const [openAccountSubmenuId, setOpenAccountSubmenuId] = useState("");
+    const hasUserTeams = Boolean(userTeams);
+    const showSelectTeamPurpose = navigationPlatform?.requireTeamPurpose;
+    const createTeamButtonText = showSelectTeamPurpose ? "Create Team" : "Create or Join Team";
+    const userTeamInstanceSwitcherDefault = user?.teamInstanceSwitcherDefault;
+    const profileUrl = serviceUrl.resourceUserProfile({ baseServicesUrl });
+    const teamLink = ({ teamId }) => {
+        return `${navigationPlatform.baseEnvUrl}/launchpad/teams/${teamId}`;
+    };
+    const { mutateAsync: mutateUserProfile, isLoading: mutateUserProfileIsLoading } = useMutation(resolver.patchUserProfile, {
+        onSuccess: () => {
+            queryClient.invalidateQueries(profileUrl);
+        },
+    });
+    React.useEffect(() => {
+        let timer;
+        if (isSuccessTeamSwitcher && setIsSuccessTeamSwitcher) {
+            timer = setTimeout(() => {
+                setIsSuccessTeamSwitcher(false);
+            }, 3000);
+        }
+        return () => clearTimeout(timer);
+    }, [isSuccessTeamSwitcher, setIsSuccessTeamSwitcher]);
+    useEffect(() => {
+        let accountTeams, standardTeams, personalTeam = [];
+        if (hasUserTeams) {
+            accountTeams = userTeams?.data?.accountTeams ?? [];
+            standardTeams = userTeams?.data?.standardTeams ?? [];
+            personalTeam = userTeams?.data?.personalTeam ?? [];
+        }
+        else {
+            accountTeams = teamsQuery?.data?.accountTeams ?? [];
+            standardTeams = teamsQuery?.data?.standardTeams ?? [];
+            personalTeam = teamsQuery?.data?.personalTeam ?? [];
+        }
+        const userHasPersonalTeam = personalTeam.length > 0;
+        const userHasAccountTeams = accountTeams.length > 0;
+        const userHasStandardTeams = standardTeams.length > 0;
+        const userHasTeams = userHasPersonalTeam || userHasAccountTeams || userHasStandardTeams;
+        const handleSelectTeam = async ({ team }) => {
+            setSelectedTeam(team);
+            if (!userTeamInstanceSwitcherDefault) {
+                const body = {
+                    teamInstanceSwitcherDefault: team.id,
+                };
+                await mutateUserProfile({ baseServicesUrl, body });
+            }
+        };
+        if (userHasTeams) {
+            if (!userTeamInstanceSwitcherDefault) {
+                if (userHasPersonalTeam) {
+                    handleSelectTeam({ team: personalTeam[0] });
+                }
+                else if (userHasAccountTeams) {
+                    const sortedAccounts = sortBy(accountTeams, [
+                        (account) => (account.displayName ? account.displayName : account.name),
+                    ]);
+                    handleSelectTeam({ team: sortedAccounts[0] });
+                }
+                else if (userHasStandardTeams) {
+                    const sortedStandardTeams = sortBy(standardTeams, [
+                        (standardTeam) => (standardTeam.displayName ? standardTeam.displayName : standardTeam.name),
+                    ]);
+                    handleSelectTeam({ team: sortedStandardTeams[0] });
+                }
+            }
+            else if (selectedTeam?.id !== userTeamInstanceSwitcherDefault) {
+                let allProjectTeams = [];
+                if (userHasAccountTeams) {
+                    accountTeams.forEach((team) => {
+                        if (team.projectTeams && team.projectTeams.length > 0) {
+                            allProjectTeams = allProjectTeams.concat(team.projectTeams);
+                        }
+                    });
+                }
+                const allTeams = personalTeam.concat(standardTeams, accountTeams, allProjectTeams);
+                const newSelectedTeam = allTeams.find((team) => team.id === userTeamInstanceSwitcherDefault);
+                handleSelectTeam({ team: newSelectedTeam });
+            }
+        }
+    }, [
+        baseServicesUrl,
+        hasUserTeams,
+        mutateUserProfile,
+        selectedTeam,
+        teamsQuery?.data?.accountTeams,
+        teamsQuery?.data?.personalTeam,
+        teamsQuery?.data?.standardTeams,
+        userTeamInstanceSwitcherDefault,
+        userTeams?.data?.accountTeams,
+        userTeams?.data?.personalTeam,
+        userTeams?.data?.standardTeams,
+    ]);
+    const handleHeaderMenuClick = () => {
+        setOpenAccountSubmenuId("");
+    };
+    const handleTeamClick = ({ team, type }) => {
+        setOpenAccountSubmenuId("");
+        if (analyticsHelpers?.navigateEventHandler && trackEvent) {
+            analyticsHelpers.navigateEventHandler({
+                action: `Clicked ${team.name} in Team Switcher`,
+                category: "Team Switcher",
+                destinationPath: teamLink({ teamId: team.id }),
+                teamId: team.id,
+                teamType: type,
+                trackEvent,
+            });
+        }
+        if (isLaunchpad && Boolean(history)) {
+            history.push(`/teams/${team.id}`);
+        }
+        else {
+            window.open(teamLink({ teamId: team.id }), "_self");
+        }
+    };
+    const handleCreateJoinTeamClick = (e) => {
+        if (analyticsHelpers?.ctaEventHandler && trackEvent) {
+            analyticsHelpers.ctaEventHandler({
+                category: "Team Switcher",
+                CTA: "Create/Join team clicked",
+                pageName: "",
+                trackEvent,
+            });
+        }
+        if (createJoinTeamTrigger) {
+            createJoinTeamTrigger(e);
+        }
+        else {
+            window.open(`${navigationPlatform.baseEnvUrl}/launchpad?createJoinTeam=true`, "_self");
+        }
+    };
+    const handleOpenAccountSubmenu = ({ e, id }) => {
+        e.stopPropagation();
+        if (openAccountSubmenuId === id) {
+            setOpenAccountSubmenuId("");
+        }
+        else {
+            setOpenAccountSubmenuId(id);
+        }
+    };
+    if (userTeams?.isLoading || teamsQuery?.isLoading || mutateUserProfileIsLoading) {
+        return (React.createElement("div", { style: { display: "flex", alignItems: "center" } },
+            React.createElement(InlineLoading, null)));
+    }
+    if (userTeams?.data || teamsQuery?.data) {
+        let accountTeams, standardTeams, personalTeam = [];
+        if (hasUserTeams) {
+            accountTeams = userTeams?.data?.accountTeams ?? [];
+            standardTeams = userTeams?.data?.standardTeams ?? [];
+            personalTeam = userTeams?.data?.personalTeam ?? [];
+        }
+        else {
+            accountTeams = teamsQuery?.data?.accountTeams ?? [];
+            standardTeams = teamsQuery?.data?.standardTeams ?? [];
+            personalTeam = teamsQuery?.data?.personalTeam ?? [];
+        }
+        let sortedAccountTeamsWithNamesToDisplay = [];
+        let sortedStandardTeamsWithNamesToDisplay = [];
+        if (accountTeams?.length > 0) {
+            const newAccountTeams = accountTeams.map((team) => {
+                let newProjectTeams = [];
+                if (team.projectTeams && team.projectTeams.length > 0) {
+                    newProjectTeams = team.projectTeams?.map((team) => ({
+                        ...team,
+                        nameToDisplay: team.displayName ? team.displayName : team.name,
+                    }));
+                }
+                return {
+                    ...team,
+                    nameToDisplay: team.displayName ? team.displayName : team.name,
+                    projectTeams: sortBy(newProjectTeams, ["nameToDisplay"]),
+                };
+            });
+            sortedAccountTeamsWithNamesToDisplay = sortBy(newAccountTeams, ["nameToDisplay"]);
+        }
+        if (standardTeams?.length > 0) {
+            const newStandardTeams = standardTeams.map((team) => {
+                return {
+                    ...team,
+                    nameToDisplay: team.displayName ? team.displayName : team.name,
+                };
+            });
+            sortedStandardTeamsWithNamesToDisplay = sortBy(newStandardTeams, ["nameToDisplay"]);
+        }
+        let selectedTeamName = selectedTeam?.displayName ? selectedTeam.displayName : selectedTeam?.name;
+        if (selectedTeamName && selectedTeamName.length > 65) {
+            selectedTeamName = selectedTeamName.slice(0, 65) + "...";
+        }
+        return (React.createElement("div", { className: headerDropdownMenuContainerClassname },
+            isLoadingTeamSwitcher ? (React.createElement("div", { className: headerDropdownMenuLoadingClassname },
+                React.createElement(InlineLoading, null))) : isSuccessTeamSwitcher ? (React.createElement("div", { className: headerDropdownMenuSuccessClassname },
+                React.createElement(CheckmarkFilled, null))) : null,
+            React.createElement(HeaderMenu, { id: "header-team-switcher-menu", "aria-label": menuAriaLabelRecord, className: headerDropdownMenuClassname, menuLinkName: selectedTeamName ? selectedTeamName : "No team selected", onClick: handleHeaderMenuClick, "data-testid": "header-team-switcher-menu" },
+                React.createElement(HeaderMenu$1, { "aria-labelledby": menuButtonId, className: headerDropdownMenuListClassname, id: menuListId },
+                    React.createElement(HeaderMenuItem, { id: "header-team-switcher-create-join-team-button", className: headerTeamSwitcherCreateTeamButtonContainerClassname, onClick: handleCreateJoinTeamClick, 
+                        // eslint-disable-next-line no-script-url
+                        href: "javascript:void(0)", role: "menuitem", "data-testid": "header-team-switcher-create-join-team-button" },
+                        React.createElement("div", { className: headerTeamSwitcherCreateTeamButtonClassname },
+                            React.createElement("span", { className: headerTeamSwitcherCreateTeamButtonTextClassname }, createTeamButtonText),
+                            React.createElement(AddAlt, { className: headerTeamSwitcherCreateTeamButtonIconClassname }))),
+                    personalTeam.length > 0
+                        ? personalTeam.map((team) => {
+                            const teamName = team.displayName ? team.displayName : team.name;
+                            const isTeamSelected = team.id === selectedTeam?.id;
+                            return (React.createElement("div", { key: team.id, id: `${team.id}-personal-menu-item-id` },
+                                React.createElement(HeaderMenuItem, { key: team.id, id: `${team.id}-personal-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleTeamClick({ team, type: "personal" });
+                                    }, href: teamLink({ teamId: team.id }), "data-testid": "header-team-switcher-menu-item" },
+                                    React.createElement("div", { className: headerDropdownMenuItemClassname },
+                                        React.createElement("span", { title: teamName, className: headerDropdownMenuItemTextClassname }, teamName),
+                                        isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
+                        })
+                        : null,
+                    accountTeams.length > 0
+                        ? sortedAccountTeamsWithNamesToDisplay.map((team) => {
+                            const isSubmenuOpen = team.id === openAccountSubmenuId;
+                            const isProjectTeamSelected = team.projectTeams &&
+                                team.projectTeams.length > 0 &&
+                                team.projectTeams.some((team) => team.id === selectedTeam?.id);
+                            const isTeamSelected = team.id === selectedTeam?.id;
+                            const isMenuSelected = isTeamSelected || isProjectTeamSelected;
+                            return (React.createElement("div", { key: team.id, id: `${team.id}-account-menu` },
+                                React.createElement(HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }), 
+                                    // eslint-disable-next-line no-script-url
+                                    href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
+                                    React.createElement("div", { className: headerDropdownMenuItemAccountClassname },
+                                        React.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
+                                            React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
+                                            isMenuSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null),
+                                        React.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
+                                            React.createElement(GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
+                                            React.createElement(ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
+                                React.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
+                                    React.createElement(HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: (e) => {
+                                            e.stopPropagation();
+                                            handleTeamClick({ team, type: "account" });
+                                        }, "data-testid": "header-team-switcher-menu-account-accordion-item", href: teamLink({ teamId: team.id }) },
+                                        React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
+                                            React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
+                                            isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null)),
+                                    team.projectTeams && team.projectTeams.length > 0
+                                        ? team.projectTeams.map((team) => {
+                                            const isTeamSelected = team.id === selectedTeam?.id;
+                                            return (React.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
+                                                React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        handleTeamClick({ team, type: "project" });
+                                                    }, "data-testid": "header-team-switcher-menu-account-accordion-item", href: teamLink({ teamId: team.id }) },
+                                                    React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
+                                                        React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
+                                                        isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
+                                        })
+                                        : null)));
+                        })
+                        : null,
+                    standardTeams.length > 0
+                        ? sortedStandardTeamsWithNamesToDisplay.map((team) => {
+                            const isTeamSelected = team.id === selectedTeam?.id;
+                            return (React.createElement("div", { key: team.id, id: `${team.id}-standard-menu-item` },
+                                React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleTeamClick({ team, type: "standard" });
+                                    }, "data-testid": "header-team-switcher-menu-item", href: teamLink({ teamId: team.id }) },
+                                    React.createElement("div", { className: headerDropdownMenuItemClassname },
+                                        React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
+                                        isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
+                        })
+                        : null))));
+    }
+    return null;
+}
+
+export { HeaderTeamSwitcher as default };

package/dist/esm/{src/components → components}/UIShell/UIShell.js

@@ -18,7 +18,7 @@ IBM Confidential
 694970X, 69497O0
 © Copyright IBM Corp. 2022, 2024
 */
-function UIShell({ analyticsHelpers, baseEnvUrl, carbonTheme = "g10", config, createJoinTeamTrigger, history, isLaunchpad = false, leftPanel, platformName, productName, profileMenuItems = [], supportMenuItems = [], renderPrivacyRedirect = true, renderPrivacyStatement = true, rightPanel, handleShowTutorial, skipToContentProps, templateMeteringEvent, trackEvent, triggerEvent, tutorialScreenToShow, user, userTeams, enableIcaMacs, }) {
+function UIShell({ analyticsHelpers, baseEnvUrl, carbonTheme = "g10", config, createJoinTeamTrigger, history, isLaunchpad = false, isLoadingTeamSwitcher, isSuccessTeamSwitcher, setIsSuccessTeamSwitcher, leftPanel, platformName, productName, profileMenuItems = [], supportMenuItems = [], renderPrivacyRedirect = true, renderPrivacyStatement = true, rightPanel, handleShowTutorial, skipToContentProps, templateMeteringEvent, trackEvent, triggerEvent, tutorialScreenToShow, user, userTeams, enableIcaMacs, }) {
     // Support base header .e.g for an error state
     if (!config) {
         return (React.createElement(QueryClientProvider, { client: queryClient },
@@ -78,7 +78,7 @@ function UIShell({ analyticsHelpers, baseEnvUrl, carbonTheme = "g10", config, cr
                 isAboutPlatformEnabled && (React.createElement(AboutPlatformMenuItem, { key: "about-platform", name: platform.name, baseServicesUrl: platform.baseServicesUrl })),
                 tutorialScreenToShow && handleShowTutorial && (React.createElement(HeaderMenuItem, { key: "launch-tutorial", onClick: handleShowTutorial, icon: React.createElement(Book, null), "data-testid": "launch-tutorial", text: "Launch Tutorial", type: "button" })),
                 ...supportMenuItems,
-            ].filter(Boolean), history: history, isLaunchpad: isLaunchpad, trackEvent: trackEvent, user: user, userTeams: userTeams }),
+            ].filter(Boolean), history: history, isLaunchpad: isLaunchpad, isLoadingTeamSwitcher: isLoadingTeamSwitcher, isSuccessTeamSwitcher: isSuccessTeamSwitcher, setIsSuccessTeamSwitcher: setIsSuccessTeamSwitcher, trackEvent: trackEvent, user: user, userTeams: userTeams }),
         isPrivacyModalRendered ? (React.createElement(PrivacyRedirect, { isOpen: true, baseEnvUrl: platform.baseEnvUrl, platformName: platform?.name, user: user })) : null));
 }
 /**