From cdc023eb33809a445077bb9faa38afa3f71b375d Mon Sep 17 00:00:00 2001 From: Evangelos Skopelitis Date: Tue, 17 Sep 2024 11:36:23 -0400 Subject: [PATCH] frontend: AlertNotification: Improve alert component This change addresses issues with accessibility and clarity for the AlertNotification component. This now uses the React Alert component from Material UI and displays a more descriptive error message: "Lost connection to the cluster". Fixes: #2314 Signed-off-by: Evangelos Skopelitis --- .../components/common/AlertNotification.tsx | 44 ++++++++++++------- frontend/src/i18n/locales/de/translation.json | 2 +- frontend/src/i18n/locales/en/translation.json | 2 +- frontend/src/i18n/locales/es/translation.json | 2 +- frontend/src/i18n/locales/fr/translation.json | 2 +- frontend/src/i18n/locales/pt/translation.json | 2 +- 6 files changed, 32 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/common/AlertNotification.tsx b/frontend/src/components/common/AlertNotification.tsx index 673d75b64c..29b18ee565 100644 --- a/frontend/src/components/common/AlertNotification.tsx +++ b/frontend/src/components/common/AlertNotification.tsx @@ -1,11 +1,10 @@ -import { Box, Button } from '@mui/material'; +import { Alert, Button, Typography } from '@mui/material'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { matchPath, useLocation } from 'react-router-dom'; import { testClusterHealth } from '../../lib/k8s/apiProxy'; import { getRoute, getRoutePath } from '../../lib/router'; import { getCluster } from '../../lib/util'; -import { useSidebarInfo } from '../Sidebar'; // in ms const NETWORK_STATUS_CHECK_TIME = 5000; @@ -20,7 +19,6 @@ export interface PureAlertNotificationProps { const ROUTES_WITHOUT_ALERT = ['login', 'token', 'settingsCluster']; export function PureAlertNotification({ checkerFunction }: PureAlertNotificationProps) { - const { width: sidebarWidth } = useSidebarInfo(); const [networkStatusCheckTimeFactor, setNetworkStatusCheckTimeFactor] = React.useState(0); const [error, setError] = React.useState(null); const [intervalID, setIntervalID] = React.useState(null); @@ -99,32 +97,33 @@ export function PureAlertNotification({ checkerFunction }: PureAlertNotification } return ( - ({ color: theme.palette.common.white, + background: theme.palette.error.main, textAlign: 'center', display: 'flex', - paddingTop: theme.spacing(1), - paddingBottom: theme.spacing(0.5), + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(1), + paddingRight: theme.spacing(3), justifyContent: 'center', position: 'fixed', zIndex: theme.zIndex.snackbar + 1, - width: '100%', top: '0', - height: '3.8vh', + alignItems: 'center', + left: '50%', + width: 'auto', + transform: 'translateX(-50%)', })} - bgcolor="error.main" - paddingRight={sidebarWidth} - > - - {t('Something went wrong.')} + action={ - - + } + > + ({ + paddingTop: theme.spacing(0.5), + fontWeight: 'bold', + fontSize: '16px', + })} + > + {t('translation|Lost connection to the cluster.')} + + ); } diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json index db0f293cde..152a4a8424 100644 --- a/frontend/src/i18n/locales/de/translation.json +++ b/frontend/src/i18n/locales/de/translation.json @@ -136,7 +136,7 @@ "Reason": "Ereignis", "Last Seen": "Zuletzt gesehen", "Offline": "Offline", - "Something went wrong.": "Etwas ist schief gelaufen.", + "Lost connection to the cluster.": "", "No": "Nein", "Yes": "Ja", "Toggle fullscreen": "Vollbild ein/aus", diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json index 9dc99c6b70..a0df94fb9a 100644 --- a/frontend/src/i18n/locales/en/translation.json +++ b/frontend/src/i18n/locales/en/translation.json @@ -136,7 +136,7 @@ "Reason": "Reason", "Last Seen": "Last Seen", "Offline": "Offline", - "Something went wrong.": "Something went wrong.", + "Lost connection to the cluster.": "Lost connection to the cluster.", "No": "No", "Yes": "Yes", "Toggle fullscreen": "Toggle fullscreen", diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json index 87f3d722b4..ff36df645b 100644 --- a/frontend/src/i18n/locales/es/translation.json +++ b/frontend/src/i18n/locales/es/translation.json @@ -136,7 +136,7 @@ "Reason": "Razón", "Last Seen": "Últi. ocurrencia", "Offline": "Desconectado", - "Something went wrong.": "Algo ha fallado.", + "Lost connection to the cluster.": "", "No": "No", "Yes": "Sí", "Toggle fullscreen": "Alternar pantalla completa", diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json index 8e0612660c..96bda4746b 100644 --- a/frontend/src/i18n/locales/fr/translation.json +++ b/frontend/src/i18n/locales/fr/translation.json @@ -136,7 +136,7 @@ "Reason": "Motif", "Last Seen": "Dernière vue", "Offline": "Hors ligne", - "Something went wrong.": "Quelque chose s'est mal passé.", + "Lost connection to the cluster.": "", "No": "Non", "Yes": "Oui", "Toggle fullscreen": "Basculer en mode plein écran", diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json index 868cb61894..e5c1ae4b2f 100644 --- a/frontend/src/i18n/locales/pt/translation.json +++ b/frontend/src/i18n/locales/pt/translation.json @@ -136,7 +136,7 @@ "Reason": "Razão", "Last Seen": "Visto últ. vez", "Offline": "Desconectado", - "Something went wrong.": "Algo correu mal.", + "Lost connection to the cluster.": "", "No": "Não", "Yes": "Sim", "Toggle fullscreen": "Alternar ecrã inteiro",