@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.7 → 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 +6 -5
- 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 +7 -6
- package/dist/types/index.d.ts +99 -1
- package/package.json +1 -1
- package/scss/components/Header/_headerTeamSwitcher.scss +195 -0
- package/scss/global/index.scss +7 -8
|
@@ -21,8 +21,7 @@ IBM Confidential
|
|
|
21
21
|
© Copyright IBM Corp. 2022, 2024
|
|
22
22
|
*/
|
|
23
23
|
function AdvantageSideNav(props) {
|
|
24
|
-
const { app, appLink, regionalTeam, enableChatButton = true, showChatButton = true, showSelectTeamPurpose = false, homeLink, assistantLink, defaultAssistantLink, joinCreateTrigger, isLoading, isOpen, teams = [], triggerEvent, accounts = [], baseEnvUrl, className, navLinks, personalTeams = [], user, showChatTooltip, templateMeteringEvent, tooltipMessage, isLaunchpad = false,
|
|
25
|
-
const [activeSubmenu, setActiveSubmenu] = React__default.default.useState("");
|
|
24
|
+
const { app, appLink, regionalTeam, enableChatButton = true, showChatButton = true, showSelectTeamPurpose = false, homeLink, agentAssistantStudioLink, agentAssistantLibraryLink, assistantLink, defaultAssistantLink, documentCollectionsLink, settingsLink, toolsLink, joinCreateTrigger, isLoading, isOpen, teams = [], triggerEvent, accounts = [], baseEnvUrl, className, navLinks, navigation, personalTeams = [], user, showChatTooltip, templateMeteringEvent, tooltipMessage, isLaunchpad = false, history, children, ...rest } = props;
|
|
26
25
|
const [activeMenu, setActiveMenu] = React__default.default.useState(false);
|
|
27
26
|
const [teamList, setTeamList] = React__default.default.useState(null);
|
|
28
27
|
const [regionalModalIsOpen, setRegionalModalIsOpen] = React__default.default.useState(false);
|
|
@@ -31,15 +30,37 @@ function AdvantageSideNav(props) {
|
|
|
31
30
|
const windowLocation = window.location;
|
|
32
31
|
const isPartnerUser = user?.type === UserType.USER_PLATFORM_ROLE.Partner;
|
|
33
32
|
const joinButtontitle = showSelectTeamPurpose ? "Create Team" : "Create or Join Team";
|
|
34
|
-
const standardTeamsList = [...personalTeams.map((pteams) => ({ ...pteams, isPersonal: true })), ...teams];
|
|
35
|
-
const teamsMenuRef = React__default.default.useRef(null);
|
|
36
|
-
const accountsMenuRef = React__default.default.useRef(null);
|
|
37
33
|
const hamburguerMenu = document.getElementById("header-sidenav-menu-button");
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
34
|
+
// get current selected team
|
|
35
|
+
let teamSwitcherTeam = null;
|
|
36
|
+
if (personalTeams.length > 0) {
|
|
37
|
+
personalTeams.forEach((team) => {
|
|
38
|
+
if (team.id === user?.teamInstanceSwitcherDefault) {
|
|
39
|
+
teamSwitcherTeam = { ...team, isPersonal: true };
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
if (teams.length > 0) {
|
|
44
|
+
teams.forEach((team) => {
|
|
45
|
+
if (team.id === user?.teamInstanceSwitcherDefault) {
|
|
46
|
+
teamSwitcherTeam = { ...team, isStandard: true };
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
if (accounts.length > 0) {
|
|
51
|
+
accounts.forEach((account) => {
|
|
52
|
+
if (account.id === user?.teamInstanceSwitcherDefault) {
|
|
53
|
+
teamSwitcherTeam = { ...account, isAccount: true };
|
|
54
|
+
}
|
|
55
|
+
else if (account.projectTeams && account.projectTeams?.length > 0) {
|
|
56
|
+
account.projectTeams.forEach((projectTeam) => {
|
|
57
|
+
if (projectTeam.id === user?.teamInstanceSwitcherDefault) {
|
|
58
|
+
teamSwitcherTeam = { ...projectTeam, isProject: true };
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
}
|
|
43
64
|
// Functions to track IBM Instrumentation on Segment
|
|
44
65
|
const handleHomeClick = () => {
|
|
45
66
|
triggerEvent &&
|
|
@@ -53,6 +74,46 @@ function AdvantageSideNav(props) {
|
|
|
53
74
|
const assistantLink = `${appLink?.newChatRedirect()}?teamName=${team.name}&teamId=${team.id}`;
|
|
54
75
|
window.open(assistantLink, "_self", "noopener,noreferrer");
|
|
55
76
|
};
|
|
77
|
+
const handleToolsClick = () => {
|
|
78
|
+
triggerEvent &&
|
|
79
|
+
triggerEvent({
|
|
80
|
+
action: "Clicked on SideNav Tools link",
|
|
81
|
+
category: "Sidenav",
|
|
82
|
+
destinationPath: toolsLink,
|
|
83
|
+
});
|
|
84
|
+
};
|
|
85
|
+
const handleAgentAssistantStudioClick = () => {
|
|
86
|
+
triggerEvent &&
|
|
87
|
+
triggerEvent({
|
|
88
|
+
action: "Clicked on SideNav Agent & Assistant Studio link",
|
|
89
|
+
category: "Sidenav",
|
|
90
|
+
destinationPath: agentAssistantStudioLink,
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
const handleAgentAssistantLibraryClick = () => {
|
|
94
|
+
triggerEvent &&
|
|
95
|
+
triggerEvent({
|
|
96
|
+
action: "Clicked on SideNav Agent & Assistant Library link",
|
|
97
|
+
category: "Sidenav",
|
|
98
|
+
destinationPath: agentAssistantLibraryLink,
|
|
99
|
+
});
|
|
100
|
+
};
|
|
101
|
+
const handleDocumentCollectionsClick = () => {
|
|
102
|
+
triggerEvent &&
|
|
103
|
+
triggerEvent({
|
|
104
|
+
action: "Clicked on SideNav Document Collections link",
|
|
105
|
+
category: "Sidenav",
|
|
106
|
+
destinationPath: documentCollectionsLink,
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
const handleSettingsClick = () => {
|
|
110
|
+
triggerEvent &&
|
|
111
|
+
triggerEvent({
|
|
112
|
+
action: "Clicked on SideNav Settings link",
|
|
113
|
+
category: "Sidenav",
|
|
114
|
+
destinationPath: settingsLink,
|
|
115
|
+
});
|
|
116
|
+
};
|
|
56
117
|
const handleAssistantClick = () => {
|
|
57
118
|
if (regionalTeam?.length > 1) {
|
|
58
119
|
setRegionalModalIsOpen(true);
|
|
@@ -87,60 +148,31 @@ function AdvantageSideNav(props) {
|
|
|
87
148
|
teamType: type,
|
|
88
149
|
});
|
|
89
150
|
};
|
|
90
|
-
const handleServiceClick = ({ service, team }) => {
|
|
91
|
-
if (templateMeteringEvent) {
|
|
92
|
-
templateMeteringEvent({ service, team });
|
|
93
|
-
}
|
|
94
|
-
triggerEvent &&
|
|
95
|
-
triggerEvent({
|
|
96
|
-
action: "Clicked on SideNav Service link",
|
|
97
|
-
category: "Sidenav",
|
|
98
|
-
destinationPath: service.url,
|
|
99
|
-
});
|
|
100
|
-
};
|
|
101
151
|
const handleLaunchpadLink = (event) => {
|
|
102
152
|
event.preventDefault();
|
|
103
|
-
// remediation to close menu, submenu and accordion when select a team on Launchpad
|
|
104
|
-
//@ts-ignore
|
|
105
|
-
if (Boolean(teamsMenuRef.current?.ariaExpanded === "true")) {
|
|
106
|
-
//@ts-ignore
|
|
107
|
-
teamsMenuRef.current.click();
|
|
108
|
-
}
|
|
109
|
-
//@ts-ignore
|
|
110
|
-
if (Boolean(accountsMenuRef.current?.ariaExpanded === "true")) {
|
|
111
|
-
//@ts-ignore
|
|
112
|
-
accountsMenuRef.current.click();
|
|
113
|
-
}
|
|
114
153
|
//@ts-ignore
|
|
115
154
|
if (Boolean(hamburguerMenu) && hamburguerMenu.className.includes("active")) {
|
|
116
155
|
//@ts-ignore
|
|
117
156
|
Boolean(hamburguerMenu) && hamburguerMenu?.click();
|
|
118
157
|
}
|
|
119
158
|
setActiveMenu(false);
|
|
120
|
-
setActiveSubmenu("");
|
|
121
159
|
};
|
|
122
|
-
// add or remove refs
|
|
123
|
-
if (teamsRef.current.length !== standardTeamsList?.length) {
|
|
124
|
-
//@ts-ignore
|
|
125
|
-
teamsRef.current = Array(standardTeamsList?.length).fill().map((_, i) => teamsRef.current[i] || React__default.default.createRef());
|
|
126
|
-
}
|
|
127
|
-
if (accountsRef.current.length !== accounts?.length) {
|
|
128
|
-
//@ts-ignore
|
|
129
|
-
accountsRef.current = Array(accounts?.length).fill().map((_, i) => accountsRef.current[i] || React__default.default.createRef());
|
|
130
|
-
}
|
|
131
160
|
const assistantSideNavLink = (
|
|
132
|
-
// assistantLink &&
|
|
133
|
-
React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-assistant-link", className: !enableChatButton ? `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` : "", disabled: Boolean(!enableChatButton), isActive: assistantLink ? windowLocation.href.includes(assistantLink) :
|
|
161
|
+
// assistantLink &&
|
|
162
|
+
React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-assistant-link", className: !enableChatButton ? `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` : "", disabled: Boolean(!enableChatButton), isActive: assistantLink ? windowLocation.href.includes(assistantLink) : "", renderIcon: icons.ChatBot, href: enableChatButton && assistantLink, onClick: enableChatButton ? handleAssistantClick : (e) => e.preventDefault() }, "Chat"));
|
|
163
|
+
const catalogNavlink = navigation?.navigation?.find((navlink) => navlink.name === "Catalog");
|
|
164
|
+
const adminNavlink = navigation?.navigation?.find((navlink) => navlink.name === "Admin");
|
|
165
|
+
const showSecondDivider = (!isPartnerUser && showChatButton) ||
|
|
166
|
+
toolsLink ||
|
|
167
|
+
agentAssistantStudioLink ||
|
|
168
|
+
agentAssistantLibraryLink ||
|
|
169
|
+
documentCollectionsLink;
|
|
134
170
|
return (React__default.default.createElement(react.SideNav, { "aria-label": "sidenav-container", className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-container`, className, {
|
|
135
171
|
"--closed": !isMenuOpen,
|
|
136
|
-
}), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen,
|
|
172
|
+
}), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen, onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
|
|
137
173
|
setActiveMenu(false);
|
|
138
|
-
setActiveSubmenu("");
|
|
139
174
|
}, ...rest }, React__default.default.createElement(react.SideNavItems, null,
|
|
140
|
-
|
|
141
|
-
navLinks.map((link) => (React__default.default.createElement(react.SideNavLink, { href: link.url, target: link.isExternal ? "_blank" : undefined, rel: link.isExternal ? "noopener noreferrer" : undefined }, link.name))),
|
|
142
|
-
React__default.default.createElement(react.SideNavDivider, null))) : null,
|
|
143
|
-
React__default.default.createElement("div", { onMouseEnter: () => setActiveSubmenu("") },
|
|
175
|
+
React__default.default.createElement("div", null,
|
|
144
176
|
homeLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-home-link", isActive: `${baseEnvUrl}/${app}/`.includes(windowLocation.href), renderIcon: icons.Home, href: homeLink, onClick: (e) => {
|
|
145
177
|
if (isLaunchpad) {
|
|
146
178
|
handleLaunchpadLink(e);
|
|
@@ -148,12 +180,56 @@ function AdvantageSideNav(props) {
|
|
|
148
180
|
}
|
|
149
181
|
handleHomeClick();
|
|
150
182
|
} }, "Home")) : null,
|
|
183
|
+
teamSwitcherTeam ? (React__default.default.createElement(react.SideNavLink, { title: teamSwitcherTeam.isAccount ? "Account Page" : "Team Page", name: teamSwitcherTeam.name, "data-testid": "sidenav-team-link", id: teamSwitcherTeam.id, isActive: windowLocation.href.includes(teamSwitcherTeam.id), className: `${settings.prefix}--bmrg-advantage-sidenav-team`, renderIcon: icons.UserMultiple, href: `${baseEnvUrl}/${app}/teams/${teamSwitcherTeam.id}`, onClick: (e) => {
|
|
184
|
+
if (isLaunchpad) {
|
|
185
|
+
handleLaunchpadLink(e);
|
|
186
|
+
history.push(`/teams/${teamSwitcherTeam.id}`);
|
|
187
|
+
}
|
|
188
|
+
handleTeamClick({
|
|
189
|
+
team: teamSwitcherTeam,
|
|
190
|
+
type: teamSwitcherTeam.isPersonal
|
|
191
|
+
? "personal"
|
|
192
|
+
: teamSwitcherTeam.isAccount
|
|
193
|
+
? "account"
|
|
194
|
+
: teamSwitcherTeam.isproject
|
|
195
|
+
? "project"
|
|
196
|
+
: "standard",
|
|
197
|
+
});
|
|
198
|
+
} },
|
|
199
|
+
React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-advantage-sidenav-teams__title` }, teamSwitcherTeam.isAccount ? "Account Page" : "Team Page"))) : !isPartnerUser && joinCreateTrigger ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-create-join-trigger", renderIcon: icons.AddAlt, onClick: (e) => {
|
|
200
|
+
joinCreateTrigger(e);
|
|
201
|
+
handleCreateJoinClick();
|
|
202
|
+
} }, joinButtontitle)) : null,
|
|
203
|
+
React__default.default.createElement(react.SideNavDivider, null),
|
|
151
204
|
!isPartnerUser &&
|
|
152
205
|
// assistantLink &&
|
|
153
206
|
showChatButton &&
|
|
154
207
|
(showChatTooltip ? (React__default.default.createElement(TooltipHover.default, { className: `${settings.prefix}--bmrg-side-nav__tooltip`, content: tooltipMessage, direction: "right" },
|
|
155
208
|
React__default.default.createElement("span", null, assistantSideNavLink))) : (assistantSideNavLink)),
|
|
156
|
-
|
|
209
|
+
toolsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-tools-link", renderIcon: icons.Api, href: toolsLink, onClick: (e) => {
|
|
210
|
+
handleToolsClick();
|
|
211
|
+
} }, "Tools")) : null,
|
|
212
|
+
agentAssistantStudioLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-agent-assistant-studio-link", isActive: windowLocation.href.includes(`/launchpad/agent-assistant-studio`) ||
|
|
213
|
+
windowLocation.href.includes(`/launchpad/agenticapps`), renderIcon: icons.IntentRequestCreate, href: agentAssistantStudioLink, onClick: (e) => {
|
|
214
|
+
if (isLaunchpad) {
|
|
215
|
+
handleLaunchpadLink(e);
|
|
216
|
+
history.push(agentAssistantStudioLink);
|
|
217
|
+
}
|
|
218
|
+
handleAgentAssistantStudioClick();
|
|
219
|
+
} }, "Agent & Assistant Studio")) : null,
|
|
220
|
+
agentAssistantLibraryLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-agent-assistant-library-link", renderIcon: icons.Folders, href: agentAssistantLibraryLink, onClick: (e) => {
|
|
221
|
+
handleAgentAssistantLibraryClick();
|
|
222
|
+
} }, "Agent & Assistant Library")) : null,
|
|
223
|
+
documentCollectionsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: icons.DocumentMultiple_02, href: documentCollectionsLink, onClick: (e) => {
|
|
224
|
+
handleDocumentCollectionsClick();
|
|
225
|
+
} }, "Document Collections")) : null,
|
|
226
|
+
showSecondDivider ? React__default.default.createElement(react.SideNavDivider, null) : null,
|
|
227
|
+
catalogNavlink ? (React__default.default.createElement(react.SideNavLink, { href: catalogNavlink.url, renderIcon: icons.Catalog }, catalogNavlink.name)) : null,
|
|
228
|
+
settingsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: icons.Settings, href: settingsLink, onClick: (e) => {
|
|
229
|
+
handleSettingsClick();
|
|
230
|
+
} }, "Settings")) : null,
|
|
231
|
+
adminNavlink ? (React__default.default.createElement(react.SideNavLink, { href: adminNavlink.url, renderIcon: icons.LicenseThirdParty }, adminNavlink.name)) : null,
|
|
232
|
+
regionalModalIsOpen && (React__default.default.createElement(react.ComposedModal, { className: `${settings.prefix}--teamSelectionModalContainer`, open: regionalModalIsOpen, onClose: () => setRegionalModalIsOpen(false), onKeyDown: (e) => e.stopPropagation(), "data-testid": "select-team-chat-modal" },
|
|
157
233
|
React__default.default.createElement(react.ModalHeader, { title: "Select Team to Start a New Chat", closeModal: () => setRegionalModalIsOpen(false) }),
|
|
158
234
|
React__default.default.createElement(react.ModalBody, { className: `${settings.prefix}--teamSelectModalBody` },
|
|
159
235
|
React__default.default.createElement(react.Dropdown, { items: teamList, disabled: !teamList?.length, id: "select-team-chat-modal-dropdown", selectedItem: selectedTeam, size: "md", "data-testid": "select-team-chat-modal-dropdown", itemToString: (item) => item?.name, label: "Choose a team", onChange: ({ selectedItem }) => setSelectedTeam(selectedItem) })),
|
|
@@ -165,97 +241,10 @@ function AdvantageSideNav(props) {
|
|
|
165
241
|
setRegionalModalIsOpen(false);
|
|
166
242
|
// closeModal();
|
|
167
243
|
}
|
|
168
|
-
} }, "Continue"))),
|
|
169
|
-
!isPartnerUser && joinCreateTrigger ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-create-join-trigger", renderIcon: icons.AddAlt, onClick: (e) => {
|
|
170
|
-
joinCreateTrigger(e);
|
|
171
|
-
handleCreateJoinClick();
|
|
172
|
-
} }, joinButtontitle)) : null),
|
|
244
|
+
} }, "Continue"))))),
|
|
173
245
|
children ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
174
246
|
React__default.default.createElement(react.SideNavDivider, null),
|
|
175
|
-
children)) : null
|
|
176
|
-
userTeamsLoading && isMenuOpen ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
177
|
-
React__default.default.createElement(react.SideNavDivider, null),
|
|
178
|
-
React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-advantage-sidenav-loading-container` },
|
|
179
|
-
React__default.default.createElement(react.SkeletonPlaceholder, { className: `${settings.prefix}--bmrg-advantage-sidenav-loading` }),
|
|
180
|
-
React__default.default.createElement(react.SkeletonPlaceholder, { className: `${settings.prefix}--bmrg-advantage-sidenav-loading` }),
|
|
181
|
-
React__default.default.createElement(react.SkeletonPlaceholder, { className: `${settings.prefix}--bmrg-advantage-sidenav-loading` })))) : null,
|
|
182
|
-
((!Boolean(standardTeamsList?.length) && !Boolean(accounts?.length) && !userTeamsLoading) ||
|
|
183
|
-
userTeamsError) &&
|
|
184
|
-
isMenuOpen ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
185
|
-
React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-advantage-sidenav-no-teams__text` }, noTeamsMessage))) : null,
|
|
186
|
-
Boolean(standardTeamsList?.length) ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
187
|
-
React__default.default.createElement(react.SideNavDivider, null),
|
|
188
|
-
React__default.default.createElement(react.SideNavMenu, { className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-menu`, {
|
|
189
|
-
"--active-closed": !isMenuOpen && standardTeamsList.some((t) => windowLocation.href.includes(t.id)),
|
|
190
|
-
}), renderIcon: icons.UserMultiple, title: "Teams", "data-testid": "sidenav-teams", id: "sidenav-teams", ref: teamsMenuRef, isActive: standardTeamsList.some((t) => windowLocation.href.includes(t.id)), isSideNavExpanded: isMenuOpen }, isMenuOpen
|
|
191
|
-
? standardTeamsList?.map((team, i) => {
|
|
192
|
-
const topPosition = document?.getElementById(team.id)?.getBoundingClientRect()?.top ?? 0;
|
|
193
|
-
const teamDisplayName = Boolean(team.displayName) ? team.displayName : team.name;
|
|
194
|
-
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
195
|
-
React__default.default.createElement("li", { className: `${settings.prefix}--bmrg-advantage-sidenav-team-item` },
|
|
196
|
-
React__default.default.createElement(react.SideNavLink, { title: teamDisplayName, name: team.name, "data-testid": "sidenav-team-link", id: team.id, isActive: windowLocation.href.includes(team.id), ref: teamsRef.current[i], className: `${settings.prefix}--bmrg-advantage-sidenav-team`, renderIcon: team?.isPersonal ? icons.User : team.privateTeam ? icons.Locked : icons.Unlocked, href: `${baseEnvUrl}/${app}/teams/${team.id}`, onMouseEnter: () => setActiveSubmenu(team.id), onFocus: () => setActiveSubmenu(team.id), onClick: (e) => {
|
|
197
|
-
if (isLaunchpad) {
|
|
198
|
-
handleLaunchpadLink(e);
|
|
199
|
-
history.push(`/teams/${team.id}`);
|
|
200
|
-
}
|
|
201
|
-
handleTeamClick({ team, type: team.isPersonal ? "personal" : "standard" });
|
|
202
|
-
} },
|
|
203
|
-
React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-advantage-sidenav-teams__title` }, teamDisplayName),
|
|
204
|
-
Boolean(team?.services?.length) ? React__default.default.createElement(icons.ChevronRight, null) : null),
|
|
205
|
-
Boolean(team?.services?.length) && team.id === activeSubmenu ? (React__default.default.createElement("ul", { className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-submenu`, {
|
|
206
|
-
"--open": team.id === activeSubmenu,
|
|
207
|
-
}), style: { top: `${window.scrollY + topPosition}px` } },
|
|
208
|
-
React__default.default.createElement("li", { className: `${settings.prefix}--bmrg-advantage-sidenav-submenu-wrapper` },
|
|
209
|
-
React__default.default.createElement("ul", { className: `${settings.prefix}--bmrg-advantage-sidenav-services-submenu` },
|
|
210
|
-
React__default.default.createElement(react.SideNavLink, { title: "Team Page", className: `${settings.prefix}--bmrg-advantage-sidenav-submenu-link`, "data-testid": "sidenav-team-submenu-link", href: `${baseEnvUrl}/${app}/teams/${team.id}`, onClick: (e) => {
|
|
211
|
-
if (isLaunchpad) {
|
|
212
|
-
handleLaunchpadLink(e);
|
|
213
|
-
history.push(`/teams/${team.id}`);
|
|
214
|
-
}
|
|
215
|
-
handleTeamClick({ team, type: team.isPersonal ? "personal" : "standard" });
|
|
216
|
-
} }, "Team Page"),
|
|
217
|
-
team.services?.map((service) => (React__default.default.createElement(react.SideNavLink, { title: service.name, className: `${settings.prefix}--bmrg-advantage-sidenav-submenu-link`, "data-testid": "sidenav-service-submenu-link", href: service.url, onClick: () => handleServiceClick({ service, team }) }, service.name))) ?? null)))) : null)));
|
|
218
|
-
})
|
|
219
|
-
: null))) : null,
|
|
220
|
-
Boolean(accounts?.length) ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
221
|
-
React__default.default.createElement(react.SideNavDivider, null),
|
|
222
|
-
React__default.default.createElement(react.SideNavMenu, { className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-menu`, {
|
|
223
|
-
"--active-closed": !isMenuOpen &&
|
|
224
|
-
accounts.some((t) => {
|
|
225
|
-
const pIds = t?.projectTeams?.map((project) => project.id) ?? [];
|
|
226
|
-
return windowLocation.href.includes(t.id) || pIds.some((id) => windowLocation.href.includes(id));
|
|
227
|
-
}),
|
|
228
|
-
}), renderIcon: icons.GroupAccount, title: "Accounts", "data-testid": "sidenav-accounts", id: "sidenav-accounts", ref: accountsMenuRef, "aria-expanded": isMenuOpen, isSideNavExpanded: isMenuOpen }, isMenuOpen
|
|
229
|
-
? accounts?.map((team, i) => {
|
|
230
|
-
const topPosition = document?.getElementById(team.id)?.getBoundingClientRect()?.top ?? 0;
|
|
231
|
-
const teamDisplayName = Boolean(team.displayName) ? team.displayName : team.name;
|
|
232
|
-
const projectIds = team?.projectTeams?.map((project) => project.id) ?? [];
|
|
233
|
-
const isAccountActive = windowLocation.href.includes(team.id) ||
|
|
234
|
-
projectIds.some((id) => windowLocation.href.includes(id));
|
|
235
|
-
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
236
|
-
React__default.default.createElement("li", { className: `${settings.prefix}--bmrg-advantage-sidenav-team-item` },
|
|
237
|
-
React__default.default.createElement(react.SideNavLink, { title: teamDisplayName, id: team.id, isActive: isAccountActive, ref: accountsRef.current[i], className: `${settings.prefix}--bmrg-advantage-sidenav-account`, href: `${baseEnvUrl}/${app}/teams/${team.id}`, onMouseEnter: () => setActiveSubmenu(team.id), onFocus: () => setActiveSubmenu(team.id), onClick: (e) => {
|
|
238
|
-
if (isLaunchpad) {
|
|
239
|
-
handleLaunchpadLink(e);
|
|
240
|
-
history.push(`/teams/${team.id}`);
|
|
241
|
-
}
|
|
242
|
-
handleTeamClick({ team, type: "account" });
|
|
243
|
-
} },
|
|
244
|
-
React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-advantage-sidenav-teams__title` }, teamDisplayName),
|
|
245
|
-
Boolean(team?.projectTeams?.length) ? React__default.default.createElement(icons.ChevronRight, null) : null),
|
|
246
|
-
Boolean(team?.projectTeams?.length) && team.id === activeSubmenu ? (React__default.default.createElement("ul", { className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-submenu`, {
|
|
247
|
-
"--open": team.id === activeSubmenu,
|
|
248
|
-
}), style: { top: `${window.scrollY + topPosition}px` } },
|
|
249
|
-
React__default.default.createElement("li", { className: `${settings.prefix}--bmrg-advantage-sidenav-submenu-wrapper` },
|
|
250
|
-
React__default.default.createElement("ul", { className: `${settings.prefix}--bmrg-advantage-sidenav-services-submenu` }, team.projectTeams?.map((accTeam) => (React__default.default.createElement(react.SideNavLink, { title: accTeam.name, className: `${settings.prefix}--bmrg-advantage-sidenav-submenu-link`, "data-testid": "sidenav-account-submenu-link", href: `${baseEnvUrl}/${app}/teams/${accTeam.id}`, onClick: (e) => {
|
|
251
|
-
if (isLaunchpad) {
|
|
252
|
-
handleLaunchpadLink(e);
|
|
253
|
-
history.push(`/teams/${accTeam.id}`);
|
|
254
|
-
}
|
|
255
|
-
handleTeamClick({ team: accTeam, type: "project" });
|
|
256
|
-
} }, accTeam.name))) ?? null)))) : null)));
|
|
257
|
-
})
|
|
258
|
-
: null))) : null)));
|
|
247
|
+
children)) : null)));
|
|
259
248
|
}
|
|
260
249
|
|
|
261
250
|
exports.AdvantageSideNav = AdvantageSideNav;
|
|
@@ -3,15 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var reactQuery = require('react-query');
|
|
6
7
|
var react = require('@carbon/react');
|
|
7
8
|
var icons = require('@carbon/react/icons');
|
|
8
9
|
var HeaderAppSwitcher = require('./HeaderAppSwitcher.js');
|
|
10
|
+
var HeaderTeamSwitcher = require('./HeaderTeamSwitcher.js');
|
|
9
11
|
var HeaderMenu = require('./HeaderMenu.js');
|
|
10
12
|
var NotificationsContainer = require('../Notifications/NotificationsContainer.js');
|
|
11
13
|
var PlatformNotificationsContainer = require('../PlatformNotifications/PlatformNotificationsContainer.js');
|
|
12
14
|
var UserRequests = require('./UserRequests.js');
|
|
13
15
|
var useHeaderMenu = require('../../hooks/useHeaderMenu.js');
|
|
14
16
|
var useWindowSize = require('../../hooks/useWindowSize.js');
|
|
17
|
+
var servicesConfig = require('../../config/servicesConfig.js');
|
|
15
18
|
var settings = require('../../internal/settings.js');
|
|
16
19
|
|
|
17
20
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -21,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
|
|
|
21
24
|
/*
|
|
22
25
|
IBM Confidential
|
|
23
26
|
694970X, 69497O0
|
|
24
|
-
© Copyright IBM Corp. 2022,
|
|
27
|
+
© Copyright IBM Corp. 2022, 2025
|
|
25
28
|
*/
|
|
26
29
|
const MenuListId = {
|
|
27
30
|
Notifcations: "header-notifications-dialog",
|
|
@@ -32,6 +35,7 @@ const MenuListId = {
|
|
|
32
35
|
Support: "header-support-menu",
|
|
33
36
|
instanceSwitcher: "header-instanceSwitcher-menu",
|
|
34
37
|
Switcher: "header-switcher-menu",
|
|
38
|
+
TeamSwitcher: "header-team-switcher-menu",
|
|
35
39
|
};
|
|
36
40
|
const MenuButtonId = {
|
|
37
41
|
Notifcations: "header-notifications-dialog-button",
|
|
@@ -42,6 +46,7 @@ const MenuButtonId = {
|
|
|
42
46
|
Support: "header-support-menu-button",
|
|
43
47
|
InstanceSwitcher: "header-instanceSwitcher-menu-button",
|
|
44
48
|
Switcher: "header-switcher-menu-button",
|
|
49
|
+
TeamSwitcher: "header-team-switcher-menu-button",
|
|
45
50
|
};
|
|
46
51
|
const MenuAriaLabelRecord = {
|
|
47
52
|
Notifcations: "Notifications dialog",
|
|
@@ -52,11 +57,19 @@ const MenuAriaLabelRecord = {
|
|
|
52
57
|
instanceSwitcher: "Instance Switcher Menu",
|
|
53
58
|
Support: "Support menu",
|
|
54
59
|
Switcher: "Switcher menu",
|
|
60
|
+
TeamSwitcher: "Team Switcher menu",
|
|
55
61
|
};
|
|
56
62
|
const headerButtonClassNames = "cds--btn--icon-only cds--header__action cds--btn cds--btn--primary cds--btn--icon-only cds--btn cds--btn--primary";
|
|
57
63
|
const instanceCheckMarkContainerClass = "instance-checkmark-style-container";
|
|
58
64
|
function Header(props) {
|
|
59
|
-
const { productName, baseEnvUrl, baseServicesUrl, carbonTheme = "g10", className, navLinks, platform, prefixName = "", rightPanel, skipToContentProps, templateMeteringEvent, triggerEvent, userTeams, } = props;
|
|
65
|
+
const { analyticsHelpers, productName, baseEnvUrl, baseServicesUrl, carbonTheme = "g10", className, createJoinTeamTrigger, history, isLaunchpad = false, isLoadingTeamSwitcher, isSuccessTeamSwitcher, setIsSuccessTeamSwitcher, navLinks, platform, prefixName = "", rightPanel, skipToContentProps, templateMeteringEvent, trackEvent, triggerEvent, user, userTeams, } = props;
|
|
66
|
+
const hasUserTeams = Boolean(userTeams);
|
|
67
|
+
const userTeamsUrl = servicesConfig.serviceUrl.getUserTeamsServices({ baseServicesUrl });
|
|
68
|
+
const teamsQuery = reactQuery.useQuery({
|
|
69
|
+
queryKey: userTeamsUrl,
|
|
70
|
+
queryFn: servicesConfig.resolver.query(userTeamsUrl, null),
|
|
71
|
+
enabled: !hasUserTeams && Boolean(baseServicesUrl),
|
|
72
|
+
});
|
|
60
73
|
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
61
74
|
React__default.default.createElement(react.Theme, { theme: carbonTheme },
|
|
62
75
|
React__default.default.createElement(react.Header, { "aria-label": "App navigation header", className: className },
|
|
@@ -67,12 +80,13 @@ function Header(props) {
|
|
|
67
80
|
? navLinks.map((link) => (React__default.default.createElement(react.HeaderMenuItem, { "aria-label": `Link for ${link.name}`, "data-testid": "header-menu-link", href: link.url, isCurrentPage: window?.location?.href && link.url ? window.location.href.startsWith(link.url) : false, key: link.name, target: link.isExternal ? "_blank" : undefined, rel: link.isExternal ? "noopener noreferrer" : undefined }, link.name)))
|
|
68
81
|
: null),
|
|
69
82
|
React__default.default.createElement(react.HeaderGlobalBar, null,
|
|
83
|
+
React__default.default.createElement(HeaderTeamSwitcher.default, { analyticsHelpers: analyticsHelpers, baseServicesUrl: baseServicesUrl, createJoinTeamTrigger: createJoinTeamTrigger, history: history, isLaunchpad: isLaunchpad, isLoadingTeamSwitcher: isLoadingTeamSwitcher, isSuccessTeamSwitcher: isSuccessTeamSwitcher, setIsSuccessTeamSwitcher: setIsSuccessTeamSwitcher, menuAriaLabelRecord: MenuAriaLabelRecord.TeamSwitcher, menuButtonId: MenuButtonId.TeamSwitcher, menuListId: MenuListId.TeamSwitcher, navigationPlatform: platform, teamsQuery: teamsQuery, trackEvent: trackEvent, user: user, userTeams: userTeams }),
|
|
70
84
|
props?.instanceSwitcherEnabled && (React__default.default.createElement(InstanceSwitcherMenu, { enabled: Boolean(props.instanceSwitcherEnabled), menuItems: platform?.instances })),
|
|
71
85
|
React__default.default.createElement(RequestsMenu, { baseEnvUrl: baseEnvUrl, enabled: Boolean(props.requestSummary), summary: props.requestSummary }),
|
|
72
86
|
React__default.default.createElement(NotificationsMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: Boolean(props.enableNotifications), countEnabled: Boolean(props.enableNotificationsCount) }),
|
|
73
87
|
React__default.default.createElement(SupportMenu, { enabled: Array.isArray(props.supportMenuItems) && props.supportMenuItems.length > 0, menuItems: props.supportMenuItems }),
|
|
74
88
|
React__default.default.createElement(ProfileMenu, { enabled: Array.isArray(props.profileMenuItems) && props.profileMenuItems.length > 0, menuItems: props.profileMenuItems }),
|
|
75
|
-
React__default.default.createElement(AppSwitcherMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: props.enableAppSwitcher, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent, userTeams: userTeams }),
|
|
89
|
+
React__default.default.createElement(AppSwitcherMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: props.enableAppSwitcher, teamsQuery: teamsQuery, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent, userTeams: userTeams }),
|
|
76
90
|
React__default.default.createElement(RightPanelMenu, { enabled: Boolean(rightPanel && Object.keys(rightPanel).length), ...rightPanel })))),
|
|
77
91
|
React__default.default.createElement(NotificationsContainer.default, { enableMultiContainer: true, containerId: `${settings.prefix}--bmrg-header-notifications` })));
|
|
78
92
|
}
|
|
@@ -153,7 +167,7 @@ function AppSwitcherMenu(props) {
|
|
|
153
167
|
}
|
|
154
168
|
return (React__default.default.createElement("div", { ref: ref },
|
|
155
169
|
React__default.default.createElement("button", { "aria-controls": MenuListId.Switcher, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Switcher, className: headerButtonClassNames, "data-testid": "header-appswitcher-link", id: MenuButtonId.Switcher, onClick: toggleActive }, isOpen ? React__default.default.createElement(icons.Close, { size: 20 }) : React__default.default.createElement(icons.Switcher, { size: 20 })),
|
|
156
|
-
React__default.default.createElement(HeaderAppSwitcher.default, { baseEnvUrl: props.baseEnvUrl, baseServicesUrl: props.baseServicesUrl, id: MenuListId.Switcher, isOpen: isOpen, templateMeteringEvent: props.templateMeteringEvent, triggerEvent: props.triggerEvent, userTeams: props.userTeams })));
|
|
170
|
+
React__default.default.createElement(HeaderAppSwitcher.default, { baseEnvUrl: props.baseEnvUrl, baseServicesUrl: props.baseServicesUrl, id: MenuListId.Switcher, isOpen: isOpen, teamsQuery: props.teamsQuery, templateMeteringEvent: props.templateMeteringEvent, triggerEvent: props.triggerEvent, userTeams: props.userTeams })));
|
|
157
171
|
}
|
|
158
172
|
function RightPanelMenu(props) {
|
|
159
173
|
const { isOpen, toggleActive, ref } = useHeaderMenu.default(MenuButtonId.RightPanel);
|
|
@@ -3,12 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var reactQuery = require('react-query');
|
|
7
6
|
var react = require('@carbon/react');
|
|
8
7
|
var icons = require('@carbon/react/icons');
|
|
9
8
|
var ErrorMessage = require('../ErrorMessage/ErrorMessage.js');
|
|
10
9
|
var cx = require('classnames');
|
|
11
|
-
var servicesConfig = require('../../config/servicesConfig.js');
|
|
12
10
|
var settings = require('../../internal/settings.js');
|
|
13
11
|
|
|
14
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -28,14 +26,8 @@ const externalProps = {
|
|
|
28
26
|
const panelClassName = `${settings.prefix}--bmrg-header-switcher-panel`;
|
|
29
27
|
const contentClassName = `${settings.prefix}--bmrg-header-switcher`;
|
|
30
28
|
const skeletonClassName = `${settings.prefix}--bmrg-header-switcher__skeleton`;
|
|
31
|
-
function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, templateMeteringEvent, triggerEvent, userTeams }) {
|
|
29
|
+
function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, teamsQuery, templateMeteringEvent, triggerEvent, userTeams, }) {
|
|
32
30
|
const hasUserTeams = Boolean(userTeams);
|
|
33
|
-
const userTeamsUrl = servicesConfig.serviceUrl.getUserTeamsServices({ baseServicesUrl });
|
|
34
|
-
const teamsQuery = reactQuery.useQuery({
|
|
35
|
-
queryKey: userTeamsUrl,
|
|
36
|
-
queryFn: servicesConfig.resolver.query(userTeamsUrl, null),
|
|
37
|
-
enabled: !hasUserTeams
|
|
38
|
-
});
|
|
39
31
|
if (userTeams?.isLoading || teamsQuery?.isLoading) {
|
|
40
32
|
return (React__default.default.createElement(react.HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, expanded: isOpen, id: id, role: "menu" },
|
|
41
33
|
React__default.default.createElement("div", { className: cx__default.default(contentClassName, "--is-loading", { "--is-hidden": !isOpen }) },
|
|
@@ -78,7 +70,7 @@ function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, templateMe
|
|
|
78
70
|
}
|
|
79
71
|
return null;
|
|
80
72
|
}
|
|
81
|
-
function TeamServiceListMenu({ baseEnvUrl, isAccount, isMember, team, templateMeteringEvent, triggerEvent }) {
|
|
73
|
+
function TeamServiceListMenu({ baseEnvUrl, isAccount, isMember, team, templateMeteringEvent, triggerEvent, }) {
|
|
82
74
|
const { name, displayName, services } = team;
|
|
83
75
|
const nameToDisplay = displayName ? displayName : name;
|
|
84
76
|
const isNameTruncated = nameToDisplay?.length > 30;
|