@boomerang-io/carbon-addons-boomerang-react 4.6.14-beta.0 → 4.6.14-beta.2

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

@@ -26,6 +26,9 @@ const headerDropdownMenuContainerClassname = `${settings.prefix}--header-dropdow
 const headerDropdownMenuLoadingClassname = `${settings.prefix}--header-dropdown-menu-loading`;
 const headerDropdownMenuSuccessClassname = `${settings.prefix}--header-dropdown-menu-success`;
 const headerDropdownMenuClassname = `${settings.prefix}--header-dropdown-menu`;
+const headerDropdownMenuContentClassname = `${settings.prefix}--header-dropdown-menu-content`;
+const headerDropdownMenuContentTextClassname = `${settings.prefix}--header-dropdown-menu-content-text`;
+const headerDropdownMenuContentIconClassname = `${settings.prefix}--header-dropdown-menu-content-icon`;
 const headerDropdownMenuListClassname = `${settings.prefix}--bmrg-header-drop-down`;
 const headerDropdownMenuItemContainerClassname = `${settings.prefix}--header-dropdown-menu-item-container`;
 const headerDropdownMenuItemClassname = `${settings.prefix}--header-dropdown-menu-item`;
@@ -94,6 +97,12 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
                 await mutateUserProfile({ baseServicesUrl, body });
             }
         };
+        const handleNoTeamsToSelect = async () => {
+            const body = {
+                teamInstanceSwitcherDefault: null,
+            };
+            await mutateUserProfile({ baseServicesUrl, body });
+        };
         if (userHasTeams) {
             if (!userTeamInstanceSwitcherDefault) {
                 if (userHasPersonalTeam) {
@@ -125,16 +134,22 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
                 const newSelectedTeam = allTeams.find((team) => team.id === userTeamInstanceSwitcherDefault);
                 handleSelectTeam({ team: newSelectedTeam });
             }
+            // if teams data loaded but there are no teams
+        }
+        else if (Boolean(userTeams?.data) || Boolean(teamsQuery?.data)) {
+            handleNoTeamsToSelect();
         }
     }, [
         baseServicesUrl,
         hasUserTeams,
         mutateUserProfile,
         selectedTeam,
+        teamsQuery?.data,
         teamsQuery?.data?.accountTeams,
         teamsQuery?.data?.personalTeam,
         teamsQuery?.data?.standardTeams,
         userTeamInstanceSwitcherDefault,
+        userTeams?.data,
         userTeams?.data?.accountTeams,
         userTeams?.data?.personalTeam,
         userTeams?.data?.standardTeams,
@@ -230,16 +245,19 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
             });
             sortedStandardTeamsWithNamesToDisplay = sortBy__default.default(newStandardTeams, ["nameToDisplay"]);
         }
-        let selectedTeamName = selectedTeam?.displayName ? selectedTeam.displayName : selectedTeam?.name;
-        if (selectedTeamName && selectedTeamName.length > 65) {
-            selectedTeamName = selectedTeamName.slice(0, 65) + "...";
-        }
+        let selectedTeamName = selectedTeam?.displayName
+            ? selectedTeam.displayName
+            : selectedTeam?.name
+                ? selectedTeam?.name
+                : "No team selected";
         const isPartnerUser = Boolean(user?.type === UserType.USER_PLATFORM_ROLE.Partner);
         return (React__default.default.createElement("div", { className: headerDropdownMenuContainerClassname },
             isLoadingTeamSwitcher ? (React__default.default.createElement("div", { className: headerDropdownMenuLoadingClassname },
                 React__default.default.createElement(react.InlineLoading, null))) : isSuccessTeamSwitcher ? (React__default.default.createElement("div", { className: headerDropdownMenuSuccessClassname },
                 React__default.default.createElement(icons.CheckmarkFilled, null))) : null,
-            React__default.default.createElement(react.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__default.default.createElement(react.HeaderMenu, { id: "header-team-switcher-menu", "aria-label": menuAriaLabelRecord, className: headerDropdownMenuClassname, renderMenuContent: () => (React__default.default.createElement("div", { className: headerDropdownMenuContentClassname },
+                    React__default.default.createElement("p", { title: selectedTeamName, className: headerDropdownMenuContentTextClassname }, selectedTeamName),
+                    React__default.default.createElement(icons.ChevronDown, { className: headerDropdownMenuContentIconClassname }))), onClick: handleHeaderMenuClick, "data-testid": "header-team-switcher-menu" },
                 React__default.default.createElement(HeaderMenu.default, { "aria-labelledby": menuButtonId, className: headerDropdownMenuListClassname, id: menuListId },
                     !isPartnerUser && (React__default.default.createElement(react.HeaderMenuItem, { id: "header-team-switcher-create-join-team-button", className: headerTeamSwitcherCreateTeamButtonContainerClassname, onClick: handleCreateJoinTeamClick, 
                         // eslint-disable-next-line no-script-url

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useMutation } from 'react-query';
 import { InlineLoading, HeaderMenu, HeaderMenuItem } from '@carbon/react';
-import { CheckmarkFilled, AddAlt, GroupAccount, ChevronDown } from '@carbon/react/icons';
+import { CheckmarkFilled, ChevronDown, AddAlt, GroupAccount } from '@carbon/react/icons';
 import sortBy from 'lodash.sortby';
 import HeaderMenu$1 from './HeaderMenu.js';
 import { resolver } from '../../config/servicesConfig.js';
@@ -17,6 +17,9 @@ const headerDropdownMenuContainerClassname = `${prefix}--header-dropdown-menu-co
 const headerDropdownMenuLoadingClassname = `${prefix}--header-dropdown-menu-loading`;
 const headerDropdownMenuSuccessClassname = `${prefix}--header-dropdown-menu-success`;
 const headerDropdownMenuClassname = `${prefix}--header-dropdown-menu`;
