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;