@boomerang-io/carbon-addons-boomerang-react 4.6.8-beta.37 → 4.6.8-beta.39
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.
|
@@ -5,23 +5,46 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactQuery = require('react-query');
|
|
7
7
|
var react = require('@carbon/react');
|
|
8
|
+
var icons = require('@carbon/react/icons');
|
|
9
|
+
var sortBy = require('lodash.sortby');
|
|
10
|
+
var HeaderMenu = require('./HeaderMenu.js');
|
|
8
11
|
var servicesConfig = require('../../config/servicesConfig.js');
|
|
12
|
+
var settings = require('../../internal/settings.js');
|
|
9
13
|
|
|
10
14
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
15
|
|
|
12
16
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
17
|
+
var sortBy__default = /*#__PURE__*/_interopDefault(sortBy);
|
|
13
18
|
|
|
14
19
|
/*
|
|
15
20
|
IBM Confidential
|
|
16
21
|
694970X, 69497O0
|
|
17
22
|
© Copyright IBM Corp. 2022, 2025
|
|
18
23
|
*/
|
|
24
|
+
const headerDropdownMenuClassname = `${settings.prefix}--header-dropdown-menu`;
|
|
25
|
+
const headerDropdownMenuListClassname = `${settings.prefix}--bmrg-header-drop-down`;
|
|
26
|
+
const headerDropdownMenuItemContainerClassname = `${settings.prefix}--header-dropdown-menu-item-container`;
|
|
27
|
+
const headerDropdownMenuItemClassname = `${settings.prefix}--header-dropdown-menu-item`;
|
|
28
|
+
const headerDropdownMenuItemTextIconClassname = `${settings.prefix}--header-dropdown-menu-item-text-icon`;
|
|
29
|
+
const headerDropdownMenuItemTextClassname = `${settings.prefix}--header-dropdown-menu-item-text`;
|
|
30
|
+
const headerDropdownMenuItemIconClassname = `${settings.prefix}--header-dropdown-menu-item-icon`;
|
|
31
|
+
const headerDropdownMenuItemAccountContainerClassname = `${settings.prefix}--header-dropdown-menu-item-account-container`;
|
|
32
|
+
const headerDropdownMenuItemAccountClassname = `${settings.prefix}--header-dropdown-menu-item-account`;
|
|
33
|
+
const headerDropdownMenuItemAccountIconsClassname = `${settings.prefix}--header-dropdown-menu-item-account-icons`;
|
|
34
|
+
const headerDropdownMenuItemAccountGroupIconClassname = `${settings.prefix}--header-dropdown-menu-item-account-group-icon`;
|
|
35
|
+
const headerDropdownMenuItemAccountChevronIconClassname = `${settings.prefix}--header-dropdown-menu-item-account-chevron-icon`;
|
|
36
|
+
const headerDropdownMenuItemAccountSubmenuClassname = `${settings.prefix}--header-dropdown-menu-item-account-submenu`;
|
|
37
|
+
const headerTeamSwitcherCreateTeamButtonContainerClassname = `${settings.prefix}--header-team-switcher-create-team-button-container`;
|
|
38
|
+
const headerTeamSwitcherCreateTeamButtonClassname = `${settings.prefix}--header-team-switcher-create-team-button`;
|
|
39
|
+
const headerTeamSwitcherCreateTeamButtonTextClassname = `${settings.prefix}--header-team-switcher-create-team-button-text`;
|
|
40
|
+
const headerTeamSwitcherCreateTeamButtonIconClassname = `${settings.prefix}--header-team-switcher-create-team-button-icon`;
|
|
19
41
|
function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamTrigger, history, isLaunchpad, menuAriaLabelRecord, menuButtonId, menuListId, navigationPlatform, teamsQuery, trackEvent, user, userTeams, }) {
|
|
20
42
|
const queryClient = reactQuery.useQueryClient();
|
|
21
43
|
const [selectedTeam, setSelectedTeam] = React.useState();
|
|
22
|
-
React.useState("");
|
|
44
|
+
const [openAccountSubmenuId, setOpenAccountSubmenuId] = React.useState("");
|
|
23
45
|
const hasUserTeams = Boolean(userTeams);
|
|
24
|
-
navigationPlatform?.requireTeamPurpose;
|
|
46
|
+
const showSelectTeamPurpose = navigationPlatform?.requireTeamPurpose;
|
|
47
|
+
const createTeamButtonText = showSelectTeamPurpose ? "Create Team" : "Create or Join Team";
|
|
25
48
|
const userTeamInstanceSwitcherDefault = user?.teamInstanceSwitcherDefault;
|
|
26
49
|
const profileUrl = servicesConfig.serviceUrl.resourceUserProfile({ baseServicesUrl });
|
|
27
50
|
const { mutateAsync: mutateUserProfile, isLoading: mutateUserProfileIsLoading } = reactQuery.useMutation(servicesConfig.resolver.patchUserProfile, {
|
|
@@ -93,56 +116,167 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
|
|
|
93
116
|
userTeams?.data?.personalTeam,
|
|
94
117
|
userTeams?.data?.standardTeams,
|
|
95
118
|
]);
|
|
119
|
+
const handleTeamClick = ({ team, type }) => {
|
|
120
|
+
if (analyticsHelpers?.navigateEventHandler && trackEvent) {
|
|
121
|
+
analyticsHelpers.navigateEventHandler({
|
|
122
|
+
action: `Clicked ${team.name} in Team Switcher`,
|
|
123
|
+
category: "Team Switcher",
|
|
124
|
+
destinationPath: `${navigationPlatform.baseEnvUrl}/launchpad/teams/${team.id}`,
|
|
125
|
+
teamId: team.id,
|
|
126
|
+
teamType: type,
|
|
127
|
+
trackEvent,
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
if (isLaunchpad && Boolean(history)) {
|
|
131
|
+
history.push(`/teams/${team.id}`);
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
window.open(`${navigationPlatform.baseEnvUrl}/launchpad/teams/${team.id}`, "_self");
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
const handleCreateJoinTeamClick = (e) => {
|
|
138
|
+
if (analyticsHelpers?.ctaEventHandler && trackEvent) {
|
|
139
|
+
analyticsHelpers.ctaEventHandler({
|
|
140
|
+
category: "Team Switcher",
|
|
141
|
+
CTA: "Create/Join team clicked",
|
|
142
|
+
pageName: "",
|
|
143
|
+
trackEvent,
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
if (createJoinTeamTrigger) {
|
|
147
|
+
createJoinTeamTrigger(e);
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
window.open(`${navigationPlatform.baseEnvUrl}/launchpad?createJoinTeam=true`, "_self");
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
const handleOpenAccountSubmenu = ({ e, id }) => {
|
|
154
|
+
e.stopPropagation();
|
|
155
|
+
if (openAccountSubmenuId === id) {
|
|
156
|
+
setOpenAccountSubmenuId("");
|
|
157
|
+
}
|
|
158
|
+
else {
|
|
159
|
+
setOpenAccountSubmenuId(id);
|
|
160
|
+
}
|
|
161
|
+
};
|
|
96
162
|
if (userTeams?.isLoading || teamsQuery?.isLoading || mutateUserProfileIsLoading) {
|
|
97
163
|
return (React__default.default.createElement("div", { style: { display: "flex", alignItems: "center" } },
|
|
98
164
|
React__default.default.createElement(react.InlineLoading, null)));
|
|
99
165
|
}
|
|
100
166
|
if (userTeams?.data || teamsQuery?.data) {
|
|
167
|
+
let accountTeams, standardTeams, personalTeam = [];
|
|
101
168
|
if (hasUserTeams) {
|
|
102
|
-
userTeams?.data?.accountTeams ?? [];
|
|
103
|
-
userTeams?.data?.standardTeams ?? [];
|
|
104
|
-
userTeams?.data?.personalTeam ?? [];
|
|
169
|
+
accountTeams = userTeams?.data?.accountTeams ?? [];
|
|
170
|
+
standardTeams = userTeams?.data?.standardTeams ?? [];
|
|
171
|
+
personalTeam = userTeams?.data?.personalTeam ?? [];
|
|
105
172
|
}
|
|
106
173
|
else {
|
|
107
|
-
teamsQuery?.data?.accountTeams ?? [];
|
|
108
|
-
teamsQuery?.data?.standardTeams ?? [];
|
|
109
|
-
teamsQuery?.data?.personalTeam ?? [];
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
// );
|
|
140
|
-
// }
|
|
174
|
+
accountTeams = teamsQuery?.data?.accountTeams ?? [];
|
|
175
|
+
standardTeams = teamsQuery?.data?.standardTeams ?? [];
|
|
176
|
+
personalTeam = teamsQuery?.data?.personalTeam ?? [];
|
|
177
|
+
}
|
|
178
|
+
let sortedAccountTeamsWithNamesToDisplay = [];
|
|
179
|
+
let sortedStandardTeamsWithNamesToDisplay = [];
|
|
180
|
+
if (accountTeams?.length > 0) {
|
|
181
|
+
const newAccountTeams = accountTeams.map((team) => {
|
|
182
|
+
let newProjectTeams = [];
|
|
183
|
+
if (team.projectTeams && team.projectTeams.length > 0) {
|
|
184
|
+
newProjectTeams = team.projectTeams?.map((team) => ({
|
|
185
|
+
...team,
|
|
186
|
+
nameToDisplay: team.displayName ? team.displayName : team.name,
|
|
187
|
+
}));
|
|
188
|
+
}
|
|
189
|
+
return {
|
|
190
|
+
...team,
|
|
191
|
+
nameToDisplay: team.displayName ? team.displayName : team.name,
|
|
192
|
+
projectTeams: sortBy__default.default(newProjectTeams, ["nameToDisplay"]),
|
|
193
|
+
};
|
|
194
|
+
});
|
|
195
|
+
sortedAccountTeamsWithNamesToDisplay = sortBy__default.default(newAccountTeams, ["nameToDisplay"]);
|
|
196
|
+
}
|
|
197
|
+
if (standardTeams?.length > 0) {
|
|
198
|
+
const newStandardTeams = standardTeams.map((team) => {
|
|
199
|
+
return {
|
|
200
|
+
...team,
|
|
201
|
+
nameToDisplay: team.displayName ? team.displayName : team.name,
|
|
202
|
+
};
|
|
203
|
+
});
|
|
204
|
+
sortedStandardTeamsWithNamesToDisplay = sortBy__default.default(newStandardTeams, ["nameToDisplay"]);
|
|
205
|
+
}
|
|
141
206
|
let selectedTeamName = selectedTeam?.displayName ? selectedTeam.displayName : selectedTeam?.name;
|
|
142
207
|
if (selectedTeamName && selectedTeamName.length > 42) {
|
|
143
208
|
selectedTeamName = selectedTeamName.slice(0, 42) + "...";
|
|
144
209
|
}
|
|
145
|
-
return (React__default.default.createElement(
|
|
210
|
+
return (React__default.default.createElement(react.HeaderMenu, { "aria-label": menuAriaLabelRecord, className: headerDropdownMenuClassname, menuLinkName: selectedTeamName ? selectedTeamName : "No team selected", "data-testid": "header-team-switcher-menu" },
|
|
211
|
+
React__default.default.createElement(HeaderMenu.default, { "aria-labelledby": menuButtonId, className: headerDropdownMenuListClassname, id: menuListId },
|
|
212
|
+
React__default.default.createElement(react.HeaderMenuItem, { className: headerTeamSwitcherCreateTeamButtonContainerClassname, onClick: handleCreateJoinTeamClick,
|
|
213
|
+
// eslint-disable-next-line no-script-url
|
|
214
|
+
href: "javascript:void(0)", role: "menuitem", "data-testid": "header-team-switcher-create-join-team-button" },
|
|
215
|
+
React__default.default.createElement("div", { className: headerTeamSwitcherCreateTeamButtonClassname },
|
|
216
|
+
React__default.default.createElement("span", { className: headerTeamSwitcherCreateTeamButtonTextClassname }, createTeamButtonText),
|
|
217
|
+
React__default.default.createElement(icons.AddAlt, { className: headerTeamSwitcherCreateTeamButtonIconClassname }))),
|
|
218
|
+
personalTeam.length > 0
|
|
219
|
+
? personalTeam.map((team) => {
|
|
220
|
+
const teamName = team.displayName ? team.displayName : team.name;
|
|
221
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
222
|
+
return (React__default.default.createElement(react.HeaderMenuItem, { key: team.id, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => handleTeamClick({ team, type: "personal" }),
|
|
223
|
+
// eslint-disable-next-line no-script-url
|
|
224
|
+
href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-item" },
|
|
225
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
226
|
+
React__default.default.createElement("span", { title: teamName, className: headerDropdownMenuItemTextClassname }, teamName),
|
|
227
|
+
isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null)));
|
|
228
|
+
})
|
|
229
|
+
: null,
|
|
230
|
+
accountTeams.length > 0
|
|
231
|
+
? sortedAccountTeamsWithNamesToDisplay.map((team) => {
|
|
232
|
+
const isSubmenuOpen = team.id === openAccountSubmenuId;
|
|
233
|
+
const isProjectTeamSelected = team.projectTeams &&
|
|
234
|
+
team.projectTeams.length > 0 &&
|
|
235
|
+
team.projectTeams.some((team) => team.id === selectedTeam?.id);
|
|
236
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
237
|
+
const isMenuSelected = isTeamSelected || isProjectTeamSelected;
|
|
238
|
+
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
239
|
+
React__default.default.createElement(react.HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
|
|
240
|
+
// eslint-disable-next-line no-script-url
|
|
241
|
+
href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
|
|
242
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemAccountClassname },
|
|
243
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
|
|
244
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
245
|
+
isMenuSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null),
|
|
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",
|
|
251
|
+
// eslint-disable-next-line no-script-url
|
|
252
|
+
href: "javascript:void(0)" },
|
|
253
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
254
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
|
|
255
|
+
isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null)),
|
|
256
|
+
team.projectTeams && team.projectTeams.length > 0
|
|
257
|
+
? team.projectTeams.map((team) => {
|
|
258
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
259
|
+
return (React__default.default.createElement(react.HeaderMenuItem, { key: team.id, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => handleTeamClick({ team, type: "project" }), "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
260
|
+
// eslint-disable-next-line no-script-url
|
|
261
|
+
href: "javascript:void(0)" },
|
|
262
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
263
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
264
|
+
isTeamSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null)));
|
|
265
|
+
})
|
|
266
|
+
: null)));
|
|
267
|
+
})
|
|
268
|
+
: null,
|
|
269
|
+
standardTeams.length > 0
|
|
270
|
+
? sortedStandardTeamsWithNamesToDisplay.map((team) => {
|
|
271
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
272
|
+
return (React__default.default.createElement(react.HeaderMenuItem, { key: team.id, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => handleTeamClick({ team, type: "standard" }), "data-testid": "header-team-switcher-menu-item",
|
|
273
|
+
// eslint-disable-next-line no-script-url
|
|
274
|
+
href: "javascript:void(0)" },
|
|
275
|
+
React__default.default.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
276
|
+
React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
277
|
+
isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null)));
|
|
278
|
+
})
|
|
279
|
+
: null)));
|
|
146
280
|
}
|
|
147
281
|
return null;
|
|
148
282
|
}
|
|
@@ -1,19 +1,41 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import { useQueryClient, useMutation } from 'react-query';
|
|
3
|
-
import { InlineLoading } from '@carbon/react';
|
|
3
|
+
import { InlineLoading, HeaderMenu, HeaderMenuItem } from '@carbon/react';
|
|
4
|
+
import { AddAlt, CheckmarkFilled, GroupAccount, ChevronDown } from '@carbon/react/icons';
|
|
5
|
+
import sortBy from 'lodash.sortby';
|
|
6
|
+
import HeaderMenu$1 from './HeaderMenu.js';
|
|
4
7
|
import { resolver, serviceUrl } from '../../config/servicesConfig.js';
|
|
8
|
+
import { prefix } from '../../internal/settings.js';
|
|
5
9
|
|
|
6
10
|
/*
|
|
7
11
|
IBM Confidential
|
|
8
12
|
694970X, 69497O0
|
|
9
13
|
© Copyright IBM Corp. 2022, 2025
|
|
10
14
|
*/
|
|
15
|
+
const headerDropdownMenuClassname = `${prefix}--header-dropdown-menu`;
|
|
16
|
+
const headerDropdownMenuListClassname = `${prefix}--bmrg-header-drop-down`;
|
|
17
|
+
const headerDropdownMenuItemContainerClassname = `${prefix}--header-dropdown-menu-item-container`;
|
|
18
|
+
const headerDropdownMenuItemClassname = `${prefix}--header-dropdown-menu-item`;
|
|
19
|
+
const headerDropdownMenuItemTextIconClassname = `${prefix}--header-dropdown-menu-item-text-icon`;
|
|
20
|
+
const headerDropdownMenuItemTextClassname = `${prefix}--header-dropdown-menu-item-text`;
|
|
21
|
+
const headerDropdownMenuItemIconClassname = `${prefix}--header-dropdown-menu-item-icon`;
|
|
22
|
+
const headerDropdownMenuItemAccountContainerClassname = `${prefix}--header-dropdown-menu-item-account-container`;
|
|
23
|
+
const headerDropdownMenuItemAccountClassname = `${prefix}--header-dropdown-menu-item-account`;
|
|
24
|
+
const headerDropdownMenuItemAccountIconsClassname = `${prefix}--header-dropdown-menu-item-account-icons`;
|
|
25
|
+
const headerDropdownMenuItemAccountGroupIconClassname = `${prefix}--header-dropdown-menu-item-account-group-icon`;
|
|
26
|
+
const headerDropdownMenuItemAccountChevronIconClassname = `${prefix}--header-dropdown-menu-item-account-chevron-icon`;
|
|
27
|
+
const headerDropdownMenuItemAccountSubmenuClassname = `${prefix}--header-dropdown-menu-item-account-submenu`;
|
|
28
|
+
const headerTeamSwitcherCreateTeamButtonContainerClassname = `${prefix}--header-team-switcher-create-team-button-container`;
|
|
29
|
+
const headerTeamSwitcherCreateTeamButtonClassname = `${prefix}--header-team-switcher-create-team-button`;
|
|
30
|
+
const headerTeamSwitcherCreateTeamButtonTextClassname = `${prefix}--header-team-switcher-create-team-button-text`;
|
|
31
|
+
const headerTeamSwitcherCreateTeamButtonIconClassname = `${prefix}--header-team-switcher-create-team-button-icon`;
|
|
11
32
|
function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamTrigger, history, isLaunchpad, menuAriaLabelRecord, menuButtonId, menuListId, navigationPlatform, teamsQuery, trackEvent, user, userTeams, }) {
|
|
12
33
|
const queryClient = useQueryClient();
|
|
13
34
|
const [selectedTeam, setSelectedTeam] = useState();
|
|
14
|
-
useState("");
|
|
35
|
+
const [openAccountSubmenuId, setOpenAccountSubmenuId] = useState("");
|
|
15
36
|
const hasUserTeams = Boolean(userTeams);
|
|
16
|
-
navigationPlatform?.requireTeamPurpose;
|
|
37
|
+
const showSelectTeamPurpose = navigationPlatform?.requireTeamPurpose;
|
|
38
|
+
const createTeamButtonText = showSelectTeamPurpose ? "Create Team" : "Create or Join Team";
|
|
17
39
|
const userTeamInstanceSwitcherDefault = user?.teamInstanceSwitcherDefault;
|
|
18
40
|
const profileUrl = serviceUrl.resourceUserProfile({ baseServicesUrl });
|
|
19
41
|
const { mutateAsync: mutateUserProfile, isLoading: mutateUserProfileIsLoading } = useMutation(resolver.patchUserProfile, {
|
|
@@ -85,56 +107,167 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
|
|
|
85
107
|
userTeams?.data?.personalTeam,
|
|
86
108
|
userTeams?.data?.standardTeams,
|
|
87
109
|
]);
|
|
110
|
+
const handleTeamClick = ({ team, type }) => {
|
|
111
|
+
if (analyticsHelpers?.navigateEventHandler && trackEvent) {
|
|
112
|
+
analyticsHelpers.navigateEventHandler({
|
|
113
|
+
action: `Clicked ${team.name} in Team Switcher`,
|
|
114
|
+
category: "Team Switcher",
|
|
115
|
+
destinationPath: `${navigationPlatform.baseEnvUrl}/launchpad/teams/${team.id}`,
|
|
116
|
+
teamId: team.id,
|
|
117
|
+
teamType: type,
|
|
118
|
+
trackEvent,
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
if (isLaunchpad && Boolean(history)) {
|
|
122
|
+
history.push(`/teams/${team.id}`);
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
window.open(`${navigationPlatform.baseEnvUrl}/launchpad/teams/${team.id}`, "_self");
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
const handleCreateJoinTeamClick = (e) => {
|
|
129
|
+
if (analyticsHelpers?.ctaEventHandler && trackEvent) {
|
|
130
|
+
analyticsHelpers.ctaEventHandler({
|
|
131
|
+
category: "Team Switcher",
|
|
132
|
+
CTA: "Create/Join team clicked",
|
|
133
|
+
pageName: "",
|
|
134
|
+
trackEvent,
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
if (createJoinTeamTrigger) {
|
|
138
|
+
createJoinTeamTrigger(e);
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
window.open(`${navigationPlatform.baseEnvUrl}/launchpad?createJoinTeam=true`, "_self");
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
const handleOpenAccountSubmenu = ({ e, id }) => {
|
|
145
|
+
e.stopPropagation();
|
|
146
|
+
if (openAccountSubmenuId === id) {
|
|
147
|
+
setOpenAccountSubmenuId("");
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
setOpenAccountSubmenuId(id);
|
|
151
|
+
}
|
|
152
|
+
};
|
|
88
153
|
if (userTeams?.isLoading || teamsQuery?.isLoading || mutateUserProfileIsLoading) {
|
|
89
154
|
return (React.createElement("div", { style: { display: "flex", alignItems: "center" } },
|
|
90
155
|
React.createElement(InlineLoading, null)));
|
|
91
156
|
}
|
|
92
157
|
if (userTeams?.data || teamsQuery?.data) {
|
|
158
|
+
let accountTeams, standardTeams, personalTeam = [];
|
|
93
159
|
if (hasUserTeams) {
|
|
94
|
-
userTeams?.data?.accountTeams ?? [];
|
|
95
|
-
userTeams?.data?.standardTeams ?? [];
|
|
96
|
-
userTeams?.data?.personalTeam ?? [];
|
|
160
|
+
accountTeams = userTeams?.data?.accountTeams ?? [];
|
|
161
|
+
standardTeams = userTeams?.data?.standardTeams ?? [];
|
|
162
|
+
personalTeam = userTeams?.data?.personalTeam ?? [];
|
|
97
163
|
}
|
|
98
164
|
else {
|
|
99
|
-
teamsQuery?.data?.accountTeams ?? [];
|
|
100
|
-
teamsQuery?.data?.standardTeams ?? [];
|
|
101
|
-
teamsQuery?.data?.personalTeam ?? [];
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
// );
|
|
132
|
-
// }
|
|
165
|
+
accountTeams = teamsQuery?.data?.accountTeams ?? [];
|
|
166
|
+
standardTeams = teamsQuery?.data?.standardTeams ?? [];
|
|
167
|
+
personalTeam = teamsQuery?.data?.personalTeam ?? [];
|
|
168
|
+
}
|
|
169
|
+
let sortedAccountTeamsWithNamesToDisplay = [];
|
|
170
|
+
let sortedStandardTeamsWithNamesToDisplay = [];
|
|
171
|
+
if (accountTeams?.length > 0) {
|
|
172
|
+
const newAccountTeams = accountTeams.map((team) => {
|
|
173
|
+
let newProjectTeams = [];
|
|
174
|
+
if (team.projectTeams && team.projectTeams.length > 0) {
|
|
175
|
+
newProjectTeams = team.projectTeams?.map((team) => ({
|
|
176
|
+
...team,
|
|
177
|
+
nameToDisplay: team.displayName ? team.displayName : team.name,
|
|
178
|
+
}));
|
|
179
|
+
}
|
|
180
|
+
return {
|
|
181
|
+
...team,
|
|
182
|
+
nameToDisplay: team.displayName ? team.displayName : team.name,
|
|
183
|
+
projectTeams: sortBy(newProjectTeams, ["nameToDisplay"]),
|
|
184
|
+
};
|
|
185
|
+
});
|
|
186
|
+
sortedAccountTeamsWithNamesToDisplay = sortBy(newAccountTeams, ["nameToDisplay"]);
|
|
187
|
+
}
|
|
188
|
+
if (standardTeams?.length > 0) {
|
|
189
|
+
const newStandardTeams = standardTeams.map((team) => {
|
|
190
|
+
return {
|
|
191
|
+
...team,
|
|
192
|
+
nameToDisplay: team.displayName ? team.displayName : team.name,
|
|
193
|
+
};
|
|
194
|
+
});
|
|
195
|
+
sortedStandardTeamsWithNamesToDisplay = sortBy(newStandardTeams, ["nameToDisplay"]);
|
|
196
|
+
}
|
|
133
197
|
let selectedTeamName = selectedTeam?.displayName ? selectedTeam.displayName : selectedTeam?.name;
|
|
134
198
|
if (selectedTeamName && selectedTeamName.length > 42) {
|
|
135
199
|
selectedTeamName = selectedTeamName.slice(0, 42) + "...";
|
|
136
200
|
}
|
|
137
|
-
return (React.createElement(
|
|
201
|
+
return (React.createElement(HeaderMenu, { "aria-label": menuAriaLabelRecord, className: headerDropdownMenuClassname, menuLinkName: selectedTeamName ? selectedTeamName : "No team selected", "data-testid": "header-team-switcher-menu" },
|
|
202
|
+
React.createElement(HeaderMenu$1, { "aria-labelledby": menuButtonId, className: headerDropdownMenuListClassname, id: menuListId },
|
|
203
|
+
React.createElement(HeaderMenuItem, { className: headerTeamSwitcherCreateTeamButtonContainerClassname, onClick: handleCreateJoinTeamClick,
|
|
204
|
+
// eslint-disable-next-line no-script-url
|
|
205
|
+
href: "javascript:void(0)", role: "menuitem", "data-testid": "header-team-switcher-create-join-team-button" },
|
|
206
|
+
React.createElement("div", { className: headerTeamSwitcherCreateTeamButtonClassname },
|
|
207
|
+
React.createElement("span", { className: headerTeamSwitcherCreateTeamButtonTextClassname }, createTeamButtonText),
|
|
208
|
+
React.createElement(AddAlt, { className: headerTeamSwitcherCreateTeamButtonIconClassname }))),
|
|
209
|
+
personalTeam.length > 0
|
|
210
|
+
? personalTeam.map((team) => {
|
|
211
|
+
const teamName = team.displayName ? team.displayName : team.name;
|
|
212
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
213
|
+
return (React.createElement(HeaderMenuItem, { key: team.id, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => handleTeamClick({ team, type: "personal" }),
|
|
214
|
+
// eslint-disable-next-line no-script-url
|
|
215
|
+
href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-item" },
|
|
216
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
217
|
+
React.createElement("span", { title: teamName, className: headerDropdownMenuItemTextClassname }, teamName),
|
|
218
|
+
isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null)));
|
|
219
|
+
})
|
|
220
|
+
: null,
|
|
221
|
+
accountTeams.length > 0
|
|
222
|
+
? sortedAccountTeamsWithNamesToDisplay.map((team) => {
|
|
223
|
+
const isSubmenuOpen = team.id === openAccountSubmenuId;
|
|
224
|
+
const isProjectTeamSelected = team.projectTeams &&
|
|
225
|
+
team.projectTeams.length > 0 &&
|
|
226
|
+
team.projectTeams.some((team) => team.id === selectedTeam?.id);
|
|
227
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
228
|
+
const isMenuSelected = isTeamSelected || isProjectTeamSelected;
|
|
229
|
+
return (React.createElement(React.Fragment, null,
|
|
230
|
+
React.createElement(HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
|
|
231
|
+
// eslint-disable-next-line no-script-url
|
|
232
|
+
href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
|
|
233
|
+
React.createElement("div", { className: headerDropdownMenuItemAccountClassname },
|
|
234
|
+
React.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
|
|
235
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
236
|
+
isMenuSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null),
|
|
237
|
+
React.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
|
|
238
|
+
React.createElement(GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
|
|
239
|
+
React.createElement(ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
|
|
240
|
+
React.createElement("div", { "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
|
|
241
|
+
React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => handleTeamClick({ team, type: "account" }), "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
242
|
+
// eslint-disable-next-line no-script-url
|
|
243
|
+
href: "javascript:void(0)" },
|
|
244
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
245
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
|
|
246
|
+
isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null)),
|
|
247
|
+
team.projectTeams && team.projectTeams.length > 0
|
|
248
|
+
? team.projectTeams.map((team) => {
|
|
249
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
250
|
+
return (React.createElement(HeaderMenuItem, { key: team.id, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => handleTeamClick({ team, type: "project" }), "data-testid": "header-team-switcher-menu-account-accordion-item",
|
|
251
|
+
// eslint-disable-next-line no-script-url
|
|
252
|
+
href: "javascript:void(0)" },
|
|
253
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
|
|
254
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
255
|
+
isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null)));
|
|
256
|
+
})
|
|
257
|
+
: null)));
|
|
258
|
+
})
|
|
259
|
+
: null,
|
|
260
|
+
standardTeams.length > 0
|
|
261
|
+
? sortedStandardTeamsWithNamesToDisplay.map((team) => {
|
|
262
|
+
const isTeamSelected = team.id === selectedTeam?.id;
|
|
263
|
+
return (React.createElement(HeaderMenuItem, { key: team.id, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => handleTeamClick({ team, type: "standard" }), "data-testid": "header-team-switcher-menu-item",
|
|
264
|
+
// eslint-disable-next-line no-script-url
|
|
265
|
+
href: "javascript:void(0)" },
|
|
266
|
+
React.createElement("div", { className: headerDropdownMenuItemClassname },
|
|
267
|
+
React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
|
|
268
|
+
isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null)));
|
|
269
|
+
})
|
|
270
|
+
: null)));
|
|
138
271
|
}
|
|
139
272
|
return null;
|
|
140
273
|
}
|
package/package.json
CHANGED