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