fix: adding toast after deleting a group

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 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 @@
     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 } = useAllEnterpriseGroups(enterpriseId);
 
@@ -45,6 +49,14 @@
     }
   }, [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,11 @@
     <>
       <Helmet title={PAGE_TITLE} />
       <Hero title={PAGE_TITLE} />
+      {isToastOpen && (
+        <Toast onClose={closeToast} show={isToastOpen}>
+          {toastText}
+        </Toast>
+      )}
       <div className="mx-3 mt-4">
         <ActionRow className="mb-4">
           <span className="flex-column">