@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
140 lines (137 loc) • 8.37 kB
JavaScript
import React, { useState, useEffect } from 'react';
import { ComposedModal, ModalHeader, ModalBody, StructuredListSkeleton, StructuredListWrapper, StructuredListHead, StructuredListRow, StructuredListCell, Checkbox, StructuredListBody, ModalFooter, InlineNotification, Button } from '@carbon/react';
import Avatar from '../Avatar/Avatar.js';
import Error from '../ErrorMessage/ErrorMessage.js';
import HeaderMenuItem from '../Header/HeaderMenuItem.js';
import ToastNotification from '../Notifications/ToastNotification.js';
import notify from '../Notifications/notify.js';
import { resolver, serviceUrl } from '../../config/servicesConfig.js';
import sortBy from 'lodash.sortby';
import { useQueryClient, useQuery, useMutation } from 'react-query';
import { prefix } from '../../internal/settings.js';
/*
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, src, userName, isOpen, closeModal }) {
const queryClient = useQueryClient();
const [initialTeams, setInitialTeams] = useState([]);
const [teams, setTeams] = useState([]);
const userUrl = serviceUrl.getLaunchpadUser({ baseServicesUrl });
const profileUrl = serviceUrl.resourceUserProfile({ baseServicesUrl });
const { data: user, isLoading: userIsLoading, error: userError, } = useQuery({
queryKey: userUrl,
queryFn: resolver.query(userUrl),
});
const { mutateAsync: mutateUserProfile, isLoading: mutateUserProfileIsLoading, error: mutateUserProfileError, } = useMutation(resolver.patchUserProfile, {
onSuccess: () => {
queryClient.invalidateQueries(userUrl);
queryClient.invalidateQueries(profileUrl);
},
});
// 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;
useEffect(() => {
const teams = user?.lowerLevelGroups ?? [];
setInitialTeams(teams);
setTeams(teams);
}, [user]);
function handleClose() {
closeModal();
setTeams(initialTeams);
}
async function handleSubmit() {
const body = {
lowerLevelGroups: teams,
};
try {
await mutateUserProfile({ baseServicesUrl, body });
notify(React.createElement(ToastNotification, { subtitle: "Successfully updated user settings", title: "Update Settings", kind: "success" }), { containerId: `${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.createElement("div", { className: `${prefix}--bmrg-profile-menu-user` },
React.createElement(Avatar, { size: "medium", src: src, userName: userName }),
React.createElement("p", { className: `${prefix}--bmrg-profile-menu-user__name` },
" ",
userName ? userName : "",
" ")));
}
return (React.createElement(ComposedModal, { "aria-label": "Profile Settings", className: `${prefix}--bmrg-profile-settings-container ${prefix}--bmrg-header-modal`, open: isOpen, onClose: handleClose, preventCloseOnClickOutside: true },
React.createElement(ModalHeader, { closeModal: handleClose, title: `User profile - ${userName}` }),
React.createElement(ModalBody, { style: { maxHeight: "31.5rem" } },
React.createElement("p", { className: `${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 sidebar in Launchpad."),
React.createElement("h2", { className: `${prefix}--bmrg-profile-settings__subtitle` }, "Teams visible in Launchpad sidebar"),
React.createElement("p", { className: `${prefix}--bmrg-profile-settings__description` }, "Choose Teams to show or hide in your Launchpad sidebar and Catalog (useful for sensitive demos). You will not be able to access or view unchecked Teams from the sidebar, and cannot add items to them from Catalog."),
userIsLoading ? (React.createElement(StructuredListSkeleton, null)) : userError ? (React.createElement(Error, { style: { color: "#F2F4F8", padding: "1rem" } })) : teams?.length > 0 ? (React.createElement(StructuredListWrapper, { className: `${prefix}--bmrg-profile-settings-list` },
React.createElement(StructuredListHead, null,
React.createElement(StructuredListRow, { head: true },
React.createElement(StructuredListCell, { head: true },
React.createElement(Checkbox, { checked: allTeamsAreChecked, id: "team-name-batch-toggle", indeterminate: someTeamsAreChecked, labelText: "Team Name", onChange: batchChangeTeamVisibility })))),
React.createElement(StructuredListBody, null, sortBy(teams, "name").map(({ name, displayName, id, visible }) => (React.createElement(StructuredListRow, { key: id, className: !visible ? `${prefix}--bmrg-profile-settings-list__row--disabled` : "" },
React.createElement(StructuredListCell, null,
React.createElement(Checkbox, { checked: visible, id: id, labelText: Boolean(displayName) ? displayName : name, onChange: (_, { checked, id }) => {
return handleUpdateTeamVisibility(id, checked);
} })))))))) : (React.createElement("p", { style: { marginTop: "3rem", color: "#F2F4F8" } }, "No teams to configure. Join or create teams in Launchpad!"))),
React.createElement(ModalFooter, null,
mutateUserProfileError && (React.createElement("div", { style: {
position: "absolute",
top: "-5rem",
left: "2rem",
width: "90%",
} },
React.createElement(InlineNotification, { kind: "error", title: "Something's Wrong", subtitle: "Failed to update user profile" }))),
React.createElement(Button, { "data-modal-primary-focus": true, kind: "secondary", onClick: handleClose }, "Cancel"),
React.createElement(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.useRef(null);
const [isOpen, setIsOpen] = React.useState(false);
const handleClose = () => {
setIsOpen(false);
setTimeout(() => {
menuItemRef.current?.focus();
}, 0);
};
return (React.createElement(React.Fragment, null,
React.createElement(HeaderMenuItem, { onClick: () => setIsOpen(!isOpen), ref: menuItemRef, src: props.src, type: "user", userName: props.userName }),
React.createElement(ProfileSettings, { isOpen: isOpen, closeModal: handleClose, ...props })));
}
export { ProfileSettingsMenuItem, ProfileSettings as default };