feat: adding cancel and remind actions to the budget assignment table

src/components/learner-credit-management/AssignmentRowActionTableCell.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Icon,
+  IconButton,
+  OverlayTrigger,
+  Stack,
+  Tooltip,
+} from '@edx/paragon';
+import { Mail, DoNotDisturbOn } from '@edx/paragon/icons';
+
+const AssignmentRowActionTableCell = ({ row }) => {
+  const cancelButtonMarginLeft = row.original.state === 'allocated' ? 'ml-2.5' : 'ml-auto';
+  return (
+    <div className="d-flex">
+      {row.original.state === 'allocated' && (
+        <>
+          <OverlayTrigger
+            key="Remind"
+            placement="top"
+            overlay={<Tooltip variant="light" id="tooltip-remind">Remind learner</Tooltip>}
+          >
+            <IconButton
+              className="ml-auto mr-0"
+              src={Mail}
+              iconAs={Icon}
+              // eslint-disable-next-line no-console
+              onClick={() => console.log(`Reminding ${row.original.uuid}`)}
+              data-testid={`remind-assignment-${row.original.uuid}`}
+            />
+          </OverlayTrigger>
+          <Stack direction="horizontal" gap={1} />
+        </>
+      )}
+      <OverlayTrigger
+        key="Cancel"
+        placement="top"
+        overlay={<Tooltip variant="light" id="tooltip-cancel">Cancel assignment</Tooltip>}
+      >
+        <IconButton
+          className={`${cancelButtonMarginLeft} mr-1 text-danger-500`}
+          src={DoNotDisturbOn}
+          iconAs={Icon}
+          // eslint-disable-next-line no-console
+          onClick={() => console.log(`Canceling ${row.original.uuid}`)}
+          data-testid={`cancel-assignment-${row.original.uuid}`}
+        />
+      </OverlayTrigger>
+    </div>
+  );
+};
+
+AssignmentRowActionTableCell.propTypes = {
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      uuid: PropTypes.string.isRequired,
+      state: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default AssignmentRowActionTableCell;

src/components/learner-credit-management/AssignmentTableCancel.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@edx/paragon';
+import { DoNotDisturbOn } from '@edx/paragon/icons';
+
+const AssignmentTableCancelAction = ({ selectedFlatRows, ...rest }) => (
+  // eslint-disable-next-line no-console
+  <Button variant="danger" iconBefore={DoNotDisturbOn} onClick={() => console.log('Cancel', selectedFlatRows, rest)}>
+    {`Cancel (${selectedFlatRows.length})`}
+  </Button>
+);
+
+AssignmentTableCancelAction.propTypes = {
+  selectedFlatRows: PropTypes.arrayOf(PropTypes.shape()),
+};
+
+AssignmentTableCancelAction.defaultProps = {
+  selectedFlatRows: [],
+};
+
+export default AssignmentTableCancelAction;

src/components/learner-credit-management/AssignmentTableRemind.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@edx/paragon';
+import { Mail } from '@edx/paragon/icons';
+
+const AssignmentTableRemindAction = ({ selectedFlatRows, ...rest }) => {
+  const hideRemindAction = selectedFlatRows.some(
+    row => row.original.state !== 'allocated',
+  );
+  if (hideRemindAction) {
+    return null;
+  }
+  return (
+    // eslint-disable-next-line no-console
+    <Button iconBefore={Mail} onClick={() => console.log('Remind', selectedFlatRows, rest)}>
+      {`Remind (${selectedFlatRows.length})`}
+    </Button>
+  );
+};
+
+AssignmentTableRemindAction.propTypes = {
+  selectedFlatRows: PropTypes.arrayOf(PropTypes.shape()),
+};
+
+AssignmentTableRemindAction.defaultProps = {
+  selectedFlatRows: [],
+};
+
+export default AssignmentTableRemindAction;

src/components/learner-credit-management/BudgetAssignmentsTable.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DataTable } from '@edx/paragon';
-
 import TableTextFilter from './TableTextFilter';
 import CustomDataTableEmptyState from './CustomDataTableEmptyState';
 import AssignmentDetailsTableCell from './AssignmentDetailsTableCell';
 import AssignmentStatusTableCell from './AssignmentStatusTableCell';
+import AssignmentRowActionTableCell from './AssignmentRowActionTableCell';
+import AssignmentTableRemindAction from './AssignmentTableRemind';
+import AssignmentTableCancelAction from './AssignmentTableCancel';
 import { DEFAULT_PAGE, PAGE_SIZE, formatPrice } from './data';
 import AssignmentRecentActionTableCell from './AssignmentRecentActionTableCell';
 
@@ -18,6 +20,7 @@ const BudgetAssignmentsTable = ({
 }) => (
   <DataTable
     isSortable
+    isSelectable
     manualSortBy
     isPaginated
     manualPagination
@@ -49,6 +52,13 @@ const BudgetAssignmentsTable = ({
         disableFilters: true,
       },
     ]}
+    additionalColumns={[
+      {
+        Header: '',
+        Cell: AssignmentRowActionTableCell,
+        id: 'action',
+      },
+    ]}
     initialTableOptions={{
       getRowId: row => row?.uuid?.toString(),
     }}
@@ -63,6 +73,10 @@ const BudgetAssignmentsTable = ({
     itemCount={tableData?.count || 0}
     pageCount={tableData?.numPages || 1}
     EmptyTableComponent={CustomDataTableEmptyState}
+    bulkActions={[
+      <AssignmentTableRemindAction />,
+      <AssignmentTableCancelAction />,
+    ]}
   />
 );
 

src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx

@@ -701,4 +701,57 @@ describe('<BudgetDetailPage />', () => {
 
     expect(screen.getByText('loading budget activity overview')).toBeInTheDocument();
   });
+
+  it('displays bulk actions with remind when row selected and state allocated', () => {
+    useSubsidyAccessPolicy.mockReturnValue({
+      isInitialLoading: false,
+      data: mockAssignableSubsidyAccessPolicy,
+    });
+    useBudgetContentAssignments.mockReturnValue({
+      isLoading: false,
+      contentAssignments: {
+        count: 1,
+        results: [
+          {
+            uuid: 'test-uuid',
+            learnerEmail: mockLearnerEmail,
+            contentKey: mockCourseKey,
+            state: 'allocated',
+          },
+        ],
+        numPages: 1,
+        currentPage: 1,
+      },
+    });
+    renderWithRouter(<BudgetDetailPageWrapper />);
+    const cancelRowAction = screen.getByTestId('cancel-assignment-test-uuid');
+    const remindRowAction = screen.getByTestId('remind-assignment-test-uuid');
+    expect(cancelRowAction).toBeInTheDocument();
+    expect(remindRowAction).toBeInTheDocument();
+  });
+
+  it('hides remind row action when state not allocated', () => {
+    useSubsidyAccessPolicy.mockReturnValue({
+      isInitialLoading: false,
+      data: mockAssignableSubsidyAccessPolicy,
+    });
+    useBudgetContentAssignments.mockReturnValue({
+      isLoading: false,
+      contentAssignments: {
+        count: 1,
+        results: [
+          {
+            uuid: 'test-uuid',
+            learnerEmail: mockLearnerEmail,
+            contentKey: mockCourseKey,
+            state: 'something else',
+          },
+        ],
+        numPages: 1,
+        currentPage: 1,
+      },
+    });
+    renderWithRouter(<BudgetDetailPageWrapper />);
+    expect(screen.queryByTestId('remind-assignment-test-uuid')).not.toBeInTheDocument();
+  });
 });