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

Co-authored-by: JamesPlayer <james.player@portainer.io>
2025-01-30 15:42:32 +13:00 · 2025-01-30 15:42:32 +13:00 · c80cc6e268
parent b30a1b5250
commit c80cc6e268
29 changed files with 38 additions and 4 deletions
--- a/app/react/components/TagSelector/TagSelector.tsx
+++ b/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>
    </>
--- a/app/react/components/UsersSelector/UsersSelector.tsx
+++ b/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}
--- a/app/react/components/form-components/Input/Select.tsx
+++ b/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 (
--- a/app/react/components/form-components/PortainerSelect.tsx
+++ b/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}
--- a/app/react/components/form-components/ReactSelect.tsx
+++ b/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;
--- a/app/react/docker/containers/CreateView/ResourcesTab/GpuFieldset/GpuFieldset.tsx
+++ b/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>
--- a/app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx
+++ b/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"
    />
  );
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/CreatableSelector.tsx
+++ b/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"
    />
  );

--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx
+++ b/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"
    />
  );

--- a/app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateSelector.tsx
+++ b/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>
--- a/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
+++ b/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}
    />
  ) : (
--- a/app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx
+++ b/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
--- a/app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathForm.tsx
+++ b/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
--- a/app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationItem.tsx
+++ b/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 && (
--- a/app/react/kubernetes/applications/components/PersistedFoldersFormSection/PersistedFolderItem.tsx
+++ b/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>
      )}
--- a/app/react/kubernetes/applications/components/PlacementFormSection/PlacementItem.tsx
+++ b/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>
--- a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/StorageAccessModeSelector.tsx
+++ b/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}`}
    />
  );
 }
--- a/app/react/kubernetes/cluster/RegistryAccessView/NamespacesSelector.tsx
+++ b/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}
    />
--- a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
+++ b/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">
--- a/app/react/kubernetes/namespaces/AccessView/NamespaceAccessUsersSelector.tsx
+++ b/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 }}
--- a/app/react/kubernetes/namespaces/components/NamespaceForm/RegistriesFormSection/RegistriesSelector.tsx
+++ b/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}
    />
--- a/app/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector.tsx
+++ b/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 }}
--- a/app/react/portainer/access-control/EditDetails/TeamsField.tsx
+++ b/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"
        />
      ) : (
--- a/app/react/portainer/access-control/EditDetails/UsersField.tsx
+++ b/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"
        />
      ) : (
--- a/app/react/portainer/access-control/PorAccessControlForm/TeamsSelector.tsx
+++ b/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"
    />
--- a/app/react/portainer/access-control/PorAccessControlForm/UsersSelector.tsx
+++ b/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"
    />
--- a/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx
+++ b/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>}
--- a/app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx
+++ b/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">
--- a/app/react/portainer/gitops/AuthFieldset/CredentialSelector.tsx
+++ b/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>