@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.2 → 4.6.11-beta.21
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 +136 -169
- 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 +138 -171
- 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 +113 -1
- package/package.json +2 -2
- package/scss/components/AdvantageSideNav/_advantageSideNav.scss +0 -6
- package/scss/components/Header/_headerTeamSwitcher.scss +195 -0
- package/scss/global/index.scss +7 -8
|
@@ -21,25 +21,46 @@ 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
|
-
|
|
28
|
-
const [regionalModalIsOpen, setRegionalModalIsOpen] =
|
|
29
|
-
|
|
26
|
+
React__default.default.useState(null);
|
|
27
|
+
// const [regionalModalIsOpen, setRegionalModalIsOpen] = React.useState(false);
|
|
28
|
+
React__default.default.useState(null);
|
|
30
29
|
const isMenuOpen = isOpen || activeMenu;
|
|
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 &&
|
|
@@ -49,24 +70,55 @@ function AdvantageSideNav(props) {
|
|
|
49
70
|
destinationPath: homeLink,
|
|
50
71
|
});
|
|
51
72
|
};
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
|
|
73
|
+
const handleToolsClick = () => {
|
|
74
|
+
triggerEvent &&
|
|
75
|
+
triggerEvent({
|
|
76
|
+
action: "Clicked on SideNav Tools link",
|
|
77
|
+
category: "Sidenav",
|
|
78
|
+
destinationPath: toolsLink,
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
const handleAgentAssistantStudioClick = () => {
|
|
82
|
+
triggerEvent &&
|
|
83
|
+
triggerEvent({
|
|
84
|
+
action: "Clicked on SideNav Agent & Assistant Studio link",
|
|
85
|
+
category: "Sidenav",
|
|
86
|
+
destinationPath: agentAssistantStudioLink,
|
|
87
|
+
});
|
|
88
|
+
};
|
|
89
|
+
const handleAgentAssistantLibraryClick = () => {
|
|
90
|
+
triggerEvent &&
|
|
91
|
+
triggerEvent({
|
|
92
|
+
action: "Clicked on SideNav Agent & Assistant Library link",
|
|
93
|
+
category: "Sidenav",
|
|
94
|
+
destinationPath: agentAssistantLibraryLink,
|
|
95
|
+
});
|
|
96
|
+
};
|
|
97
|
+
const handleDocumentCollectionsClick = () => {
|
|
98
|
+
triggerEvent &&
|
|
99
|
+
triggerEvent({
|
|
100
|
+
action: "Clicked on SideNav Document Collections link",
|
|
101
|
+
category: "Sidenav",
|
|
102
|
+
destinationPath: documentCollectionsLink,
|
|
103
|
+
});
|
|
104
|
+
};
|
|
105
|
+
const handleSettingsClick = () => {
|
|
106
|
+
triggerEvent &&
|
|
107
|
+
triggerEvent({
|
|
108
|
+
action: "Clicked on SideNav Settings link",
|
|
109
|
+
category: "Sidenav",
|
|
110
|
+
destinationPath: settingsLink,
|
|
111
|
+
});
|
|
55
112
|
};
|
|
56
113
|
const handleAssistantClick = () => {
|
|
57
|
-
|
|
58
|
-
setRegionalModalIsOpen(true);
|
|
59
|
-
setTeamList(regionalTeam?.map((team) => ({
|
|
60
|
-
id: team.id,
|
|
61
|
-
name: team.name,
|
|
62
|
-
})));
|
|
63
|
-
}
|
|
114
|
+
let redirectLink = `${appLink.newChatRedirect()}?teamName=${teamSwitcherTeam.name}&teamId=${teamSwitcherTeam.id}`;
|
|
64
115
|
triggerEvent &&
|
|
65
116
|
triggerEvent({
|
|
66
117
|
action: "Clicked on SideNav Assistant link",
|
|
67
118
|
category: "Sidenav",
|
|
68
|
-
destinationPath:
|
|
119
|
+
destinationPath: redirectLink,
|
|
69
120
|
});
|
|
121
|
+
window.open(redirectLink, "_self", "noopener,noreferrer");
|
|
70
122
|
};
|
|
71
123
|
const handleCreateJoinClick = () => {
|
|
72
124
|
triggerEvent &&
|
|
@@ -87,60 +139,33 @@ function AdvantageSideNav(props) {
|
|
|
87
139
|
teamType: type,
|
|
88
140
|
});
|
|
89
141
|
};
|
|
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
142
|
const handleLaunchpadLink = (event) => {
|
|
102
143
|
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
144
|
//@ts-ignore
|
|
115
145
|
if (Boolean(hamburguerMenu) && hamburguerMenu.className.includes("active")) {
|
|
116
146
|
//@ts-ignore
|
|
117
147
|
Boolean(hamburguerMenu) && hamburguerMenu?.click();
|
|
118
148
|
}
|
|
119
149
|
setActiveMenu(false);
|
|
120
|
-
setActiveSubmenu("");
|
|
121
150
|
};
|
|
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
151
|
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),
|
|
152
|
+
// assistantLink &&
|
|
153
|
+
React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-assistant-link", className: !enableChatButton ? `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` : "", disabled: Boolean(!enableChatButton),
|
|
154
|
+
// isActive={assistantLink }
|
|
155
|
+
renderIcon: icons.ChatBot, href: enableChatButton, onClick: enableChatButton ? handleAssistantClick : (e) => e.preventDefault() }, "Chat d"));
|
|
156
|
+
const catalogNavlink = navigation?.platform?.catalog?.url;
|
|
157
|
+
const adminNavlink = navigation?.platform?.admin?.url;
|
|
158
|
+
const showSecondDivider = (!isPartnerUser && showChatButton) ||
|
|
159
|
+
toolsLink ||
|
|
160
|
+
agentAssistantStudioLink ||
|
|
161
|
+
agentAssistantLibraryLink ||
|
|
162
|
+
documentCollectionsLink;
|
|
134
163
|
return (React__default.default.createElement(react.SideNav, { "aria-label": "sidenav-container", className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-container`, className, {
|
|
135
164
|
"--closed": !isMenuOpen,
|
|
136
|
-
}), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen,
|
|
165
|
+
}), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen, onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
|
|
137
166
|
setActiveMenu(false);
|
|
138
|
-
setActiveSubmenu("");
|
|
139
167
|
}, ...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("") },
|
|
168
|
+
React__default.default.createElement("div", null,
|
|
144
169
|
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
170
|
if (isLaunchpad) {
|
|
146
171
|
handleLaunchpadLink(e);
|
|
@@ -148,115 +173,57 @@ function AdvantageSideNav(props) {
|
|
|
148
173
|
}
|
|
149
174
|
handleHomeClick();
|
|
150
175
|
} }, "Home")) : null,
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
}
|
|
169
|
-
} }, "Continue"))),
|
|
170
|
-
!isPartnerUser && joinCreateTrigger ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-create-join-trigger", renderIcon: icons.AddAlt, onClick: (e) => {
|
|
176
|
+
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) => {
|
|
177
|
+
if (isLaunchpad) {
|
|
178
|
+
handleLaunchpadLink(e);
|
|
179
|
+
history.push(`/teams/${teamSwitcherTeam.id}`);
|
|
180
|
+
}
|
|
181
|
+
handleTeamClick({
|
|
182
|
+
team: teamSwitcherTeam,
|
|
183
|
+
type: teamSwitcherTeam.isPersonal
|
|
184
|
+
? "personal"
|
|
185
|
+
: teamSwitcherTeam.isAccount
|
|
186
|
+
? "account"
|
|
187
|
+
: teamSwitcherTeam.isproject
|
|
188
|
+
? "project"
|
|
189
|
+
: "standard",
|
|
190
|
+
});
|
|
191
|
+
} },
|
|
192
|
+
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) => {
|
|
171
193
|
joinCreateTrigger(e);
|
|
172
194
|
handleCreateJoinClick();
|
|
173
|
-
} }, joinButtontitle)) : null
|
|
174
|
-
children ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
175
|
-
React__default.default.createElement(react.SideNavDivider, null),
|
|
176
|
-
children)) : null,
|
|
177
|
-
userTeamsLoading && isMenuOpen ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
195
|
+
} }, joinButtontitle)) : null,
|
|
178
196
|
React__default.default.createElement(react.SideNavDivider, null),
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
React__default.default.createElement(
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
React__default.default.createElement(
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
"--open": team.id === activeSubmenu,
|
|
208
|
-
}), style: { top: `${window.scrollY + topPosition}px` } },
|
|
209
|
-
React__default.default.createElement("li", { className: `${settings.prefix}--bmrg-advantage-sidenav-submenu-wrapper` },
|
|
210
|
-
React__default.default.createElement("ul", { className: `${settings.prefix}--bmrg-advantage-sidenav-services-submenu` },
|
|
211
|
-
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) => {
|
|
212
|
-
if (isLaunchpad) {
|
|
213
|
-
handleLaunchpadLink(e);
|
|
214
|
-
history.push(`/teams/${team.id}`);
|
|
215
|
-
}
|
|
216
|
-
handleTeamClick({ team, type: team.isPersonal ? "personal" : "standard" });
|
|
217
|
-
} }, "Team Page"),
|
|
218
|
-
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)));
|
|
219
|
-
})
|
|
220
|
-
: null))) : null,
|
|
221
|
-
Boolean(accounts?.length) ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
197
|
+
// assistantLink &&
|
|
198
|
+
showChatButton &&
|
|
199
|
+
(showChatTooltip ? (React__default.default.createElement(TooltipHover.default, { className: `${settings.prefix}--bmrg-side-nav__tooltip`, content: tooltipMessage, direction: "right" },
|
|
200
|
+
React__default.default.createElement("span", null, assistantSideNavLink))) : (assistantSideNavLink)),
|
|
201
|
+
toolsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-tools-link", renderIcon: icons.Api, href: toolsLink, onClick: (e) => {
|
|
202
|
+
handleToolsClick();
|
|
203
|
+
} }, "Tools")) : null,
|
|
204
|
+
agentAssistantStudioLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-agent-assistant-studio-link", isActive: windowLocation.href.includes(`/launchpad/agent-assistant-studio`) ||
|
|
205
|
+
windowLocation.href.includes(`/launchpad/agenticapps`), renderIcon: icons.IntentRequestCreate, href: agentAssistantStudioLink, onClick: (e) => {
|
|
206
|
+
if (isLaunchpad) {
|
|
207
|
+
handleLaunchpadLink(e);
|
|
208
|
+
history.push(agentAssistantStudioLink);
|
|
209
|
+
}
|
|
210
|
+
handleAgentAssistantStudioClick();
|
|
211
|
+
} }, "Agent & Assistant Studio")) : null,
|
|
212
|
+
agentAssistantLibraryLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-agent-assistant-library-link", renderIcon: icons.Folders, href: agentAssistantLibraryLink, onClick: (e) => {
|
|
213
|
+
handleAgentAssistantLibraryClick();
|
|
214
|
+
} }, "Agent & Assistant Library")) : null,
|
|
215
|
+
documentCollectionsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: icons.DocumentMultiple_02, href: documentCollectionsLink, onClick: (e) => {
|
|
216
|
+
handleDocumentCollectionsClick();
|
|
217
|
+
} }, "Document Collections")) : null,
|
|
218
|
+
showSecondDivider ? React__default.default.createElement(react.SideNavDivider, null) : null,
|
|
219
|
+
catalogNavlink ? (React__default.default.createElement(react.SideNavLink, { href: catalogNavlink, renderIcon: icons.Catalog }, "Catalog")) : null,
|
|
220
|
+
settingsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: icons.Settings, href: settingsLink, onClick: (e) => {
|
|
221
|
+
handleSettingsClick();
|
|
222
|
+
} }, "Settings")) : null,
|
|
223
|
+
adminNavlink ? (React__default.default.createElement(react.SideNavLink, { href: adminNavlink, renderIcon: icons.LicenseThirdParty }, "Admin")) : null),
|
|
224
|
+
children ? (React__default.default.createElement(React__default.default.Fragment, null,
|
|
222
225
|
React__default.default.createElement(react.SideNavDivider, null),
|
|
223
|
-
|
|
224
|
-
"--active-closed": !isMenuOpen &&
|
|
225
|
-
accounts.some((t) => {
|
|
226
|
-
const pIds = t?.projectTeams?.map((project) => project.id) ?? [];
|
|
227
|
-
return windowLocation.href.includes(t.id) || pIds.some((id) => windowLocation.href.includes(id));
|
|
228
|
-
}),
|
|
229
|
-
}), renderIcon: icons.GroupAccount, title: "Accounts", "data-testid": "sidenav-accounts", id: "sidenav-accounts", ref: accountsMenuRef, "aria-expanded": isMenuOpen, isSideNavExpanded: isMenuOpen }, isMenuOpen
|
|
230
|
-
? accounts?.map((team, i) => {
|
|
231
|
-
const topPosition = document?.getElementById(team.id)?.getBoundingClientRect()?.top ?? 0;
|
|
232
|
-
const teamDisplayName = Boolean(team.displayName) ? team.displayName : team.name;
|
|
233
|
-
const projectIds = team?.projectTeams?.map((project) => project.id) ?? [];
|
|
234
|
-
const isAccountActive = windowLocation.href.includes(team.id) ||
|
|
235
|
-
projectIds.some((id) => windowLocation.href.includes(id));
|
|
236
|
-
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
237
|
-
React__default.default.createElement("li", { className: `${settings.prefix}--bmrg-advantage-sidenav-team-item` },
|
|
238
|
-
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) => {
|
|
239
|
-
if (isLaunchpad) {
|
|
240
|
-
handleLaunchpadLink(e);
|
|
241
|
-
history.push(`/teams/${team.id}`);
|
|
242
|
-
}
|
|
243
|
-
handleTeamClick({ team, type: "account" });
|
|
244
|
-
} },
|
|
245
|
-
React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-advantage-sidenav-teams__title` }, teamDisplayName),
|
|
246
|
-
Boolean(team?.projectTeams?.length) ? React__default.default.createElement(icons.ChevronRight, null) : null),
|
|
247
|
-
Boolean(team?.projectTeams?.length) && team.id === activeSubmenu ? (React__default.default.createElement("ul", { className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-submenu`, {
|
|
248
|
-
"--open": team.id === activeSubmenu,
|
|
249
|
-
}), style: { top: `${window.scrollY + topPosition}px` } },
|
|
250
|
-
React__default.default.createElement("li", { className: `${settings.prefix}--bmrg-advantage-sidenav-submenu-wrapper` },
|
|
251
|
-
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) => {
|
|
252
|
-
if (isLaunchpad) {
|
|
253
|
-
handleLaunchpadLink(e);
|
|
254
|
-
history.push(`/teams/${accTeam.id}`);
|
|
255
|
-
}
|
|
256
|
-
handleTeamClick({ team: accTeam, type: "project" });
|
|
257
|
-
} }, accTeam.name))) ?? null)))) : null)));
|
|
258
|
-
})
|
|
259
|
-
: null))) : null)));
|
|
226
|
+
children)) : null)));
|
|
260
227
|
}
|
|
261
228
|
|
|
262
229
|
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;
|