Merge pull request #516 from etn-ccis/feature/blui-4933-error-transla…

…tions Blui 4933 error translations
etn-ccis · Nov 20, 2023 · 4eb92ea · 4eb92ea
2 parents 6d1c6a4 + 24ec601
commit 4eb92ea
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/login-workflow/CHANGELOG.md b/login-workflow/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+-   Translations not working while throwing error from actions ([#513](https://github.com/etn-ccis/blui-react-workflows/issues/513)).
+-   Error in the dialog / message box does not translate ([#510](https://github.com/etn-ccis/blui-react-workflows/issues/510)).
+-   Title missing in the messageBoxConfig of ErrorManager ([#507](https://github.com/etn-ccis/blui-react-workflows/issues/507)).
 -   Added loader to the login action ([#511](https://github.com/etn-ccis/blui-react-workflows/issues/511)).
 
 ## v4.0.0 (October 4, 2023)

diff --git a/login-workflow/example/src/actions/AuthUIActions.tsx b/login-workflow/example/src/actions/AuthUIActions.tsx
@@ -90,7 +90,7 @@ export const ProjectAuthUIActions: AuthUIActionsWithApp = (appHelper) => ({
 
         if (isRandomFailure()) {
             // reject(new Error('LOGIN.GENERIC_ERROR'));
-            throw new Error('LOGIN.INVALID_CREDENTIALS');
+            throw new Error('bluiAuth:LOGIN.INVALID_CREDENTIALS');
         }
 
         LocalStorage.saveAuthCredentials(email, email);

diff --git a/login-workflow/src/components/Error/ErrorManager.tsx b/login-workflow/src/components/Error/ErrorManager.tsx
@@ -33,6 +33,7 @@ export type ErrorManagerProps = {
         dismissLabel?: string;
     };
     messageBoxConfig?: {
+        title?: string;
         dismissible?: boolean;
         position?: 'top' | 'bottom';
         fontColor?: string;
@@ -79,7 +80,7 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
             <BasicDialog
                 open={error.length > 0}
                 title={dialogConfig?.title ?? t('bluiCommon:MESSAGES.ERROR')}
-                body={error}
+                body={t(error)}
                 onClose={onClose}
                 dismissButtonText={dialogConfig?.dismissLabel}
             />
@@ -92,7 +93,8 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
 
         return (
             <ErrorMessageBox
-                errorMessage={error}
+                title={dialogConfig?.title ?? t('bluiCommon:MESSAGES.ERROR')}
+                errorMessage={t(error)}
                 dismissible={dismissible}
                 sx={sx}
                 backgroundColor={backgroundColor}

diff --git a/login-workflow/src/components/Error/ErrorMessageBox.tsx b/login-workflow/src/components/Error/ErrorMessageBox.tsx
@@ -8,6 +8,10 @@ export type ErrorMessageBoxProps = {
     /**
      * The text to show in the title
      */
+    title: string;
+    /**
+     * The text to show in the message
+     */
     errorMessage: string;
 
     /**
@@ -41,7 +45,8 @@ export type ErrorMessageBoxProps = {
 /**
  * Component that renders a basic message box with an error message and a configurable dismiss button.
  *
- * @param errorMessage text to show in the title
+ * @param text to show as the title
+ * @param errorMessage text to show in the message
  * @param backgroundColor the background color of the message box
  * @param dismissible whether the message box can be dismissed
  * @param fontColor the font color of the text inside the message box
@@ -51,7 +56,7 @@ export type ErrorMessageBoxProps = {
  * @category Component
  */
 const ErrorMessageBox = (props: ErrorMessageBoxProps): JSX.Element => {
-    const { errorMessage, backgroundColor, dismissible = true, fontColor, onClose = (): void => {}, sx } = props;
+    const { title, errorMessage, backgroundColor, dismissible = true, fontColor, onClose = (): void => {}, sx } = props;
 
     return (
         <Box
@@ -81,7 +86,10 @@ const ErrorMessageBox = (props: ErrorMessageBoxProps): JSX.Element => {
                     }}
                 />
             )}
-            <Typography variant="body2">{errorMessage}</Typography>
+            <Box>
+                <Typography>{title}</Typography>
+                <Typography variant="body2">{errorMessage}</Typography>
+            </Box>
         </Box>
     );
 };

diff --git a/login-workflow/src/contexts/ErrorContext/useErrorManager.tsx b/login-workflow/src/contexts/ErrorContext/useErrorManager.tsx
@@ -24,7 +24,6 @@ export const useErrorManager = (): {
         }
         return {
             ...errorConfig,
-            dialogConfig: { title: 'Error' },
             error: err.message,
             onClose: (): void => {
                 setError(new Error());