@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.0 → 4.6.11-beta.10
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 +130 -141
- package/dist/cjs/components/Header/Header.js +18 -4
- package/dist/cjs/components/Header/HeaderAppSwitcher.js +2 -10
- package/dist/cjs/components/Header/HeaderTeamSwitcher.js +324 -0
- package/dist/cjs/components/UIShell/UIShell.js +5 -4
- package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js +132 -143
- package/dist/esm/components/Header/Header.js +18 -4
- package/dist/esm/components/Header/HeaderAppSwitcher.js +2 -10
- package/dist/esm/components/Header/HeaderTeamSwitcher.js +315 -0
- package/dist/esm/components/UIShell/UIShell.js +5 -4
- package/dist/types/index.d.ts +108 -1
- package/package.json +1 -1
- package/scss/components/AdvantageSideNav/_advantageSideNav.scss +0 -6
- package/scss/components/Header/_headerTeamSwitcher.scss +195 -0
- package/scss/global/index.scss +7 -8
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { useQueryClient, useMutation } from 'react-query';
|
|
3
|
+
import { InlineLoading, HeaderMenu, HeaderMenuItem } from '@carbon/react';
|
|
4
|
+
import { CheckmarkFilled, AddAlt, GroupAccount, ChevronDown } from '@carbon/react/icons';
|
|
5
|
+
import sortBy from 'lodash.sortby';
|
|
6
|
+
import HeaderMenu$1 from './HeaderMenu.js';
|
|
7
|
+
import { resolver, serviceUrl } from '../../config/servicesConfig.js';
|
|
8
|
+
import { prefix } from '../../internal/settings.js';
|
|
9
|
+
|
|
10
|
+
/*
|
|
11
|
+
IBM Confidential
|
|
12
|
+
694970X, 69497O0
|
|
13
|
+
© Copyright IBM Corp. 2022, 2025
|
|
14
|
+
*/
|
|
15
|
+
const headerDropdownMenuContainerClassname = `${prefix}--header-dropdown-menu-container`;
|
|
16
|
+
const headerDropdownMenuLoadingClassname = `${prefix}--header-dropdown-menu-loading`;
|
|
17
|
+
const headerDropdownMenuSuccessClassname = `${prefix}--header-dropdown-menu-success`;
|
|
18
|
+
const headerDropdownMenuClassname = `${prefix}--header-dropdown-menu`;
|
|
19
|
+
const headerDropdownMenuListClassname = `${prefix}--bmrg-header-drop-down`;
|
|
20
|
+
const headerDropdownMenuItemContainerClassname = `${prefix}--header-dropdown-menu-item-container`;
|
|
21
|
+
const headerDropdownMenuItemClassname = `${prefix}--header-dropdown-menu-item`;
|
|
22
|
+
const headerDropdownMenuItemTextIconClassname = `${prefix}--header-dropdown-menu-item-text-icon`;
|
|
23
|
+
const headerDropdownMenuItemTextClassname = `${prefix}--header-dropdown-menu-item-text`;
|
|
24
|
+
const headerDropdownMenuItemIconClassname = `${prefix}--header-dropdown-menu-item-icon`;
|
|
25
|
+
const headerDropdownMenuItemAccountContainerClassname = `${prefix}--header-dropdown-menu-item-account-container`;
|
|
26
|
+
const headerDropdownMenuItemAccountClassname = `${prefix}--header-dropdown-menu-item-account`;
|
|
27
|
+
const headerDropdownMenuItemAccountIconsClassname = `${prefix}--header-dropdown-menu-item-account-icons`;
|
|
28
|
+
const headerDropdownMenuItemAccountGroupIconClassname = `${prefix}--header-dropdown-menu-item-account-group-icon`;
|
|
29
|
+
const headerDropdownMenuItemAccountChevronIconClassname = `${prefix}--header-dropdown-menu-item-account-chevron-icon`;
|
|
30
|
+
const headerDropdownMenuItemAccountSubmenuClassname = `${prefix}--header-dropdown-menu-item-account-submenu`;
|
|
31
|
+
const headerTeamSwitcherCreateTeamButtonContainerClassname = `${prefix}--header-team-switcher-create-team-button-container`;
|
|
32
|
+
const headerTeamSwitcherCreateTeamButtonClassname = `${prefix}--header-team-switcher-create-team-button`;
|
|
33
|
+
const headerTeamSwitcherCreateTeamButtonTextClassname = `${prefix}--header-team-switcher-create-team-button-text`;
|
|
34
|
+
const headerTeamSwitcherCreateTeamButtonIconClassname = `${prefix}--header-team-switcher-create-team-button-icon`;
|
|
35
|
+
function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamTrigger, history, isLaunchpad, isLoadingTeamSwitcher, isSuccessTeamSwitcher, setIsSuccessTeamSwitcher, menuAriaLabelRecord, menuButtonId, menuListId, navigationPlatform, teamsQuery, trackEvent, user, userTeams, }) {
|
|
36
|
+
const queryClient = useQueryClient();
|
|
37
|
+
const [selectedTeam, setSelectedTeam] = useState();
|
|
38
|
+
const [openAccountSubmenuId, setOpenAccountSubmenuId] = useState("");
|
|
39
|
+
const hasUserTeams = Boolean(userTeams);
|
|
40
|
+
const showSelectTeamPurpose = navigationPlatform?.requireTeamPurpose;
|
|
41
|
+
const createTeamButtonText = showSelectTeamPurpose ? "Create Team" : "Create or Join Team";
|
|
42
|
+
const userTeamInstanceSwitcherDefault = user?.teamInstanceSwitcherDefault;
|
|
43
|
+
const profileUrl = serviceUrl.resourceUserProfile({ baseServicesUrl });
|
|
44
|
+
const teamLink = ({ teamId }) => {
|
|
45
|
+
return `${navigationPlatform.baseEnvUrl}/launchpad/teams/${teamId}`;
|
|
46
|
+
};
|
|
47
|
+
const { mutateAsync: mutateUserProfile, isLoading: mutateUserProfileIsLoading } = useMutation(resolver.patchUserProfile, {
|
|
48
|
+
onSuccess: () => {
|
|
49
|
+
queryClient.invalidateQueries(profileUrl);
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
React.useEffect(() => {
|
|
53
|
+
let timer;
|
|
54
|
+
if (isSuccessTeamSwitcher && setIsSuccessTeamSwitcher) {
|
|
55
|
+
timer = setTimeout(() => {
|
|
56
|
+
setIsSuccessTeamSwitcher(false);
|
|
57
|
+
}, 3000);
|
|
58
|
+
}
|
|
59
|
+
return () => clearTimeout(timer);
|
|
60
|
+
}, [isSuccessTeamSwitcher, setIsSuccessTeamSwitcher]);
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
let accountTeams, standardTeams, personalTeam = [];
|
|
63
|
+
if (hasUserTeams) {
|
|
64
|
+
accountTeams = userTeams?.data?.accountTeams ?? [];
|
|
65
|
+
standardTeams = userTeams?.data?.standardTeams ?? [];
|
|
66
|
+
personalTeam = userTeams?.data?.personalTeam ?? [];
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
accountTeams = teamsQuery?.data?.accountTeams ?? [];
|
|
70
|
+
standardTeams = teamsQuery?.data?.standardTeams ?? [];
|
|
71
|
+
personalTeam = teamsQuery?.data?.personalTeam ?? [];
|
|
72
|
+
}
|
|
73
|
+
const userHasPersonalTeam = personalTeam.length > 0;
|
|
74
|
+
const userHasAccountTeams = accountTeams.length > 0;
|
|
75
|
+
const userHasStandardTeams = standardTeams.length > 0;
|
|
76
|
+
const userHasTeams = userHasPersonalTeam || userHasAccountTeams || userHasStandardTeams;
|
|
77
|
+
const handleSelectTeam = async ({ team }) => {
|
|
78
|
+
setSelectedTeam(team);
|
|
79
|
+
if (!userTeamInstanceSwitcherDefault) {
|
|
80
|
+
const body = {
|
|
81
|
+
teamInstanceSwitcherDefault: team.id,
|
|
82
|
+
};
|
|
83
|
+
await mutateUserProfile({ baseServicesUrl, body });
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
if (userHasTeams) {
|
|
87
|
+
if (!userTeamInstanceSwitcherDefault) {
|
|
88
|
+
if (userHasPersonalTeam) {
|
|
89
|
+
handleSelectTeam({ team: personalTeam[0] });
|
|
90
|
+
}
|
|
91
|
+
else if (userHasAccountTeams) {
|
|
92
|
+
const sortedAccounts = sortBy(accountTeams, [
|
|
93
|
+
(account) => (account.displayName ? account.displayName : account.name),
|
|
94
|
+
]);
|
|
95
|
+
handleSelectTeam({ team: sortedAccounts[0] });
|
|
96
|
+
}
|
|
97
|
+
else if (userHasStandardTeams) {
|
|
98
|
+
const sortedStandardTeams = sortBy(standardTeams, [
|
|
99
|
+
(standardTeam) => (standardTeam.displayName ? standardTeam.displayName : standardTeam.name),
|
|
100
|
+
]);
|
|
101
|
+
handleSelectTeam({ team: sortedStandardTeams[0] });
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
else if (selectedTeam?.id !== userTeamInstanceSwitcherDefault) {
|
|
105
|
+
let allProjectTeams = [];
|
|
106
|
+
if (userHasAccountTeams) {
|
|
107
|
+
accountTeams.forEach((team) => {
|
|
108
|
+
if (team.projectTeams && team.projectTeams.length > 0) {
|
|
109
|
+
allProjectTeams = allProjectTeams.concat(team.projectTeams);
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
const allTeams = personalTeam.concat(standardTeams, accountTeams, allProjectTeams);
|
|
114
|
+
const newSelectedTeam = allTeams.find((team) => team.id === userTeamInstanceSwitcherDefault);
|
|
115
|
+
handleSelectTeam({ team: newSelectedTeam });
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}, [
|
|
119
|
+
baseServicesUrl,
|
|
120
|
+
hasUserTeams,
|
|
121
|
+
mutateUserProfile,
|
|
122
|
+
selectedTeam,
|
|
123
|
+
teamsQuery?.data?.accountTeams,
|
|
124
|
+
teamsQuery?.data?.personalTeam,
|
|
125
|
+
teamsQuery?.data?.standardTeams,
|
|
126
|
+
userTeamInstanceSwitcherDefault,
|
|
127
|
+
userTeams?.data?.accountTeams,
|
|
128
|
+
userTeams?.data?.personalTeam,
|
|
129
|
+
userTeams?.data?.standardTeams,
|
|
130
|
+
]);
|
|
131
|
+
const handleHeaderMenuClick = () => {
|
|
132
|
+
setOpenAccountSubmenuId("");
|
|
133
|
+
};
|
|
134
|
+
const handleTeamClick = ({ team, type }) => {
|
|
135
|
+
setOpenAccountSubmenuId("");
|
|
136
|
+
if (analyticsHelpers?.navigateEventHandler && trackEvent) {
|
|
137
|
+
analyticsHelpers.navigateEventHandler({
|
|
138
|
+
action: `Clicked ${team.name} in Team Switcher`,
|
|
139
|
+
category: "Team Switcher",
|
|
140
|
+
destinationPath: teamLink({ teamId: team.id }),
|
|
141
|
+
teamId: team.id,
|
|
142
|
+
teamType: type,
|
|
143
|
+
trackEvent,
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
if (isLaunchpad && Boolean(history)) {
|
|
147
|
+
history.push(`/teams/${team.id}`);
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
window.open(teamLink({ teamId: team.id }), "_self");
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
const handleCreateJoinTeamClick = (e) => {
|
|
154
|
+
if (analyticsHelpers?.ctaEventHandler && trackEvent) {
|
|
155
|
+
analyticsHelpers.ctaEventHandler({
|
|
156
|
+
category: "Team Switcher",
|
|
157
|
+
CTA: "Create/Join team clicked",
|
|
158
|
+
pageName: "",
|
|
159
|
+
trackEvent,
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
if (createJoinTeamTrigger) {
|
|
163
|
+
createJoinTeamTrigger(e);
|
|
164
|
+
}
|
|
165
|
+
else {
|
|
166
|
+
window.open(`${navigationPlatform.baseEnvUrl}/launchpad?createJoinTeam=true`, "_self");
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
const handleOpenAccountSubmenu = ({ e, id }) => {
|
|
170
|
+
e.stopPropagation();
|
|
171
|
+
if (openAccountSubmenuId === id) {
|
|
172
|
+
setOpenAccountSubmenuId("");
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
setOpenAccountSubmenuId(id);
|
|
176
|
+
}
|
|
177
|
+
};
|
|
178
|
+
if (userTeams?.isLoading || teamsQuery?.isLoading || mutateUserProfileIsLoading) {
|
|
179
|
+
return (React.createElement("div", { style: { display: "flex", alignItems: "center" } },
|
|
180
|
+
React.createElement(InlineLoading, null)));
|
|
181
|
+
}
|
|
182
|
+
if (userTeams?.data || teamsQuery?.data) {
|
|
183
|
+
let accountTeams, standardTeams, personalTeam = [];
|
|
184
|
+
if (hasUserTeams) {
|
|
185
|
+
accountTeams = userTeams?.data?.accountTeams ?? [];
|
|
186
|
+
standardTeams = userTeams?.data?.standardTeams ?? [];
|
|
187
|
+
personalTeam = userTeams?.data?.personalTeam ?? [];
|
|
188
|
+
}
|
|
189
|
+
else {
|
|
190
|
+
accountTeams = teamsQuery?.data?.accountTeams ?? [];
|
|
191
|
+
standardTeams = teamsQuery?.data?.standardTeams ?? [];
|
|
192
|
+
personalTeam = teamsQuery?.data?.personalTeam ?? [];
|
|
193
|
+
}
|
|
194
|
+
let sortedAccountTeamsWithNamesToDisplay = [];
|
|
195
|
+
let sortedStandardTeamsWithNamesToDisplay = [];
|
|
196
|
+
if (accountTeams?.length > 0) {
|
|
197
|
+
const newAccountTeams = accountTeams.map((team) => {
|
|
198
|
+
let newProjectTeams = [];
|
|
199
|
+
if (team.projectTeams && team.projectTeams.length > 0) {
|
|
200
|
+
newProjectTeams = team.projectTeams?.map((team) => ({
|
|
201
|
+
...team,
|
|
202
|
+
nameToDisplay: team.displayName ? team.displayName : team.name,
|
|
203
|
+
}));
|
|
204
|
+
}
|
|
205
|
+
return {
|
|
206
|
+
...team,
|
|
207
|
+
nameToDisplay: team.displayName ? team.displayName : team.name,
|
|
208
|
+
projectTeams: sortBy(newProjectTeams, ["nameToDisplay"]),
|
|
209
|
+
};
|
|
210
|
+
});
|
|
211
|
+
sortedAccountTeamsWithNamesToDisplay = sortBy(newAccountTeams, ["nameToDisplay"]);
|
|
212
|
+
}
|
|
213
|
+
if (standardTeams?.length > 0) {
|
|
214
|
+
const newStandardTeams = standardTeams.map((team) => {
|
|
215
|
+
return {
|
|
216
|
+
...team,
|
|
217
|
+
nameToDisplay: team.displayName ? team.displayName : team.name,
|
|
218
|
+
};
|
|
219
|
+
});
|
|
220
|
+
sortedStandardTeamsWithNamesToDisplay = sortBy(newStandardTeams, ["nameToDisplay"]);
|
|
221
|
+
}
|
|
222
|
+
let selectedTeamName = selectedTeam?.displayName ? selectedTeam.displayName : selectedTeam?.name;
|
|
223
|
+
if (selectedTeamName && selectedTeamName.length > 65) {
|
|
224
|
+
selectedTeamName = selectedTeamName.slice(0, 65) + "...";
|
|
225
|
+
}
|
|
226
|
+
return (React.createElement("div", { className: headerDropdownMenuContainerClassname },
|
|
227
|
+
isLoadingTeamSwitcher ? (React.createElement("div", { className: headerDropdownMenuLoadingClassname },
|
|
228
|
+
React.createElement(InlineLoading, null))) : isSuccessTeamSwitcher ? (React.createElement("div", { className: headerDropdownMenuSuccessClassname },
|
|
229
|
+
React.createElement(CheckmarkFilled, null))) : null,
|
|
230
|
+
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" },
|
|
231
|
+
React.createElement(HeaderMenu$1, { "aria-labelledby": menuButtonId, className: headerDropdownMenuListClassname, id: menuListId },
|
|
232
|
+
React.createElement(HeaderMenuItem, { id: "header-team-switcher-create-join-team-button", className: headerTeamSwitcherCreateTeamButtonContainerClassname, onClick: handleCreateJoinTeamClick,
|
|
233
|
+
// eslint-disable-next-line no-script-url
|
|
234
|
+
href: "javascript:void(0)", role: "menuitem", "data-testid": "header-team-switcher-create-join-team-button" },
|
|
235
|
+
React.createElement("div", { className: headerTeamSwitcherCreateTeamButtonClassname },
|
|
236
|
+
React.createElement("span", { className: headerTeamSwitcherCreateTeamButtonTextClassname }, createTeamButtonText),
|
|
237
|
+
React.createElement(AddAlt, { className: headerTeamSwitcherCreateTeamButtonIconClassname }))),
|
|
238
|
+
personalTeam.length > 0
|
|
239
|
+
? personalTeam.map((team) => {
|
|
240
|
+
const teamName = team.displayName ? team.displayName : team.name;
|
|
241
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
242
|
+
return (React.createElement("div", { key: team.id, id: `${team.id}-personal-menu-item-id` },
|
|
243
|
+
React.createElement(HeaderMenuItem, { key: team.id, id: `${team.id}-personal-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
244
|
+
handleTeamClick({ team, type: "personal" });
|
|
245
|
+
},
|
|
246
|
+
// eslint-disable-next-line no-script-url
|
|
247
|
+
href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-item" },
|
|
248
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
249
|
+
React.createElement("span", { title: teamName, className: headerDropdownMenuItemTextClassname }, teamName),
|
|
250
|
+
isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
|
|
251
|
+
})
|
|
252
|
+
: null,
|
|
253
|
+
accountTeams.length > 0
|
|
254
|
+
? sortedAccountTeamsWithNamesToDisplay.map((team) => {
|
|
255
|
+
const isSubmenuOpen = team.id === openAccountSubmenuId;
|
|
256
|
+
const isProjectTeamSelected = team.projectTeams &&
|
|
257
|
+
team.projectTeams.length > 0 &&
|
|
258
|
+
team.projectTeams.some((team) => team.id === selectedTeam?.id);
|
|
259
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
260
|
+
const isMenuSelected = isTeamSelected || isProjectTeamSelected;
|
|
261
|
+
return (React.createElement("div", { key: team.id, id: `${team.id}-account-menu` },
|
|
262
|
+
React.createElement(HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
|
|
263
|
+
// eslint-disable-next-line no-script-url
|
|
264
|
+
href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
|
|
265
|
+
React.createElement("div", { className: headerDropdownMenuItemAccountClassname },
|
|
266
|
+
React.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
|
|
267
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
268
|
+
isMenuSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null),
|
|
269
|
+
React.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
|
|
270
|
+
React.createElement(GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
|
|
271
|
+
React.createElement(ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
|
|
272
|
+
React.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
|
|
273
|
+
React.createElement(HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
274
|
+
handleTeamClick({ team, type: "account" });
|
|
275
|
+
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
276
|
+
// eslint-disable-next-line no-script-url
|
|
277
|
+
href: "javascript:void(0)" },
|
|
278
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
279
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
|
|
280
|
+
isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null)),
|
|
281
|
+
team.projectTeams && team.projectTeams.length > 0
|
|
282
|
+
? team.projectTeams.map((team) => {
|
|
283
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
284
|
+
return (React.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
|
|
285
|
+
React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
286
|
+
handleTeamClick({ team, type: "project" });
|
|
287
|
+
}, "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
288
|
+
// eslint-disable-next-line no-script-url
|
|
289
|
+
href: "javascript:void(0)" },
|
|
290
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
291
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
292
|
+
isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
|
|
293
|
+
})
|
|
294
|
+
: null)));
|
|
295
|
+
})
|
|
296
|
+
: null,
|
|
297
|
+
standardTeams.length > 0
|
|
298
|
+
? sortedStandardTeamsWithNamesToDisplay.map((team) => {
|
|
299
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
300
|
+
return (React.createElement("div", { key: team.id, id: `${team.id}-standard-menu-item` },
|
|
301
|
+
React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
|
|
302
|
+
handleTeamClick({ team, type: "standard" });
|
|
303
|
+
}, "data-testid": "header-team-switcher-menu-item",
|
|
304
|
+
// eslint-disable-next-line no-script-url
|
|
305
|
+
href: "javascript:void(0)" },
|
|
306
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
307
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
308
|
+
isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
|
|
309
|
+
})
|
|
310
|
+
: null))));
|
|
311
|
+
}
|
|
312
|
+
return null;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
export { HeaderTeamSwitcher as default };
|
|
@@ -18,10 +18,11 @@ IBM Confidential
|
|
|
18
18
|
694970X, 69497O0
|
|
19
19
|
© Copyright IBM Corp. 2022, 2024
|
|
20
20
|
*/
|
|
21
|
-
function UIShell({ baseEnvUrl, carbonTheme = "g10", config, leftPanel, platformName, productName, profileMenuItems = [], supportMenuItems = [], renderPrivacyRedirect = true, renderPrivacyStatement = true, rightPanel, handleShowTutorial, skipToContentProps, templateMeteringEvent, triggerEvent, tutorialScreenToShow, user, userTeams, enableIcaMacs, }) {
|
|
21
|
+
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, }) {
|
|
22
22
|
// Support base header .e.g for an error state
|
|
23
23
|
if (!config) {
|
|
24
|
-
return (React.createElement(
|
|
24
|
+
return (React.createElement(QueryClientProvider, { client: queryClient },
|
|
25
|
+
React.createElement(Header, { baseEnvUrl: baseEnvUrl ?? "", baseServicesUrl: "", carbonTheme: carbonTheme, enableAppSwitcher: false, enableNotifications: false, enableNotificationsCount: false, productName: productName || platformName || "", user: user })));
|
|
25
26
|
}
|
|
26
27
|
const { features, navigation, platform, platformMessage } = config;
|
|
27
28
|
const names = getProductAndPlatformNames({ productName, platformName, platform });
|
|
@@ -61,7 +62,7 @@ function UIShell({ baseEnvUrl, carbonTheme = "g10", config, leftPanel, platformN
|
|
|
61
62
|
*/
|
|
62
63
|
const isPrivacyStatementDisabled = renderPrivacyStatement === false || features?.["consent.enabled"] === false;
|
|
63
64
|
return (React.createElement(QueryClientProvider, { client: queryClient },
|
|
64
|
-
React.createElement(Header, { baseEnvUrl: platform.baseEnvUrl, baseServicesUrl: platform.baseServicesUrl, carbonTheme: carbonTheme, enableAppSwitcher: isAppSwitcherEnabled, instanceSwitcherEnabled: instanceSwitcherEnabled, enableNotifications: isNotificationsEnabled, enableNotificationsCount: isNotificationsCountEnabled, leftPanel: leftPanel, navLinks: navigation, platform: platform, platformMessage: platformMessage, prefixName: names.platformName, productName: names.productName, rightPanel: rightPanel, requestSummary: user?.requestSummary, skipToContentProps: skipToContentProps, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent, profileMenuItems: [
|
|
65
|
+
React.createElement(Header, { analyticsHelpers: analyticsHelpers, baseEnvUrl: platform.baseEnvUrl, baseServicesUrl: platform.baseServicesUrl, carbonTheme: carbonTheme, createJoinTeamTrigger: createJoinTeamTrigger, enableAppSwitcher: isAppSwitcherEnabled, instanceSwitcherEnabled: instanceSwitcherEnabled, enableNotifications: isNotificationsEnabled, enableNotificationsCount: isNotificationsCountEnabled, leftPanel: leftPanel, navLinks: navigation, platform: platform, platformMessage: platformMessage, prefixName: names.platformName, productName: names.productName, rightPanel: rightPanel, requestSummary: user?.requestSummary, skipToContentProps: skipToContentProps, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent, profileMenuItems: [
|
|
65
66
|
isUserEnabled && (React.createElement(ProfileSettingsMenuItem, { key: "profile-settings", baseServicesUrl: platform.baseServicesUrl, src: `${platform.baseServicesUrl}/users/image/${user?.email}`, userName: user?.displayName ?? user?.name })),
|
|
66
67
|
isSendMailEnabled && (React.createElement(HeaderMenuItem, { key: "email-preferences", href: `${platform.baseEnvUrl}/launchpad/email-preferences`, icon: React.createElement(Email, null), kind: "internal", text: "Email Preferences", type: "link" })),
|
|
67
68
|
!isPrivacyStatementDisabled && (React.createElement(PrivacyStatementMenuItem, { key: "privacy-statement", baseServicesUrl: platform.baseServicesUrl, platformEmail: platform?.platformEmail })),
|
|
@@ -77,7 +78,7 @@ function UIShell({ baseEnvUrl, carbonTheme = "g10", config, leftPanel, platformN
|
|
|
77
78
|
isAboutPlatformEnabled && (React.createElement(AboutPlatformMenuItem, { key: "about-platform", name: platform.name, baseServicesUrl: platform.baseServicesUrl })),
|
|
78
79
|
tutorialScreenToShow && handleShowTutorial && (React.createElement(HeaderMenuItem, { key: "launch-tutorial", onClick: handleShowTutorial, icon: React.createElement(Book, null), "data-testid": "launch-tutorial", text: "Launch Tutorial", type: "button" })),
|
|
79
80
|
...supportMenuItems,
|
|
80
|
-
].filter(Boolean), userTeams: userTeams }),
|
|
81
|
+
].filter(Boolean), history: history, isLaunchpad: isLaunchpad, isLoadingTeamSwitcher: isLoadingTeamSwitcher, isSuccessTeamSwitcher: isSuccessTeamSwitcher, setIsSuccessTeamSwitcher: setIsSuccessTeamSwitcher, trackEvent: trackEvent, user: user, userTeams: userTeams }),
|
|
81
82
|
isPrivacyModalRendered ? (React.createElement(PrivacyRedirect, { isOpen: true, baseEnvUrl: platform.baseEnvUrl, platformName: platform?.name, user: user })) : null));
|
|
82
83
|
}
|
|
83
84
|
/**
|
package/dist/types/index.d.ts
CHANGED
|
@@ -223,6 +223,7 @@ type User = {
|
|
|
223
223
|
hasOpenPersonalTeamRequest?: boolean;
|
|
224
224
|
personalTeamAssistantsAccess?: boolean;
|
|
225
225
|
personalTeamAssistantsAccessRequested?: boolean;
|
|
226
|
+
teamInstanceSwitcherDefault?: string | null;
|
|
226
227
|
};
|
|
227
228
|
type UserTeams = {
|
|
228
229
|
accountTeams: {
|
|
@@ -252,6 +253,89 @@ type PlatformNotification = {
|
|
|
252
253
|
type: string;
|
|
253
254
|
userId: string;
|
|
254
255
|
};
|
|
256
|
+
interface Navigation {
|
|
257
|
+
features: {
|
|
258
|
+
"appSwitcher.enabled": boolean;
|
|
259
|
+
"docs.enabled": boolean;
|
|
260
|
+
"eventing.enabled": boolean;
|
|
261
|
+
"feedback.enabled": boolean;
|
|
262
|
+
"homePage.enabled": boolean;
|
|
263
|
+
"metering.enabled": boolean;
|
|
264
|
+
"notifications.enabled": boolean;
|
|
265
|
+
"notificationsCount.enabled": boolean;
|
|
266
|
+
"partner.enabled": boolean;
|
|
267
|
+
"support.enabled": boolean;
|
|
268
|
+
"welcome.enabled": boolean;
|
|
269
|
+
};
|
|
270
|
+
improveQuestions: [
|
|
271
|
+
{
|
|
272
|
+
key: string;
|
|
273
|
+
options: [string];
|
|
274
|
+
question: string;
|
|
275
|
+
type: string;
|
|
276
|
+
}
|
|
277
|
+
];
|
|
278
|
+
navigation: [
|
|
279
|
+
{
|
|
280
|
+
name: string;
|
|
281
|
+
url: string;
|
|
282
|
+
}
|
|
283
|
+
];
|
|
284
|
+
platform: {
|
|
285
|
+
addServiceRequestUrl: string;
|
|
286
|
+
baseEnvUrl: string;
|
|
287
|
+
baseServicesUrl: string;
|
|
288
|
+
cashEIAEnabled: boolean;
|
|
289
|
+
catalogContributorUrl: string;
|
|
290
|
+
catalogItemRequestLimit: number;
|
|
291
|
+
catalogRecipeRequestLimit: number;
|
|
292
|
+
communityUrl: string;
|
|
293
|
+
displayLogo: boolean;
|
|
294
|
+
feedbackUrl: string;
|
|
295
|
+
footerEnabled: boolean;
|
|
296
|
+
admin: {
|
|
297
|
+
url: string;
|
|
298
|
+
};
|
|
299
|
+
docs: {
|
|
300
|
+
url: string;
|
|
301
|
+
};
|
|
302
|
+
catalog: {
|
|
303
|
+
url: string;
|
|
304
|
+
};
|
|
305
|
+
gaEnabled: boolean;
|
|
306
|
+
linkCatalogId: string;
|
|
307
|
+
instanceSwitcherEnabled: boolean;
|
|
308
|
+
inviteTime: number;
|
|
309
|
+
name: string;
|
|
310
|
+
onPremDeploymentEnabled: boolean;
|
|
311
|
+
personalTeamEnabled: boolean;
|
|
312
|
+
partnerRegex: string;
|
|
313
|
+
platformName: string;
|
|
314
|
+
platformOrganization: string;
|
|
315
|
+
pocTeamEnabled: boolean;
|
|
316
|
+
privateTeams: boolean;
|
|
317
|
+
requireTeamPurpose: boolean;
|
|
318
|
+
segmentEnabled: boolean;
|
|
319
|
+
sendMail: boolean;
|
|
320
|
+
signOutUrl: string;
|
|
321
|
+
standardUserIDCPInviteEnabled: boolean;
|
|
322
|
+
teamInviteTime: number;
|
|
323
|
+
temporayModalEnabled: boolean;
|
|
324
|
+
tilesEnabled: boolean;
|
|
325
|
+
tutorialEnabled: boolean;
|
|
326
|
+
tutorialVideoLink1: string;
|
|
327
|
+
tutorialVideoLink2: string;
|
|
328
|
+
tutorialVideoLink3: string;
|
|
329
|
+
tutorialVideoLink4: string;
|
|
330
|
+
tutorialVideoLink5: string;
|
|
331
|
+
version: string;
|
|
332
|
+
};
|
|
333
|
+
platformMessage: null | {
|
|
334
|
+
kind: string;
|
|
335
|
+
message: string;
|
|
336
|
+
title: string;
|
|
337
|
+
};
|
|
338
|
+
}
|
|
255
339
|
type NavLink = {
|
|
256
340
|
name: string;
|
|
257
341
|
url: string;
|
|
@@ -271,9 +355,15 @@ type Props$I = {
|
|
|
271
355
|
showChatButton?: boolean;
|
|
272
356
|
showSelectTeamPurpose?: boolean;
|
|
273
357
|
homeLink?: string;
|
|
358
|
+
agentAssistantStudioLink?: string;
|
|
359
|
+
agentAssistantLibraryLink?: string;
|
|
360
|
+
documentCollectionsLink?: string;
|
|
361
|
+
settingsLink?: string;
|
|
362
|
+
toolsLink?: string;
|
|
274
363
|
joinCreateTrigger?: (props: any) => void;
|
|
275
364
|
isLoading?: boolean;
|
|
276
365
|
isOpen?: boolean;
|
|
366
|
+
navigation?: Navigation;
|
|
277
367
|
navLinks?: NavLink[];
|
|
278
368
|
personalTeams?: Array<SideNavTeam>;
|
|
279
369
|
showChatTooltip?: boolean;
|
|
@@ -346,14 +436,21 @@ type Props$H = React.ComponentPropsWithoutRef<"img"> & {
|
|
|
346
436
|
declare function Avatar({ alt, className, size, src, style, title, userName, plainTooltip, ...rest }: Props$H): React.JSX.Element;
|
|
347
437
|
|
|
348
438
|
type Props$G = {
|
|
439
|
+
analyticsHelpers?: any;
|
|
349
440
|
baseServicesUrl?: string;
|
|
350
441
|
baseEnvUrl?: string;
|
|
351
442
|
carbonTheme?: "white" | "g10" | "g90" | "g100";
|
|
352
443
|
className?: string;
|
|
444
|
+
createJoinTeamTrigger?: Function;
|
|
353
445
|
enableAppSwitcher?: boolean;
|
|
354
446
|
instanceSwitcherEnabled?: boolean;
|
|
355
447
|
enableNotifications?: boolean;
|
|
356
448
|
enableNotificationsCount?: boolean;
|
|
449
|
+
history?: any;
|
|
450
|
+
isLaunchpad?: boolean;
|
|
451
|
+
isLoadingTeamSwitcher?: boolean;
|
|
452
|
+
isSuccessTeamSwitcher?: boolean;
|
|
453
|
+
setIsSuccessTeamSwitcher?: Function;
|
|
357
454
|
leftPanel?: (args: {
|
|
358
455
|
close: () => void;
|
|
359
456
|
isOpen: boolean;
|
|
@@ -381,7 +478,9 @@ type Props$G = {
|
|
|
381
478
|
supportMenuItems?: React.ReactNode[];
|
|
382
479
|
instanceSwitcherMenuItems?: React.ReactNode[];
|
|
383
480
|
templateMeteringEvent?: (props: any) => void;
|
|
481
|
+
trackEvent?: Function;
|
|
384
482
|
triggerEvent?: (props: any) => any;
|
|
483
|
+
user?: User;
|
|
385
484
|
userTeams?: {
|
|
386
485
|
data: any;
|
|
387
486
|
isLoading: boolean;
|
|
@@ -1354,7 +1453,9 @@ type Props$1 = {
|
|
|
1354
1453
|
declare function ToggleComponent({ helperText, id, invalid, invalidText, reversed, label, labelText, labelA, labelB, orientation, tooltipClassName, tooltipContent, tooltipProps, ...toggleProps }: Props$1): React.JSX.Element;
|
|
1355
1454
|
|
|
1356
1455
|
type Props = {
|
|
1456
|
+
analyticsHelpers?: any;
|
|
1357
1457
|
carbonTheme?: "white" | "g10" | "g90" | "g100";
|
|
1458
|
+
createJoinTeamTrigger?: Function;
|
|
1358
1459
|
baseEnvUrl?: string;
|
|
1359
1460
|
config?: {
|
|
1360
1461
|
features?: {
|
|
@@ -1399,6 +1500,11 @@ type Props = {
|
|
|
1399
1500
|
};
|
|
1400
1501
|
platformMessage?: any;
|
|
1401
1502
|
};
|
|
1503
|
+
history?: any;
|
|
1504
|
+
isLaunchpad?: boolean;
|
|
1505
|
+
isLoadingTeamSwitcher?: boolean;
|
|
1506
|
+
isSuccessTeamSwitcher?: boolean;
|
|
1507
|
+
setIsSuccessTeamSwitcher?: Function;
|
|
1402
1508
|
leftPanel?: (args: {
|
|
1403
1509
|
close: () => void;
|
|
1404
1510
|
isOpen: boolean;
|
|
@@ -1420,6 +1526,7 @@ type Props = {
|
|
|
1420
1526
|
};
|
|
1421
1527
|
supportMenuItems?: React.ReactNode[];
|
|
1422
1528
|
templateMeteringEvent?: (props: any) => void;
|
|
1529
|
+
trackEvent?: Function;
|
|
1423
1530
|
triggerEvent?: (props: any) => any;
|
|
1424
1531
|
user?: User;
|
|
1425
1532
|
userTeams?: {
|
|
@@ -1431,6 +1538,6 @@ type Props = {
|
|
|
1431
1538
|
handleShowTutorial?: Function;
|
|
1432
1539
|
tutorialScreenToShow?: string;
|
|
1433
1540
|
};
|
|
1434
|
-
declare function UIShell({ baseEnvUrl, carbonTheme, config, leftPanel, platformName, productName, profileMenuItems, supportMenuItems, renderPrivacyRedirect, renderPrivacyStatement, rightPanel, handleShowTutorial, skipToContentProps, templateMeteringEvent, triggerEvent, tutorialScreenToShow, user, userTeams, enableIcaMacs, }: Props): React.JSX.Element;
|
|
1541
|
+
declare function UIShell({ analyticsHelpers, baseEnvUrl, carbonTheme, config, createJoinTeamTrigger, history, isLaunchpad, isLoadingTeamSwitcher, isSuccessTeamSwitcher, setIsSuccessTeamSwitcher, leftPanel, platformName, productName, profileMenuItems, supportMenuItems, renderPrivacyRedirect, renderPrivacyStatement, rightPanel, handleShowTutorial, skipToContentProps, templateMeteringEvent, trackEvent, triggerEvent, tutorialScreenToShow, user, userTeams, enableIcaMacs, }: Props): React.JSX.Element;
|
|
1435
1542
|
|
|
1436
1543
|
export { AdvantageSideNav, AutoSuggestBmrg as AutoSuggest, Avatar, CheckboxListComponent as CheckboxList, ComboBoxComponent as ComboBox, ComboBoxMultiSelect, ComposedModal, ConfirmModal, CreatableComponent as Creatable, DataDrivenInput, DateInputComponent as DateInput, DecisionButtons, DelayedRender, DynamicFormik, DynamicInput, Error, Error403, Error404, ErrorBoundary, ErrorDragon, ErrorFullPage, Error as ErrorMessage, ErrorPage, ErrorPageCore, FeatureHeader, FeatureHeaderSubtitle, FeatureHeaderTitle, FeatureNavTab, FeatureNavTabs, FeatureSideNav, FeatureSideNavFooter, FeatureSideNavHeader, FeatureSideNavLink, FeatureSideNavLinks, FlowModalContainer as FlowModal, FlowModalForm, FormInput, Header, _default as HeaderMenuItem, ImageModal, InputGovernor, Loading, MemberBar, Modal, ModalConfirmEdit, FlowModalContainer as ModalFlow, FlowModalForm as ModalFlowForm, ModalForm, ModalFunctionChildrenProps, ModalTrigger, NotificationsContainer, PlatformBanner, PlatformNotificationsContainer, Portal, PrivacyStatement, ProtectedRoute, RadioGroupComponent as RadioGroup, RichTextAreaComponent as RichTextArea, SimpleTeamService, Team, TextAreaComponent as TextArea, TextInputComponent as TextInput, ToastNotification, ToggleComponent as Toggle, TooltipHover, UIShell, User, UserTeams, notify };
|
package/package.json
CHANGED