@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
231 lines (224 loc) • 16.1 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var cx = require('classnames');
var react = require('@carbon/react');
var TooltipHover = require('../TooltipHover/TooltipHover.js');
var icons = require('@carbon/react/icons');
var UserType = require('../../constants/UserType.js');
var settings = require('../../internal/settings.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var cx__default = /*#__PURE__*/_interopDefault(cx);
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
const SideNavUrlKeys = {
Home: "home",
TeamPage: "teamPage",
Chat: "chat",
Tools: "tools",
AgentStudio: "agentStudio",
ContextStudio: "contextStudio",
AgentLibrary: "agentLibrary",
DocumentCollections: "documentCollections",
Catalog: "catalog",
Marketplace: "marketplace",
Settings: "settings",
Admin: "admin",
};
function AdvantageSideNav(props) {
const { app, appLink, agenticAppsPath = "", agentStudioPath = "", regionalTeam, enableChatButton = true, showChatButton = true, showSelectTeamPurpose = false, defaultAssistantLink, joinCreateTrigger, isLoading, isOpen, teams = [], triggerEvent, accounts = [], baseEnvUrl, className, navLinks, personalTeams = [], user, showChatTooltip, templateMeteringEvent, tooltipMessage, isLaunchpad = false, sideNavUrls, history, children, personalTeamEnabled, ...rest } = props;
const [activeMenu, setActiveMenu] = React__default.default.useState(false);
const isMenuOpen = isOpen || activeMenu;
const windowLocation = window.location;
const isPartnerUser = user?.type === UserType.USER_PLATFORM_ROLE.Partner;
const joinButtontitle = showSelectTeamPurpose ? "Create Team" : "Create or Join Team";
const hamburguerMenu = document.getElementById("header-sidenav-menu-button");
const homeSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Home);
const chatSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Chat);
const chatLink = chatSideNavUrl?.url;
const toolsSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Tools);
const agentAssistantStudioSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.AgentStudio);
const contextStudioSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.ContextStudio);
const agentAssistantLibrarySideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.AgentLibrary);
const documentCollectionsSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.DocumentCollections);
const catalogSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Catalog);
const marketplaceSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Marketplace);
const settingsSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Settings);
const adminSideNavUrl = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Admin);
// get current selected team
let teamSwitcherTeam = null;
if (Array.isArray(personalTeams) && personalTeams.length > 0) {
personalTeams.forEach((team) => {
if (team.id === user?.teamInstanceSwitcherDefault) {
teamSwitcherTeam = { ...team, isPersonal: true };
}
});
}
if (Array.isArray(teams) && teams.length > 0) {
teams.forEach((team) => {
if (team.id === user?.teamInstanceSwitcherDefault) {
teamSwitcherTeam = { ...team, isStandard: true };
}
});
}
if (Array.isArray(accounts) && accounts.length > 0) {
accounts.forEach((account) => {
if (account.id === user?.teamInstanceSwitcherDefault) {
teamSwitcherTeam = { ...account, isAccount: true };
}
else if (Array.isArray(account.projectTeams) && account.projectTeams.length > 0) {
account.projectTeams.forEach((projectTeam) => {
if (projectTeam.id === user?.teamInstanceSwitcherDefault) {
teamSwitcherTeam = { ...projectTeam, isProject: true };
}
});
}
});
}
// Functions to track IBM Instrumentation on Segment
const handleSidenavLinkClick = ({ name, link }) => {
triggerEvent &&
triggerEvent({
action: `Clicked on SideNav ${name} link`,
category: "Sidenav",
destinationPath: link,
});
};
const handleChatClick = () => {
let redirectLink = chatLink
? chatLink
: `${appLink.newChatRedirect()}?teamName=${teamSwitcherTeam.name}&teamId=${teamSwitcherTeam.id}`;
triggerEvent &&
triggerEvent({
action: "Clicked on SideNav Chat link",
category: "Sidenav",
destinationPath: redirectLink,
});
window.open(redirectLink, "_self", "noopener,noreferrer");
};
const handleCreateJoinClick = () => {
triggerEvent &&
triggerEvent({
action: "Clicked on SideNav Create/Join link",
category: "Sidenav",
CTA: "Create/Join team cliked",
type: "Button",
});
};
const handleTeamClick = ({ team, type }) => {
triggerEvent &&
triggerEvent({
action: "Clicked on SideNav Team link",
category: "Sidenav",
destinationPath: `${baseEnvUrl}/${app}/teams/${team.id}`,
teamId: team.id,
teamType: type,
});
};
const handleLaunchpadLink = (event) => {
event.preventDefault();
//@ts-ignore
if (Boolean(hamburguerMenu) && hamburguerMenu.className.includes("active")) {
//@ts-ignore
Boolean(hamburguerMenu) && hamburguerMenu?.click();
}
setActiveMenu(false);
};
const chatSideNavLink = (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-chat-link", className: !enableChatButton ? `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` : "", disabled: Boolean(!enableChatButton), renderIcon: icons.ChatBot, href: enableChatButton && chatLink, onClick: enableChatButton ? handleChatClick : (e) => e.preventDefault() }, chatSideNavUrl?.name));
const showSecondDivider = showChatButton ||
toolsSideNavUrl ||
agentAssistantStudioSideNavUrl ||
contextStudioSideNavUrl ||
agentAssistantLibrarySideNavUrl ||
documentCollectionsSideNavUrl;
return (React__default.default.createElement(react.SideNav, { "aria-label": "sidenav-container", className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-container`, className, {
"--closed": !isMenuOpen,
}), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen, onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
setActiveMenu(false);
}, ...rest }, React__default.default.createElement(react.SideNavItems, null,
React__default.default.createElement("div", null,
homeSideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-home-link", isActive: `${baseEnvUrl}/${app}/`.includes(windowLocation.href), renderIcon: icons.Home, href: homeSideNavUrl.url, onClick: (e) => {
if (isLaunchpad) {
handleLaunchpadLink(e);
history.push("/");
}
handleSidenavLinkClick({ name: homeSideNavUrl.name, link: homeSideNavUrl.url });
} }, homeSideNavUrl.name)) : null,
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(`/launchpad/teams/${teamSwitcherTeam.id}`), className: `${settings.prefix}--bmrg-advantage-sidenav-team`, renderIcon: icons.UserMultiple, href: `${baseEnvUrl}/${app}/teams/${teamSwitcherTeam.id}`, onClick: (e) => {
if (isLaunchpad) {
handleLaunchpadLink(e);
history.push(`/teams/${teamSwitcherTeam.id}`);
}
handleTeamClick({
team: teamSwitcherTeam,
type: teamSwitcherTeam.isPersonal
? "personal"
: teamSwitcherTeam.isAccount
? "account"
: teamSwitcherTeam.isproject
? "project"
: "standard",
});
} },
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) => {
joinCreateTrigger(e);
handleCreateJoinClick();
} }, joinButtontitle)) : null,
React__default.default.createElement(react.SideNavDivider, null),
showChatButton &&
(showChatTooltip ? (React__default.default.createElement(TooltipHover.default, { className: `${settings.prefix}--bmrg-side-nav__tooltip`, content: tooltipMessage, direction: "right" },
React__default.default.createElement("span", null, chatSideNavLink))) : (chatSideNavLink)),
toolsSideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-tools-link", renderIcon: icons.Api, href: toolsSideNavUrl.url, onClick: (e) => {
handleSidenavLinkClick({ name: toolsSideNavUrl.name, link: toolsSideNavUrl.url });
} }, toolsSideNavUrl.tag ? (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-advantage-sidenav-item-tag` },
React__default.default.createElement("p", { title: toolsSideNavUrl.name, className: `${settings.prefix}--bmrg-advantage-sidenav-item-tag-name` }, toolsSideNavUrl.name),
React__default.default.createElement(react.Tag, { size: "sm", title: toolsSideNavUrl.tag, type: "high-contrast" }, toolsSideNavUrl.tag))) : (toolsSideNavUrl.name))) : null,
agentAssistantStudioSideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-agent-assistant-studio-link", isActive: (agentStudioPath && windowLocation.href.includes(`/launchpad${agentStudioPath}`)) ||
(agenticAppsPath && windowLocation.href.includes(`/launchpad${agenticAppsPath}`)), renderIcon: icons.IntentRequestCreate, href: agentAssistantStudioSideNavUrl.url, onClick: (e) => {
if (isLaunchpad) {
handleLaunchpadLink(e);
history.push(agentStudioPath);
}
handleSidenavLinkClick({
name: agentAssistantStudioSideNavUrl.name,
link: agentAssistantStudioSideNavUrl.url,
});
} }, agentAssistantStudioSideNavUrl.name)) : null,
contextStudioSideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-context-studio-link", renderIcon: icons.Network_3, href: contextStudioSideNavUrl.url, onClick: (e) => {
handleSidenavLinkClick({ name: contextStudioSideNavUrl.name, link: contextStudioSideNavUrl.url });
} }, contextStudioSideNavUrl.tag ? (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-advantage-sidenav-item-tag` },
React__default.default.createElement("p", { title: contextStudioSideNavUrl.name, className: `${settings.prefix}--bmrg-advantage-sidenav-item-tag-name` }, contextStudioSideNavUrl.name),
React__default.default.createElement(react.Tag, { size: "sm", title: contextStudioSideNavUrl.tag, type: "high-contrast" }, contextStudioSideNavUrl.tag))) : (contextStudioSideNavUrl.name))) : null,
agentAssistantLibrarySideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-agent-assistant-library-link", renderIcon: icons.Folders, href: agentAssistantLibrarySideNavUrl.url, onClick: (e) => {
handleSidenavLinkClick({
name: agentAssistantLibrarySideNavUrl.name,
link: agentAssistantLibrarySideNavUrl.url,
});
} }, agentAssistantLibrarySideNavUrl.name)) : null,
documentCollectionsSideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: icons.DocumentMultiple_02, href: documentCollectionsSideNavUrl.url, onClick: (e) => {
handleSidenavLinkClick({
name: documentCollectionsSideNavUrl.name,
link: documentCollectionsSideNavUrl.url,
});
} }, documentCollectionsSideNavUrl.name)) : null,
showSecondDivider ? React__default.default.createElement(react.SideNavDivider, null) : null,
catalogSideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-catalog-link", isActive: windowLocation.href.includes(`${baseEnvUrl}/catalog`), href: catalogSideNavUrl.url, renderIcon: icons.Catalog }, catalogSideNavUrl.name)) : null,
marketplaceSideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-markeplace-link", renderIcon: icons.Store, isActive: windowLocation.href.includes(`${baseEnvUrl}/launchpad/marketplace`), href: marketplaceSideNavUrl.url, onClick: (e) => {
handleSidenavLinkClick({ name: marketplaceSideNavUrl.name, link: marketplaceSideNavUrl.url });
} }, marketplaceSideNavUrl.tag ? (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-advantage-sidenav-item-tag` },
React__default.default.createElement("p", { title: marketplaceSideNavUrl.name, className: `${settings.prefix}--bmrg-advantage-sidenav-item-tag-name` }, marketplaceSideNavUrl.name),
React__default.default.createElement(react.Tag, { size: "sm", title: marketplaceSideNavUrl.tag, type: "high-contrast" }, marketplaceSideNavUrl.tag))) : (marketplaceSideNavUrl.name))) : null,
settingsSideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: icons.Settings, href: settingsSideNavUrl.url, onClick: (e) => {
handleSidenavLinkClick({ name: settingsSideNavUrl.name, link: settingsSideNavUrl.url });
} }, settingsSideNavUrl.name)) : null,
adminSideNavUrl ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-admin-link", href: adminSideNavUrl.url, renderIcon: icons.LicenseThirdParty }, adminSideNavUrl.name)) : null),
children ? (React__default.default.createElement(React__default.default.Fragment, null,
React__default.default.createElement(react.SideNavDivider, null),
children)) : null)));
}
exports.AdvantageSideNav = AdvantageSideNav;
exports.default = AdvantageSideNav;