feat: Add download csv button to people management

src/components/PeopleManagement/DownloadCSVButton.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import {
+  Icon, Spinner, StatefulButton, Toast, useToggle,
+} from '@openedx/paragon';
+import { Download, Check } from '@openedx/paragon/icons';
+import { logError } from '@edx/frontend-platform/logging';
+import { downloadCsv, getTimeStampedFilename } from '../../utils';
+
+const csvHeaders = ['Name', 'Email', 'Joined Organization', 'Enrollments'];
+
+const dataEntryToRow = (entry) => {
+  const { enterpriseCustomerUser: { name, email, joinedOrg }, enrollments } = entry;
+  return [name, email, joinedOrg, enrollments];
+};
+
+const DownloadCsvButton = ({ testId, fetchData, totalCt }) => {
+  const [buttonState, setButtonState] = useState('pageLoading');
+  const [isToastOpen, openToast, closeToast] = useToggle(false);
+  const intl = useIntl();
+
+  useEffect(() => {
+    if (fetchData) {
+      setButtonState('default');
+    }
+  }, [fetchData]);
+
+  const handleClick = async () => {
+    setButtonState('pending');
+    fetchData().then((response) => {
+      const fileName = getTimeStampedFilename('people-report.csv');
+      downloadCsv(fileName, response.results, csvHeaders, dataEntryToRow);
+      openToast();
+      setButtonState('complete');
+    }).catch((err) => {
+      logError(err);
+    });
+  };
+
+  const toastText = intl.formatMessage({
+    id: 'adminPortal.peopleManagement.dataTable.download.toast',
+    defaultMessage: 'Successfully downloaded',
+    description: 'Toast message for the people management download button.',
+  });
+  return (
+    <>
+      { isToastOpen
+     && (
+     <Toast onClose={closeToast} show={isToastOpen}>
+       {toastText}
+     </Toast>
+     )}
+      <StatefulButton
+        state={buttonState}
+        className="download-button"
+        data-testid={testId}
+        labels={{
+          default: intl.formatMessage({
+            id: 'adminPortal.peopleManagement.dataTable.download.button',
+            defaultMessage: `Download all (${totalCt})`,
+            description: 'Label for the people management download button',
+          }),
+          pending: intl.formatMessage({
+            id: 'adminPortal.peopleManagement.dataTable.download.button.pending',
+            defaultMessage: 'Downloading',
+            description: 'Label for the people management download button when the download is in progress.',
+          }),
+          complete: intl.formatMessage({
+            id: 'adminPortal.peopleManagement.dataTable.download.button.complete',
+            defaultMessage: 'Downloaded',
+            description: 'Label for the people management download button when the download is complete.',
+          }),
+          pageLoading: intl.formatMessage({
+            id: 'adminPortal.peopleManagement.dataTable.download.button.loading',
+            defaultMessage: 'Download module activity',
+            description: 'Label for the people management download button when the page is loading.',
+          }),
+        }}
+        icons={{
+          default: <Icon src={Download} />,
+          pending: <Spinner animation="border" variant="light" size="sm" />,
+          complete: <Icon src={Check} />,
+          pageLoading: <Icon src={Download} variant="light" />,
+        }}
+        disabledStates={['pending', 'pageLoading']}
+        onClick={handleClick}
+      />
+    </>
+  );
+};
+
+DownloadCsvButton.defaultProps = {
+  testId: 'download-csv-button',
+};
+
+DownloadCsvButton.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  fetchData: PropTypes.func.isRequired,
+  totalCt: PropTypes.number,
+  testId: PropTypes.string,
+};
+
+export default DownloadCsvButton;

src/components/PeopleManagement/PeopleManagementTable.jsx

@@ -7,6 +7,7 @@ import TableTextFilter from '../learner-credit-management/TableTextFilter';
 import CustomDataTableEmptyState from '../learner-credit-management/CustomDataTableEmptyState';
 import OrgMemberCard from './OrgMemberCard';
 import useEnterpriseMembersTableData from './data/hooks/useEnterpriseMembersTableData';