+const headerDropdownMenuContentClassname = `${prefix}--header-dropdown-menu-content`;
+const headerDropdownMenuContentTextClassname = `${prefix}--header-dropdown-menu-content-text`;
+const headerDropdownMenuContentIconClassname = `${prefix}--header-dropdown-menu-content-icon`;
 const headerDropdownMenuListClassname = `${prefix}--bmrg-header-drop-down`;
 const headerDropdownMenuItemContainerClassname = `${prefix}--header-dropdown-menu-item-container`;
 const headerDropdownMenuItemClassname = `${prefix}--header-dropdown-menu-item`;
@@ -85,6 +88,12 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
                 await mutateUserProfile({ baseServicesUrl, body });
             }
         };
+        const handleNoTeamsToSelect = async () => {
+            const body = {
+                teamInstanceSwitcherDefault: null,
+            };
+            await mutateUserProfile({ baseServicesUrl, body });
+        };
         if (userHasTeams) {
             if (!userTeamInstanceSwitcherDefault) {
                 if (userHasPersonalTeam) {
@@ -116,16 +125,22 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
                 const newSelectedTeam = allTeams.find((team) => team.id === userTeamInstanceSwitcherDefault);
                 handleSelectTeam({ team: newSelectedTeam });
             }
+            // if teams data loaded but there are no teams
+        }
+        else if (Boolean(userTeams?.data) || Boolean(teamsQuery?.data)) {
+            handleNoTeamsToSelect();
         }
     }, [
         baseServicesUrl,
         hasUserTeams,
         mutateUserProfile,
         selectedTeam,
+        teamsQuery?.data,
         teamsQuery?.data?.accountTeams,
         teamsQuery?.data?.personalTeam,
         teamsQuery?.data?.standardTeams,
         userTeamInstanceSwitcherDefault,
+        userTeams?.data,
         userTeams?.data?.accountTeams,
         userTeams?.data?.personalTeam,
         userTeams?.data?.standardTeams,
@@ -221,16 +236,19 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
             });
             sortedStandardTeamsWithNamesToDisplay = sortBy(newStandardTeams, ["nameToDisplay"]);
         }
-        let selectedTeamName = selectedTeam?.displayName ? selectedTeam.displayName : selectedTeam?.name;
-        if (selectedTeamName && selectedTeamName.length > 65) {
-            selectedTeamName = selectedTeamName.slice(0, 65) + "...";
-        }
+        let selectedTeamName = selectedTeam?.displayName
+            ? selectedTeam.displayName
+            : selectedTeam?.name
+                ? selectedTeam?.name
+                : "No team selected";
         const isPartnerUser = Boolean(user?.type === USER_PLATFORM_ROLE.Partner);
         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, { id: "header-team-switcher-menu", "aria-label": menuAriaLabelRecord, className: headerDropdownMenuClassname, renderMenuContent: () => (React.createElement("div", { className: headerDropdownMenuContentClassname },
+                    React.createElement("p", { title: selectedTeamName, className: headerDropdownMenuContentTextClassname }, selectedTeamName),
+                    React.createElement(ChevronDown, { className: headerDropdownMenuContentIconClassname }))), onClick: handleHeaderMenuClick, "data-testid": "header-team-switcher-menu" },
                 React.createElement(HeaderMenu$1, { "aria-labelledby": menuButtonId, className: headerDropdownMenuListClassname, id: menuListId },
                     !isPartnerUser && (React.createElement(HeaderMenuItem, { id: "header-team-switcher-create-join-team-button", className: headerTeamSwitcherCreateTeamButtonContainerClassname, onClick: handleCreateJoinTeamClick, 
                         // eslint-disable-next-line no-script-url

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@boomerang-io/carbon-addons-boomerang-react",
   "description": "Carbon Addons for Boomerang apps",
-  "version": "4.6.14-beta.0",
+  "version": "4.6.14-beta.2",
   "author": {
     "name": "Tim Bula",
     "email": "timrbula@gmail.com"

package/scss/components/Header/_headerTeamSwitcher.scss

@@ -39,13 +39,40 @@ IBM Confidential
       overflow: hidden;
       width: 100%;
 
-      .#{$prefix}--header__menu-arrow {
+      .#{$prefix}--header-dropdown-menu-content {
+        align-items: center;
+        display: flex;
+      }
+
+      .#{$prefix}--header-dropdown-menu-content-text {
+        font-size: 0.875rem;
+        font-weight: 600;
+        line-height: 1.125rem;
+        letter-spacing: 0.01rem;
+        max-width: 14.5625rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .#{$prefix}--header-dropdown-menu-content-icon {
+        margin-left: 1rem;
         min-height: 1rem;
         min-width: 1rem;
+        transition: transform 150ms ease-in-out;
+        transform: rotate(0deg);
       }
 
       &[aria-expanded="true"] {
         background-color: var(--cds-layer-hover-01) !important;
+
+        .#{$prefix}--header-dropdown-menu-content-text {
+          width: 14.5625rem;
+        }
+
+        .#{$prefix}--header-dropdown-menu-content-icon {
+          transform: rotate(180deg);
+        }
       }
     }