EPMRPP-96531 || Adjust Email Server integration settings

reportportal · Nov 15, 2024 · 5fa666c · 5fa666c
1 parent 8a75049
commit 5fa666c
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 39 deletions.
diff --git a/app/src/common/utils/fieldTransformer.js b/app/src/common/utils/fieldTransformer.js
@@ -0,0 +1,28 @@
+export function combineNameAndEmailToFrom(inputObj) {
+  const obj = { ...inputObj };
+  if (obj.fromName && obj.fromEmail) {
+    obj.from = `${obj.fromName} <${obj.fromEmail}>`;
+    delete obj.fromName;
+    delete obj.fromEmail;
+  }
+  return obj;
+}
+
+export function separateFromIntoNameAndEmail(inputObj) {
+  const obj = { ...inputObj };
+  if (obj.from) {
+    const match = obj.from.match(/^(.*) <(.*)>$/);
+    if (match) {
+      obj.fromName = match[1];
+      obj.fromEmail = match[2];
+    } else {
+      obj.fromName = obj.from;
+      obj.fromEmail = '';
+    }
+    delete obj.from;
+  } else {
+    obj.fromName = '';
+    obj.fromEmail = '';
+  }
+  return obj;
+}
diff --git a/app/src/common/utils/index.js b/app/src/common/utils/index.js
@@ -57,3 +57,4 @@ export { createNamespacedActionPredicate } from './createNamespacedActionPredica
 export { omit } from './omit';
 export { calculateFontColor } from './calculateFontColor';
 export { createExternalLink } from './createExternalLink';
+export { combineNameAndEmailToFrom, separateFromIntoNameAndEmail } from './fieldTransformer';
diff --git a/...ts/integrations/containers/integrationInfoContainer/instancesSection/instancesSection.jsx b/...ts/integrations/containers/integrationInfoContainer/instancesSection/instancesSection.jsx
@@ -42,7 +42,8 @@ import {
   isPluginBuiltin,
 } from 'components/integrations/utils';
 import { PLUGIN_NAME_TITLES } from 'components/integrations/constants';
-import { LDAP } from 'common/constants/pluginNames';
+import { EMAIL, LDAP } from 'common/constants/pluginNames';
+import { combineNameAndEmailToFrom } from 'common/utils';
 import { InstancesList } from './instancesList';
 import styles from './instancesSection.scss';
 