+import DownloadCsvButton from './DownloadCSVButton';
 
 const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
 
@@ -15,10 +16,10 @@ const PeopleManagementTable = ({ enterpriseId }) => {
     isLoading: isTableLoading,
     enterpriseMembersTableData,
     fetchEnterpriseMembersTableData,
+    fetchAllEnterpriseMembersData,
   } = useEnterpriseMembersTableData({ enterpriseId });
 
   const tableColumns = [{ Header: 'Name', accessor: 'name' }];
-
   return (
     <DataTable
       isSortable
@@ -45,6 +46,13 @@ const PeopleManagementTable = ({ enterpriseId }) => {
       itemCount={enterpriseMembersTableData.itemCount}
       pageCount={enterpriseMembersTableData.pageCount}
       EmptyTableComponent={CustomDataTableEmptyState}
+      tableActions={[
+        <DownloadCsvButton
+          fetchData={fetchAllEnterpriseMembersData}
+          totalCt={enterpriseMembersTableData.itemCount}
+          testId="people-report-download"
+        />,
+      ]}
     >
       <DataTable.TableControlBar />
       <CardView

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

@@ -14,6 +14,15 @@
     pageCount: 0,
     results: [],
   });
+
+  const fetchAllEnterpriseMembersData = useCallback(async () => {
+    const { options, itemCount } = enterpriseMembersTableData;
+    // Take the existing filters but specify we're taking all results on one page
+    const fetchAllOptions = { ...options, page: 1, page_size: itemCount };
+    const response = await LmsApiService.fetchEnterpriseCustomerMembers(enterpriseId, fetchAllOptions);
+    return camelCaseObject(response.data);
+  }, [enterpriseId, enterpriseMembersTableData]);
+
   const fetchEnterpriseMembersData = useCallback((args) => {
     const fetch = async () => {
       try {
@@ -33,6 +42,7 @@
           itemCount: data.count,
           pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
           results: data.results,
+          options,
         });
       } catch (error) {
         logError(error);
@@ -56,6 +66,7 @@
     isLoading,
     enterpriseMembersTableData,
     fetchEnterpriseMembersTableData: debouncedFetchEnterpriseMembersData,
+    fetchAllEnterpriseMembersData,
   };
 };
 

