feat: allowing group data download button to apply to selected rows

src/components/learner-credit-management/members-tab/GroupMembersCsvDownloadTableAction.jsx

@@ -11,6 +11,10 @@ import { useBudgetId, useSubsidyAccessPolicy } from '../data';
 const GroupMembersCsvDownloadTableAction = ({
  tableInstance,
 }) => {
+ let buttonNumRelevantRows = tableInstance.itemCount;
+ if (tableInstance?.selectedFlatRows.length > 0) {
+ buttonNumRelevantRows = tableInstance?.selectedFlatRows.length;
+ }
  const [alertModalOpen, setAlertModalOpen] = useState(false);
  const [alertModalExc, setAlertModalException] = useState('');
  const { subsidyAccessPolicyId } = useBudgetId();
@@ -50,9 +54,13 @@ const GroupMembersCsvDownloadTableAction = ({
  }
  });
 
+ const selectedEmails = [];
+ tableInstance.selectedFlatRows.forEach((row) => selectedEmails.push(row.id));
+
  EnterpriseAccessApiService.fetchSubsidyHydratedGroupMembersData(
  subsidyAccessPolicyId,
  options,
+ selectedEmails,
  ).then(response => {
  // download CSV
  const blob = new Blob([response.data], {
@@ -96,14 +104,17 @@ const GroupMembersCsvDownloadTableAction = ({
  className="border rounded-0 border-dark-500"
  disabled={tableInstance.itemCount === 0}
  >
- Download all ({tableInstance.itemCount})
+ Download {tableInstance?.selectedFlatRows.length > 0 ? '' : 'all '}({buttonNumRelevantRows})
  </Button>
  </>
  );
 };
 
 GroupMembersCsvDownloadTableAction.propTypes = {
  tableInstance: PropTypes.shape({
+ selectedFlatRows: PropTypes.arrayOf(PropTypes.shape({
+ id: PropTypes.string,
+ })),
  itemCount: PropTypes.number,
  state: PropTypes.shape({
  filters: PropTypes.arrayOf(PropTypes.shape({

src/components/learner-credit-management/members-tab/LearnerCreditGroupMembersTable.jsx

@@ -123,6 +123,7 @@ const LearnerCreditGroupMembersTable = ({
  setRefresh={setRefresh}
  groupUuid={groupUuid}
  />,
+ <GroupMembersCsvDownloadTableAction />,
  ]}
  additionalColumns={[
  {

src/components/learner-credit-management/members-tab/tests/MembersTab.test.jsx

@@ -713,11 +713,16 @@ describe('<BudgetDetailPage />', () => {
  renderWithRouter(<BudgetDetailPageWrapper initialState={initialState} />);
  userEvent.type(screen.getByText('Search by member details'), 'foobar');
  userEvent.click(screen.getByTestId('members-table-enrollments-column-header'));
+
  const removeToggle = screen.getByTestId('show-removed-toggle');
  userEvent.click(removeToggle);
 
- const downloadButton = screen.getByText('Download all (1)');
+ const toggleAllRowsSelected = screen.getByTitle('Toggle All Current Page Rows Selected');
+ userEvent.click(toggleAllRowsSelected);
+
+ const downloadButton = screen.getByText('Download (1)');
  expect(downloadButton).toBeInTheDocument();
+
  userEvent.click(downloadButton);
  expect(EnterpriseAccessApiService.fetchSubsidyHydratedGroupMembersData).toHaveBeenCalledWith(
  mockAssignableSubsidyAccessPolicy.uuid,
@@ -730,6 +735,7 @@ describe('<BudgetDetailPage />', () => {
  show_removed: true,
  is_reversed: true,
  },
+ ['[email protected]'],
  );
  });
 });

src/data/services/EnterpriseAccessApiService.js

@@ -254,8 +254,11 @@ class EnterpriseAccessApiService {
  return EnterpriseAccessApiService.apiClient().post(url, payload);
  }
 
- static fetchSubsidyHydratedGroupMembersData(subsidyAccessPolicyUUID, options) {
+ static fetchSubsidyHydratedGroupMembersData(subsidyAccessPolicyUUID, options, selectedEmails) {
  const queryParams = new URLSearchParams(options);
+ if (selectedEmails) {
+ selectedEmails.forEach((email) => queryParams.append('learners', email));
+ }
  const subsidyHydratedGroupLearnersEndpoint = `${EnterpriseAccessApiService.baseUrl}/subsidy-access-policies/${subsidyAccessPolicyUUID}/group-members?${queryParams.toString()}`;
  return EnterpriseAccessApiService.apiClient().get(subsidyHydratedGroupLearnersEndpoint);
  }