@boomerang-io/carbon-addons-boomerang-react 4.6.10-beta.3 → 4.6.10-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/AdvantageSideNav/AdvantageSideNav.js +123 -140
- package/dist/cjs/components/Header/Header.js +3 -3
- package/dist/cjs/components/Header/HeaderTeamSwitcher.js +112 -76
- package/dist/cjs/components/UIShell/UIShell.js +2 -2
- package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js +125 -142
- package/dist/esm/components/Header/Header.js +3 -3
- package/dist/esm/components/Header/HeaderTeamSwitcher.js +113 -77
- package/dist/esm/components/UIShell/UIShell.js +2 -2
- package/dist/types/index.d.ts +87 -1
- package/package.json +1 -1
- package/scss/components/Header/_headerTeamSwitcher.scss +38 -8
|
@@ -21,6 +21,9 @@ IBM Confidential
|
|
|
21
21
|
694970X, 69497O0
|
|
22
22
|
© Copyright IBM Corp. 2022, 2025
|
|
23
23
|
*/
|
|
24
|
+
const headerDropdownMenuContainerClassname = `${settings.prefix}--header-dropdown-menu-container`;
|
|
25
|
+
const headerDropdownMenuLoadingClassname = `${settings.prefix}--header-dropdown-menu-loading`;
|
|
26
|
+
const headerDropdownMenuSuccessClassname = `${settings.prefix}--header-dropdown-menu-success`;
|
|
24
27
|
const headerDropdownMenuClassname = `${settings.prefix}--header-dropdown-menu`;
|
|
25
28
|
const headerDropdownMenuListClassname = `${settings.prefix}--bmrg-header-drop-down`;
|
|
26
29
|
const headerDropdownMenuItemContainerClassname = `${settings.prefix}--header-dropdown-menu-item-container`;
|
|
@@ -38,7 +41,7 @@ const headerTeamSwitcherCreateTeamButtonContainerClassname = `${settings.prefix}
|
|
|
38
41
|
const headerTeamSwitcherCreateTeamButtonClassname = `${settings.prefix}--header-team-switcher-create-team-button`;
|
|
39
42
|
const headerTeamSwitcherCreateTeamButtonTextClassname = `${settings.prefix}--header-team-switcher-create-team-button-text`;
|
|
40
43
|
const headerTeamSwitcherCreateTeamButtonIconClassname = `${settings.prefix}--header-team-switcher-create-team-button-icon`;
|
|
41
|
-
function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamTrigger, history, isLaunchpad, menuAriaLabelRecord, menuButtonId, menuListId, navigationPlatform, teamsQuery, trackEvent, user, userTeams, }) {
|
|
44
|
+
function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamTrigger, history, isLaunchpad, isLoadingTeamSwitcher, isSuccessTeamSwitcher, setIsSuccessTeamSwitcher, menuAriaLabelRecord, menuButtonId, menuListId, navigationPlatform, teamsQuery, trackEvent, user, userTeams, }) {
|
|
42
45
|
const queryClient = reactQuery.useQueryClient();
|
|
43
46
|
const [selectedTeam, setSelectedTeam] = React.useState();
|
|
44
47
|
const [openAccountSubmenuId, setOpenAccountSubmenuId] = React.useState("");
|
|
@@ -47,11 +50,23 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
|
|
|
47
50
|
const createTeamButtonText = showSelectTeamPurpose ? "Create Team" : "Create or Join Team";
|
|
48
51
|
const userTeamInstanceSwitcherDefault = user?.teamInstanceSwitcherDefault;
|
|
49
52
|
const profileUrl = servicesConfig.serviceUrl.resourceUserProfile({ baseServicesUrl });
|
|
53
|
+
const teamLink = ({ teamId }) => {
|
|
54
|
+
return `${navigationPlatform.baseEnvUrl}/launchpad/teams/${teamId}`;
|
|
55
|
+
};
|
|
50
56
|
const { mutateAsync: mutateUserProfile, isLoading: mutateUserProfileIsLoading } = reactQuery.useMutation(servicesConfig.resolver.patchUserProfile, {
|
|
51
57
|
onSuccess: () => {
|
|
52
58
|
queryClient.invalidateQueries(profileUrl);
|
|
53
59
|
},
|
|
54
60
|
});
|
|
61
|
+
React__default.default.useEffect(() => {
|
|
62
|
+
let timer;
|
|
63
|
+
if (isSuccessTeamSwitcher && setIsSuccessTeamSwitcher) {
|
|
64
|
+
timer = setTimeout(() => {
|
|
65
|
+
setIsSuccessTeamSwitcher(false);
|
|
66
|
+
}, 3000);
|
|
67
|
+
}
|
|
68
|
+
return () => clearTimeout(timer);
|
|
69
|
+
}, [isSuccessTeamSwitcher, setIsSuccessTeamSwitcher]);
|
|
55
70
|
React.useEffect(() => {
|
|
56
71
|
let accountTeams, standardTeams, personalTeam = [];
|
|
57
72
|
if (hasUserTeams) {
|
|
@@ -83,10 +98,16 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
|
|
|
83
98
|
handleSelectTeam({ team: personalTeam[0] });
|
|
84
99
|
}
|
|
85
100
|
else if (userHasAccountTeams) {
|
|
86
|
-
|
|
101
|
+
const sortedAccounts = sortBy__default.default(accountTeams, [
|
|
102
|
+
(account) => (account.displayName ? account.displayName : account.name),
|
|
103
|
+
]);
|
|
104
|
+
handleSelectTeam({ team: sortedAccounts[0] });
|
|
87
105
|
}
|
|
88
106
|
else if (userHasStandardTeams) {
|
|
89
|
-
|
|
107
|
+
const sortedStandardTeams = sortBy__default.default(standardTeams, [
|
|
108
|
+
(standardTeam) => (standardTeam.displayName ? standardTeam.displayName : standardTeam.name),
|
|
109
|
+
]);
|
|
110
|
+
handleSelectTeam({ team: sortedStandardTeams[0] });
|
|
90
111
|
}
|
|
91
112
|
}
|
|
92
113
|
else if (selectedTeam?.id !== userTeamInstanceSwitcherDefault) {
|
|
@@ -116,12 +137,16 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
|
|
|
116
137
|
userTeams?.data?.personalTeam,
|
|
117
138
|
userTeams?.data?.standardTeams,
|
|
118
139
|
]);
|
|
140
|
+
const handleHeaderMenuClick = () => {
|
|
141
|
+
setOpenAccountSubmenuId("");
|
|
142
|
+
};
|
|
119
143
|
const handleTeamClick = ({ team, type }) => {
|
|
144
|
+
setOpenAccountSubmenuId("");
|
|
120
145
|
if (analyticsHelpers?.navigateEventHandler && trackEvent) {
|
|
121
146
|
analyticsHelpers.navigateEventHandler({
|
|
122
147
|
action: `Clicked ${team.name} in Team Switcher`,
|
|
123
148
|
category: "Team Switcher",
|
|
124
|
-
destinationPath:
|
|
149
|
+
destinationPath: teamLink({ teamId: team.id }),
|
|
125
150
|
teamId: team.id,
|
|
126
151
|
teamType: type,
|
|
127
152
|
trackEvent,
|
|
@@ -131,7 +156,7 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
|
|
|
131
156
|
history.push(`/teams/${team.id}`);
|
|
132
157
|
}
|
|
133
158
|
else {
|
|
134
|
-
window.open(
|
|
159
|
+
window.open(teamLink({ teamId: team.id }), "_self");
|
|
135
160
|
}
|
|
136
161
|
};
|
|
137
162
|
const handleCreateJoinTeamClick = (e) => {
|
|
@@ -204,79 +229,90 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
|
|
|
204
229
|
sortedStandardTeamsWithNamesToDisplay = sortBy__default.default(newStandardTeams, ["nameToDisplay"]);
|
|
205
230
|
}
|
|
206
231
|
let selectedTeamName = selectedTeam?.displayName ? selectedTeam.displayName : selectedTeam?.name;
|
|
207
|
-
if (selectedTeamName && selectedTeamName.length >
|
|
208
|
-
selectedTeamName = selectedTeamName.slice(0,
|
|
232
|
+
if (selectedTeamName && selectedTeamName.length > 65) {
|
|
233
|
+
selectedTeamName = selectedTeamName.slice(0, 65) + "...";
|
|
209
234
|
}
|
|
210
|
-
return (React__default.default.createElement(
|
|
211
|
-
React__default.default.createElement(
|
|
212
|
-
React__default.default.createElement(react.
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
React__default.default.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
|
|
247
|
-
React__default.default.createElement(icons.GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
|
|
248
|
-
React__default.default.createElement(icons.ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
|
|
249
|
-
React__default.default.createElement("div", { "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
|
|
250
|
-
React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => handleTeamClick({ team, type: "account" }), "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
235
|
+
return (React__default.default.createElement("div", { className: headerDropdownMenuContainerClassname },
|
|
236
|
+
isLoadingTeamSwitcher ? (React__default.default.createElement("div", { className: headerDropdownMenuLoadingClassname },
|
|
237
|
+
React__default.default.createElement(react.InlineLoading, null))) : isSuccessTeamSwitcher ? (React__default.default.createElement("div", { className: headerDropdownMenuSuccessClassname },
|
|
238
|
+
React__default.default.createElement(icons.CheckmarkFilled, null))) : null,
|
|
239
|
+
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" },
|
|
240
|
+
React__default.default.createElement(HeaderMenu.default, { "aria-labelledby": menuButtonId, className: headerDropdownMenuListClassname, id: menuListId },
|
|
241
|
+
React__default.default.createElement(react.HeaderMenuItem, { id: "header-team-switcher-create-join-team-button", className: headerTeamSwitcherCreateTeamButtonContainerClassname, onClick: handleCreateJoinTeamClick,
|
|
242
|
+
// eslint-disable-next-line no-script-url
|
|
243
|
+
href: "javascript:void(0)", role: "menuitem", "data-testid": "header-team-switcher-create-join-team-button" },
|
|
244
|
+
React__default.default.createElement("div", { className: headerTeamSwitcherCreateTeamButtonClassname },
|
|
245
|
+
React__default.default.createElement("span", { className: headerTeamSwitcherCreateTeamButtonTextClassname }, createTeamButtonText),
|
|
246
|
+
React__default.default.createElement(icons.AddAlt, { className: headerTeamSwitcherCreateTeamButtonIconClassname }))),
|
|
247
|
+
personalTeam.length > 0
|
|
248
|
+
? personalTeam.map((team) => {
|
|
249
|
+
const teamName = team.displayName ? team.displayName : team.name;
|
|
250
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
251
|
+
return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-personal-menu-item-id` },
|
|
252
|
+
React__default.default.createElement(react.HeaderMenuItem, { key: team.id, id: `${team.id}-personal-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: (e) => {
|
|
253
|
+
e.stopPropagation();
|
|
254
|
+
handleTeamClick({ team, type: "personal" });
|
|
255
|
+
}, href: teamLink({ teamId: team.id }), "data-testid": "header-team-switcher-menu-item" },
|
|
256
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
257
|
+
React__default.default.createElement("span", { title: teamName, className: headerDropdownMenuItemTextClassname }, teamName),
|
|
258
|
+
isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
|
|
259
|
+
})
|
|
260
|
+
: null,
|
|
261
|
+
accountTeams.length > 0
|
|
262
|
+
? sortedAccountTeamsWithNamesToDisplay.map((team) => {
|
|
263
|
+
const isSubmenuOpen = team.id === openAccountSubmenuId;
|
|
264
|
+
const isProjectTeamSelected = team.projectTeams &&
|
|
265
|
+
team.projectTeams.length > 0 &&
|
|
266
|
+
team.projectTeams.some((team) => team.id === selectedTeam?.id);
|
|
267
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
268
|
+
const isMenuSelected = isTeamSelected || isProjectTeamSelected;
|
|
269
|
+
return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-account-menu` },
|
|
270
|
+
React__default.default.createElement(react.HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
|
|
251
271
|
// eslint-disable-next-line no-script-url
|
|
252
|
-
href: "javascript:void(0)" },
|
|
253
|
-
React__default.default.createElement("div", { className:
|
|
254
|
-
React__default.default.createElement("
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
272
|
+
href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
|
|
273
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemAccountClassname },
|
|
274
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
|
|
275
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
276
|
+
isMenuSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null),
|
|
277
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
|
|
278
|
+
React__default.default.createElement(icons.GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
|
|
279
|
+
React__default.default.createElement(icons.ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
|
|
280
|
+
React__default.default.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
|
|
281
|
+
React__default.default.createElement(react.HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: (e) => {
|
|
282
|
+
e.stopPropagation();
|
|
283
|
+
handleTeamClick({ team, type: "account" });
|
|
284
|
+
}, "data-testid": "header-team-switcher-menu-account-accordion-item", href: teamLink({ teamId: team.id }) },
|
|
285
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
286
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
|
|
287
|
+
isTeamSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null)),
|
|
288
|
+
team.projectTeams && team.projectTeams.length > 0
|
|
289
|
+
? team.projectTeams.map((team) => {
|
|
290
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
291
|
+
return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
|
|
292
|
+
React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: (e) => {
|
|
293
|
+
e.stopPropagation();
|
|
294
|
+
handleTeamClick({ team, type: "project" });
|
|
295
|
+
}, "data-testid": "header-team-switcher-menu-account-accordion-item", href: teamLink({ teamId: team.id }) },
|
|
296
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
297
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
298
|
+
isTeamSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
|
|
299
|
+
})
|
|
300
|
+
: null)));
|
|
301
|
+
})
|
|
302
|
+
: null,
|
|
303
|
+
standardTeams.length > 0
|
|
304
|
+
? sortedStandardTeamsWithNamesToDisplay.map((team) => {
|
|
305
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
306
|
+
return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-standard-menu-item` },
|
|
307
|
+
React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: (e) => {
|
|
308
|
+
e.stopPropagation();
|
|
309
|
+
handleTeamClick({ team, type: "standard" });
|
|
310
|
+
}, "data-testid": "header-team-switcher-menu-item", href: teamLink({ teamId: team.id }) },
|
|
311
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
312
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
313
|
+
isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
|
|
314
|
+
})
|
|
315
|
+
: null))));
|
|
280
316
|
}
|
|
281
317
|
return null;
|
|
282
318
|
}
|
|
@@ -26,7 +26,7 @@ IBM Confidential
|
|
|
26
26
|
694970X, 69497O0
|
|
27
27
|
© Copyright IBM Corp. 2022, 2024
|
|
28
28
|
*/
|
|
29
|
-
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, }) {
|
|
29
|
+
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, }) {
|
|
30
30
|
// Support base header .e.g for an error state
|
|
31
31
|
if (!config) {
|
|
32
32
|
return (React__default.default.createElement(reactQuery.QueryClientProvider, { client: servicesConfig.queryClient },
|
|
@@ -86,7 +86,7 @@ function UIShell({ analyticsHelpers, baseEnvUrl, carbonTheme = "g10", config, cr
|
|
|
86
86
|
isAboutPlatformEnabled && (React__default.default.createElement(AboutPlatform.AboutPlatformMenuItem, { key: "about-platform", name: platform.name, baseServicesUrl: platform.baseServicesUrl })),
|
|
87
87
|
tutorialScreenToShow && handleShowTutorial && (React__default.default.createElement(HeaderMenuItem.default, { key: "launch-tutorial", onClick: handleShowTutorial, icon: React__default.default.createElement(icons.Book, null), "data-testid": "launch-tutorial", text: "Launch Tutorial", type: "button" })),
|
|
88
88
|
...supportMenuItems,
|
|
89
|
-
].filter(Boolean), history: history, isLaunchpad: isLaunchpad, trackEvent: trackEvent, user: user, userTeams: userTeams }),
|
|
89
|
+
].filter(Boolean), history: history, isLaunchpad: isLaunchpad, isLoadingTeamSwitcher: isLoadingTeamSwitcher, isSuccessTeamSwitcher: isSuccessTeamSwitcher, setIsSuccessTeamSwitcher: setIsSuccessTeamSwitcher, trackEvent: trackEvent, user: user, userTeams: userTeams }),
|
|
90
90
|
isPrivacyModalRendered ? (React__default.default.createElement(PrivacyRedirect.default, { isOpen: true, baseEnvUrl: platform.baseEnvUrl, platformName: platform?.name, user: user })) : null));
|
|
91
91
|
}
|
|
92
92
|
/**
|