refactor(edge/stacks): migrate create view to react [EE-2223] (#11575)

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

@@ -1,12 +1,13 @@
 import _ from 'lodash';
+import { useState } from 'react';
 
 import { EdgeGroup } from '@/react/edge/edge-groups/types';
 
 import { Select } from '@@/form-components/ReactSelect';
-import { FormSection } from '@@/form-components/FormSection';
 import { FormError } from '@@/form-components/FormError';
 import { Link } from '@@/Link';
 import { FormControl } from '@@/form-components/FormControl';
+import { FormSection } from '@@/form-components/FormSection';
 
 import { useEdgeGroups } from '../../edge-groups/queries/useEdgeGroups';
 
@@ -29,20 +30,28 @@ export function EdgeGroupsSelector({
   isGroupVisible = () => true,
   required,
 }: Props) {
+  const [inputId] = useState(() => _.uniqueId('edge-groups-selector-'));
+
   const selector = (
     <InnerSelector
       value={value}
       onChange={onChange}
       isGroupVisible={isGroupVisible}
+      inputId={inputId}
     />
   );
 
   return horizontal ? (
-    <FormControl errors={error} label="Edge Groups" required={required}>
+    <FormControl
+      errors={error}
+      label="Edge Groups"
+      required={required}
+      inputId={inputId}
+    >
       {selector}
     </FormControl>
   ) : (
-    <FormSection title={`Edge Groups${required ? ' *' : ''}`}>
+    <FormSection title={`Edge Groups${required ? ' *' : ''}`} htmlFor={inputId}>
       <div className="form-group">
         <div className="col-sm-12">{selector} </div>
         {error && (
@@ -59,10 +68,12 @@ function InnerSelector({
   value,
   onChange,
   isGroupVisible,
+  inputId,
 }: {
   isGroupVisible(group: EdgeGroup): boolean;
   value: SingleValue[];
   onChange: (value: SingleValue[]) => void;
+  inputId: string;
 }) {
   const edgeGroupsQuery = useEdgeGroups();
 
@@ -86,6 +97,7 @@ function InnerSelector({
       placeholder="Select one or multiple group(s)"
       closeMenuOnSelect={false}
       data-cy="edge-stacks-groups-selector"
+      inputId={inputId}
     />
   ) : (
     <div className="small text-muted">