@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.8 → 4.6.11-beta.9
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 +129 -140
- 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 +9 -4
- package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js +131 -142
- 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 +10 -5
- package/dist/types/index.d.ts +102 -1
- package/package.json +1 -1
- 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 };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { QueryClientProvider } from 'react-query';
|
|
3
|
-
import { Email, HelpDesk, Forum, ChatLaunch, Cognitive, Book } from '@carbon/react/icons';
|
|
3
|
+
import { Email, Document, HelpDesk, CatalogPublish, Policy, Forum, ChatLaunch, Cognitive, Book } from '@carbon/react/icons';
|
|
4
4
|
import Header from '../Header/Header.js';
|
|
5
5
|
import HeaderMenuItem from '../Header/HeaderMenuItem.js';
|
|
6
6
|
import PrivacyRedirect from '../PrivacyRedirect/PrivacyRedirect.js';
|
|
@@ -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,15 +62,19 @@ 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 })),
|
|
68
69
|
...profileMenuItems,
|
|
69
70
|
isSignOutEnabled && React.createElement(SignOutMenuItem, { key: "Sign Out", signOutLink: platform.signOutUrl }),
|
|
70
71
|
].filter(Boolean), supportMenuItems: [
|
|
72
|
+
React.createElement(HeaderMenuItem, { key: "docs", href: platform?.docsUrl, icon: React.createElement(Document, null), "data-testid": "docs", kind: "app", text: "Docs", type: "link" }),
|
|
71
73
|
isSupportEnabled &&
|
|
72
74
|
(supportFlagCheck || isPartnerUser ? (React.createElement(SupportCenterMenuItem, { key: "support-center", platformName: platform?.platformName, platformOrganization: platform?.platformOrganization, supportLink: supportLink, partnerEmailId: partnerEmailId, enablePartner: isPartnerUser, baseServicesUrl: platform.baseServicesUrl })) : (React.createElement(HeaderMenuItem, { key: "support-center", href: platform?.supportUrl, icon: React.createElement(HelpDesk, null), kind: "external", text: "Support Center", type: "link" }))),
|
|
75
|
+
React.createElement(HeaderMenuItem, { key: "release-notes", href: platform?.releaseNotesUrl, icon: React.createElement(CatalogPublish, null), "data-testid": "release-notes", kind: "app", text: "Release Notes", type: "link" }),
|
|
76
|
+
React.createElement(HeaderMenuItem, { key: "legal-terms", href: platform?.legalTermsUrl, icon: React.createElement(Policy, null), "data-testid": "legal-terms", kind: "app", text: "Legal Terms", type: "link" }),
|
|
77
|
+
React.createElement("span", { style: { "borderBottom": "1px solid #b8c1c1" } }),
|
|
73
78
|
isCommunityEnabled && (React.createElement(HeaderMenuItem, { key: "community", href: platform?.communityUrl, icon: React.createElement(Forum, null), kind: "external", text: "Community", type: "link" })),
|
|
74
79
|
isFeedbackEnabled && (React.createElement(FeedbackMenuItem, { key: "feedback", platformName: platform?.platformName, platformOrganization: platform?.platformOrganization, sendIdeasUrl: sendIdeasUrl })),
|
|
75
80
|
!isPartnerUser && askICAEnabled ? (React.createElement(HeaderMenuItem, { key: "chat-launch", href: platform?.askICAUrl, icon: React.createElement(ChatLaunch, null), "data-testid": "askICA-chatlaunch", kind: "external", text: "AskICA", type: "link" })) : null,
|
|
@@ -77,7 +82,7 @@ function UIShell({ baseEnvUrl, carbonTheme = "g10", config, leftPanel, platformN
|
|
|
77
82
|
isAboutPlatformEnabled && (React.createElement(AboutPlatformMenuItem, { key: "about-platform", name: platform.name, baseServicesUrl: platform.baseServicesUrl })),
|
|
78
83
|
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
84
|
...supportMenuItems,
|
|
80
|
-
].filter(Boolean), userTeams: userTeams }),
|
|
85
|
+
].filter(Boolean), history: history, isLaunchpad: isLaunchpad, isLoadingTeamSwitcher: isLoadingTeamSwitcher, isSuccessTeamSwitcher: isSuccessTeamSwitcher, setIsSuccessTeamSwitcher: setIsSuccessTeamSwitcher, trackEvent: trackEvent, user: user, userTeams: userTeams }),
|
|
81
86
|
isPrivacyModalRendered ? (React.createElement(PrivacyRedirect, { isOpen: true, baseEnvUrl: platform.baseEnvUrl, platformName: platform?.name, user: user })) : null));
|
|
82
87
|
}
|
|
83
88
|
/**
|
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,80 @@ 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
|
+
gaEnabled: boolean;
|
|
297
|
+
linkCatalogId: string;
|
|
298
|
+
instanceSwitcherEnabled: boolean;
|
|
299
|
+
inviteTime: number;
|
|
300
|
+
name: string;
|
|
301
|
+
onPremDeploymentEnabled: boolean;
|
|
302
|
+
personalTeamEnabled: boolean;
|
|
303
|
+
partnerRegex: string;
|
|
304
|
+
platformName: string;
|
|
305
|
+
platformOrganization: string;
|
|
306
|
+
pocTeamEnabled: boolean;
|
|
307
|
+
privateTeams: boolean;
|
|
308
|
+
requireTeamPurpose: boolean;
|
|
309
|
+
segmentEnabled: boolean;
|
|
310
|
+
sendMail: boolean;
|
|
311
|
+
signOutUrl: string;
|
|
312
|
+
standardUserIDCPInviteEnabled: boolean;
|
|
313
|
+
teamInviteTime: number;
|
|
314
|
+
temporayModalEnabled: boolean;
|
|
315
|
+
tilesEnabled: boolean;
|
|
316
|
+
tutorialEnabled: boolean;
|
|
317
|
+
tutorialVideoLink1: string;
|
|
318
|
+
tutorialVideoLink2: string;
|
|
319
|
+
tutorialVideoLink3: string;
|
|
320
|
+
tutorialVideoLink4: string;
|
|
321
|
+
tutorialVideoLink5: string;
|
|
322
|
+
version: string;
|
|
323
|
+
};
|
|
324
|
+
platformMessage: null | {
|
|
325
|
+
kind: string;
|
|
326
|
+
message: string;
|
|
327
|
+
title: string;
|
|
328
|
+
};
|
|
329
|
+
}
|
|
255
330
|
type NavLink = {
|
|
256
331
|
name: string;
|
|
257
332
|
url: string;
|
|
@@ -271,9 +346,15 @@ type Props$I = {
|
|
|
271
346
|
showChatButton?: boolean;
|
|
272
347
|
showSelectTeamPurpose?: boolean;
|
|
273
348
|
homeLink?: string;
|
|
349
|
+
agentAssistantStudioLink?: string;
|
|
350
|
+
agentAssistantLibraryLink?: string;
|
|
351
|
+
documentCollectionsLink?: string;
|
|
352
|
+
settingsLink?: string;
|
|
353
|
+
toolsLink?: string;
|
|
274
354
|
joinCreateTrigger?: (props: any) => void;
|
|
275
355
|
isLoading?: boolean;
|
|
276
356
|
isOpen?: boolean;
|
|
357
|
+
navigation?: Navigation;
|
|
277
358
|
navLinks?: NavLink[];
|
|
278
359
|
personalTeams?: Array<SideNavTeam>;
|
|
279
360
|
showChatTooltip?: boolean;
|
|
@@ -346,14 +427,21 @@ type Props$H = React.ComponentPropsWithoutRef<"img"> & {
|
|
|
346
427
|
declare function Avatar({ alt, className, size, src, style, title, userName, plainTooltip, ...rest }: Props$H): React.JSX.Element;
|
|
347
428
|
|
|
348
429
|
type Props$G = {
|
|
430
|
+
analyticsHelpers?: any;
|
|
349
431
|
baseServicesUrl?: string;
|
|
350
432
|
baseEnvUrl?: string;
|
|
351
433
|
carbonTheme?: "white" | "g10" | "g90" | "g100";
|
|
352
434
|
className?: string;
|
|
435
|
+
createJoinTeamTrigger?: Function;
|
|
353
436
|
enableAppSwitcher?: boolean;
|
|
354
437
|
instanceSwitcherEnabled?: boolean;
|
|
355
438
|
enableNotifications?: boolean;
|
|
356
439
|
enableNotificationsCount?: boolean;
|
|
440
|
+
history?: any;
|
|
441
|
+
isLaunchpad?: boolean;
|
|
442
|
+
isLoadingTeamSwitcher?: boolean;
|
|
443
|
+
isSuccessTeamSwitcher?: boolean;
|
|
444
|
+
setIsSuccessTeamSwitcher?: Function;
|
|
357
445
|
leftPanel?: (args: {
|
|
358
446
|
close: () => void;
|
|
359
447
|
isOpen: boolean;
|
|
@@ -381,7 +469,9 @@ type Props$G = {
|
|
|
381
469
|
supportMenuItems?: React.ReactNode[];
|
|
382
470
|
instanceSwitcherMenuItems?: React.ReactNode[];
|
|
383
471
|
templateMeteringEvent?: (props: any) => void;
|
|
472
|
+
trackEvent?: Function;
|
|
384
473
|
triggerEvent?: (props: any) => any;
|
|
474
|
+
user?: User;
|
|
385
475
|
userTeams?: {
|
|
386
476
|
data: any;
|
|
387
477
|
isLoading: boolean;
|
|
@@ -1354,7 +1444,9 @@ type Props$1 = {
|
|
|
1354
1444
|
declare function ToggleComponent({ helperText, id, invalid, invalidText, reversed, label, labelText, labelA, labelB, orientation, tooltipClassName, tooltipContent, tooltipProps, ...toggleProps }: Props$1): React.JSX.Element;
|
|
1355
1445
|
|
|
1356
1446
|
type Props = {
|
|
1447
|
+
analyticsHelpers?: any;
|
|
1357
1448
|
carbonTheme?: "white" | "g10" | "g90" | "g100";
|
|
1449
|
+
createJoinTeamTrigger?: Function;
|
|
1358
1450
|
baseEnvUrl?: string;
|
|
1359
1451
|
config?: {
|
|
1360
1452
|
features?: {
|
|
@@ -1376,6 +1468,9 @@ type Props = {
|
|
|
1376
1468
|
baseEnvUrl: string;
|
|
1377
1469
|
baseServicesUrl: string;
|
|
1378
1470
|
communityUrl?: string;
|
|
1471
|
+
docsUrl?: string;
|
|
1472
|
+
releaseNotesUrl?: string;
|
|
1473
|
+
legalTermsUrl?: string;
|
|
1379
1474
|
feedbackUrl?: string;
|
|
1380
1475
|
name?: string;
|
|
1381
1476
|
platformEmail?: string;
|
|
@@ -1399,6 +1494,11 @@ type Props = {
|
|
|
1399
1494
|
};
|
|
1400
1495
|
platformMessage?: any;
|
|
1401
1496
|
};
|
|
1497
|
+
history?: any;
|
|
1498
|
+
isLaunchpad?: boolean;
|
|
1499
|
+
isLoadingTeamSwitcher?: boolean;
|
|
1500
|
+
isSuccessTeamSwitcher?: boolean;
|
|
1501
|
+
setIsSuccessTeamSwitcher?: Function;
|
|
1402
1502
|
leftPanel?: (args: {
|
|
1403
1503
|
close: () => void;
|
|
1404
1504
|
isOpen: boolean;
|
|
@@ -1420,6 +1520,7 @@ type Props = {
|
|
|
1420
1520
|
};
|
|
1421
1521
|
supportMenuItems?: React.ReactNode[];
|
|
1422
1522
|
templateMeteringEvent?: (props: any) => void;
|
|
1523
|
+
trackEvent?: Function;
|
|
1423
1524
|
triggerEvent?: (props: any) => any;
|
|
1424
1525
|
user?: User;
|
|
1425
1526
|
userTeams?: {
|
|
@@ -1431,6 +1532,6 @@ type Props = {
|
|
|
1431
1532
|
handleShowTutorial?: Function;
|
|
1432
1533
|
tutorialScreenToShow?: string;
|
|
1433
1534
|
};
|
|
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;
|
|
1535
|
+
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
1536
|
|
|
1436
1537
|
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