@@ -192,10 +193,11 @@ export class InstancesSection extends Component {
 
   createIntegration = (formData, metaData) => {
     const { isGlobal, instanceType } = this.props;
+    const updatedFormData = instanceType === EMAIL ? combineNameAndEmailToFrom(formData) : formData;
     const data = {
       enabled: true,
-      integrationParameters: formData,
-      name: formData.integrationName || PLUGIN_NAME_TITLES[instanceType],
+      integrationParameters: updatedFormData,
+      name: updatedFormData.integrationName || PLUGIN_NAME_TITLES[instanceType],
     };
 
     this.props.addIntegrationAction(

diff --git a/...nts/integrations/containers/integrationSettingsContainer/integrationSettingsContainer.jsx b/...nts/integrations/containers/integrationSettingsContainer/integrationSettingsContainer.jsx
@@ -22,6 +22,8 @@ import { updateIntegrationAction } from 'controllers/plugins';
 import { uiExtensionIntegrationSettingsSelector } from 'controllers/plugins/uiExtensions/selectors';
 import { INTEGRATIONS_SETTINGS_COMPONENTS_MAP } from 'components/integrations/settingsComponentsMap';
 import { ExtensionLoader, extensionType } from 'components/extensionLoader';
+import { EMAIL } from 'common/constants/pluginNames';
+import { combineNameAndEmailToFrom } from 'common/utils';
 import styles from './integrationSettingsContainer.scss';
 
 const cx = classNames.bind(styles);
@@ -61,13 +63,14 @@ export class IntegrationSettingsContainer extends Component {
       },
       isGlobal,
     } = this.props;
+    const updatedFormData = pluginName === EMAIL ? combineNameAndEmailToFrom(formData) : formData;
     const data = {
       enabled: true,
-      integrationParameters: formData,
+      integrationParameters: updatedFormData,
     };
 
-    if (formData.integrationName) {
-      data.name = formData.integrationName;
+    if (updatedFormData.integrationName) {
+      data.name = updatedFormData.integrationName;
     }
 
     this.props.updateIntegrationAction(

diff --git a/app/src/components/integrations/integrationProviders/emailIntegration/constants.js b/app/src/components/integrations/integrationProviders/emailIntegration/constants.js
@@ -18,7 +18,8 @@ export const AUTH_ENABLED_KEY = 'authEnabled';
 export const PROTOCOL_KEY = 'protocol';
 export const SSL_KEY = 'sslEnabled';
 export const TLS_KEY = 'starTlsEnabled';
-export const FROM_KEY = 'from';
+export const FROM_NAME_KEY = 'fromName';
+export const FROM_EMAIL_KEY = 'fromEmail';
 export const HOST_KEY = 'host';
 export const PORT_KEY = 'port';
 export const USERNAME_KEY = 'username';

diff --git a/...ts/integrations/integrationProviders/emailIntegration/emailFormFields/emailFormFields.jsx b/...ts/integrations/integrationProviders/emailIntegration/emailFormFields/emailFormFields.jsx
@@ -33,17 +33,19 @@ import { INTEGRATION_FORM } from 'components/integrations/elements';
 import { FieldElement } from 'pages/inside/projectSettingsPageContainer/content/elements';
 import { FieldText } from 'componentLibrary/fieldText';
 import { Dropdown } from 'componentLibrary/dropdown';
+import { separateFromIntoNameAndEmail } from 'common/utils';
 import {
   DEFAULT_FORM_CONFIG,
   AUTH_ENABLED_KEY,
   PROTOCOL_KEY,
   SSL_KEY,
   TLS_KEY,
-  FROM_KEY,
+  FROM_NAME_KEY,
   HOST_KEY,
   PORT_KEY,
   USERNAME_KEY,
   PASSWORD_KEY,
+  FROM_EMAIL_KEY,
 } from '../constants';
 import styles from './emailFormFields.scss';
 
@@ -58,9 +60,13 @@ const messages = defineMessages({
     id: 'EmailFormFields.protocolLabel',
     defaultMessage: 'Protocol',
   },
-  fromLabel: {
-    id: 'EmailFormFields.fromLabel',
-    defaultMessage: 'Default sender name',
+  fromNameLabel: {
+    id: 'EmailFormFields.fromNameLabel',
+    defaultMessage: 'From name',
+  },
+  fromEmailLabel: {
+    id: 'EmailFormFields.fromEmailLabel',
+    defaultMessage: 'From Email',
   },
   portLabel: {
     id: 'EmailFormFields.portLabel',
@@ -72,7 +78,7 @@ const messages = defineMessages({
   },
   usernameLabel: {
     id: 'EmailFormFields.usernameLabel',
-    defaultMessage: 'Sender email',
+    defaultMessage: 'Username',
   },
   passwordLabel: {
     id: 'EmailFormFields.passwordLabel',
@@ -115,7 +121,9 @@ export class EmailFormFields extends Component {
   }
 
   componentDidMount() {
-    this.props.initialize(this.props.initialData);
+    const { initialData } = this.props;
+    const preparedData = separateFromIntoNameAndEmail(initialData);
+    this.props.initialize(preparedData);
   }
 
   onChangeAuthAvailability = (event, value) => {
@@ -160,8 +168,8 @@ export class EmailFormFields extends Component {
           </FieldErrorHint>
         </FieldElement>
         <FieldElement
-          name={FROM_KEY}
-          label={formatMessage(messages.fromLabel)}
+          name={FROM_NAME_KEY}
+          label={formatMessage(messages.fromNameLabel)}
           disabled={disabled}
           className={cx('fields')}
         >
@@ -170,24 +178,24 @@ export class EmailFormFields extends Component {
           </FieldErrorHint>
         </FieldElement>
         <FieldElement
-          name={PORT_KEY}
-          label={formatMessage(messages.portLabel)}
-          validate={portValidator}
+          name={FROM_EMAIL_KEY}
+          label={formatMessage(messages.fromEmailLabel)}
           disabled={disabled}
-          format={this.formatPortValue}
-          normalize={this.normalizeValue}
           className={cx('fields')}
+          validate={commonValidators.email}
           isRequired
         >
           <FieldErrorHint provideHint={false}>
             <FieldText defaultWidth={false} />
           </FieldErrorHint>
         </FieldElement>
         <FieldElement
-          name={USERNAME_KEY}
-          label={formatMessage(messages.usernameLabel)}
-          validate={commonValidators.email}
+          name={PORT_KEY}
+          label={formatMessage(messages.portLabel)}
+          validate={portValidator}
           disabled={disabled}
+          format={this.formatPortValue}
+          normalize={this.normalizeValue}
           className={cx('fields')}
           isRequired
         >
@@ -207,17 +215,30 @@ export class EmailFormFields extends Component {
           </FieldErrorHint>
         </FieldElement>
         {authEnabled && (
-          <FieldElement
-            name={PASSWORD_KEY}
-            label={formatMessage(messages.passwordLabel)}
-            disabled={disabled}
-            className={cx('fields')}
-            isRequired
-          >
-            <FieldErrorHint provideHint={false}>
-              <FieldText defaultWidth={false} type="password" />
-            </FieldErrorHint>
-          </FieldElement>
+          <>
+            <FieldElement
+              name={USERNAME_KEY}
+              label={formatMessage(messages.usernameLabel)}
+              disabled={disabled}
+              className={cx('fields')}
+              isRequired
+            >
+              <FieldErrorHint provideHint={false}>
+                <FieldText defaultWidth={false} />
+              </FieldErrorHint>
+            </FieldElement>
+            <FieldElement
+              name={PASSWORD_KEY}
+              label={formatMessage(messages.passwordLabel)}
+              disabled={disabled}
+              className={cx('fields')}
+              isRequired
+            >
+              <FieldErrorHint provideHint={false}>
+                <FieldText defaultWidth={false} type="password" />
+              </FieldErrorHint>
+            </FieldElement>
+          </>
         )}
         <div className={cx('checkboxes-container')}>
           <div className={cx('checkbox-wrapper')}>

diff --git a/...gsPageContainer/content/integrations/integrationsList/integrationInfo/integrationInfo.jsx b/...gsPageContainer/content/integrations/integrationsList/integrationInfo/integrationInfo.jsx
@@ -43,6 +43,8 @@ import { INTEGRATIONS_SETTINGS_COMPONENTS_MAP } from 'components/integrations/se
 import { EmptyStatePage } from 'pages/inside/projectSettingsPageContainer/content/emptyStatePage';
 import { PROJECT_SETTINGS_INTEGRATION } from 'analyticsEvents/projectSettingsPageEvents';
 import { INTEGRATIONS } from 'common/constants/settingsTabs';
+import { EMAIL } from 'common/constants/pluginNames';
+import { combineNameAndEmailToFrom } from 'common/utils';
 import { IntegrationHeader } from './integrationHeader';
 import { AvailableIntegrations } from './availableIntegrations';
 import { messages } from './messages';
@@ -112,10 +114,11 @@ export const IntegrationInfo = (props) => {
   };
 
   const addProjectIntegration = (formData, metaData) => {
+    const updatedFormData = pluginName === EMAIL ? combineNameAndEmailToFrom(formData) : formData;
     const newData = {
       enabled: true,
-      integrationParameters: formData,
-      name: formData.integrationName || PLUGIN_NAME_TITLES[pluginName],
+      integrationParameters: updatedFormData,
+      name: updatedFormData.integrationName || PLUGIN_NAME_TITLES[pluginName],
     };
     trackEvent(PROJECT_SETTINGS_INTEGRATION.CLICK_CREATE_INTEGRATION_MODAL(pluginName));
     dispatch(addIntegrationAction(newData, false, pluginName, openIntegration, metaData));
@@ -141,13 +144,14 @@ export const IntegrationInfo = (props) => {
     trackEvent(PROJECT_SETTINGS_INTEGRATION.CLICK_ADD_PROJECT_INTEGRATION(pluginName));
   };
   const onUpdate = (formData, onConfirm, metaData) => {
+    const updatedFormData = pluginName === EMAIL ? combineNameAndEmailToFrom(formData) : formData;
     const newData = {
       enabled: true,
-      integrationParameters: formData,
+      integrationParameters: updatedFormData,
     };
 
-    if (formData.integrationName) {
-      newData.name = formData.integrationName;
+    if (updatedFormData.integrationName) {
+      newData.name = updatedFormData.integrationName;
     }
 
     dispatch(