EPMRPP-79419 || Fixes for automation attributes (#3254)

* EPMRPP-79419 || Fixes for automation attributes * EPMRPP-79419 || Removed unused attribute * EPMRPP-79419 || Code review fixes - 1 Co-authored-by: Artsiom Sadouski <artsiom_sadouski@epam.com>
reportportal · Sep 9, 2022 · 40a6719 · 40a6719
1 parent 56f4343
commit 40a6719
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 59 deletions.
diff --git a/app/src/componentLibrary/autocompletes/singleAutocomplete/singleAutocomplete.jsx b/app/src/componentLibrary/autocompletes/singleAutocomplete/singleAutocomplete.jsx
@@ -49,7 +49,6 @@ export class SingleAutocomplete extends Component {
     menuClassName: PropTypes.string,
     icon: PropTypes.string,
     isOptionUnique: PropTypes.func,
-    dataAutomationId: PropTypes.string,
   };
 
   static defaultProps = {
@@ -76,7 +75,6 @@ export class SingleAutocomplete extends Component {
     menuClassName: '',
     icon: null,
     isOptionUnique: null,
-    dataAutomationId: '',
   };
 
   getOptionProps = (getItemProps, highlightedIndex, selectedItem) => ({ item, index, ...rest }) =>
@@ -110,7 +108,6 @@ export class SingleAutocomplete extends Component {
       icon,
       options,
       isOptionUnique,
-      dataAutomationId,
       ...props
     } = this.props;
     return (
@@ -164,7 +161,6 @@ export class SingleAutocomplete extends Component {
                         touched,
                         error,
                         endIcon: icon,
-                        dataAutomationId,
                         ...inputProps,
                       })}
                     />

diff --git a/app/src/componentLibrary/checkbox/checkbox.jsx b/app/src/componentLibrary/checkbox/checkbox.jsx
@@ -37,14 +37,14 @@ export const Checkbox = ({
     })}
     onFocus={onFocus}
     onBlur={onBlur}
+    data-automation-id={dataAutomationId}
   >
     <input
       type="checkbox"
       className={cx('input')}
       disabled={disabled}
       onChange={onChange}
       checked={value}
