Added data-cy for data source (#12815)

* added datasource data-cy

* add method to get data-cy

* update the required fix

* fix format

* fix selectors

* fix selector for appSlug spec

---------

Co-authored-by: Akshay <akshaysasidrn@gmail.com>

cypress-tests/cypress/constants/selectors/common.js

@@ -6,7 +6,8 @@ export const commonSelectors = {
   toastMessage: ".go3958317564",
   oldToastMessage: ".go318386747",
   appSlugAccept: '[data-cy="app-slug-accepted-label"]',
-  newToastMessage: '.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551 > .go3958317564',
+  newToastMessage:
+    '.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551 > .go3958317564',
   toastCloseButton: '[data-cy="toast-close-button"]',
   editButton: "[data-cy=edit-button]",
   workspaceConstantNameInput: '[data-cy="name-input-field"]',
@@ -18,7 +19,7 @@ export const commonSelectors = {
   appCardOptionsButton: "[data-cy=app-card-menu-icon]",
   autoSave: "[data-cy=autosave-indicator]",
   nameInputFieldd: "[data-cy=name-input-field]",
-  valueInputFieldd: '[data-cy=value-input-field]',
+  valueInputFieldd: "[data-cy=value-input-field]",
   skipButton: ".driver-close-btn",
   skipInstallationModal: "[data-cy=skip-button]",
   homePageLogo: "[data-cy=home-page-logo]",
@@ -395,7 +396,7 @@ export const commonWidgetSelector = {
   modalCloseButton: '[data-cy="modal-close-button"]',
   iframeLinkLabel: '[data-cy="iframe-link-label"]',
   ifameLinkCopyButton: '[data-cy="iframe-link-copy-button"]',
-  appSlugLabel: '[data-cy="input-field-label"]',
+  appSlugLabel: '[data-cy="unique-app-slug-field-label"]',
   appSlugInput: '[data-cy="app-slug-input-field"]',
   appSlugInfoLabel: '[data-cy="helper-text"]',
   appLinkLabel: '[data-cy="app-link-label"]',

cypress-tests/cypress/constants/selectors/restAPI.js

@@ -24,7 +24,7 @@ export const restAPISelector = {
     return `[data-cy="${cyParamName(header)}-delete-button-${cyParamName(index)}"]`;
   },
   addMoreButton: (header) => {
-    return `[data-cy="${cyParamName(header)}-add-more-button"]`;
+    return `[data-cy="${cyParamName(header)}-add-button"]`;
   },
   dropdownLabel: (label) => {
     return `[data-cy="${cyParamName(label)}-dropdown-label"]`;

frontend/src/_components/DynamicForm.jsx

@@ -26,6 +26,7 @@ import { Constants } from '@/_helpers/utils';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import Sharepoint from '@/_components/Sharepoint';
 import AccordionForm from './AccordionForm';
+import { generateCypressDataCy } from '../modules/common/helpers/cypressHelpers';
 
 const DynamicForm = ({
   schema,
@@ -534,7 +535,7 @@ const DynamicForm = ({
       const labelElement = (
         <label
           className="form-label"
-          data-cy={`label-${String(label).toLowerCase().replace(/\s+/g, '-')}`}
+          data-cy={`label-${generateCypressDataCy(label)}`}
           style={{ textDecoration: tooltip ? 'underline 2px dashed' : 'none', textDecorationColor: 'var(--slate8)' }}
         >
           {label}
@@ -572,7 +573,7 @@ const DynamicForm = ({
                 'd-flex': isHorizontalLayout,
                 'dynamic-form-row': isHorizontalLayout,
               })}
-              data-cy={`${key.replace(/_/g, '-')}-section`}
+              data-cy={`${generateCypressDataCy(key)}-section`}
               key={key}
             >
               {!isSpecificComponent && (
@@ -628,7 +629,7 @@ const DynamicForm = ({
                 <Element
                   {...getElementProps(obj[key])}
                   {...computedProps[propertyKey]}
-                  data-cy={`${String(label).toLocaleLowerCase().replace(/\s+/g, '-')}-text-field`}
+                  data-cy={`${generateCypressDataCy(label)}-text-field`}
                   dataCy={obj[key].key.replace(/_/g, '-')}
                   //to be removed after whole ui is same
                   isHorizontalLayout={isHorizontalLayout}
@@ -663,15 +664,16 @@ const DynamicForm = ({
               {(flipComponentDropdown.label || isHorizontalLayout) && (
                 <label
                   className={cx('form-label')}
-                  data-cy={`${String(flipComponentDropdown.label)
-                    .toLocaleLowerCase()
-                    .replace(/\s+/g, '-')}-dropdown-label`}
+                  data-cy={`${generateCypressDataCy(flipComponentDropdown.label)}-dropdown-label`}
                 >
                   {flipComponentDropdown.label}
                 </label>
               )}
 
-              <div data-cy={`${String(flipComponentDropdown.label).toLocaleLowerCase().replace(/\s+/g, '-')}-select-dropdown`} className={cx({ 'flex-grow-1': isHorizontalLayout })}>
+              <div
+                data-cy={`${generateCypressDataCy(flipComponentDropdown.label)}-select-dropdown`}
+                className={cx({ 'flex-grow-1': isHorizontalLayout })}
+              >
                 <Select
                   {...getElementProps(flipComponentDropdown)}
                   styles={computeSelectStyles ? computeSelectStyles('100%') : {}}

frontend/src/_components/DynamicFormV2.jsx

@@ -14,6 +14,7 @@ import { canDeleteDataSource, canUpdateDataSource } from '@/_helpers';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { orgEnvironmentVariableService, orgEnvironmentConstantService } from '../_services';
 import { Constants } from '@/_helpers/utils';
+import { generateCypressDataCy } from '../modules/common/helpers/cypressHelpers.js';
 
 const DynamicFormV2 = ({
   schema,
@@ -437,7 +438,7 @@ const DynamicFormV2 = ({
       const labelElement = (
         <label
           className="form-label"
-          data-cy={`label-${String(label).toLowerCase().replace(/\s+/g, '-')}`}
+          data-cy={`label-${generateCypressDataCy(label)}`}
           style={{ textDecoration: tooltip ? 'underline 2px dashed' : 'none', textDecorationColor: 'var(--slate8)' }}
         >
           {label}
@@ -475,6 +476,7 @@ const DynamicFormV2 = ({
                 'd-flex': isHorizontalLayout,
                 'dynamic-form-row': isHorizontalLayout,
               })}
+              data-cy={`${generateCypressDataCy(key)}-section`}
               key={key}
             >
               {!isSpecificComponent && (
@@ -505,7 +507,8 @@ const DynamicFormV2 = ({
                 <Element
                   {...getElementProps(uiProperties[key])}
                   {...computedProps[propertyKey]}
-                  data-cy={`${String(label).toLocaleLowerCase().replace(/\s+/g, '-')}-text-field`}
+                  data-cy={`${generateCypressDataCy(label)}-text-field`}
+                  dataCy={uiProperties[key].key.replace(/_/g, '-')}
                   //to be removed after whole ui is same
                   isHorizontalLayout={isHorizontalLayout}
                 />
@@ -539,15 +542,16 @@ const DynamicFormV2 = ({
               {(flipComponentDropdown.label || isHorizontalLayout) && (
                 <label
                   className={cx('form-label')}
-                  data-cy={`${String(flipComponentDropdown.label)
-                    .toLocaleLowerCase()
-                    .replace(/\s+/g, '-')}-dropdown-label`}
+                  data-cy={`${generateCypressDataCy(flipComponentDropdown.label)}-dropdown-label`}
                 >
                   {flipComponentDropdown.label}
                 </label>
               )}
 
-              <div data-cy={'query-select-dropdown'} className={cx({ 'flex-grow-1': isHorizontalLayout })}>
+              <div
+                data-cy={`${generateCypressDataCy(flipComponentDropdown.label)}-select-dropdown`}
+                className={cx({ 'flex-grow-1': isHorizontalLayout })}
+              >
                 <Select {...getElementProps(flipComponentDropdown)} styles={{}} useCustomStyles={false} />
               </div>
               {flipComponentDropdown.helpText && (

frontend/src/_ui/HttpHeaders/SourceEditor.jsx

@@ -21,8 +21,7 @@ export default ({
   return (
     <div className="table-content-wrapper">
       {options.length === 0 && (
-        <div className="empty-key-value"  
-        data-cy="label-empty-key-value">
+        <div className="empty-key-value" data-cy="label-empty-key-value">
           <InfoIcon style={{ width: '16px', marginRight: '5px' }} />
           <span>There are no key value pairs added</span>
         </div>
@@ -86,7 +85,7 @@ export default ({
 
       <div className="d-flex mb-2" style={{ height: '16px' }}>
         <ButtonSolid
-          data-cy={`${dataCy}-add-more-button`}
+          data-cy={`${dataCy}-add-button`}
           variant="ghostBlue"
           size="sm"
           onClick={() => addNewKeyValuePair(options)}

frontend/src/components/ui/Input/CommonInput/Index.jsx

@@ -3,6 +3,7 @@ import NumberInput from './NumberInput';
 import TextInput from './TextInput';
 import { HelperMessage, InputLabel, ValidationMessage } from '../InputUtils/InputUtils';
 import { ButtonSolid } from '../../../../_components/AppButton';
+import { generateCypressDataCy } from '../../../../modules/common/helpers/cypressHelpers.js';
 
 const CommonInput = ({ label, helperText, disabled, required, onChange: change, ...restProps }) => {
   const { type, encrypted, validation, isValidatedMessages, isDisabled } = restProps;
@@ -65,13 +66,14 @@ const CommonInput = ({ label, helperText, disabled, required, onChange: change,
                 rel="noreferrer"
                 disabled={isDisabled}
                 onClick={toggleEditing}
+                data-cy={`button-${generateCypressDataCy(isEditing ? 'Cancel' : 'Edit')}`}
               >
                 {isEditing ? 'Cancel' : 'Edit'}
               </ButtonSolid>
             </div>
 
             <div className="col-auto mb-2">
-              <small className="text-green">
+              <small className="text-green" data-cy="encrypted-text">
                 <img className="mx-2 encrypted-icon" src="assets/images/icons/padlock.svg" width="12" height="12" />
                 Encrypted
               </small>

frontend/src/components/ui/Input/InputUtils/InputUtils.jsx

@@ -3,6 +3,7 @@ import { Label } from '../../Label/Label';
 import ValidationIcon from './ValidationIcon';
 import { cn } from '@/lib/utils';
 import HelperIcon from './HelperIcon';
+import { generateCypressDataCy } from '../../../../modules/common/helpers/cypressHelpers.js';
 
 export const ValidationMessage = ({ response, validationMessage, className }) => (
   <div className={cn('tw-flex tw-pl-[2px] tw-items-start tw-my-[2px]', className)}>
@@ -14,7 +15,7 @@ export const ValidationMessage = ({ response, validationMessage, className }) =>
       type="helper"
       size="default"
       className={`tw-font-normal ${response === true ? 'tw-text-text-success' : '!tw-text-text-warning'}`}
-      data-cy="validation-label"
+      data-cy={`${generateCypressDataCy(validationMessage)}-validation-label`}
     >
       {validationMessage}
     </Label>
@@ -53,7 +54,7 @@ export const InputLabel = ({ disabled, label, required }) => (
     type="label"
     size="default"
     className={`tw-font-medium tw-mb-[2px] ${disabled ? 'tw-text-text-disabled' : ''}`}
-    data-cy="input-field-label"
+    data-cy={`${generateCypressDataCy(label)}-field-label`}
   >
     {label}
     {required && <RequiredIndicator disabled={disabled} />}

frontend/src/modules/common/helpers/cypressHelpers.js

@@ -0,0 +1,6 @@
+export function generateCypressDataCy(text) {
+  return String(text)
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}

frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx

@@ -36,6 +36,7 @@ import './dataSourceManager.theme.scss';
 import { canUpdateDataSource } from '@/_helpers';
 import DataSourceSchemaManager from '@/_helpers/dataSourceSchemaManager';
 import MultiEnvTabs from './MultiEnvTabs';
+import { generateCypressDataCy } from '../../../common/helpers/cypressHelpers';
 
 class DataSourceManagerComponent extends React.Component {
   constructor(props) {
@@ -1127,7 +1128,11 @@ class DataSourceManagerComponent extends React.Component {
                       <div className="row w-100">
                         <div className="alert alert-danger" role="alert">
                           {validationError.map((error, index) => (
-                            <div key={index} className="text-muted" data-cy="connection-alert-text">
+                            <div
+                              key={index}
+                              className="text-muted"
+                              data-cy={`${generateCypressDataCy(error)}-field-alert-text`}
+                            >
                               {error}
                             </div>
                           ))}