Fix block sender partially visible

2 files changed, 15 insertions, 6 deletions

diff --git a/packages/components/containers/filters/spams/Spams.helpers.tsx b/packages/components/containers/filters/spams/Spams.helpers.tsx
index ca1aeaa304..05bb7fe9d4 100644
--- a/packages/components/containers/filters/spams/Spams.helpers.tsx
+++ b/packages/components/containers/filters/spams/Spams.helpers.tsx
@@ -38,7 +38,11 @@ export const getNotificationByAction = (action: SpamListActionName, apiCallstate
 };
 
 export type HandleSpamListActionClick = (type: SpamListActionName, item: SpamItem) => void;
-export const getActionsByLocation = (item: SpamItem, onClick: HandleSpamListActionClick): SpamListAction[] => {
+export const getActionsByLocation = (
+    item: SpamItem,
+    onClick: HandleSpamListActionClick,
+    blockSenderFeatureEnabled: boolean
+): SpamListAction[] => {
     const actions: Record<SpamListActionName, SpamListAction> = {
         block: { name: c('Action').t`Block`, onClick: () => onClick('block', item) },
         unblock: { name: c('Action').t`Remove Block`, onClick: () => onClick('delete', item) },
@@ -51,9 +55,9 @@ export const getActionsByLocation = (item: SpamItem, onClick: HandleSpamListActi
         case 'BLOCKED':
             return [actions.unblock, actions.spam];
         case 'SPAM':
-            return [actions.unspam, actions.block, actions.delete];
+            return [actions.unspam, ...(blockSenderFeatureEnabled ? [actions.block] : []), actions.delete];
         case 'NON_SPAM':
-            return [actions.spam, actions.block, actions.delete];
+            return [actions.spam, ...(blockSenderFeatureEnabled ? [actions.block] : []), actions.delete];
         default:
             throw new Error('Invalid use case');
     }
diff --git a/packages/components/containers/filters/spams/Spams.tsx b/packages/components/containers/filters/spams/Spams.tsx
index b335b1b413..6dcab24294 100644
--- a/packages/components/containers/filters/spams/Spams.tsx
+++ b/packages/components/containers/filters/spams/Spams.tsx
@@ -43,6 +43,7 @@ const Spams = () => {
     const isMounted = useIsMounted();
     const [modalProps, openModal, renderModal] = useModalState();
     const { feature: blockSenderFeature, loading: blockSenderLoading } = useFeature(FeatureCode.BlockSender);
+    const blockSenderFeatureEnabled = blockSenderFeature?.Value === true && !blockSenderLoading;
 
     const { createNotification } = useNotifications();
 
@@ -127,7 +128,7 @@ const Spams = () => {
 
     return blockSenderLoading ? null : (
         <>
-            {blockSenderFeature?.Value === true ? (
+            {blockSenderFeatureEnabled ? (
                 <div className="mb2">
                     <SpamsButtonDropdown
                         title={c('Action').t`Add address`}
@@ -174,7 +175,7 @@ const Spams = () => {
                     <SpamsNav
                         selected={display}
                         onChange={(nextDisplay) => dispatch({ type: 'setDisplay', payload: nextDisplay })}
-                        showBlockSender={blockSenderFeature?.Value === true}
+                        showBlockSender={blockSenderFeatureEnabled}
                     />
                 </>
             )}
@@ -201,7 +202,11 @@ const Spams = () => {
                                     <TableCell className="text-right">
                                         <SpamsButtonDropdown
                                             title="…"
-                                            actions={getActionsByLocation(item, handleMoveSpam)}
+                                            actions={getActionsByLocation(
+                                                item,
+                                                handleMoveSpam,
+                                                blockSenderFeatureEnabled
+                                            )}
                                         />
                                     </TableCell>
                                 </TableRow>