Fix visual and performance bugs with AssignServiceButton

greenriver · Jan 13, 2025 · 4861a88 · 4861a88
1 parent 68e51f6
commit 4861a88
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/src/components/elements/ButtonTooltipContainer.tsx b/src/components/elements/ButtonTooltipContainer.tsx
@@ -18,6 +18,8 @@ const ButtonTooltipContainer = ({
       arrow
       {...props}
     >
+      {/* This inner `span` allows Tooltips to appear on disabled Button elements.
+      We sometimes do this to explain why the button is disabled.*/}
       <span>{children}</span>
     </Tooltip>
   );

diff --git a/src/modules/bulkServices/components/AssignServiceButton.tsx b/src/modules/bulkServices/components/AssignServiceButton.tsx
@@ -3,7 +3,7 @@ import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
 import { LoadingButton } from '@mui/lab';
 import { ButtonProps, DialogActions, DialogContent } from '@mui/material';
 import DialogTitle from '@mui/material/DialogTitle';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 
 import * as React from 'react';
 import { useBulkAssignMutations } from '../hooks/useBulkAssignMutations';
@@ -161,4 +161,4 @@ const AssignServiceButton: React.FC<Props> = ({
   );
 };
 
-export default AssignServiceButton;
+export default memo(AssignServiceButton);
diff --git a/src/modules/bulkServices/components/BulkServicesTable.tsx b/src/modules/bulkServices/components/BulkServicesTable.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { ServicePeriod } from '../bulkServicesTypes';
 import AssignServiceButton from './AssignServiceButton';
@@ -108,23 +109,26 @@ const BulkServicesTable: React.FC<Props> = ({
         },
         {
           ...BASE_ACTION_COLUMN_DEF,
+          width: '180px',
           render: (row: RowType) => (
             <TableRowActions
               record={row}
               recordName={clientBriefName(row)}
               primaryAction={
-                <AssignServiceButton
-                  client={row}
-                  queryVariables={mutationQueryVariables}
-                  tableLoading={loading}
-                  disabled={anyRowsSelected}
-                  disabledReason={
-                    anyRowsSelected
-                      ? 'Deselect checkboxes to assign clients individually.'
-                      : undefined
-                  }
-                  serviceTypeName={serviceTypeName}
-                />
+                <Box sx={{ width: '100%' }}>
+                  <AssignServiceButton
+                    client={row}
+                    queryVariables={mutationQueryVariables}
+                    tableLoading={loading}
+                    disabled={anyRowsSelected}
+                    disabledReason={
+                      anyRowsSelected
+                        ? 'Deselect checkboxes to assign clients individually.'
+                        : undefined
+                    }
+                    serviceTypeName={serviceTypeName}
+                  />
+                </Box>
               }
               secondaryActionConfigs={[
                 getViewClientMenuItem(row),