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();
+ });
+ });
});