src/components/PeopleManagement/tests/DownloadCsvButton.test.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { logError } from '@edx/frontend-platform/logging';
+import { act, render, screen } from '@testing-library/react';
+
+import '@testing-library/jest-dom/extend-expect';
+
+import userEvent from '@testing-library/user-event';
+import DownloadCsvButton from '../DownloadCSVButton';
+import { downloadCsv } from '../../../utils';
+
+jest.mock('file-saver', () => ({
+  ...jest.requireActual('file-saver'),
+  saveAs: jest.fn(),
+}));
+
+jest.mock('../../../utils', () => ({
+  downloadCsv: jest.fn(),
+  getTimeStampedFilename: (suffix) => `2024-01-20-${suffix}`,
+}));
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  ...jest.requireActual('@edx/frontend-platform/logging'),
+  logError: jest.fn(),
+}));
+
+const mockData = {
+  results: [
+    {
+      enterprise_customer_user: {
+        email: '[email protected]',
+        joined_org: 'Apr 07, 2024',
+        name: 'A',
+      },
+      enrollments: 3,
+    },
+    {
+      enterprise_customer_user: {
+        email: '[email protected]',
+        joined_org: 'Apr 08, 2024',
+        name: 'B',
+      },
+      enrollments: 4,
+    },
+  ],
+};
+
+const testId = 'test-id-1';
+const DEFAULT_PROPS = {
+  totalCt: mockData.results.length,
+  fetchData: jest.fn(() => Promise.resolve(mockData)),
+  testId,
+};
+
+const DownloadCSVButtonWrapper = props => (
+  <IntlProvider locale="en">
+    <DownloadCsvButton {...props} />
+  </IntlProvider>
+);
+
+describe('DownloadCSVButton', () => {
+  const flushPromises = () => new Promise(setImmediate);
+
+  it('renders download csv button correctly.', async () => {
+    render(<DownloadCSVButtonWrapper {...DEFAULT_PROPS} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+
+    // Validate button text
+    expect(screen.getByText('Download all (2)')).toBeInTheDocument();
+
+    // Click the download button.
+    screen.getByTestId(testId).click();
+    await flushPromises();
+
+    expect(DEFAULT_PROPS.fetchData).toHaveBeenCalled();
+    const expectedFileName = '2024-01-20-people-report.csv';
+    const expectedHeaders = ['Name', 'Email', 'Joined Organization', 'Enrollments'];
+    expect(downloadCsv).toHaveBeenCalledWith(expectedFileName, mockData.results, expectedHeaders, expect.any(Function));
+  });
+  it('download button should handle error returned by the API endpoint.', async () => {
+    const props = {
+      ...DEFAULT_PROPS,
+      fetchData: jest.fn(() => Promise.reject(new Error('Error fetching data'))),
+    };
+    render(<DownloadCSVButtonWrapper {...props} />);
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+
+    act(() => {
+      // Click the download button.
+      userEvent.click(screen.getByTestId(testId));
+    });
+
+    await flushPromises();
+
+    expect(DEFAULT_PROPS.fetchData).toHaveBeenCalled();
+    expect(logError).toHaveBeenCalled();
+  });
+});

src/utils.js

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import { saveAs } from 'file-saver';
 import camelCase from 'lodash/camelCase';
 import snakeCase from 'lodash/snakeCase';
 import isArray from 'lodash/isArray';
@@ -609,6 +610,48 @@ function isTodayBetweenDates({ startDate, endDate }) {
  */
 const isFalsy = (value) => value == null || value === '';
 
+/**
+ * Generate filename with current timestamp prepended to given suffix
+ *
+ * @param {string} suffix
+ * @returns {string}
+ */
+function getTimeStampedFilename(suffix) {
+  const padTwoZeros = (num) => num.toString().padStart(2, '0');
+  const currentDate = new Date();
+  const year = currentDate.getUTCFullYear();
+  const month = padTwoZeros(currentDate.getUTCMonth() + 1);
+  const day = padTwoZeros(currentDate.getUTCDate());
+  return `${year}-${month}-${day}-${suffix}`;
+}
+
+/**
+ * Transform data to csv format and save to file
+ *
+ * @param {string} fileName
+ *  Name of the file to save to
+ * @param {Array<object>} data
+ *  Data to transform to csv format
+ * @param {Array<string>} headers
+ *  Text headers for the file
+ * @param {(object) => Array<string|number>} dataEntryToRow
+ *  Transform function, taking a single data entry and converting it to array of string or numeric values
+ *  that will represent a row of data in the csv document
+ *  Note: Enclosing quotes will be added to any string fields containing commas
+ */
+function downloadCsv(fileName, data, headers, dataEntryToRow) {
+  // If a cell in a csv document contains commas, we need to enclose cell in quotes
+  const escapeCommas = (cell) => (isString(cell) && cell.includes(',') ? `"${cell}"` : cell);
+  const generateCsvRow = (entry) => dataEntryToRow(entry).map(escapeCommas);
+
+  const body = data.map(generateCsvRow).join('\n');
+  const csvText = `${headers}\n${body}`;
+  const blob = new Blob([csvText], {
+    type: 'text/csv',
+  });
+  saveAs(blob, fileName);
+}
+
 export {
   camelCaseDict,
   camelCaseDictArray,
@@ -656,4 +699,6 @@ export {
   isTodayWithinDateThreshold,
   isTodayBetweenDates,
   isFalsy,
+  getTimeStampedFilename,
+  downloadCsv,
 };