chore(data-cy): require data-cy attributes [EE-6880] (#11453)

app/react/components/form-components/EnvironmentVariablesFieldset/AdvancedMode.tsx

@@ -1,5 +1,7 @@
 import { List } from 'lucide-react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { CodeEditor } from '@@/CodeEditor';
 import { TextTip } from '@@/Tip/TextTip';
 import { Button } from '@@/buttons';
@@ -11,11 +13,12 @@ export function AdvancedMode({
   value,
   onChange,
   onSimpleModeClick,
+  'data-cy': dataCy,
 }: {
   value: Values;
   onChange: (value: Values) => void;
   onSimpleModeClick: () => void;
-}) {
+} & AutomationTestingProps) {
   const editorValue = convertToArrayOfStrings(value).join('\n');
 
   return (
@@ -26,6 +29,7 @@ export function AdvancedMode({
         icon={List}
         className="!ml-0 p-0 hover:no-underline"
         onClick={onSimpleModeClick}
+        data-cy="env-simple-mode-button"
       >
         Simple mode
       </Button>
@@ -40,6 +44,7 @@ export function AdvancedMode({
         value={editorValue}
         onChange={handleEditorChange}
         placeholder="e.g. key=value"
+        data-cy={dataCy}
       />
     </>
   );

app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariableItem.tsx

@@ -18,6 +18,7 @@ export function EnvironmentVariableItem({
         <div className="w-1/2">
           <InputLabeled
             className="w-full"
+            data-cy={`env-name_${index}`}
             label="name"
             required
             value={item.name}
@@ -31,7 +32,7 @@ export function EnvironmentVariableItem({
           />
           {error && (
             <div>
-              <FormError className="mt-1 !mb-0">
+              <FormError className="!mb-0 mt-1">
                 {Object.values(error)[0]}
               </FormError>
             </div>
@@ -39,6 +40,7 @@ export function EnvironmentVariableItem({
         </div>
         <InputLabeled
           className="w-1/2"
+          data-cy={`env-value_${index}`}
           label="value"
           value={item.value}
           onChange={(e) => handleChange({ value: e.target.value })}

app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesFieldset.tsx

@@ -34,6 +34,7 @@ export function EnvironmentVariablesFieldset({
       ) : (
         <AdvancedMode
           onSimpleModeClick={() => setSimpleMode(true)}
+          data-cy="env-var-advanced-mode"
           onChange={onChange}
           value={values}
         />

app/react/components/form-components/EnvironmentVariablesFieldset/SimpleMode.tsx

@@ -34,6 +34,7 @@ export function SimpleMode({
         icon={Edit}
         className="!ml-0 p-0 hover:no-underline"
         onClick={onAdvancedModeClick}
+        data-cy="environment-variables-advanced-mode-button"
       >
         Advanced mode
       </Button>
@@ -50,6 +51,7 @@ export function SimpleMode({
         item={EnvironmentVariableItem}
         errors={errors}
         canUndoDelete={canUndoDelete}
+        data-cy="simple-environment-variable-fieldset"
       />
 
       <div className="flex gap-2">
@@ -60,6 +62,7 @@ export function SimpleMode({
           className="!ml-0"
           color="default"
           icon={Plus}
+          data-cy="add-environment-variable-button"
         >
           Add an environment variable
         </Button>
@@ -84,6 +87,7 @@ function FileEnv({ onChooseFile }: { onChooseFile: (file: Values) => void }) {
         accept=".env"
         value={file}
         color="default"
+        data-cy="load-environment-variables-from-file-button"
       />
 
       {fileTooBig && (