@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
105 lines (102 loc) • 7.28 kB
JavaScript
import React from 'react';
import { HeaderPanel, SkeletonText, SwitcherDivider, SideNavMenu, SideNavMenuItem } from '@carbon/react';
import { Launch } from '@carbon/react/icons';
import Error from '../ErrorMessage/ErrorMessage.js';
import cx from 'classnames';
import { prefix } from '../../internal/settings.js';
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
const externalProps = {
target: "_blank",
rel: "noreferrer noopener",
};
const panelClassName = `${prefix}--bmrg-header-switcher-panel`;
const contentClassName = `${prefix}--bmrg-header-switcher`;
const skeletonClassName = `${prefix}--bmrg-header-switcher__skeleton`;
function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, teamsQuery, templateMeteringEvent, triggerEvent, userTeams, }) {
const hasUserTeams = Boolean(userTeams);
if (userTeams?.isLoading || teamsQuery?.isLoading) {
return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, expanded: isOpen, id: id, role: "menu" },
React.createElement("div", { className: cx(contentClassName, "--is-loading", { "--is-hidden": !isOpen }) },
React.createElement(SkeletonText, { className: skeletonClassName }),
React.createElement(SkeletonText, { className: skeletonClassName }),
React.createElement(SkeletonText, { className: skeletonClassName }),
React.createElement(SkeletonText, { className: skeletonClassName }),
React.createElement(SkeletonText, { className: skeletonClassName }))));
}
if (userTeams?.error || teamsQuery?.error) {
return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", id: id, role: "menu", className: panelClassName, expanded: isOpen },
React.createElement(Error, { className: cx(contentClassName, { "--is-hidden": !isOpen }) })));
}
if (userTeams?.data || teamsQuery?.data) {
let accountTeams, standardTeams, personalTeam = [];
if (hasUserTeams) {
accountTeams = userTeams?.data?.accountTeams;
standardTeams = userTeams?.data?.standardTeams;
personalTeam = userTeams?.data?.personalTeam;
}
else {
accountTeams = teamsQuery?.data?.accountTeams;
standardTeams = teamsQuery?.data?.standardTeams;
personalTeam = teamsQuery?.data?.personalTeam;
}
if (accountTeams?.length || standardTeams?.length) {
return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, "data-testid": "header-app-switcher", expanded: isOpen, id: id, role: "menu" },
React.createElement("div", { className: cx(contentClassName, { "--is-hidden": !isOpen }) },
[...personalTeam, ...standardTeams].map((team) => (React.createElement(TeamServiceListMenu, { key: team.id, baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isMember: true, team: team, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }))),
accountTeams?.map((account) => (React.createElement("div", { key: account.id },
React.createElement(SwitcherDivider, null),
React.createElement(TeamServiceListMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isAccount: true, isMember: account.isAccountTeamMember, team: account, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }),
Boolean(account.projectTeams) &&
account.projectTeams.map((project) => (React.createElement(TeamServiceListMenu, { key: project.id, baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isMember: true, team: project, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent })))))))));
}
return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, "data-testid": "header-app-switcher", expanded: isOpen, id: id, role: "menu" },
React.createElement("div", { className: cx(contentClassName, "--is-empty", { "--is-hidden": !isOpen }) },
React.createElement("h1", { className: `${prefix}--bmrg-header-switcher__empty-title` }, "No teams"),
React.createElement("p", { className: `${prefix}--bmrg-header-switcher__empty-subtitle` }, "You must be new here"))));
}
return null;
}
function TeamServiceListMenu({ baseEnvUrl, isAccount, isMember, team, templateMeteringEvent, triggerEvent, }) {
const { id, name, displayName, services } = team;
const nameToDisplay = displayName ? displayName : name;
const isNameTruncated = nameToDisplay?.length > 30;
if (!isMember) {
return (React.createElement("div", { id: id, className: `${prefix}--side-nav__item`, title: isNameTruncated ? nameToDisplay : undefined },
React.createElement("button", { disabled: true, className: `${prefix}--side-nav__submenu`, "data-testid": "header-app-switcher-service" },
React.createElement("span", { className: `${prefix}--side-nav__submenu-title` }, nameToDisplay))));
}
return (
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
React.createElement("ul", { id: id, className: `${prefix}--bmrg-header-team`, title: isNameTruncated ? nameToDisplay : undefined },
React.createElement(SideNavMenu, { title: nameToDisplay },
React.createElement(ServiceList, { baseEnvUrl: baseEnvUrl, isAccount: isAccount, servicesData: services, team: team, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }))));
}
function ServiceList(props) {
const { baseEnvUrl = "", isAccount, servicesData, team, templateMeteringEvent, triggerEvent } = props;
const handleLinkClick = (service) => {
if (templateMeteringEvent) {
templateMeteringEvent({ service, team });
}
triggerEvent && triggerEvent(service);
};
if (!!servicesData) {
if (Boolean(servicesData?.length)) {
return (React.createElement(React.Fragment, null, servicesData.map((service) => {
const isExternalLink = typeof service?.url?.includes === "function" && !service.url.includes(baseEnvUrl);
const isNameTruncated = isExternalLink ? service.name.length > 28 : service.name.length > 32;
return (React.createElement(SideNavMenuItem, { id: service.id, key: service.id, href: service.url, title: isNameTruncated ? service.name : undefined, onClick: () => handleLinkClick(service), "data-testid": "header-app-switcher-service", ...(isExternalLink ? externalProps : undefined) },
React.createElement("span", null, service.name),
isExternalLink ? React.createElement(Launch, { size: 16, title: "Opens page in new tab" }) : undefined));
})));
}
else {
return (React.createElement("div", { className: `${prefix}--bmrg-header-team__message`, "data-testid": "header-app-switcher-service" }, `This ${isAccount ? "account" : "team"} has no assets`));
}
}
return null;
}
export { HeaderAppSwitcher as default };