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

app/react/docker/containers/CreateView/BaseForm/BaseForm.tsx

@@ -84,6 +84,7 @@ export function BaseForm({
               setFieldValue('name', name);
             }}
             placeholder="e.g. myContainer"
+            data-cy="container-name-input"
           />
         </FormControl>
 
@@ -108,6 +109,7 @@ export function BaseForm({
                     setFieldValue('alwaysPull', alwaysPull)
                   }
                   labelClass="col-sm-3 col-lg-2"
+                  data-cy="always-pull-switch"
                 />
               </div>
             </div>
@@ -121,6 +123,7 @@ export function BaseForm({
                 <div className="col-sm-12">
                   <SwitchField
                     label="Create a container webhook"
+                    data-cy="container-webhook-switch"
                     tooltip="Create a webhook (or callback URI) to automate the recreate this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container."
                     checked={values.enableWebhook}
                     onChange={(enableWebhook) =>
@@ -140,6 +143,7 @@ export function BaseForm({
             <div className="col-sm-12">
               <SwitchField
                 label="Publish all exposed ports to random host ports"
+                data-cy="publish-all-ports-switch"
                 tooltip="When enabled, Portainer will let Docker automatically map a random port on the host to each one defined in the image Dockerfile."
                 checked={values.publishAllPorts}
                 onChange={(publishAllPorts) =>
@@ -179,6 +183,7 @@ export function BaseForm({
           <div className="col-sm-12">
             <SwitchField
               label="Auto remove"
+              data-cy="container-auto-remove-switch"
               tooltip="When enabled, Portainer will automatically remove the container when it exits. This is useful when you want to use the container only once."
               checked={values.autoRemove}
               onChange={(autoRemove) => setFieldValue('autoRemove', autoRemove)}
@@ -191,6 +196,7 @@ export function BaseForm({
           <div className="col-sm-12">
             <LoadingButton
               loadingText="Deployment in progress..."
+              data-cy="deploy-container-button"
               isLoading={isLoading}
               disabled={!isValid}
             >

app/react/docker/containers/CreateView/BaseForm/PortsMappingField.tsx

@@ -50,6 +50,7 @@ export function PortsMappingField({
         disabled={disabled}
         readOnly={readOnly}
         tooltip="When a range of ports on the host and a single port on the container is specified, Docker will randomly choose a single available port in the defined range and forward that to the container port."
+        data-cy="docker-containers-ports-mapping"
       />
       {typeof errors === 'string' && (
         <div className="form-group col-md-12">
@@ -73,6 +74,7 @@ function Item({
       <div className="flex items-center gap-2">
         <InputLabeled
           size="small"
+          data-cy={`hostPort-${index}`}
           disabled={disabled}
           readOnly={readOnly}
           value={item.hostPort}
@@ -97,6 +99,7 @@ function Item({
           placeholder="e.g. 80"
           className="w-1/2"
           id={`containerPort-${index}`}
+          data-cy={`containerPort-${index}`}
         />
 
         <ButtonSelector<Protocol>

app/react/docker/containers/CreateView/CapabilitiesTab/CapabilitiesTab.tsx

@@ -19,6 +19,7 @@ export function CapabilitiesTab({
           <div key={cap.key} className="w-1/3 text-center">
             <SwitchField
               labelClass="col-sm-6"
+              data-cy="docker-container-capability-switch"
               tooltip={cap.description}
               checked={values.includes(cap.key)}
               label={cap.key}

app/react/docker/containers/CreateView/CommandsTab/CommandsTab.tsx

@@ -61,6 +61,7 @@ export function CommandsTab({
             value={values.workingDir}
             onChange={(e) => setFieldValue('workingDir', e.target.value)}
             placeholder="e.g. /myapp"
+            data-cy="working-dir-input"
           />
         </FormControl>
         <FormControl
@@ -73,6 +74,7 @@ export function CommandsTab({
             value={values.user}
             onChange={(e) => setFieldValue('user', e.target.value)}
             placeholder="e.g. nginx"
+            data-cy="user-input"
           />
         </FormControl>
       </div>

app/react/docker/containers/CreateView/CommandsTab/ConsoleSettings.tsx

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { mixed } from 'yup';
 import { ContainerConfig } from 'docker-types/generated/1.41';
 
+import { AutomationTestingProps } from '@/types';
+
 import { FormControl } from '@@/form-components/FormControl';
 
 const consoleSettingTypes = ['tty', 'interactive', 'both', 'none'] as const;
@@ -28,6 +30,7 @@ export function ConsoleSettings({
           </>
         }
         selected={value}
+        data-cy="container-console-interactive-tty"
       />
       <Item
         value="interactive"
@@ -38,6 +41,7 @@ export function ConsoleSettings({
           </>
         }
         selected={value}
+        data-cy="container-console-interactive"
       />
       <Item
         value="tty"
@@ -48,12 +52,14 @@ export function ConsoleSettings({
           </>
         }
         selected={value}
+        data-cy="container-console-tty"
       />
       <Item
         value="none"
         onChange={handleChange}
         label={<>None</>}
         selected={value}
+        data-cy="container-console-none"
       />
     </FormControl>
   );
@@ -68,16 +74,18 @@ function Item({
   selected,
   onChange,
   label,
+  'data-cy': dataCy,
 }: {
   value: ConsoleSetting;
   selected: ConsoleSetting;
   onChange(value: ConsoleSetting): void;
   label: ReactNode;
-}) {
+} & AutomationTestingProps) {
   return (
     <label className="radio-inline !m-0 w-1/2">
       <input
         type="radio"
+        data-cy={dataCy}
         name="container_console"
         value={value}
         checked={value === selected}

app/react/docker/containers/CreateView/CommandsTab/LoggerConfig.tsx

@@ -52,6 +52,7 @@ export function LoggerConfig({
           value={value.type}
           onChange={(type) => onChange({ ...value, type: type || '' })}
           options={pluginOptions}
+          data-cy="docker-logging-driver-selector"
         />
       </FormControl>
 
@@ -82,6 +83,7 @@ export function LoggerConfig({
         itemBuilder={() => ({ option: '', value: '' })}
         disabled={isDisabled}
         errors={errors?.options}
+        data-cy="docker-logging-options"
       />
     </FormSection>
   );
@@ -95,6 +97,7 @@ function Item({
   item: { option, value },
   onChange,
   error,
+  index,
 }: ItemProps<{ option: string; value: string }>) {
   return (
     <div>
@@ -105,6 +108,7 @@ function Item({
             value={option}
             onChange={(e) => handleChange({ option: e.target.value })}
             placeholder="e.g. FOO"
+            data-cy={`docker-logging-option_${index}`}
           />
         </InputGroup>
         <InputGroup className="w-1/2">
@@ -113,6 +117,7 @@ function Item({
             value={value}
             onChange={(e) => handleChange({ value: e.target.value })}
             placeholder="e.g bar"
+            data-cy={`docker-logging-value_${index}`}
           />
         </InputGroup>
       </div>

app/react/docker/containers/CreateView/CommandsTab/OverridableInput.tsx

@@ -21,6 +21,7 @@ export function OverridableInput({
       <InputGroup.ButtonWrapper>
         <Button
           color="light"
+          data-cy={`docker-container-default-${id}`}
           size="medium"
           className={clsx('!ml-0', { active: !override })}
           onClick={() => onChange(null)}
@@ -29,6 +30,7 @@ export function OverridableInput({
         </Button>
         <Button
           color="light"
+          data-cy={`docker-container-override-${id}`}
           size="medium"
           className={clsx({ active: override })}
           onClick={() => onChange('')}
@@ -38,6 +40,7 @@ export function OverridableInput({
       </InputGroup.ButtonWrapper>
       <InputGroup.Input
         disabled={!override}
+        data-cy={`docker-container-input-${id}`}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         id={id}

app/react/docker/containers/CreateView/LabelsTab/Item.tsx

@@ -4,7 +4,7 @@ import { ItemProps } from '@@/form-components/InputList';
 
 import { Label } from './types';
 
-export function Item({ item, onChange, error }: ItemProps<Label>) {
+export function Item({ item, onChange, error, index }: ItemProps<Label>) {
   return (
     <div className="w-full">
       <div className="flex w-full gap-4">
@@ -12,6 +12,7 @@ export function Item({ item, onChange, error }: ItemProps<Label>) {
           <InputGroup.Addon>name</InputGroup.Addon>
           <InputGroup.Input
             value={item.name}
+            data-cy={`label-name_${index}`}
             onChange={(e) => onChange({ ...item, name: e.target.value })}
             placeholder="e.g. com.example.foo"
           />
@@ -20,6 +21,7 @@ export function Item({ item, onChange, error }: ItemProps<Label>) {
           <InputGroup.Addon>value</InputGroup.Addon>
           <InputGroup.Input
             value={item.value}
+            data-cy={`label-value${index}`}
             onChange={(e) => onChange({ ...item, value: e.target.value })}
             placeholder="e.g. bar"
           />

app/react/docker/containers/CreateView/LabelsTab/LabelsTab.tsx

@@ -21,6 +21,7 @@ export function LabelsTab({
       value={values}
       item={Item}
       itemBuilder={() => ({ name: '', value: '' })}
+      data-cy="docker-container-labels"
     />
   );
 

app/react/docker/containers/CreateView/NetworkTab/ContainerSelector.tsx

@@ -31,6 +31,7 @@ export function ContainerSelector({
       onChange={onChange}
       options={containersQuery.data || []}
       isLoading={containersQuery.isLoading}
+      data-cy="docker-container-selector"
     />
   );
 }

app/react/docker/containers/CreateView/NetworkTab/NetworkTab.tsx

@@ -44,6 +44,7 @@ export function NetworkTab({
           value={values.hostname}
           onChange={(e) => setFieldValue('hostname', e.target.value)}
           placeholder="e.g. web01"
+          data-cy="docker-container-hostname-input"
         />
       </FormControl>
 
@@ -52,6 +53,7 @@ export function NetworkTab({
           value={values.domain}
           onChange={(e) => setFieldValue('domain', e.target.value)}
           placeholder="e.g. example.com"
+          data-cy="docker-container-domain-input"
         />
       </FormControl>
 
@@ -60,6 +62,7 @@ export function NetworkTab({
           value={values.macAddress}
           onChange={(e) => setFieldValue('macAddress', e.target.value)}
           placeholder="e.g. 12-34-56-78-9a-bc"
+          data-cy="docker-container-mac-address-input"
         />
       </FormControl>
 
@@ -68,6 +71,7 @@ export function NetworkTab({
           value={values.ipv4Address}
           onChange={(e) => setFieldValue('ipv4Address', e.target.value)}
           placeholder="e.g. 172.20.0.7"
+          data-cy="docker-container-ipv4-address-input"
         />
       </FormControl>
 
@@ -76,6 +80,7 @@ export function NetworkTab({
           value={values.ipv6Address}
           onChange={(e) => setFieldValue('ipv6Address', e.target.value)}
           placeholder="e.g. a:b:c:d::1234"
+          data-cy="docker-container-ipv6-address-input"
         />
       </FormControl>
 
@@ -84,6 +89,7 @@ export function NetworkTab({
           value={values.primaryDns}
           onChange={(e) => setFieldValue('primaryDns', e.target.value)}
           placeholder="e.g. 1.1.1.1, 2606:4700:4700::1111"
+          data-cy="docker-container-primary-dns-input"
         />
       </FormControl>
 
@@ -92,6 +98,7 @@ export function NetworkTab({
           value={values.secondaryDns}
           onChange={(e) => setFieldValue('secondaryDns', e.target.value)}
           placeholder="e.g. 1.0.0.1, 2606:4700:4700::1001"
+          data-cy="docker-container-secondary-dns-input"
         />
       </FormControl>
 
@@ -104,6 +111,7 @@ export function NetworkTab({
         errors={errors?.hostsFileEntries}
         item={HostsFileEntryItem}
         itemBuilder={() => ''}
+        data-cy="docker-container-hosts-file-entries"
       />
     </div>
   );
@@ -115,6 +123,7 @@ function HostsFileEntryItem({
   disabled,
   error,
   readOnly,
+  index,
 }: ItemProps<string>) {
   return (
     <div>
@@ -125,6 +134,7 @@ function HostsFileEntryItem({
           onChange={(e) => onChange(e.target.value)}
           disabled={disabled}
           readOnly={readOnly}
+          data-cy={`docker-container-hosts-file-entry_${index}`}
         />
       </InputGroup>
 

app/react/docker/containers/CreateView/ResourcesTab/DevicesField.tsx

@@ -31,16 +31,18 @@ export function DevicesField({
       label="Devices"
       errors={errors}
       itemBuilder={() => ({ pathOnHost: '', pathInContainer: '' })}
+      data-cy="docker-container-devices"
     />
   );
 }
 
-function Item({ item, onChange, error }: ItemProps<Device>) {
+function Item({ item, onChange, error, index }: ItemProps<Device>) {
   return (
     <div className="w-full">
       <div className="flex w-full gap-4">
         <InputLabeled
           value={item.pathOnHost}
+          data-cy={`device-path-on-host_${index}`}
           onChange={(e) => onChange({ ...item, pathOnHost: e.target.value })}
           label="host"
           placeholder="e.g. /dev/tty0"
@@ -49,6 +51,7 @@ function Item({ item, onChange, error }: ItemProps<Device>) {
         />
         <InputLabeled
           value={item.pathInContainer}
+          data-cy={`device-path-on-container_${index}`}
           onChange={(e) =>
             onChange({ ...item, pathInContainer: e.target.value })
           }

app/react/docker/containers/CreateView/ResourcesTab/EditResourceForm.tsx

@@ -73,6 +73,7 @@ export function EditResourcesForm({
             <div className="col-sm-12 flex items-center gap-4">
               <LoadingButton
                 isLoading={updateMutation.isLoading}
+                data-cy="update-limits-button"
                 disabled={isImageInvalid || !dirty}
                 loadingText="Update in progress..."
                 type="button"

app/react/docker/containers/CreateView/ResourcesTab/GpuFieldset/GpuFieldset.tsx

@@ -136,6 +136,7 @@ export function GpuFieldset({
             onChange={toggleEnableGpu}
             className="ml-2"
             disabled={!enableGpuManagement}
+            data-cy="docker-containers-gpu-enabled-switch"
           />
         </div>
         {enableGpuManagement && values.enabled && (
@@ -150,6 +151,7 @@ export function GpuFieldset({
               onChange={onChangeSelectedGpus}
               options={options}
               components={{ MultiValueRemove }}
+              data-cy="docker-containers-gpu-select"
             />
           </div>
         )}
@@ -170,6 +172,7 @@ export function GpuFieldset({
                 options={NvidiaCapabilitiesOptions}
                 components={{ Option }}
                 onChange={onChangeSelectedCaps}
+                data-cy="docker-containers-gpu-capabilities-select"
               />
             </div>
           </div>

app/react/docker/containers/CreateView/ResourcesTab/ResourcesFieldset.tsx

@@ -69,6 +69,7 @@ export function ResourceFieldset({
           min={0}
           max={maxCpu}
           step={0.1}
+          dataCy="k8sNamespaceCreate-resourceCpu"
         />
       </FormControl>
     </FormSection>

app/react/docker/containers/CreateView/ResourcesTab/ResourcesTab.tsx

@@ -99,6 +99,7 @@ export function ResourcesTab({
               setFieldValue('sharedMemorySize', e.target.valueAsNumber)
             }
             className="w-32"
+            data-cy="shared-memory-size"
           />
           <div className="small text-muted">
             Size of /dev/shm (<b>MB</b>)

app/react/docker/containers/CreateView/ResourcesTab/RuntimeSection.tsx

@@ -30,6 +30,7 @@ export function RuntimeSection({
           <div className="col-sm-12">
             <SwitchField
               labelClass="col-sm-2"
+              data-cy="docker-privileged-switch"
               label="Privileged mode"
               checked={values.privileged}
               onChange={(privileged) => handleChange({ privileged })}
@@ -43,6 +44,7 @@ export function RuntimeSection({
           <div className="col-sm-12">
             <SwitchField
               labelClass="col-sm-2"
+              data-cy="docker-init-switch"
               label="Init"
               checked={values.init}
               onChange={(init) => handleChange({ init })}

app/react/docker/containers/CreateView/ResourcesTab/RuntimeSelector.tsx

@@ -26,6 +26,7 @@ export function RuntimeSelector({
       options={infoQuery.data || []}
       isLoading={infoQuery.isLoading}
       disabled={infoQuery.isLoading}
+      data-cy="docker-runtime-selector"
     />
   );
 }

app/react/docker/containers/CreateView/ResourcesTab/SysctlsField.tsx

@@ -30,11 +30,12 @@ export function SysctlsField({
       label="Sysctls"
       errors={errors}
       itemBuilder={() => ({ name: '', value: '' })}
+      data-cy="docker-container-sysctls"
     />
   );
 }
 
-function Item({ item, onChange, error }: ItemProps<Sysctls>) {
+function Item({ item, onChange, error, index }: ItemProps<Sysctls>) {
   return (
     <div className="w-full">
       <div className="flex w-full gap-4">
@@ -45,6 +46,7 @@ function Item({ item, onChange, error }: ItemProps<Sysctls>) {
           placeholder="e.g. FOO"
           className="w-1/2"
           size="small"
+          data-cy={`docker-container-sysctl-name_${index}`}
         />
         <InputLabeled
           value={item.value}
@@ -53,6 +55,7 @@ function Item({ item, onChange, error }: ItemProps<Sysctls>) {
           placeholder="e.g. bar"
           className="w-1/2"
           size="small"
+          data-cy={`docker-container-sysctl-value_${index}`}
         />
       </div>
       {error && <FormError>{Object.values(error)[0]}</FormError>}

app/react/docker/containers/CreateView/VolumesTab/Item.tsx

@@ -31,6 +31,7 @@ export function Item({
           size="small"
           className="flex-1"
           id={`container-path-${index}`}
+          data-cy={`container-path_${index}`}
         />
 
         {allowBindMounts && (
@@ -73,6 +74,7 @@ export function Item({
             value={volume.name}
             onChange={(e) => setValue({ name: e.target.value })}
             id={`host-path-${index}`}
+            data-cy={`host-path_${index}`}
           />
         )}
 

app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx

@@ -40,6 +40,7 @@ export function VolumeSelector({
       value={selectedValue}
       onChange={(vol) => onChange(vol?.Name)}
       inputId={inputId}
+      data-cy="docker-containers-volume-selector"
     />
   );
 }

app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx

@@ -31,6 +31,7 @@ export function VolumesTab({
           name: '',
           readOnly: false,
         })}
+        data-cy="docker-container-volumes"
       />
     </InputContext.Provider>
   );