chore(automation): give unique selectors [r8s-168] (#345)

Co-authored-by: JamesPlayer <james.player@portainer.io>

app/react/components/TagSelector/TagSelector.tsx

@@ -104,6 +104,7 @@ export function TagSelector({
           onCreateOption={handleCreateOption}
           aria-label="Tags"
           data-cy="environment-tags-selector"
+          id="environment-tags-selector"
         />
       </FormControl>
     </>

app/react/components/UsersSelector/UsersSelector.tsx

@@ -36,6 +36,7 @@ export function UsersSelector({
         onChange(selectedUsers.map((user) => user.Id))
       }
       data-cy={dataCy}
+      id={dataCy}
       inputId={inputId}
       placeholder={placeholder}
       isDisabled={disabled}

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

@@ -18,6 +18,7 @@ export function Select<T extends number | string>({
   options,
   className,
   'data-cy': dataCy,
+  id,
   ...props
 }: Props<T> & SelectHTMLAttributes<HTMLSelectElement>) {
   return (

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

@@ -111,6 +111,7 @@ export function SingleSelect<TValue = string>({
       onChange={(option) => onChange(option ? option.value : null)}
       isOptionDisabled={(option) => !!option.disabled}
       data-cy={dataCy}
+      id={dataCy}
       inputId={inputId}
       placeholder={placeholder}
       isDisabled={disabled}
@@ -177,6 +178,7 @@ export function MultiSelect<TValue = string>({
       closeMenuOnSelect={false}
       onChange={(newValue) => onChange(newValue.map((option) => option.value))}
       data-cy={dataCy}
+      id={dataCy}
       inputId={inputId}
       placeholder={placeholder}
       isDisabled={disabled}

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

@@ -65,6 +65,7 @@ export function Select<
 }: Props<Option, IsMulti, Group> &
   AutomationTestingProps & {
     isItemVisible?: (item: Option, search: string) => boolean;
+    id: string;
   }) {
   const Component = isCreatable ? ReactSelectCreatable : ReactSelect;
   const { options } = props;

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

@@ -152,6 +152,7 @@ export function GpuFieldset({
               options={options}
               components={{ MultiValueRemove }}
               data-cy="docker-containers-gpu-select"
+              id="docker-containers-gpu-select"
             />
           </div>
         )}
@@ -173,6 +174,7 @@ export function GpuFieldset({
                 components={{ Option }}
                 onChange={onChangeSelectedCaps}
                 data-cy="docker-containers-gpu-capabilities-select"
+                id="docker-containers-gpu-capabilities-select"
               />
             </div>
           </div>

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

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

app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/CreatableSelector.tsx

@@ -43,6 +43,7 @@ export function CreatableSelector({
       isDisabled={isLoading}
       closeMenuOnSelect={false}
       data-cy="edge-devices-assignment-selector"
+      id="edge-devices-assignment-selector"
     />
   );
 

app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx

@@ -45,6 +45,7 @@ export function GroupSelector() {
       placeholder="Select a group"
       isClearable
       data-cy="edge-devices-assignment-selector"
+      id="edge-devices-assignment-selector"
     />
   );
 

app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateSelector.tsx

@@ -50,6 +50,7 @@ export function TemplateSelector({
           onChange(getTemplate({ type, id: templateId }), type);
         }}
         data-cy="edge-stacks-create-template-selector"
+        id="edge-stacks-create-template-selector"
       />
       {isLoadingValues && (
         <InlineLoader>Loading template values...</InlineLoader>

app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx

@@ -97,6 +97,7 @@ function InnerSelector({
       placeholder="Select one or multiple group(s)"
       closeMenuOnSelect={false}
       data-cy="edge-stacks-groups-selector"
+      id="edge-stacks-groups-selector"
       inputId={inputId}
     />
   ) : (

app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx

@@ -102,6 +102,7 @@ export function PrivateRegistryFieldset({
                   onChange={(value) => onSelect(value?.Id)}
                   className="w-full"
                   data-cy="private-registry-selector"
+                  id="private-registry-selector"
                 />
                 {method !== 'repository' && (
                   <Button

app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathForm.tsx

@@ -122,6 +122,7 @@ export function AppIngressPathForm({
               onChangeIngressPath(newIngressPath);
             }}
             data-cy="k8sAppCreate-ingressPathHostSelect"
+            id="k8sAppCreate-ingressPathHostSelect"
           />
           <InputGroup.ButtonWrapper>
             <Button

app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationItem.tsx

@@ -60,6 +60,7 @@ export function ConfigurationItem({
               onChange={onSelectConfigMap}
               size="sm"
               data-cy={`k8sAppCreate-add${configurationType}Select_${index}`}
+              id={`k8sAppCreate-add${configurationType}Select_${index}`}
             />
           </InputGroup>
           {formikError?.selectedConfiguration && (

app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFolderItem.tsx

@@ -144,6 +144,7 @@ export function PersistedFolderItem({
                   applicationValues.Containers.length > 1
                 }
                 data-cy={`k8sAppCreate-persistentFolderSizeUnitSelect_${index}`}
+                id={`k8sAppCreate-persistentFolderSizeUnitSelect_${index}`}
               />
             </InputGroup>
             {formikError?.size && <FormError>{formikError?.size}</FormError>}
@@ -175,6 +176,7 @@ export function PersistedFolderItem({
                 storageClasses.length <= 1
               }
               data-cy={`k8sAppCreate-storageSelect_${index}`}
+              id={`k8sAppCreate-storageSelect_${index}`}
             />
           </InputGroup>
         </>
@@ -207,6 +209,7 @@ export function PersistedFolderItem({
               availableVolumes.length < 1
             }
             data-cy={`k8sAppCreate-pvcSelect_${index}`}
+            id={`k8sAppCreate-pvcSelect_${index}`}
           />
         </InputGroup>
       )}

app/react/kubernetes/applications/components/PlacementFormSection/PlacementItem.tsx

@@ -49,6 +49,7 @@ export function PlacementItem({
             className={clsx({ striked: !!item.needsDeletion })}
             isDisabled={!!item.needsDeletion}
             data-cy={`k8sAppCreate-placementLabel_${index}`}
+            id={`k8sAppCreate-placementLabel_${index}`}
           />
           {placementError?.label && (
             <FormError>{placementError.label}</FormError>
@@ -65,6 +66,7 @@ export function PlacementItem({
             className={clsx({ striked: !!item.needsDeletion })}
             isDisabled={!!item.needsDeletion}
             data-cy={`k8sAppCreate-placementName_${index}`}
+            id={`k8sAppCreate-placementName_${index}`}
           />
           {placementError?.value && (
             <FormError>{placementError.value}</FormError>

app/react/kubernetes/cluster/ConfigureView/ConfigureForm/StorageAccessModeSelector.tsx

@@ -35,6 +35,7 @@ export function StorageAccessModeSelector({
       inputId={inputId}
       placeholder="Not configured"
       data-cy={`kubeSetup-storageAccessSelect${storageClassName}`}
+      id={`kubeSetup-storageAccessSelect${storageClassName}`}
     />
   );
 }

app/react/kubernetes/cluster/RegistryAccessView/NamespacesSelector.tsx

@@ -43,6 +43,7 @@ export function NamespacesSelector({
         onChange(selectedTeams.map((namespace) => namespace.name))
       }
       data-cy={dataCy}
+      id={dataCy}
       inputId={inputId}
       placeholder={placeholder}
     />

app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx

@@ -184,6 +184,7 @@ export function IngressForm({
                       }
                       noOptionsMessage={() => 'No namespaces available'}
                       data-cy="k8sAppCreate-namespaceSelect"
+                      id="k8sAppCreate-namespaceSelect"
                     />
                   )}
                 </div>
@@ -266,6 +267,7 @@ export function IngressForm({
                         }
                         noOptionsMessage={() => 'No ingress classes available'}
                         data-cy="k8sAppCreate-ingressClassSelect"
+                        id="k8sAppCreate-ingressClassSelect"
                       />
                       {errors.className && (
                         <FormError className="error-inline mt-1">
@@ -464,6 +466,7 @@ export function IngressForm({
                           noOptionsMessage={() => 'No TLS secrets available'}
                           size="sm"
                           data-cy={`k8sAppCreate-tlsSelect_${hostIndex}`}
+                          id={`k8sAppCreate-tlsSelect_${hostIndex}`}
                         />
                         {!host.NoHost && (
                           <div className="input-group-btn">

app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx

@@ -35,6 +35,7 @@ export function NamespaceAccessUsersSelector({
       closeMenuOnSelect={false}
       onChange={onChange}
       data-cy={dataCy}
+      id={dataCy}
       inputId={inputId}
       placeholder={placeholder}
       components={{ MultiValueLabel, Option: OptionComponent }}

app/react/kubernetes/namespaces/components/NamespaceForm/RegistriesFormSection/RegistriesSelector.tsx

@@ -67,6 +67,7 @@ export function RegistriesSelector({
       onChange={onChange}
       inputId={inputId}
       data-cy="namespaceCreate-registrySelect"
+      id="namespaceCreate-registrySelect"
       placeholder="Select one or more registries"
       isDisabled={isEditingDisabled}
     />

app/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector.tsx

@@ -37,6 +37,7 @@ export function PorAccessManagementUsersSelector({
             closeMenuOnSelect={false}
             onChange={onChange}
             data-cy="component-selectUser"
+            id="component-selectUser"
             inputId="users-selector"
             placeholder="Select one or more users and/or teams"
             components={{ MultiValueLabel, Option: OptionComponent }}

app/react/portainer/access-control/EditDetails/TeamsField.tsx

@@ -30,7 +30,7 @@ export function TeamsField({
             'You can select which team(s) will be able to manage this resource.'
           : undefined
       }
-      inputId="teams-selector"
+      inputId="authorized-teams-selector"
       errors={errors}
     >
       {teams.length > 0 ? (
@@ -39,7 +39,7 @@ export function TeamsField({
           teams={teams}
           onChange={onChange}
           value={value}
-          inputId="teams-selector"
+          inputId="authorized-teams-selector"
           dataCy="teams-selector"
         />
       ) : (

app/react/portainer/access-control/EditDetails/UsersField.tsx

@@ -21,7 +21,7 @@ export function UsersField({ name, users, value, onChange, errors }: Props) {
           ? 'You can select which user(s) will be able to manage this resource.'
           : undefined
       }
-      inputId="users-selector"
+      inputId="authorized-users-selector"
       errors={errors}
     >
       {users.length > 0 ? (
@@ -30,7 +30,7 @@ export function UsersField({ name, users, value, onChange, errors }: Props) {
           users={users}
           onChange={onChange}
           value={value}
-          inputId="users-selector"
+          inputId="authorized-users-selector"
           dataCy="users-selector"
         />
       ) : (

app/react/portainer/access-control/PorAccessControlForm/TeamsSelector.tsx

@@ -26,6 +26,7 @@ export function PorAccessControlFormTeamSelector({
       closeMenuOnSelect={false}
       onChange={onChange}
       data-cy="portainer-selectTeamAccess"
+      id="portainer-selectTeamAccess"
       inputId={inputId}
       placeholder="Select one or more teams"
     />

app/react/portainer/access-control/PorAccessControlForm/UsersSelector.tsx

@@ -26,6 +26,7 @@ export function PorAccessControlFormUserSelector({
       closeMenuOnSelect={false}
       onChange={onChange}
       data-cy="portainer-selectUserAccess"
+      id="portainer-selectUserAccess"
       inputId={inputId}
       placeholder="Select one or more users"
     />

app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx

@@ -112,6 +112,7 @@ export function TimeWindowPickerInputGroup({
             onChangeTimeZone(newTimeZone.value);
           }}
           data-cy="time-window-picker-timezone-select"
+          id="time-window-picker-timezone-select"
         />
       </div>
       {errors?.StartTime && <FormError>{errors.StartTime}</FormError>}

app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx

@@ -54,6 +54,7 @@ export function EdgeGroupsField({
           closeMenuOnSelect={false}
           isDisabled={disabled}
           data-cy="update-schedules-edge-groups-select"
+          id="update-schedules-edge-groups-select"
         />
       </FormControl>
       <TextTip color="blue">

app/react/portainer/gitops/AuthFieldset/CredentialSelector.tsx

@@ -41,6 +41,7 @@ export function CredentialSelector({
             noOptionsMessage={() => 'no saved credentials'}
             inputId="git-creds-selector"
             data-cy="git-credentials-selector"
+            id="git-credentials-selector"
           />
         </FormControl>
       </div>