Add ids to input elements in order to simplifly tests

Author: lpetrora

src/ui/ConfigEditor.tsx

@@ -124,6 +124,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                   onChange={this.onEditionChange}
                   value={jsonData.edition}
                   placeholder="Select your checkmk edition"
+                  inputId="checkmk-edition"
                 />
               </InlineField>
               <InlineField

src/ui/components.tsx

@@ -174,7 +174,7 @@ export const CheckMkSelect = <Key extends RequestSpecStringKeys>(props: CheckMkS
   return (
     <InlineField labelWidth={LABEL_WIDTH} label={props.label}>
       <CheckMkAsyncSelect
-        inputId={`input_${props.label}`}
+        inputId={`input_${props.label?.replace(/ /g, '_')}`}
         label={label}
         autocompleter={autocompleter}
         onChange={onChange}
@@ -376,11 +376,12 @@ export const HostTagFilter: React.FC<HostTagFilterProps> = (props) => {
 };
 
 interface HostLabelProps extends CommonProps<RequestSpec['host_labels']> {
+  inputId: string;
   autocompleter: (value: string) => Promise<Array<SelectableValue<string>>>;
 }
 
 export const HostLabelFilter: React.FC<HostLabelProps> = (props) => {
-  const { value, autocompleter, label, onChange } = props;
+  const { value, autocompleter, label, onChange, inputId } = props;
 
   const onLabelsChange = (items: Array<SelectableValue<string>>) => {
     const result: string[] = [];
@@ -410,6 +411,7 @@ export const HostLabelFilter: React.FC<HostLabelProps> = (props) => {
         onChange={onLabelsChange}
         value={toMultiSelectValue(value)}
         placeholder="Type to trigger search"
+        inputId={inputId}
       />
     </InlineField>
   );
@@ -487,6 +489,7 @@ export const OnlyActiveChildren = (props: OnlyActiveChildrenProps): JSX.Element
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             onChange={(value) => setActiveComponents((c) => [...c, value.value!])}
             value={{ label: 'Add Filter' }}
+            inputId="input_add_filter"
           />
         </InlineField>
       )}

src/ui/filters.tsx

@@ -156,6 +156,7 @@ export const Filters = (props: FiltersProp): JSX.Element => {
         value={qHost.host_labels}
         onChange={(host_labels: string[]) => setHostFilter({ ...qHost, host_labels: host_labels })}
         autocompleter={hostLabelAutocompleter}
+        inputId="input_host_label"
       />
       <HostTagFilter
         label={labelForRequestSpecKey('host_tags', requestSpec)}