From 3eae0645abbe0d38f9672ba9d1bc9eb3b6a4b2a3 Mon Sep 17 00:00:00 2001
From: Maciek Sitkowski <58401630+sitek94@users.noreply.github.com>
Date: Wed, 13 Oct 2021 11:07:29 +0200
Subject: [PATCH] fix: add translated close button label in alert messages
 (#43810)

---
 .../components/Donation/DonateCompletion.tsx  |  6 ++++-
 client/src/components/Flash/index.tsx         |  1 +
 .../src/components/formHelpers/FormFields.js  |  7 +++++-
 client/src/components/settings/about.tsx      |  4 +++-
 client/src/components/settings/email.tsx      |  6 ++++-
 client/src/components/settings/username.tsx   | 22 ++++++++++++++-----
 client/src/pages/donate.tsx                   |  2 +-
 7 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Donation/DonateCompletion.tsx b/client/src/components/Donation/DonateCompletion.tsx
index 955bbdb6e3..d3633cf4a2 100644
--- a/client/src/components/Donation/DonateCompletion.tsx
+++ b/client/src/components/Donation/DonateCompletion.tsx
@@ -36,7 +36,11 @@ function DonateCompletion({
     : `${t('donate.error')}`;
 
   return (
-    <Alert bsStyle={style} className='donation-completion'>
+    <Alert
+      bsStyle={style}
+      className='donation-completion'
+      closeLabel={t('buttons.close')}
+    >
       <h4>
         <b>{heading}</b>
       </h4>
diff --git a/client/src/components/Flash/index.tsx b/client/src/components/Flash/index.tsx
index 01f649cdbe..e27cd0f28b 100644
--- a/client/src/components/Flash/index.tsx
+++ b/client/src/components/Flash/index.tsx
@@ -43,6 +43,7 @@ function Flash({ flashMessage, onClose }: FlashProps): JSX.Element {
           <Alert
             bsStyle={type}
             className='flash-message'
+            closeLabel={t('buttons.close')}
             onDismiss={handleClose}
           >
             {t(message, variables)}
diff --git a/client/src/components/formHelpers/FormFields.js b/client/src/components/formHelpers/FormFields.js
index 4a4ef0921a..0c8c72c6ba 100644
--- a/client/src/components/formHelpers/FormFields.js
+++ b/client/src/components/formHelpers/FormFields.js
@@ -11,6 +11,7 @@ import normalizeUrl from 'normalize-url';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Field } from 'react-final-form';
+import { useTranslation } from 'react-i18next';
 import {
   editorValidator,
   localhostValidator,
@@ -34,6 +35,7 @@ const propTypes = {
 };
 
 function FormFields(props) {
+  const { t } = useTranslation();
   const { formFields, options = {} } = props;
   const {
     ignored = [],
@@ -62,7 +64,10 @@ function FormFields(props) {
     const message = error || validationError || validationWarning;
     return message ? (
       <HelpBlock>
-        <Alert bsStyle={error || validationError ? 'danger' : 'info'}>
+        <Alert
+          bsStyle={error || validationError ? 'danger' : 'info'}
+          closeLabel={t('buttons.close')}
+        >
           {message}
         </Alert>
       </HelpBlock>
diff --git a/client/src/components/settings/about.tsx b/client/src/components/settings/about.tsx
index 58d9ce9d99..6055ab50de 100644
--- a/client/src/components/settings/about.tsx
+++ b/client/src/components/settings/about.tsx
@@ -157,7 +157,9 @@ class AboutSettings extends Component<AboutProps, AboutState> {
     if (this.state.isPictureUrlValid === false) {
       return (
         <HelpBlock>
-          <Alert bsStyle='info'>{t('validation.url-not-image')}</Alert>
+          <Alert bsStyle='info' closeLabel={t('buttons.close')}>
+            {t('validation.url-not-image')}
+          </Alert>
         </HelpBlock>
       );
     } else {
diff --git a/client/src/components/settings/email.tsx b/client/src/components/settings/email.tsx
index 1885228162..3deac2a0ab 100644
--- a/client/src/components/settings/email.tsx
+++ b/client/src/components/settings/email.tsx
@@ -182,7 +182,11 @@ class EmailSettings extends Component<EmailProps, EmailState> {
         {isEmailVerified ? null : (
           <FullWidthRow>
             <HelpBlock>
-              <Alert bsStyle='info' className='text-center'>
+              <Alert
+                bsStyle='info'
+                className='text-center'
+                closeLabel={t('buttons.close')}
+              >
                 {t('settings.email.not-verified')}
                 <br />
                 <Trans i18nKey='settings.email.check'>
diff --git a/client/src/components/settings/username.tsx b/client/src/components/settings/username.tsx
index 032dd672b2..e3a31ebb3b 100644
--- a/client/src/components/settings/username.tsx
+++ b/client/src/components/settings/username.tsx
@@ -152,7 +152,7 @@ class UsernameSettings extends Component<UsernameProps, UsernameState> {
       console.log(error);
       return (
         <FullWidthRow>
-          <Alert bsStyle='danger'>
+          <Alert bsStyle='danger' closeLabel={t('buttons.close')}>
             {t(`settings.username.${error}`, {
               username: this.state.formValue
             })}
@@ -163,28 +163,38 @@ class UsernameSettings extends Component<UsernameProps, UsernameState> {
     if (!validating && !isValidUsername) {
       return (
         <FullWidthRow>
-          <Alert bsStyle='warning'>{t('settings.username.unavailable')}</Alert>
+          <Alert bsStyle='warning' closeLabel={t('buttons.close')}>
+            {t('settings.username.unavailable')}
+          </Alert>
         </FullWidthRow>
       );
     }
     if (validating) {
       return (
         <FullWidthRow>
-          <Alert bsStyle='info'>{t('settings.username.validating')}</Alert>
+          <Alert bsStyle='info' closeLabel={t('buttons.close')}>
+            {t('settings.username.validating')}
+          </Alert>
         </FullWidthRow>
       );
     }
     if (!validating && isValidUsername && this.state.isUserNew) {
       return (
         <FullWidthRow>
-          <Alert bsStyle='success'>{t('settings.username.available')}</Alert>
+          <Alert bsStyle='success' closeLabel={t('buttons.close')}>
+            {t('settings.username.available')}
+          </Alert>
         </FullWidthRow>
       );
     } else if (!validating && isValidUsername && !this.state.isUserNew) {
       return (
         <FullWidthRow>
-          <Alert bsStyle='success'>{t('settings.username.available')}</Alert>
-          <Alert bsStyle='info'>{t('settings.username.change')}</Alert>
+          <Alert bsStyle='success' closeLabel={t('buttons.close')}>
+            {t('settings.username.available')}
+          </Alert>
+          <Alert bsStyle='info' closeLabel={t('buttons.close')}>
+            {t('settings.username.change')}
+          </Alert>
         </FullWidthRow>
       );
     }
diff --git a/client/src/pages/donate.tsx b/client/src/pages/donate.tsx
index 5b098a97d4..16f4ec43d4 100644
--- a/client/src/pages/donate.tsx
+++ b/client/src/pages/donate.tsx
@@ -100,7 +100,7 @@ function DonatePage({
                 </Col>
               </Row>
               {isDonating ? (
-                <Alert>
+                <Alert closeLabel={t('buttons.close')}>
                   <p>{t('donate.thank-you-2')}</p>
                   <br />
                   <DonationOptionsAlertText />