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

app/react/components/form-components/Input/Input.stories.tsx

@@ -22,6 +22,7 @@ export function TextField({ disabled }: Args) {
       value={value}
       onChange={(e) => setValue(e.target.value)}
       disabled={disabled}
+      data-cy="docker-logging-options-input"
     />
   );
 }

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

@@ -1,9 +1,11 @@
 import clsx from 'clsx';
 import { forwardRef, InputHTMLAttributes, Ref } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 export const InputWithRef = forwardRef<
   HTMLInputElement,
-  InputHTMLAttributes<HTMLInputElement>
+  InputHTMLAttributes<HTMLInputElement> & AutomationTestingProps
 >(
   // eslint-disable-next-line react/jsx-props-no-spreading
   (props, ref) => <Input {...props} mRef={ref} />
@@ -14,10 +16,11 @@ export function Input({
   mRef: ref,
   value,
   type,
+  'data-cy': dataCy,
   ...props
 }: InputHTMLAttributes<HTMLInputElement> & {
   mRef?: Ref<HTMLInputElement>;
-}) {
+} & AutomationTestingProps) {
   return (
     <input
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -26,6 +29,7 @@ export function Input({
       value={type === 'number' && Number.isNaN(value) ? '' : value} // avoid the `"NaN" cannot be parsed, or is out of range.` error for an empty number input
       ref={ref}
       className={clsx('form-control', className)}
+      data-cy={dataCy}
     />
   );
 }

app/react/components/form-components/Input/InputLabeled.stories.tsx

@@ -16,6 +16,7 @@ function TextInput() {
   return (
     <InputLabeled
       label="label"
+      data-cy="input"
       value={value}
       onChange={(e) => setValue(e.target.value)}
     />
@@ -28,6 +29,7 @@ function NumberInput() {
   return (
     <InputLabeled
       label="label"
+      data-cy="input"
       type="number"
       value={value}
       onChange={(e) => setValue(e.target.valueAsNumber)}

app/react/components/form-components/Input/InputLabeled.tsx

@@ -1,6 +1,8 @@
 import { ComponentProps, InputHTMLAttributes } from 'react';
 import clsx from 'clsx';
 
+import { AutomationTestingProps } from '@/types';
+
 import { InputGroup } from '../InputGroup';
 
 export function InputLabeled({
@@ -17,7 +19,8 @@ export function InputLabeled({
   className?: string;
   size?: ComponentProps<typeof InputGroup>['size'];
   needsDeletion?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'children'>) {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'children'> &
+  AutomationTestingProps) {
   return (
     <InputGroup
       className={clsx(className, needsDeletion && 'striked')}

app/react/components/form-components/Input/Select.stories.tsx

@@ -23,6 +23,7 @@ export function Example({ disabled }: Args) {
   return (
     <Select
       value={value}
+      data-cy="select"
       onChange={(e) => setValue(parseInt(e.target.value, 10))}
       disabled={disabled}
       options={options}

app/react/components/form-components/Input/Select.tsx

@@ -1,18 +1,23 @@
 import clsx from 'clsx';
 import { SelectHTMLAttributes } from 'react';
 
-export interface Option<T extends string | number> {
+import { AutomationTestingProps } from '@/types';
+
+export interface Option<T extends string | number>
+  extends Partial<AutomationTestingProps> {
   value: T;
   label: string;
+  disabled?: boolean;
 }
 
-interface Props<T extends string | number> {
+interface Props<T extends string | number> extends AutomationTestingProps {
   options: Option<T>[];
 }
 
 export function Select<T extends number | string>({
   options,
   className,
+  'data-cy': dataCy,
   ...props
 }: Props<T> & SelectHTMLAttributes<HTMLSelectElement>) {
   return (
@@ -20,9 +25,15 @@ export function Select<T extends number | string>({
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
       className={clsx('form-control', className)}
+      data-cy={dataCy}
     >
       {options.map((item) => (
-        <option value={item.value} key={item.value}>
+        <option
+          value={item.value}
+          key={item.value}
+          disabled={item.disabled}
+          data-cy={`${dataCy}-${item.value}`}
+        >
           {item.label}
         </option>
       ))}

app/react/components/form-components/Input/Select.tsx.rej

@@ -0,0 +1,10 @@
+diff a/app/react/components/form-components/Input/Select.tsx b/app/react/components/form-components/Input/Select.tsx	(rejected hunks)
+@@ -10,7 +10,7 @@ export interface Option<T extends string | number>
+   disabled?: boolean;
+ }
+ 
+-interface Props<T extends string | number> {
++interface Props<T extends string | number> extends AutomationTestingProps {
+   options: Option<T>[];
+ }
+ 

app/react/components/form-components/Input/Textarea.tsx

@@ -1,10 +1,12 @@
 import clsx from 'clsx';
 import { TextareaHTMLAttributes } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 export function TextArea({
   className,
   ...props
-}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+}: TextareaHTMLAttributes<HTMLTextAreaElement> & AutomationTestingProps) {
   return (
     <textarea
       // eslint-disable-next-line react/jsx-props-no-spreading