feat: Add download csv button to people management

src/components/PeopleManagement/DownloadCSVButton.jsx

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import {
+  Toast, StatefulButton, Icon, Spinner, useToggle,
+} from '@openedx/paragon';
+import { Download, Check } from '@openedx/paragon/icons';
+import { logError } from '@edx/frontend-platform/logging';
+import { downloadCsv } 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 getCsvFileName = () => {
+  const currentDate = new Date();
+  const year = currentDate.getUTCFullYear();
+  const month = currentDate.getUTCMonth() + 1;
+  const day = currentDate.getUTCDate();
+  return `${year}-${month}-${day}-people-report.csv`;
+};
+
+const DownloadCsvButton = ({ testId, fetchData, totalCt }) => {
+  const [buttonState, setButtonState] = useState('pageLoading');
+  const [isOpen, open, close] = useToggle(false);
+  const intl = useIntl();
+
+  useEffect(() => {
+    if (fetchData) {
+      setButtonState('default');
+    }
+  }, [fetchData]);
+
+  const handleClick = async () => {
+    setButtonState('pending');
+    fetchData().then((response) => {
+      downloadCsv(getCsvFileName(), response.results, csvHeaders, dataEntryToRow);
+      open();
+      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 (
+    <>
+      { isOpen
+     && (
+     <Toast onClose={close} show={isOpen}>
+       {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,14 @@ const useEnterpriseMembersTableData = ({ enterpriseId }) => {
     pageCount: 0,
     results: [],
   });
+
+  const fetchAllEnterpriseMembersData = useCallback(async () => {
+    const { options, itemCount } = enterpriseMembersTableData;
+    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 +41,7 @@ const useEnterpriseMembersTableData = ({ enterpriseId }) => {
           itemCount: data.count,
           pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
           results: data.results,
+          options,
         });
       } catch (error) {
         logError(error);
@@ -56,6 +65,7 @@ const useEnterpriseMembersTableData = ({ enterpriseId }) => {
     isLoading,
     enterpriseMembersTableData,
     fetchEnterpriseMembersTableData: debouncedFetchEnterpriseMembersData,
+    fetchAllEnterpriseMembersData,
   };
 };
 

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,31 @@ function isTodayBetweenDates({ startDate, endDate }) {
  */
 const isFalsy = (value) => value == null || value === '';
 
+/**
+ * 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
+ *  Note: Quotes will be added to any string fields containing commas
+ */
+function downloadCsv(fileName, data, headers, dataEntryToRow) {
+  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 +682,5 @@ export {
   isTodayWithinDateThreshold,
   isTodayBetweenDates,
   isFalsy,
+  downloadCsv,
 };

src/utils.test.js

@@ -1,5 +1,6 @@
 import { logError } from '@edx/frontend-platform/logging';
 import { createIntl } from '@edx/frontend-platform/i18n';
+import { saveAs } from 'file-saver';
 
 import {
   camelCaseDict,
@@ -13,13 +14,21 @@ import {
   queryCacheOnErrorHandler,
   i18nFormatPassedTimestamp,
   i18nFormatProgressStatus,
+  downloadCsv,
 } from './utils';
 
 jest.mock('@edx/frontend-platform/logging', () => ({
   ...jest.requireActual('@edx/frontend-platform/logging'),
   logError: jest.fn(),
 }));
 
+jest.mock('file-saver', () => ({
+  ...jest.requireActual('file-saver'),
+  saveAs: jest.fn(),
+}));
+
+global.Blob = jest.fn();
+
 const intl = createIntl({
   locale: 'en',
   messages: {},
@@ -166,4 +175,31 @@ describe('utils', () => {
       });
     });
   });
+  describe('downloadCsv', () => {
+    it('downloads properly formatted csv', () => {
+      const fileName = 'somefile.csv';
+      const data = [
+        {
+          a: 1, b: 2, c: 3, d: 4,
+        },
+        {
+          a: 'apple', b: 'banana', c: 'comma, please', d: 'donut',
+        },
+      ];
+      const headers = ['a', 'b', 'c', 'd'];
+      const dataEntryToRow = (entry) => {
+        const changeItUp = (field) => (isValidNumber(field) ? field + 1 : field);
+        const {
+          a, b, c, d,
+        } = entry;
+        return [a, b, c, d].map(changeItUp);
+      };
+      downloadCsv(fileName, data, headers, dataEntryToRow);
+      const expectedBlob = ['a,b,c,d\n2,3,4,5\napple,banana,"comma, please",donut'];
+      expect(global.Blob).toHaveBeenCalledWith(expectedBlob, {
+        type: 'text/csv',
+      });
+      expect(saveAs).toHaveBeenCalledWith({}, fileName);
+    });
+  });
 });