fix: adding in download capability

src/components/PeopleManagement/GroupDetailPage/DownloadCsvIconButton.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from '@edx/frontend-platform/i18n';
+
+import {
+  Icon, IconButtonWithTooltip, Toast, useToggle,
+} from '@openedx/paragon';
+import { Download } from '@openedx/paragon/icons';
+import { logError } from '@edx/frontend-platform/logging';
+import GeneralErrorModal from '../GeneralErrorModal';
+import { downloadCsv, getTimeStampedFilename } from '../../../utils';
+
+const csvHeaders = ['Name', 'Email', 'Recent action', 'Enrollments'];
+
+const DownloadCsvIconButton = ({ fetchAllData, dataCount, testId }) => {
+  const [isToastOpen, openToast, closeToast] = useToggle(false);
+  const [isErrorModalOpen, openErrorModal, closeErrorModal] = useToggle(false);
+  const intl = useIntl();
+  const messages = defineMessages({
+    downloadToastText: {
+      id: 'adminPortal.peopleManagement.groupDetail.downloadCsv.toast',
+      defaultMessage: 'Downloaded group members',
+      description: 'Toast message for the download button on the group detail page.',
+    },
+    downloadHoverText: {
+      id: 'adminPortal.peopleManagement.groupDetail.downloadCsv.toast',
+      defaultMessage: `Download (${dataCount})`,
+      description: 'Tooltip message for the download button on the group detail page.',
+    },
+  });
+
+  const dataEntryToRow = (entry) => {
+    const { memberDetails: { userEmail, userName }, recentAction, enrollments } = entry;
+    return [userName, userEmail, recentAction, enrollments];
+  };
+
+  const handleClick = async () => {
+    fetchAllData().then((response) => {
+      const fileName = getTimeStampedFilename('group-report.csv');
+      downloadCsv(fileName, response.results, csvHeaders, dataEntryToRow);
+      openToast();
+    }).catch((err) => {
+      logError(err);
+      openErrorModal();
+    });
+  };
+
+  return (
+    <>
+      { isToastOpen
+     && (
+     <Toast onClose={closeToast} show={isToastOpen}>
+       {intl.formatMessage(messages.downloadToastText)}
+     </Toast>
+     )}
+      <GeneralErrorModal
+        isOpen={isErrorModalOpen}
+        close={closeErrorModal}
+      />
+      <IconButtonWithTooltip
+        data-testid={testId}
+        tooltipContent={intl.formatMessage(messages.downloadHoverText)}
+        src={Download}
+        iconAs={Icon}
+        alt="Download group members"
+        variant="primary"
+        onClick={handleClick}
+      />
+    </>
+  );
+};
+
+DownloadCsvIconButton.defaultProps = {
+  testId: 'download-csv-icon-button',
+};
+
+DownloadCsvIconButton.propTypes = {
+  fetchAllData: PropTypes.func.isRequired,
+  dataCount: PropTypes.number.isRequired,
+  testId: PropTypes.string,
+};
+
+export default DownloadCsvIconButton;

src/components/PeopleManagement/GroupDetailPage/GroupDetailPage.jsx

@@ -26,6 +26,7 @@ const GroupDetailPage = () => {
     isLoading: isTableLoading,
     enterpriseGroupLearnersTableData,
     fetchEnterpriseGroupLearnersTableData,
+    fetchAllEnterpriseGroupLearnersData,
     refresh,
     setRefresh,
   } = useEnterpriseGroupLearnersTableData({ groupUuid });
@@ -109,7 +110,6 @@ const GroupDetailPage = () => {
               <IconButtonWithTooltip
                 alt="icon to trash group"
                 key="trashGroupTooltip"
-                tooltipPlacement="top"
                 tooltipContent={tooltipContent}
                 src={Delete}
                 iconAs={Icon}
@@ -148,7 +148,8 @@ const GroupDetailPage = () => {
         isLoading={isTableLoading}
         tableData={enterpriseGroupLearnersTableData}
         fetchTableData={fetchEnterpriseGroupLearnersTableData}
-        groupUuid={groupUuid}
+        fetchAllData={fetchAllEnterpriseGroupLearnersData}
+        dataCount={enterpriseGroupLearnersTableData.itemCount}
         refresh={refresh}
         setRefresh={setRefresh}
       />

src/components/PeopleManagement/GroupDetailPage/GroupMembersTable.jsx

@@ -15,7 +15,7 @@ import {
   GROUP_MEMBERS_TABLE_PAGE_SIZE,
 } from '../constants';
 import RecentActionTableCell from '../RecentActionTableCell';
-import DownloadCsvButton from './DownloadCsvButton';
+import DownloadCsvIconButton from './DownloadCsvIconButton';
 import RemoveMemberModal from './RemoveMemberModal';
 import GeneralErrorModal from '../GeneralErrorModal';
 
@@ -44,7 +44,7 @@ const KabobMenu = ({
         isOpen={isErrorModalOpen}
         close={closeErrorModal}
       />
-      <Dropdown drop="top">
+      <Dropdown>
         <Dropdown.Toggle
           id="kabob-menu-dropdown"
           data-testid="kabob-menu-dropdown"
@@ -86,6 +86,8 @@ const GroupMembersTable = ({
   isLoading,
   tableData,
   fetchTableData,
+  fetchAllData,
+  dataCount,
   groupUuid,
   refresh,
   setRefresh,
@@ -162,8 +164,9 @@ const GroupMembersTable = ({
           },
         ]}
         tableActions={[
-          <DownloadCsvButton
-            data={tableData.results}
+          <DownloadCsvIconButton
+            fetchAllData={fetchAllData}
+            dataCount={dataCount}
             testId="group-members-download"
           />,
         ]}
@@ -185,6 +188,8 @@ GroupMembersTable.propTypes = {
     pageCount: PropTypes.number.isRequired,
   }).isRequired,
   fetchTableData: PropTypes.func.isRequired,
+  fetchAllData: PropTypes.func.isRequired,
+  dataCount: PropTypes.number.isRequired,
   groupUuid: PropTypes.string.isRequired,
   refresh: PropTypes.bool.isRequired,
   setRefresh: PropTypes.func.isRequired,

src/components/PeopleManagement/data/hooks/useEnterpriseGroupLearnersTableData.js

@@ -45,6 +45,7 @@ const useEnterpriseGroupLearnersTableData = ({ groupUuid }) => {
           itemCount: data.count,
           pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
           results: data.results.filter(result => result.activatedAt),
+          options,
         });
       } catch (error) {
         logError(error);
@@ -61,10 +62,18 @@ const useEnterpriseGroupLearnersTableData = ({ groupUuid }) => {
     [fetchEnterpriseGroupLearnersData, refresh],
   );
 
+  const fetchAllEnterpriseGroupLearnersData = useCallback(async () => {
+    const { options, itemCount } = enterpriseGroupLearnersTableData;
+    const fetchAllOptions = { ...options, page: 1, page_size: itemCount };
+    const response = await LmsApiService.fetchEnterpriseGroupLearners(groupUuid, fetchAllOptions);
+    return camelCaseObject(response.data);
+  }, [groupUuid, enterpriseGroupLearnersTableData]);
+
   return {
     isLoading,
     enterpriseGroupLearnersTableData,
     fetchEnterpriseGroupLearnersTableData: debouncedFetchEnterpriseGroupLearnersData,
+    fetchAllEnterpriseGroupLearnersData,
     refresh,
     setRefresh,
   };