@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
122 lines (115 loc) • 8.72 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var reactQuery = require('react-query');
var react = require('@carbon/react');
var icons = require('@carbon/react/icons');
var ErrorMessage = require('../ErrorMessage/ErrorMessage.js');
var cx = require('classnames');
var servicesConfig = require('../../config/servicesConfig.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 externalProps = {
target: "_blank",
rel: "noreferrer noopener",
};
const panelClassName = `${settings.prefix}--bmrg-header-switcher-panel`;
const contentClassName = `${settings.prefix}--bmrg-header-switcher`;
const skeletonClassName = `${settings.prefix}--bmrg-header-switcher__skeleton`;
function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, templateMeteringEvent, triggerEvent, userTeams }) {
const hasUserTeams = Boolean(userTeams);
const userTeamsUrl = servicesConfig.serviceUrl.getUserTeamsServices({ baseServicesUrl });
const teamsQuery = reactQuery.useQuery({
queryKey: userTeamsUrl,
queryFn: servicesConfig.resolver.query(userTeamsUrl, null),
enabled: !hasUserTeams
});
if (userTeams?.isLoading || teamsQuery?.isLoading) {
return (React__default.default.createElement(react.HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, expanded: isOpen, id: id, role: "menu" },
React__default.default.createElement("div", { className: cx__default.default(contentClassName, "--is-loading", { "--is-hidden": !isOpen }) },
React__default.default.createElement(react.SkeletonText, { className: skeletonClassName }),
React__default.default.createElement(react.SkeletonText, { className: skeletonClassName }),
React__default.default.createElement(react.SkeletonText, { className: skeletonClassName }),
React__default.default.createElement(react.SkeletonText, { className: skeletonClassName }),
React__default.default.createElement(react.SkeletonText, { className: skeletonClassName }))));
}
if (userTeams?.error || teamsQuery?.error) {
return (React__default.default.createElement(react.HeaderPanel, { "aria-label": "App Switcher", id: id, role: "menu", className: panelClassName, expanded: isOpen },
React__default.default.createElement(ErrorMessage.default, { className: cx__default.default(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__default.default.createElement(react.HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, "data-testid": "header-app-switcher", expanded: isOpen, id: id, role: "menu" },
React__default.default.createElement("div", { className: cx__default.default(contentClassName, { "--is-hidden": !isOpen }) },
[...personalTeam, ...standardTeams].map((team) => (React__default.default.createElement(TeamServiceListMenu, { key: team.id, baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isMember: true, team: team, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }))),
accountTeams?.map((account) => (React__default.default.createElement("div", { key: account.id },
React__default.default.createElement(react.SwitcherDivider, null),
React__default.default.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__default.default.createElement(TeamServiceListMenu, { key: project.id, baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isMember: true, team: project, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent })))))))));
}
return (React__default.default.createElement(react.HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, "data-testid": "header-app-switcher", expanded: isOpen, id: id, role: "menu" },
React__default.default.createElement("div", { className: cx__default.default(contentClassName, "--is-empty", { "--is-hidden": !isOpen }) },
React__default.default.createElement("h1", { className: `${settings.prefix}--bmrg-header-switcher__empty-title` }, "No teams"),
React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-header-switcher__empty-subtitle` }, "You must be new here"))));
}
return null;
}
function TeamServiceListMenu({ baseEnvUrl, isAccount, isMember, team, templateMeteringEvent, triggerEvent }) {
const { name, displayName, services } = team;
const nameToDisplay = displayName ? displayName : name;
const isNameTruncated = nameToDisplay?.length > 30;
if (!isMember) {
return (React__default.default.createElement("div", { className: `${settings.prefix}--side-nav__item`, title: isNameTruncated ? nameToDisplay : undefined },
React__default.default.createElement("button", { disabled: true, className: `${settings.prefix}--side-nav__submenu`, "data-testid": "header-app-switcher-service" },
React__default.default.createElement("span", { className: `${settings.prefix}--side-nav__submenu-title` }, nameToDisplay))));
}
return (
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
React__default.default.createElement("ul", { className: `${settings.prefix}--bmrg-header-team`, title: isNameTruncated ? nameToDisplay : undefined },
React__default.default.createElement(react.SideNavMenu, { title: nameToDisplay },
React__default.default.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__default.default.createElement(React__default.default.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__default.default.createElement(react.SideNavMenuItem, { key: service.name, href: service.url, title: isNameTruncated ? service.name : undefined, onClick: () => handleLinkClick(service), "data-testid": "header-app-switcher-service", ...(isExternalLink ? externalProps : undefined) },
React__default.default.createElement("span", null, service.name),
isExternalLink ? React__default.default.createElement(icons.Launch, { size: 16, title: "Opens page in new tab" }) : undefined));
})));
}
else {
return (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-header-team__message`, "data-testid": "header-app-switcher-service" }, `This ${isAccount ? "account" : "team"} has no assets`));
}
}
return null;
}
exports.default = HeaderAppSwitcher;