-      data-automation-id={dataAutomationId}
     />
     <span
       className={cx('checkbox', {

diff --git a/app/src/componentLibrary/dropdown/README.md b/app/src/componentLibrary/dropdown/README.md
@@ -15,7 +15,6 @@ Default width - 240px
 - **variant**: _string_, optional, default = "light"
 - **placeholder**: _string_, optional, default = ""
 - **defaultWidth**: _bool_, optional, default = true
-- **dataAutomationId**: _string_, optional, default = ''
 
 ### Events:
 

diff --git a/app/src/componentLibrary/dropdown/dropdown.jsx b/app/src/componentLibrary/dropdown/dropdown.jsx
@@ -43,7 +43,6 @@ export const Dropdown = ({
   placeholder,
   defaultWidth,
   renderOption,
-  dataAutomationId,
 }) => {
   const [isOpened, setOpened] = useState(false);
   const containerRef = useRef();
@@ -122,7 +121,6 @@ export const Dropdown = ({
                 'mobile-disabled': mobileDisabled,
               })}
               onClick={onClickDropdown}
-              data-automation-id={dataAutomationId}
             >
               {icon && <i className={cx('icon')}>{Parser(icon)}</i>}
               <span className={cx(variant, 'value', { placeholder: !value })}>
@@ -189,7 +187,6 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   defaultWidth: PropTypes.bool,
   renderOption: PropTypes.func,
-  dataAutomationId: PropTypes.string,
 };
 
 Dropdown.defaultProps = {
@@ -208,5 +205,4 @@ Dropdown.defaultProps = {
   placeholder: '',
   defaultWidth: true,
   renderOption: null,
-  dataAutomationId: '',
 };
diff --git a/app/src/componentLibrary/fieldText/README.md b/app/src/componentLibrary/fieldText/README.md
@@ -21,7 +21,6 @@ Has 36px height & width adjusted by content.
 - **clearable**: _bool_, optional, default = false
 - **isRequired**: _bool_, optional, default = false
 - **hasDoubleMessage**: _bool_, optional, default = false
-- **dataAutomationId**: _string_, optional, default = ''
 
 ### Events:
 

diff --git a/app/src/componentLibrary/fieldText/fieldText.jsx b/app/src/componentLibrary/fieldText/fieldText.jsx
@@ -48,7 +48,6 @@ export const FieldText = ({
   isRequired,
   hasDoubleMessage,
   type,
-  dataAutomationId,
 }) => {
   const clearInput = () => onChange('');
 
@@ -84,7 +83,6 @@ export const FieldText = ({
             onBlur={disabled ? null : onBlur}
             onKeyUp={disabled ? null : onKeyUp}
             onKeyDown={disabled ? null : onKeyDown}
-            data-automation-id={dataAutomationId}
           />
           {placeholder && !value && (
             <span className={cx(VARIANT, 'placeholder')}>
@@ -148,7 +146,6 @@ FieldText.propTypes = {
   isRequired: PropTypes.bool,
   hasDoubleMessage: PropTypes.bool,
   type: PropTypes.string,
-  dataAutomationId: PropTypes.string,
 };
 FieldText.defaultProps = {
   value: '',
@@ -174,5 +171,4 @@ FieldText.defaultProps = {
   isRequired: false,
   hasDoubleMessage: false,
   type: 'text',
-  dataAutomationId: '',
 };
diff --git a/app/src/componentLibrary/toggle/toggle.jsx b/app/src/componentLibrary/toggle/toggle.jsx
@@ -37,14 +37,14 @@ export const Toggle = ({
     onFocus={onFocus}
     onBlur={onBlur}
     className={cx('toggle', className, { disabled })}
+    data-automation-id={dataAutomationId}
   >
     <input
       onChange={onChange}
       checked={value}
       disabled={disabled}
       className={cx('input')}
       type="checkbox"
-      data-automation-id={dataAutomationId}
     />
     <div className={cx('slider', 'round')} />
     {children && <span className={cx('children-container')}>{children}</span>}

diff --git a/app/src/components/fields/fieldErrorHint/fieldErrorHint.jsx b/app/src/components/fields/fieldErrorHint/fieldErrorHint.jsx
@@ -255,6 +255,7 @@ export class FieldErrorHint extends Component {
     darkView: PropTypes.bool,
     provideHint: PropTypes.bool,
     touched: PropTypes.bool,
+    dataAutomationId: PropTypes.string,
   };
 
   static defaultProps = {
@@ -268,6 +269,7 @@ export class FieldErrorHint extends Component {
     darkView: false,
     provideHint: true,
     touched: false,
+    dataAutomationId: '',
   };
 
   isHintVisible = () => {
@@ -289,12 +291,13 @@ export class FieldErrorHint extends Component {
       widthContent,
       darkView,
       provideHint,
+      dataAutomationId,
       ...rest
     } = this.props;
     const classes = cx('field-error-hint', `type-${hintType}`);
 
     return (
-      <div className={classes}>
+      <div className={classes} data-automation-id={dataAutomationId}>
         {children &&
           cloneElement(children, {
             error: error && messages[error] ? intl.formatMessage(messages[error]) : error,

diff --git a/app/src/components/main/hexColorPicker/hexColorPicker.jsx b/app/src/components/main/hexColorPicker/hexColorPicker.jsx
@@ -22,7 +22,7 @@ import styles from './hexColorPicker.scss';
 
 const cx = classNames.bind(styles);
 
-export const HexColorPickerComponent = ({ label, value, presets, onChange, dataAutomationId }) => {
+export const HexColorPickerComponent = ({ label, value, presets, onChange }) => {
   // Problem with HexColorPicker: infinity onChange call with 2 different values
   const [color, setColor] = useState(value);
 
@@ -37,12 +37,7 @@ export const HexColorPickerComponent = ({ label, value, presets, onChange, dataA
       <section>
         <div className={cx('hex-color-input-wrapper')}>
           <span>HEX</span>
-          <HexColorInput
-            color={color}
-            onChange={setColor}
-            prefixed
-            data-automation-id={dataAutomationId}
-          />
+          <HexColorInput color={color} onChange={setColor} prefixed />
           <div className={cx('hex-color-preset', 'current')} style={{ background: color }} />
         </div>
         <div className={cx('hex-color-presets')}>
@@ -65,12 +60,10 @@ HexColorPickerComponent.propTypes = {
   value: PropTypes.string,
   presets: PropTypes.array,
   onChange: PropTypes.func,
-  dataAutomationId: PropTypes.string,
 };
 HexColorPickerComponent.defaultProps = {
   label: '',
   value: '#ffffff',
   presets: [],
   onChange: () => {},
-  dataAutomationId: 'colorField',
 };
diff --git a/...s/inside/projectSettingsPageContainer/content/defectTypes/defectTypeRow/defectTypeRow.jsx b/...s/inside/projectSettingsPageContainer/content/defectTypes/defectTypeRow/defectTypeRow.jsx
@@ -49,7 +49,9 @@ const DefectLocatorTooltip = ({ locator }) => {
           text={locator}
           onCopy={() => trackEvent(PROJECT_SETTINGS_DEFECT_TYPES_EVENTS.CLICK_COPY_ID_LOCATOR_ICON)}
         >
-          <i className={cx('icon', 'copy-button')}>{Parser(CopyIcon)}</i>
+          <i className={cx('icon', 'copy-button')} data-automation-id="defectTypeCopyLocatorIcon">
+            {Parser(CopyIcon)}
+          </i>
         </CopyToClipboard>
       </div>
     </>

diff --git a/...ageContainer/content/defectTypes/modals/addEditDefectTypeModal/addEditDefectTypeModal.jsx b/...ageContainer/content/defectTypes/modals/addEditDefectTypeModal/addEditDefectTypeModal.jsx
@@ -103,6 +103,7 @@ const messages = defineMessages({
 });
 
 const ACTION_TYPE_ADD = 'add';
+const FIELD = 'Field';
 
 const AddEditDefectTypeModal = ({
   data,
@@ -188,22 +189,15 @@ const AddEditDefectTypeModal = ({
               change(GROUP_FIELD_KEY, value);
               change(COLOR_FIELD_KEY, defectTypes[value][0].color);
             }}
+            dataAutomationId={GROUP_FIELD_KEY + FIELD}
           >
-            <Dropdown
-              options={defectGroupOptions}
-              defaultWidth={false}
-              dataAutomationId="typeRefField"
-            />
+            <Dropdown options={defectGroupOptions} defaultWidth={false} />
           </FieldElement>
         )}
         <div className={cx('input')}>
           <FieldProvider name={NAME_FIELD_KEY} type="text">
-            <FieldErrorHint provideHint={false}>
-              <FieldText
-                label={formatMessage(messages.name)}
-                defaultWidth={false}
-                dataAutomationId="longNameField"
-              />
+            <FieldErrorHint provideHint={false} dataAutomationId={NAME_FIELD_KEY + FIELD}>
+              <FieldText label={formatMessage(messages.name)} defaultWidth={false} />
             </FieldErrorHint>
           </FieldProvider>
         </div>
@@ -212,17 +206,20 @@ const AddEditDefectTypeModal = ({
           type="text"
           className={cx('abbreviation-field')}
         >
-          <FieldErrorHint provideHint={false}>
+          <FieldErrorHint provideHint={false} dataAutomationId={ABBREVIATION_FIELD_KEY + FIELD}>
             <FieldText
               label={formatMessage(messages.abbreviation)}
               defaultWidth={false}
               helpText={formatMessage(messages.abbreviationHint)}
               className={cx('abbreviation-field')}
-              dataAutomationId="shortNameField"
             />
           </FieldErrorHint>
         </FieldProvider>
-        <FieldElement name={COLOR_FIELD_KEY} className={cx('color-picker')}>
+        <FieldElement
+          name={COLOR_FIELD_KEY}
+          className={cx('color-picker')}
+          dataAutomationId={COLOR_FIELD_KEY + FIELD}
+        >
           <HexColorPickerComponent label={formatMessage(messages.color)} presets={COLORS} />
         </FieldElement>
       </div>

diff --git a/.../pages/inside/projectSettingsPageContainer/content/elements/fieldElement/fieldElement.jsx b/.../pages/inside/projectSettingsPageContainer/content/elements/fieldElement/fieldElement.jsx
@@ -30,12 +30,13 @@ export const FieldElement = (props) => {
     className,
     childrenClassName,
     withoutProvider,
+    dataAutomationId,
     ...rest
   } = props;
   const getChildren = () =>
     withoutProvider ? children : <FieldProvider {...rest}>{children}</FieldProvider>;
   return (
-    <div className={cx('wrapper', className)}>
+    <div className={cx('wrapper', className)} data-automation-id={dataAutomationId}>
       {label ? (
         <>
           <span className={cx('label')}>{label}</span>
@@ -58,11 +59,13 @@ FieldElement.propTypes = {
   className: PropTypes.string,
   childrenClassName: PropTypes.string,
   withoutProvider: PropTypes.bool,
+  dataAutomationId: PropTypes.string,
 };
 FieldElement.defaultProps = {
   label: '',
   description: '',
   className: '',
   childrenClassName: '',
   withoutProvider: false,
+  dataAutomationId: '',
 };
diff --git a/...tainer/content/notifications/modals/addEditNotificationModal/addEditNotificationModal.jsx b/...tainer/content/notifications/modals/addEditNotificationModal/addEditNotificationModal.jsx
@@ -175,6 +175,8 @@ const messages = defineMessages({
   },
 });
 
+const FIELD = 'Field';
+
 const AddEditNotificationModal = ({
   data,
   data: { onSave },
@@ -271,11 +273,7 @@ const AddEditNotificationModal = ({
       onClose={() => dispatch(hideModalAction())}
       allowCloseOutside={!dirty}
       footerNode={
-        <FieldProvider
-          name={ENABLED_FIELD_KEY}
-          format={(value) => !!value}
-          data-automation-id="enabledToggle"
-        >
+        <FieldProvider name={ENABLED_FIELD_KEY} format={(value) => !!value}>
           <Toggle className={cx('toggle')} dataAutomationId="enabledToggle">
             {formatMessage(messages.active)}
           </Toggle>
@@ -285,12 +283,11 @@ const AddEditNotificationModal = ({
       {formatMessage(messages.description)}
       <div className={cx('content')}>
         <FieldProvider name={RULE_NAME_FIELD_KEY} type="text">
-          <FieldErrorHint provideHint={false}>
+          <FieldErrorHint provideHint={false} dataAutomationId={RULE_NAME_FIELD_KEY + FIELD}>
             <FieldText
               label={formatMessage(messages.nameLabel)}
               placeholder={formatMessage(messages.namePlaceholder)}
               defaultWidth={false}
-              dataAutomationId="ruleNameField"
             />
           </FieldErrorHint>
         </FieldProvider>
@@ -299,34 +296,44 @@ const AddEditNotificationModal = ({
           className={cx('autocomplete')}
           type="text"
           label={formatMessage(messages.recipientsLabel)}
+          dataAutomationId={RECIPIENTS_FIELD_KEY + FIELD}
         >
           <FieldErrorHint provideHint={false}>
             <RecipientsContainer />
           </FieldErrorHint>
         </FieldElement>
-        <FieldElement name={INFORM_OWNER_FIELD_KEY} type="text" className={cx('checkbox')}>
-          <Checkbox dataAutomationId="informOwnerCheckbox">
-            {formatMessage(messages.launchOwnerLabel)}
-          </Checkbox>
+        <FieldElement
+          name={INFORM_OWNER_FIELD_KEY}
+          type="text"
+          className={cx('checkbox')}
+          dataAutomationId={INFORM_OWNER_FIELD_KEY + FIELD}
+        >
+          <Checkbox>{formatMessage(messages.launchOwnerLabel)}</Checkbox>
         </FieldElement>
         <FieldElement
           label={formatMessage(messages.inCaseLabel)}
           name={SEND_CASE_FIELD_KEY}
           type="text"
           className={cx('input')}
+          dataAutomationId={SEND_CASE_FIELD_KEY + FIELD}
         >
-          <Dropdown options={caseOptions} defaultWidth={false} dataAutomationId="sendCaseField" />
+          <Dropdown options={caseOptions} defaultWidth={false} />
         </FieldElement>
         <FieldElement
           label={formatMessage(messages.launchNamesLabel)}
           name={LAUNCH_NAMES_FIELD_KEY}
           className={cx('launches')}
+          dataAutomationId={LAUNCH_NAMES_FIELD_KEY + FIELD}
         >
           <FieldErrorHint hintType="top">
             <LaunchNamesContainer highlightUnStoredItem={actionType === 'add'} />
           </FieldErrorHint>
         </FieldElement>
-        <FieldElement name={ATTRIBUTES_FIELD_KEY} disabled={!isEditorShown}>
+        <FieldElement
+          name={ATTRIBUTES_FIELD_KEY}
+          disabled={!isEditorShown}
+          dataAutomationId={ATTRIBUTES_FIELD_KEY + FIELD}
+        >
           <AttributeListFormField
             keyURLCreator={URLS.launchAttributeKeysSearch}
             valueURLCreator={URLS.launchAttributeValuesSearch}