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

app/react/components/form-components/FileUpload/FileUploadField.stories.tsx

@@ -28,6 +28,7 @@ function Example({ title }: Args) {
       value={value}
       title={title}
       inputId="file-field"
+      data-cy="file-upload-field"
     />
   );
 }

app/react/components/form-components/FileUpload/FileUploadField.test.tsx

@@ -7,6 +7,7 @@ test('render should make the file button clickable and fire onChange event after
   const { findByText, findByLabelText } = render(
     <FileUploadField
       title="test button"
+      data-cy="file-input"
       onChange={onClick}
       inputId="file-field"
     />

app/react/components/form-components/FileUpload/FileUploadField.tsx

@@ -1,12 +1,14 @@
 import { ChangeEvent, ComponentProps, createRef } from 'react';
 import { Upload, XCircle } from 'lucide-react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { Button } from '@@/buttons';
 import { Icon } from '@@/Icon';
 
 import styles from './FileUploadField.module.css';
 
-export interface Props {
+export interface Props extends AutomationTestingProps {
   onChange(value: File): void;
   value?: File | null;
   accept?: string;
@@ -26,6 +28,7 @@ export function FileUploadField({
   inputId,
   color = 'primary',
   name,
+  'data-cy': dataCy,
 }: Props) {
   const fileRef = createRef<HTMLInputElement>();
 
@@ -47,6 +50,7 @@ export function FileUploadField({
         color={color}
         onClick={handleButtonClick}
         className={styles.fileButton}
+        data-cy={dataCy}
         icon={Upload}
       >
         {title}

app/react/components/form-components/FileUpload/FileUploadForm.stories.tsx

@@ -31,6 +31,7 @@ function Example({ title }: Args) {
         description={
           <span>You can upload a Compose file from your computer.</span>
         }
+        data-cy="file-upload-form"
       />
     </div>
   );

app/react/components/form-components/FileUpload/FileUploadForm.test.tsx

@@ -9,6 +9,7 @@ test('render should include description', async () => {
       title="test button"
       onChange={onClick}
       description={<span>test description</span>}
+      data-cy="test"
     />
   );
 

app/react/components/form-components/FileUpload/FileUploadForm.tsx

@@ -1,5 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 import { FileUploadField } from '@@/form-components/FileUpload/FileUploadField';
 
@@ -17,7 +19,8 @@ export function FileUploadForm({
   title = 'Select a file',
   required = false,
   description,
-}: PropsWithChildren<Props>) {
+  'data-cy': dataCy,
+}: PropsWithChildren<Props> & AutomationTestingProps) {
   return (
     <div className="file-upload-form">
       <FormSectionTitle>Upload</FormSectionTitle>
@@ -28,6 +31,7 @@ export function FileUploadForm({
         <div className="col-sm-12">
           <FileUploadField
             inputId="file-upload-field"
+            data-cy={dataCy}
             onChange={onChange}
             value={value}
             title={title}