@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
169 lines (162 loc) • 10.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var react = require('@carbon/react');
var Avatar = require('../Avatar/Avatar.js');
var ErrorMessage = require('../ErrorMessage/ErrorMessage.js');
var HeaderMenuItem = require('../Header/HeaderMenuItem.js');
var ToastNotification = require('../Notifications/ToastNotification.js');
var notify = require('../Notifications/notify.js');
var servicesConfig = require('../../config/servicesConfig.js');
var sortBy = require('lodash.sortby');
var reactQuery = require('@tanstack/react-query');
var settings = require('../../internal/settings.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var sortBy__default = /*#__PURE__*/_interopDefault(sortBy);
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
function determineIfConfigIsDifferent(teams, initialTeams) {
let isConfigDifferent = false;
for (let idx = 0; idx < teams?.length; idx++) {
if (teams[idx]?.visible !== initialTeams[idx]?.visible) {
isConfigDifferent = true;
break;
}
}
return isConfigDifferent;
}
function ProfileSettings({ baseServicesUrl, refetchUser, refetchUserTeams, refetchNavigation, src, userName, isOpen, closeModal, }) {
const queryClient = reactQuery.useQueryClient();
const [initialTeams, setInitialTeams] = React.useState([]);
const [teams, setTeams] = React.useState([]);
const userUrl = servicesConfig.serviceUrl.getLaunchpadUser({ baseServicesUrl });
const profileUrl = servicesConfig.serviceUrl.resourceUserProfile({ baseServicesUrl });
const userTeamsUrl = servicesConfig.serviceUrl.getUserTeamsServices({ baseServicesUrl });
const { data: user, isLoading: userIsLoading, error: userError, } = reactQuery.useQuery({
queryKey: [userUrl],
queryFn: servicesConfig.resolver.query(userUrl),
});
const { mutateAsync: mutateUserProfile, isPending: mutateUserProfileIsLoading, error: mutateUserProfileError, } = reactQuery.useMutation({
mutationFn: servicesConfig.resolver.patchUserProfile,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: [userUrl] });
queryClient.invalidateQueries({ queryKey: [profileUrl] });
queryClient.invalidateQueries({ queryKey: [userTeamsUrl] });
if (refetchUser) {
setTimeout(() => {
refetchUser();
}, 1000);
}
if (refetchUserTeams) {
setTimeout(() => {
refetchUserTeams();
}, 1000);
}
if (refetchNavigation) {
setTimeout(() => {
refetchNavigation();
}, 1000);
}
},
});
// Only disable when we have a user and we know that there aren' any lower level groups to manage
const disableModal = user && user?.lowerLevelGroups === undefined;
React.useEffect(() => {
const teams = user?.lowerLevelGroups ?? [];
setInitialTeams(teams);
setTeams(teams);
}, [user]);
function handleClose() {
closeModal();
setTeams(initialTeams);
}
async function handleSubmit() {
const body = {
teamInstanceSwitcherDefault: null,
lowerLevelGroups: teams,
};
try {
await mutateUserProfile({ baseServicesUrl, body });
notify.default(React__default.default.createElement(ToastNotification.default, { subtitle: "Successfully updated user settings", title: "Update Settings", kind: "success" }), { containerId: `${settings.prefix}--bmrg-header-notifications` });
closeModal();
}
catch (e) {
// noop
}
}
const visibleTeamCount = teams?.filter((team) => team?.visible)?.length ?? 0;
const allTeamsAreChecked = teams?.length === visibleTeamCount;
const someTeamsAreChecked = visibleTeamCount > 0 && !allTeamsAreChecked;
const isConfigDifferent = determineIfConfigIsDifferent(teams, initialTeams);
function batchChangeTeamVisibility() {
const updatedTeams = teams.map((team) => ({ ...team, visible: !allTeamsAreChecked }));
setTeams(updatedTeams);
}
function handleUpdateTeamVisibility(id, checked) {
const updatedTeams = [];
for (let team of teams) {
const newTeam = { ...team };
if (newTeam.id === id) {
newTeam.visible = checked;
}
updatedTeams.push(newTeam);
}
setTeams(updatedTeams);
}
if (disableModal) {
return (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-profile-menu-user` },
React__default.default.createElement(Avatar.default, { size: "medium", src: src, userName: userName }),
React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-profile-menu-user__name` },
" ",
userName ? userName : "",
" ")));
}
return (React__default.default.createElement(react.ComposedModal, { "aria-label": "Profile Settings", className: `${settings.prefix}--bmrg-profile-settings-container ${settings.prefix}--bmrg-header-modal`, open: isOpen, onClose: handleClose, preventCloseOnClickOutside: true },
React__default.default.createElement(react.ModalHeader, { closeModal: handleClose, title: `User profile - ${userName}` }),
React__default.default.createElement(react.ModalBody, { style: { maxHeight: "31.5rem" } },
React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-profile-settings__title` }, "More user profile settings will be here eventually, but for now you can choose which Teams are shown in your team switcher in Launchpad."),
React__default.default.createElement("h2", { className: `${settings.prefix}--bmrg-profile-settings__subtitle` }, "Teams visible in Launchpad team switcher"),
React__default.default.createElement("p", { className: `${settings.prefix}--bmrg-profile-settings__description` }, "Choose Teams to show or hide in your Launchpad team switcher and Catalog (useful for sensitive demos). You will not be able to access or view unchecked Teams from the team switcher, and cannot add items to them from Catalog."),
userIsLoading ? (React__default.default.createElement(react.StructuredListSkeleton, null)) : userError ? (React__default.default.createElement(ErrorMessage.default, { style: { color: "#F2F4F8", padding: "1rem" } })) : teams?.length > 0 ? (React__default.default.createElement(react.StructuredListWrapper, { className: `${settings.prefix}--bmrg-profile-settings-list` },
React__default.default.createElement(react.StructuredListHead, null,
React__default.default.createElement(react.StructuredListRow, { head: true },
React__default.default.createElement(react.StructuredListCell, { head: true },
React__default.default.createElement(react.Checkbox, { checked: allTeamsAreChecked, id: "team-name-batch-toggle", indeterminate: someTeamsAreChecked, labelText: "Team Name", onChange: batchChangeTeamVisibility })))),
React__default.default.createElement(react.StructuredListBody, null, sortBy__default.default(teams, "name").map(({ name, displayName, id, visible }) => (React__default.default.createElement(react.StructuredListRow, { key: id, className: !visible ? `${settings.prefix}--bmrg-profile-settings-list__row--disabled` : "" },
React__default.default.createElement(react.StructuredListCell, null,
React__default.default.createElement(react.Checkbox, { checked: visible, id: id, labelText: Boolean(displayName) ? displayName : name, onChange: (_, { checked, id }) => {
return handleUpdateTeamVisibility(id, checked);
} })))))))) : (React__default.default.createElement("p", { style: { marginTop: "3rem", color: "#F2F4F8" } }, "No teams to configure. Join or create teams in Launchpad!"))),
React__default.default.createElement(react.ModalFooter, null,
mutateUserProfileError && (React__default.default.createElement("div", { style: {
position: "absolute",
top: "-5rem",
left: "2rem",
width: "90%",
} },
React__default.default.createElement(react.InlineNotification, { kind: "error", title: "Something's Wrong", subtitle: "Failed to update user profile" }))),
React__default.default.createElement(react.Button, { "data-modal-primary-focus": true, kind: "secondary", onClick: handleClose }, "Cancel"),
React__default.default.createElement(react.Button, { disabled: !isConfigDifferent || mutateUserProfileIsLoading, kind: "primary", type: "submit", onClick: (e) => {
e.preventDefault();
handleSubmit();
} }, mutateUserProfileError ? "Try Again" : mutateUserProfileIsLoading ? "Saving..." : "Save changes"))));
}
function ProfileSettingsMenuItem(props) {
const menuItemRef = React__default.default.useRef(null);
const [isOpen, setIsOpen] = React__default.default.useState(false);
const handleClose = () => {
setIsOpen(false);
setTimeout(() => {
menuItemRef.current?.focus();
}, 0);
};
return (React__default.default.createElement(React__default.default.Fragment, null,
React__default.default.createElement(HeaderMenuItem.default, { onClick: () => setIsOpen(!isOpen), ref: menuItemRef, src: props.src, type: "user", userName: props.userName }),
React__default.default.createElement(ProfileSettings, { isOpen: isOpen, closeModal: handleClose, ...props })));
}
exports.ProfileSettingsMenuItem = ProfileSettingsMenuItem;
exports.default = ProfileSettings;