fix: cleanup surrounding status chip implementation (#1308)

openedx · Sep 24, 2024 · 045eefb · 045eefb
1 parent 9aef684
commit 045eefb
Show file tree

Hide file tree

Showing 19 changed files with 504 additions and 297 deletions.
diff --git a/src/components/learner-credit-management/assignments-status-chips/FailedBadEmail.jsx b/src/components/learner-credit-management/assignments-status-chips/FailedBadEmail.jsx
@@ -6,7 +6,7 @@ import { getConfig } from '@edx/frontend-platform/config';
 
 import BaseModalPopup from './BaseModalPopup';
 import EVENT_NAMES from '../../../eventTracking';
-import { useAssignmentStatusChip } from '../data';
+import { useStatusChip } from '../data';
 
 const FailedBadEmail = ({ learnerEmail, trackEvent }) => {
   const [target, setTarget] = useState(null);
@@ -20,7 +20,7 @@ const FailedBadEmail = ({ learnerEmail, trackEvent }) => {
     closeChipModal,
     isChipModalOpen,
     helpCenterTrackEvent,
-  } = useAssignmentStatusChip({
+  } = useStatusChip({
     chipInteractionEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_EMAIL,
     chipHelpCenterEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_EMAIL_HELP_CENTER,
     trackEvent,

diff --git a/src/components/learner-credit-management/assignments-status-chips/FailedCancellation.jsx b/src/components/learner-credit-management/assignments-status-chips/FailedCancellation.jsx
@@ -6,7 +6,7 @@ import { getConfig } from '@edx/frontend-platform/config';
 
 import BaseModalPopup from './BaseModalPopup';
 import EVENT_NAMES from '../../../eventTracking';
-import { useAssignmentStatusChip } from '../data';
+import { useStatusChip } from '../data';
 
 const FailedCancellation = ({ trackEvent }) => {
   const [target, setTarget] = useState(null);
@@ -20,7 +20,7 @@ const FailedCancellation = ({ trackEvent }) => {
     closeChipModal,
     isChipModalOpen,
     helpCenterTrackEvent,
-  } = useAssignmentStatusChip({
+  } = useStatusChip({
     chipInteractionEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_CANCELLATION,
     chipHelpCenterEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_CANCELLATION_HELP_CENTER,
     trackEvent,

diff --git a/src/components/learner-credit-management/assignments-status-chips/FailedRedemption.jsx b/src/components/learner-credit-management/assignments-status-chips/FailedRedemption.jsx
@@ -7,7 +7,7 @@ import { getConfig } from '@edx/frontend-platform/config';
 
 import BaseModalPopup from './BaseModalPopup';
 import EVENT_NAMES from '../../../eventTracking';
-import { useAssignmentStatusChip } from '../data';
+import { useStatusChip } from '../data';
 
 const FailedRedemption = ({ trackEvent }) => {
   const [target, setTarget] = useState(null);
@@ -22,7 +22,7 @@ const FailedRedemption = ({ trackEvent }) => {
     closeChipModal,
     isChipModalOpen,
     helpCenterTrackEvent,
-  } = useAssignmentStatusChip({
+  } = useStatusChip({
     chipInteractionEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_REDEMPTION,
     chipHelpCenterEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_REDEMPTION_HELP_CENTER,
     trackEvent,

diff --git a/src/components/learner-credit-management/assignments-status-chips/FailedReminder.jsx b/src/components/learner-credit-management/assignments-status-chips/FailedReminder.jsx
@@ -5,7 +5,7 @@ import { Error } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform/config';
 import BaseModalPopup from './BaseModalPopup';
 import EVENT_NAMES from '../../../eventTracking';
-import { useAssignmentStatusChip } from '../data';
+import { useStatusChip } from '../data';
 
 const FailedReminder = ({ trackEvent }) => {
   const [target, setTarget] = useState(null);
@@ -19,7 +19,7 @@ const FailedReminder = ({ trackEvent }) => {
     closeChipModal,
     isChipModalOpen,
     helpCenterTrackEvent,
-  } = useAssignmentStatusChip({
+  } = useStatusChip({
     chipInteractionEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_REMINDER,
     chipHelpCenterEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_REMINDER_HELP_CENTER,
     trackEvent,

diff --git a/src/components/learner-credit-management/assignments-status-chips/FailedSystem.jsx b/src/components/learner-credit-management/assignments-status-chips/FailedSystem.jsx
@@ -7,7 +7,7 @@ import { getConfig } from '@edx/frontend-platform/config';
 
 import BaseModalPopup from './BaseModalPopup';
 import EVENT_NAMES from '../../../eventTracking';
-import { useAssignmentStatusChip } from '../data';
+import { useStatusChip } from '../data';
 
 const FailedSystem = ({ trackEvent }) => {
   const [target, setTarget] = useState(null);
@@ -21,7 +21,7 @@ const FailedSystem = ({ trackEvent }) => {
     closeChipModal,
     isChipModalOpen,
     helpCenterTrackEvent,
-  } = useAssignmentStatusChip({
+  } = useStatusChip({
     chipInteractionEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_SYSTEM,
     chipHelpCenterEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_FAILED_SYSTEM_HELP_CENTER,
     trackEvent,

diff --git a/src/components/learner-credit-management/assignments-status-chips/IncompleteAssignment.jsx b/src/components/learner-credit-management/assignments-status-chips/IncompleteAssignment.jsx
@@ -5,7 +5,7 @@ import { Error } from '@openedx/paragon/icons';
 
 import { getConfig } from '@edx/frontend-platform/config';
 import BaseModalPopup from './BaseModalPopup';
-import { useAssignmentStatusChip } from '../data';
+import { useStatusChip } from '../data';
 import EVENT_NAMES from '../../../eventTracking';
 import { configuration } from '../../../config';
 
@@ -21,7 +21,7 @@ const IncompleteAssignment = ({ trackEvent }) => {
     closeChipModal,
     isChipModalOpen,
     helpCenterTrackEvent,
-  } = useAssignmentStatusChip({
+  } = useStatusChip({
     chipInteractionEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_INCOMPLETE_ASSIGNMENT,
     chipHelpCenterEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_INCOMPLETE_ASSIGNMENT_HELP_CENTER,
     trackEvent,

diff --git a/src/components/learner-credit-management/assignments-status-chips/NotifyingLearner.jsx b/src/components/learner-credit-management/assignments-status-chips/NotifyingLearner.jsx
@@ -4,7 +4,7 @@ import { Chip } from '@openedx/paragon';
 import { Send } from '@openedx/paragon/icons';
 import BaseModalPopup from './BaseModalPopup';
 import EVENT_NAMES from '../../../eventTracking';
-import { useAssignmentStatusChip } from '../data';
+import { useStatusChip } from '../data';
 
 const NotifyingLearner = ({ learnerEmail, trackEvent }) => {
   const [target, setTarget] = useState(null);
@@ -14,7 +14,7 @@ const NotifyingLearner = ({ learnerEmail, trackEvent }) => {
     openChipModal,
     closeChipModal,
     isChipModalOpen,
-  } = useAssignmentStatusChip({
+  } = useStatusChip({
     chipInteractionEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_NOTIFY_LEARNER,
     trackEvent,
   });

diff --git a/src/components/learner-credit-management/assignments-status-chips/WaitingForLearner.jsx b/src/components/learner-credit-management/assignments-status-chips/WaitingForLearner.jsx
@@ -5,7 +5,7 @@ import { Timelapse } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform/config';
 
 import BaseModalPopup from './BaseModalPopup';
-import { ASSIGNMENT_ENROLLMENT_DEADLINE, useAssignmentStatusChip } from '../data';
+import { ASSIGNMENT_ENROLLMENT_DEADLINE, useStatusChip } from '../data';
 import EVENT_NAMES from '../../../eventTracking';
 
 const WaitingForLearner = ({ learnerEmail, trackEvent }) => {
@@ -20,7 +20,7 @@ const WaitingForLearner = ({ learnerEmail, trackEvent }) => {
     closeChipModal,
     isChipModalOpen,
     helpCenterTrackEvent,
-  } = useAssignmentStatusChip({
+  } = useStatusChip({
     chipInteractionEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_WAITING_FOR_LEARNER,
     chipHelpCenterEventName: BUDGET_DETAILS_ASSIGNED_DATATABLE_CHIP_WAITING_FOR_LEARNER_HELP_CENTER,
     trackEvent,

diff --git a/src/components/learner-credit-management/data/hooks/index.js b/src/components/learner-credit-management/data/hooks/index.js
@@ -12,7 +12,7 @@ export { default as useSuccessfulAssignmentToastContextValue } from './useSucces
 export { default as useSuccessfulCancellationToastContextValue } from './useSuccessfulCancellationToastContextValue';
 export { default as useSuccessfulReminderToastContextValue } from './useSuccessfulReminderToastContextValue';
 export { default as useEnterpriseOffer } from './useEnterpriseOffer';
-export { default as useAssignmentStatusChip } from './useAssignmentStatusChip';
+export { default as useStatusChip } from './useStatusChip';
 export { default as useEnterpriseGroupLearners } from './useEnterpriseGroupLearners';
 export { default as useEnterpriseGroupMembersTableData } from './useEnterpriseGroupMembersTableData';
 export { default as useEnterpriseCustomer } from './useEnterpriseCustomer';

diff --git a/...nt/data/hooks/useAssignmentStatusChip.jsx → ...t-management/data/hooks/useStatusChip.jsx b/...nt/data/hooks/useAssignmentStatusChip.jsx → ...t-management/data/hooks/useStatusChip.jsx
@@ -13,7 +13,7 @@ import { useToggle } from '@openedx/paragon';
  * isChipModalOpen: *
  * }}
  */
-export default function useAssignmentStatusChip({ chipInteractionEventName, chipHelpCenterEventName, trackEvent }) {
+export default function useStatusChip({ chipInteractionEventName, chipHelpCenterEventName, trackEvent }) {
   const [isChipModalOpen, open, close] = useToggle(false);
   const openChipModal = () => {
     open();

diff --git a/src/components/learner-credit-management/members-tab/LearnerCreditGroupMembersTable.jsx b/src/components/learner-credit-management/members-tab/LearnerCreditGroupMembersTable.jsx
@@ -83,93 +83,95 @@ const LearnerCreditGroupMembersTable = ({
 }) => {
   const intl = useIntl();
   return (
-    <DataTable
-      isSortable
-      manualSortBy
-      isSelectable
-      SelectionStatusComponent={DataTable.ControlledSelectionStatus}
-      manualSelectColumn={selectColumn}
-      isPaginated
-      manualPagination
-      isFilterable
-      manualFilters
-      isLoading={isLoading}
-      defaultColumnValues={{ Filter: TableTextFilter }}
-      FilterStatusComponent={FilterStatus}
-      numBreakoutFilters={2}
-      tableActions={[<GroupMembersCsvDownloadTableAction />]}
-      columns={[
-        {
-          Header: intl.formatMessage({
-            id: 'learnerCreditManagement.budgetDetail.membersTab.columns.memberDetails',
-            defaultMessage: 'Member Details',
-            description: 'Column header for the Member Details column in the Members tab of the Budget Detail page',
-          }),
-          accessor: 'memberDetails',
-          Cell: MemberDetailsTableCell,
-        },
-        {
-          Header: MemberStatusTableColumnHeader,
-          accessor: 'status',
-          Cell: MemberStatusTableCell,
-          Filter: removedGroupMembersCount > 0 ? (
-            <MembersTableSwitchFilter removedGroupMembersCount={removedGroupMembersCount} />
-          ) : <div />,
-          filter: 'status',
-        },
-        {
-          Header: intl.formatMessage({
-            id: 'learnerCreditManagement.budgetDetail.membersTab.columns.recentAction',
-            defaultMessage: 'Recent action',
-            description: 'Column header for the Recent action column in the Members tab of the Budget Detail page',
-          }),
-          accessor: 'recentAction',
-          Cell: ({ row }) => row.original.recentAction,
-          disableFilters: true,
-        },
-        {
-          Header: MemberEnrollmentsTableColumnHeader,
-          accessor: 'enrollmentCount',
-          Cell: ({ row }) => row.original.enrollmentCount,
-          disableFilters: true,
-        },
-      ]}
-      initialTableOptions={{
-        getRowId: row => row?.memberDetails.userEmail,
-        autoResetPage: true,
-      }}
-      initialState={{
-        pageSize: MEMBERS_TABLE_PAGE_SIZE,
-        pageIndex: DEFAULT_PAGE,
-        sortBy: [
-          { id: 'memberDetails', desc: true },
-        ],
-        filters: [],
-      }}
-      bulkActions={[
-        <MemberRemoveAction
-          refresh={refresh}
-          setRefresh={setRefresh}
-          groupUuid={groupUuid}
-        />,
-        <GroupMembersCsvDownloadTableAction />,
-      ]}
-      additionalColumns={[
-        {
-          id: 'action',
-          Header: '',
-          // eslint-disable-next-line react/no-unstable-nested-components
-          Cell: (props) => (
-            <KabobMenu {...props} groupUuid={groupUuid} refresh={refresh} setRefresh={setRefresh} />
-          ),
-        },
-      ]}
-      fetchData={fetchTableData}
-      data={tableData.results}
-      itemCount={tableData.itemCount}
-      pageCount={tableData.pageCount}
-      EmptyTableComponent={CustomDataTableEmptyState}
-    />
+    <span className="budget-detail-assignments">
+      <DataTable
+        isSortable
+        manualSortBy
+        isSelectable
+        SelectionStatusComponent={DataTable.ControlledSelectionStatus}
+        manualSelectColumn={selectColumn}
+        isPaginated
+        manualPagination
+        isFilterable
+        manualFilters
+        isLoading={isLoading}
+        defaultColumnValues={{ Filter: TableTextFilter }}
+        FilterStatusComponent={FilterStatus}
+        numBreakoutFilters={2}
+        tableActions={[<GroupMembersCsvDownloadTableAction />]}
+        columns={[
+          {
+            Header: intl.formatMessage({
+              id: 'learnerCreditManagement.budgetDetail.membersTab.columns.memberDetails',
+              defaultMessage: 'Member Details',
+              description: 'Column header for the Member Details column in the Members tab of the Budget Detail page',
+            }),
+            accessor: 'memberDetails',
+            Cell: MemberDetailsTableCell,
+          },
+          {
+            Header: MemberStatusTableColumnHeader,
+            accessor: 'status',
+            Cell: MemberStatusTableCell,
+            Filter: removedGroupMembersCount > 0 ? (
+              <MembersTableSwitchFilter removedGroupMembersCount={removedGroupMembersCount} />
+            ) : <div />,
+            filter: 'status',
+          },
+          {
+            Header: intl.formatMessage({
+              id: 'learnerCreditManagement.budgetDetail.membersTab.columns.recentAction',
+              defaultMessage: 'Recent action',
+              description: 'Column header for the Recent action column in the Members tab of the Budget Detail page',
+            }),
+            accessor: 'recentAction',
+            Cell: ({ row }) => row.original.recentAction,
+            disableFilters: true,
+          },
+          {
+            Header: MemberEnrollmentsTableColumnHeader,
+            accessor: 'enrollmentCount',
+            Cell: ({ row }) => row.original.enrollmentCount,
+            disableFilters: true,
+          },
+        ]}
+        initialTableOptions={{
+          getRowId: row => row?.memberDetails.userEmail,
+          autoResetPage: true,
+        }}
+        initialState={{
+          pageSize: MEMBERS_TABLE_PAGE_SIZE,
+          pageIndex: DEFAULT_PAGE,
+          sortBy: [
+            { id: 'memberDetails', desc: true },
+          ],
+          filters: [],
+        }}
+        bulkActions={[
+          <MemberRemoveAction
+            refresh={refresh}
+            setRefresh={setRefresh}
+            groupUuid={groupUuid}
+          />,
+          <GroupMembersCsvDownloadTableAction />,
+        ]}
+        additionalColumns={[
+          {
+            id: 'action',
+            Header: '',
+            // eslint-disable-next-line react/no-unstable-nested-components
+            Cell: (props) => (
+              <KabobMenu {...props} groupUuid={groupUuid} refresh={refresh} setRefresh={setRefresh} />
+            ),
+          },
+        ]}
+        fetchData={fetchTableData}
+        data={tableData.results}
+        itemCount={tableData.itemCount}
+        pageCount={tableData.pageCount}
+        EmptyTableComponent={CustomDataTableEmptyState}
+      />
+    </span>
   );
 };