fix(PN-13257): add description to button in notifications table (#1491)

pagopa · Mar 3, 2025 · 5988932 · 5988932
1 parent d2534c9
commit 5988932
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 26 deletions.
diff --git a/packages/pn-commons/src/components/Data/PnTable/PnTableBodyCell.tsx b/packages/pn-commons/src/components/Data/PnTable/PnTableBodyCell.tsx
@@ -1,10 +1,11 @@
-import { SxProps, TableCell } from '@mui/material';
+import { TableCell, TableCellProps } from '@mui/material';
 import { ButtonNaked } from '@pagopa/mui-italia';
+
 import { buttonNakedInheritStyle } from '../../../utility';
 
 export type PnTableBodyCellProps = {
   testId?: string;
-  cellProps?: SxProps;
+  cellProps?: TableCellProps;
   onClick?: () => void;
   children: React.ReactNode;
 };
@@ -18,8 +19,9 @@ const PnTableBodyCell: React.FC<PnTableBodyCellProps> = ({
   <TableCell
     scope="col"
     data-testid={testId}
+    {...cellProps}
     sx={{
-      ...cellProps!,
+      ...cellProps?.sx,
       borderBottom: 'none',
     }}
   >

diff --git a/packages/pn-commons/src/components/Notifications/NotificationsDataSwitch.tsx b/packages/pn-commons/src/components/Notifications/NotificationsDataSwitch.tsx
@@ -1,4 +1,4 @@
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import { Box, Typography } from '@mui/material';
 import { ButtonNaked } from '@pagopa/mui-italia';
 
@@ -22,13 +22,15 @@ const ActionButton: React.FC<{
   handleRowClick?: (iun: string, mandateId?: string) => void;
 }> = ({ mandateId, iun, handleRowClick }) => (
   <ButtonNaked
+    color="primary"
     data-testid="goToNotificationDetail"
     onClick={() => handleRowClick && handleRowClick(iun, mandateId)}
+    endIcon={<ArrowForwardIosIcon />}
     aria-label={getLocalizedOrDefaultLabel('notifications', 'table.aria-action-table', undefined, {
       iun,
     })}
   >
-    <ChevronRightIcon color="primary" />
+    {getLocalizedOrDefaultLabel('notifications', 'table.show-detail')}
   </ButtonNaked>
 );
 

diff --git a/packages/pn-pa-webapp/public/locales/it/notifiche.json b/packages/pn-pa-webapp/public/locales/it/notifiche.json
@@ -38,7 +38,7 @@
     "groups": "Gruppi",
     "status": "Stato",
     "show-detail": "Vedi dettaglio",
-    "aria-action-table": "Vedi dettaglio notifica con iun : {{iun}}"
+    "aria-action-table": "Vedi dettaglio notifica con iun: {{iun}}"
   },
   "sort": {
     "title": "Ordina",
@@ -577,4 +577,4 @@
     "language-settings-title": "Impostazioni lingua",
     "language-settings-subtitle": "In questa sezione puoi scegliere una lingua aggiuntiva\ncon cui inviare la notifica ai destinatari, oltre all'italiano."
   }
-}
+}
diff --git a/packages/pn-pa-webapp/src/components/Notifications/DesktopNotifications.tsx b/packages/pn-pa-webapp/src/components/Notifications/DesktopNotifications.tsx
@@ -106,7 +106,7 @@ const DesktopNotifications = ({
     {
       id: 'sentAt',
       label: t('table.date'),
-      cellProps: { width: '10%' },
+      cellProps: { width: '9%' },
       sortable: false, // TODO: will be re-enabled in PN-1124
     },
     {
@@ -118,7 +118,7 @@ const DesktopNotifications = ({
     {
       id: 'subject',
       label: t('table.subject'),
-      cellProps: { width: '19%' },
+      cellProps: { width: '18%' },
     },
     {
       id: 'iun',
@@ -128,18 +128,18 @@ const DesktopNotifications = ({
     {
       id: 'group',
       label: t('table.groups'),
-      cellProps: { width: '8%' },
+      cellProps: { width: '6%' },
     },
     {
       id: 'notificationStatus',
       label: t('table.status'),
-      cellProps: { width: '18%' },
+      cellProps: { width: '16%' },
       sortable: false, // TODO: will be re-enabled in PN-1124
     },
     {
       id: 'action',
       label: '',
-      cellProps: { width: '6%' },
+      cellProps: { width: '12%', align: 'right' },
       sortable: false,
     },
   ];

diff --git a/packages/pn-pa-webapp/src/components/Notifications/NotificationsDataSwitch.tsx b/packages/pn-pa-webapp/src/components/Notifications/NotificationsDataSwitch.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import { Box, Typography } from '@mui/material';
 import {
   CustomTagGroup,
@@ -28,11 +28,13 @@ const ActionButton: React.FC<{ iun: string; handleRowClick?: (iun: string) => vo
   const { t } = useTranslation(['notifiche']);
   return (
     <ButtonNaked
+      color="primary"
       data-testid="goToNotificationDetail"
       onClick={() => handleRowClick && handleRowClick(iun)}
       aria-label={t('table.aria-action-table', { iun })}
+      endIcon={<ArrowForwardIosIcon />}
     >
-      <ChevronRightIcon color="primary" />
+      {t('table.show-detail')}
     </ButtonNaked>
   );
 };

diff --git a/packages/pn-personafisica-webapp/public/locales/it/notifiche.json b/packages/pn-personafisica-webapp/public/locales/it/notifiche.json
@@ -7,7 +7,7 @@
     "iun": "Codice IUN",
     "status": "Stato",
     "show-detail": "Vedi dettaglio",
-    "aria-action-table": "Vedi dettaglio notifica con iun : {{iun}}"
+    "aria-action-table": "Vedi dettaglio notifica con iun: {{iun}}"
   },
   "filters": {
     "iun": "Cerca per Codice IUN",
@@ -409,4 +409,4 @@
     "returned-to-sender-description-monorecipient": "Il destinatario risulta deceduto.",
     "returned-to-sender-description-multirecipient": "Tutti i destinatari risultano deceduti."
   }
-}
+}
diff --git a/packages/pn-personafisica-webapp/src/components/Notifications/DesktopNotifications.tsx b/packages/pn-personafisica-webapp/src/components/Notifications/DesktopNotifications.tsx
@@ -102,7 +102,7 @@ const DesktopNotifications = ({
     {
       id: 'sender',
       label: t('table.mittente'),
-      cellProps: { width: '19%' },
+      cellProps: { width: '15%' },
       sortable: false, // TODO: will be re-enabled in PN-1124
     },
     {
@@ -113,18 +113,18 @@ const DesktopNotifications = ({
     {
       id: 'iun',
       label: t('table.iun'),
-      cellProps: { width: '27%' },
+      cellProps: { width: '24%' },
     },
     {
       id: 'notificationStatus',
       label: t('table.status'),
-      cellProps: { width: '18%' },
+      cellProps: { width: '17%' },
       sortable: false, // TODO: will be re-enabled in PN-1124
     },
     {
       id: 'action',
       label: '',
-      cellProps: { width: '6%' },
+      cellProps: { width: '14%', align: 'right' },
     },
   ];
 

diff --git a/packages/pn-personagiuridica-webapp/public/locales/it/notifiche.json b/packages/pn-personagiuridica-webapp/public/locales/it/notifiche.json
@@ -13,7 +13,7 @@
     "status": "Stato",
     "show-detail": "Vedi dettaglio",
     "group-selector-title": "Menu selezione gruppo",
-    "aria-action-table": "Vedi dettaglio notifica con iun : {{iun}}"
+    "aria-action-table": "Vedi dettaglio notifica con iun: {{iun}}"
   },
   "filters": {
     "iun": "Cerca per Codice IUN",
@@ -410,4 +410,4 @@
     "returned-to-sender-description-monorecipient": "Il destinatario risulta deceduto.",
     "returned-to-sender-description-multirecipient": "Tutti i destinatari risultano deceduti."
   }
-}
+}
diff --git a/packages/pn-personagiuridica-webapp/src/components/Notifications/DesktopNotifications.tsx b/packages/pn-personagiuridica-webapp/src/components/Notifications/DesktopNotifications.tsx
@@ -80,7 +80,7 @@ const DesktopNotifications = ({
     {
       id: 'sender',
       label: t('table.mittente'),
-      cellProps: { width: '19%' },
+      cellProps: { width: '15%' },
       sortable: false, // TODO: will be re-enabled in PN-1124
     },
     {
@@ -91,18 +91,18 @@ const DesktopNotifications = ({
     {
       id: 'iun',
       label: t('table.iun'),
-      cellProps: { width: '27%' },
+      cellProps: { width: '24%' },
     },
     {
       id: 'notificationStatus',
       label: t('table.status'),
-      cellProps: { width: '18%' },
+      cellProps: { width: '17%' },
       sortable: false, // TODO: will be re-enabled in PN-1124
     },
     {
       id: 'action',
       label: '',
-      cellProps: { width: '6%' },
+      cellProps: { width: '14%', align: 'right' },
     },
   ];