fix: adding toast after deleting a group (#1383)

* fix: adding toast after deleting a group

* fix: adding test

* fix: the curse of the one line lint error

src/components/PeopleManagement/GroupCardGrid.jsx

@@ -39,7 +39,7 @@ const GroupCardGrid = ({ groups }) => {
                 lg: 6,
                 xl: 4,
               }}
-              hasEqualColumnHeights="true"
+              hasEqualColumnHeights
             >
               {overflowGroups.map((group) => (
                 <GroupDetailCard group={group} />
@@ -61,7 +61,7 @@ const GroupCardGrid = ({ groups }) => {
 };
 
 GroupCardGrid.propTypes = {
-  groups: PropTypes.shape.isRequired,
+  groups: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 export default GroupCardGrid;

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

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 = (<Skeleton height="20vh" />);
   if (!isGroupsLoading) {
     if (groups && groups.length > 0) {
@@ -58,6 +70,9 @@ const PeopleManagementPage = ({ enterpriseId }) => {
     <>
       <Helmet title={PAGE_TITLE} />
       <Hero title={PAGE_TITLE} />
+      <Toast onClose={closeToast} show={isToastOpen}>
+        {toastText}
+      </Toast>
       <div className="mx-3 mt-4">
         <ActionRow className="mb-4">
           <span className="flex-column">

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('<PeopleManagementPage >', () => {
     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(<PeopleManagementPageWrapper />);
+    await waitFor(() => {
+      expect(screen.queryByText('Group deleted')).toBeInTheDocument();
+    });
+  });
 });