fix(ui): supported test email button in email smtp page (#13998)

* supported test email button in email smtp page

* localization keys added

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -1035,6 +1035,7 @@
     "test-case-lowercase": "testfall",
     "test-case-lowercase-plural": "testfälle",
     "test-case-plural": "Testfälle",
+    "test-email": "Test Email",
     "test-entity": "{{entity}}-Test",
     "test-plural": "Tests",
     "test-suite": "Test-Suite",

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -1035,6 +1035,7 @@
     "test-case-lowercase": "test case",
     "test-case-lowercase-plural": "test cases",
     "test-case-plural": "Test Cases",
+    "test-email": "Test Email",
     "test-entity": "Test {{entity}}",
     "test-plural": "Tests",
     "test-suite": "Test Suite",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -1035,6 +1035,7 @@
     "test-case-lowercase": "caso de prueba",
     "test-case-lowercase-plural": "test cases",
     "test-case-plural": "Casos de Prueba",
+    "test-email": "Test Email",
     "test-entity": "Prueba {{entity}}",
     "test-plural": "Pruebas",
     "test-suite": "Suite de Pruebas",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -1035,6 +1035,7 @@
     "test-case-lowercase": "cas de test",
     "test-case-lowercase-plural": "cas de tests",
     "test-case-plural": "Cas de Tests",
+    "test-email": "Test Email",
     "test-entity": "Test {{entity}}",
     "test-plural": "Tests",
     "test-suite": "Ensemble de Tests",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -1035,6 +1035,7 @@
     "test-case-lowercase": "テストケース",
     "test-case-lowercase-plural": "test cases",
     "test-case-plural": "テストケース",
+    "test-email": "Test Email",
     "test-entity": "テスト {{entity}}",
     "test-plural": "テスト",
     "test-suite": "テストスイート",

openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json

@@ -1035,6 +1035,7 @@
     "test-case-lowercase": "caso de teste",
     "test-case-lowercase-plural": "test cases",
     "test-case-plural": "Casos de Teste",
+    "test-email": "Test Email",
     "test-entity": "Teste {{entity}}",
     "test-plural": "Testes",
     "test-suite": "Conjunto de Testes",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json

@@ -1035,6 +1035,7 @@
     "test-case-lowercase": "test case",
     "test-case-lowercase-plural": "test cases",
     "test-case-plural": "Test Cases",
+    "test-email": "Test Email",
     "test-entity": "Тест {{entity}}",
     "test-plural": "Тесты",
     "test-suite": "Тестирование",

openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json

@@ -1035,6 +1035,7 @@
     "test-case-lowercase": "测试用例",
     "test-case-lowercase-plural": "测试用例",
     "test-case-plural": "测试用例",
+    "test-email": "Test Email",
     "test-entity": "测试{{entity}}",
     "test-plural": "测试",
     "test-suite": "质控测试集",

openmetadata-ui/src/main/resources/ui/src/pages/EmailConfigSettingsPage/EmailConfigSettingsPage.component.tsx

@@ -12,7 +12,7 @@
  */
 
 import Icon from '@ant-design/icons/lib/components/Icon';
-import { Button, Col, Row, Skeleton, Typography } from 'antd';
+import { Button, Col, Row, Skeleton, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { isBoolean, isEmpty, isNumber, isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -25,9 +25,12 @@ import { ROUTES } from '../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum';
 import { SMTPSettings } from '../../generated/email/smtpSettings';
 import { SettingType } from '../../generated/settings/settings';
-import { getSettingsConfigFromConfigType } from '../../rest/settingConfigAPI';
+import {
+  getSettingsConfigFromConfigType,
+  testEmailConnection,
+} from '../../rest/settingConfigAPI';
 import { getEmailConfigFieldLabels } from '../../utils/EmailConfigUtils';
-import { showErrorToast } from '../../utils/ToastUtils';
+import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 
 function EmailConfigSettingsPage() {
   const { t } = useTranslation();
@@ -61,6 +64,18 @@ function EmailConfigSettingsPage() {
     history.push(ROUTES.SETTINGS_EDIT_EMAIL_CONFIG);
   };
 
+  const handleTestEmailConnection = async () => {
+    try {
+      const res = await testEmailConnection(
+        emailConfigValues?.senderMail ?? ''
+      );
+
+      showSuccessToast(res.data);
+    } catch (error) {
+      showErrorToast(error as AxiosError);
+    }
+  };
+
   const configValues = useMemo(() => {
     if (isUndefined(emailConfigValues)) {
       return null;
@@ -139,6 +154,11 @@ function EmailConfigSettingsPage() {
             />
           </Col>
           <Col>
+            <Space>
+              <Button type="primary" onClick={handleTestEmailConnection}>
+                {t('label.test-email')}
+              </Button>
+
               <Button
                 icon={
                   !isUndefined(emailConfigValues) && (
@@ -150,6 +170,7 @@ function EmailConfigSettingsPage() {
                   ? t('label.add')
                   : t('label.edit')}
               </Button>
+            </Space>
           </Col>
         </Row>
       </Col>

openmetadata-ui/src/main/resources/ui/src/rest/settingConfigAPI.ts

@@ -48,3 +48,17 @@ export const getLoginConfig = async () => {
 
   return response.data;
 };
+
+export const testEmailConnection = async (email: string) => {
+  const configOptions = {
+    headers: { 'Content-type': 'application/json' },
+  };
+
+  const response = await axiosClient.put<string>(
+    '/system/email/test',
+    email,
+    configOptions
+  );
+
+  return response;
+};