diff --git a/src/components/PeopleManagement/GroupCardGrid.jsx b/src/components/PeopleManagement/GroupCardGrid.jsx index c875938da1..a14eaf6b9e 100644 --- a/src/components/PeopleManagement/GroupCardGrid.jsx +++ b/src/components/PeopleManagement/GroupCardGrid.jsx @@ -39,7 +39,7 @@ const GroupCardGrid = ({ groups }) => { lg: 6, xl: 4, }} - hasEqualColumnHeights="true" + hasEqualColumnHeights > {overflowGroups.map((group) => ( @@ -61,7 +61,7 @@ const GroupCardGrid = ({ groups }) => { }; GroupCardGrid.propTypes = { - groups: PropTypes.shape.isRequired, + groups: PropTypes.arrayOf(PropTypes.shape({})), }; export default GroupCardGrid; diff --git a/src/components/PeopleManagement/GroupDetailPage/DeleteGroupModal.jsx b/src/components/PeopleManagement/GroupDetailPage/DeleteGroupModal.jsx index e02cac73d8..b69b14b4d1 100644 --- a/src/components/PeopleManagement/GroupDetailPage/DeleteGroupModal.jsx +++ b/src/components/PeopleManagement/GroupDetailPage/DeleteGroupModal.jsx @@ -22,8 +22,12 @@ const DeleteGroupModal = ({ try { await LmsApiService.removeEnterpriseGroup(group?.uuid); close(); + const param = { + toast: true, + }; + const urlParams = new URLSearchParams(param); // redirect back to the people management page - window.location.href = `/${enterpriseSlug}/admin/${ROUTE_NAMES.peopleManagement}`; + window.location.href = `/${enterpriseSlug}/admin/${ROUTE_NAMES.peopleManagement}/?${urlParams.toString()}`; } catch (error) { logError(error); openError(); diff --git a/src/components/PeopleManagement/index.jsx b/src/components/PeopleManagement/index.jsx index 0b3e000371..a30770927f 100644 --- a/src/components/PeopleManagement/index.jsx +++ b/src/components/PeopleManagement/index.jsx @@ -4,10 +4,7 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import { - ActionRow, - Button, - Skeleton, - useToggle, + ActionRow, Button, Skeleton, Toast, useToggle, } from '@openedx/paragon'; import { Add } from '@openedx/paragon/icons'; @@ -28,6 +25,13 @@ const PeopleManagementPage = ({ enterpriseId }) => { description: 'Title for the people management page.', }); + const [isToastOpen, openToast, closeToast] = useToggle(false); + const toastText = intl.formatMessage({ + id: 'admin.portal.people.management.group.deleted.toast', + defaultMessage: 'Group deleted', + description: 'Toast text after a user has deleted a group.', + }); + const { enterpriseSubsidyTypes } = useContext(EnterpriseSubsidiesContext); const { data, isLoading: isGroupsLoading } = useAllFlexEnterpriseGroups(enterpriseId); @@ -45,6 +49,14 @@ const PeopleManagementPage = ({ enterpriseId }) => { } }, [data]); + useEffect(() => { + // parameter is for confirmation toast after deleting a group + const searchParams = new URLSearchParams(window.location.search); + if (searchParams.has('toast')) { + openToast(); + } + }, [openToast]); + let groupsCardSection = (); if (!isGroupsLoading) { if (groups && groups.length > 0) { @@ -58,6 +70,9 @@ const PeopleManagementPage = ({ enterpriseId }) => { <> + + {toastText} +
diff --git a/src/components/PeopleManagement/tests/PeopleManagementPage.test.jsx b/src/components/PeopleManagement/tests/PeopleManagementPage.test.jsx index 1752e96d7e..58f39159b9 100644 --- a/src/components/PeopleManagement/tests/PeopleManagementPage.test.jsx +++ b/src/components/PeopleManagement/tests/PeopleManagementPage.test.jsx @@ -43,6 +43,11 @@ jest.mock('../../learner-credit-management/data', () => ({ useAllFlexEnterpriseGroups: jest.fn(), })); +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useSearchParams: jest.fn(), +})); + const mockGroupsResponse = [{ enterpriseCustomer: enterpriseUUID, name: 'only cool people', @@ -156,4 +161,21 @@ describe('', () => { const openCollapsible = screen.getByText('Show less'); expect(openCollapsible).toBeInTheDocument(); }); + it('renders group deleted toast after redirect', async () => { + useAllFlexEnterpriseGroups.mockReturnValue({ data: mockGroupsResponse }); + // eslint-disable-next-line no-global-assign + window = Object.create(window); + const params = '?toast=true'; + Object.defineProperty(window, 'location', { + value: { + search: params, + }, + writable: true, + }); + expect(window.location.search).toEqual(params); + render(); + await waitFor(() => { + expect(screen.queryByText('Group deleted')).toBeInTheDocument(); + }); + }); });