SONAR-21888 Fixing issue in qg add condition modal

server/sonar-web/design-system/src/components/input/SearchSelectDropdown.tsx

@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { debounce } from 'lodash';
 import React from 'react';
 import {
   ActionMeta,
@@ -30,7 +29,7 @@ import {
 import { AsyncProps } from 'react-select/async';
 import Select from 'react-select/dist/declarations/src/Select';
 import tw from 'twin.macro';
-import { DEBOUNCE_DELAY, PopupPlacement, PopupZLevel, themeBorder } from '../../helpers';
+import { PopupPlacement, PopupZLevel, themeBorder } from '../../helpers';
 import { InputSizeKeys } from '../../types/theme';
 import { DropdownToggler } from '../DropdownToggler';
 import { SearchHighlighterContext } from '../SearchHighlighter';
@@ -119,7 +118,6 @@ export function SearchSelectDropdown<
     },
     [minLength, loadOptions],
   );
-  const debouncedLoadOptions = React.useRef(debounce(handleLoadOptions, DEBOUNCE_DELAY));
 
   const handleInputChange = React.useCallback(
     (newValue: string, actionMeta: InputActionMeta) => {
@@ -169,7 +167,7 @@ export function SearchSelectDropdown<
                 Option: IconOption,
                 ...rest.components,
               }}
-              loadOptions={debouncedLoadOptions.current}
+              loadOptions={handleLoadOptions}
               menuIsOpen
               minLength={minLength}
               onChange={handleChange}

server/sonar-web/src/main/js/apps/quality-gates/components/AddConditionModal.tsx

@@ -20,7 +20,7 @@
 import { RadioButtonGroup } from '@sonarsource/echoes-react';
 import { ButtonPrimary, FormField, Modal } from 'design-system';
 import * as React from 'react';
-import { getLocalizedMetricName, translate } from '../../../helpers/l10n';
+import { translate } from '../../../helpers/l10n';
 import { isDiffMetric } from '../../../helpers/measures';
 import { useCreateConditionMutation } from '../../../queries/quality-gates';
 import { Condition, Metric, QualityGate } from '../../../types/types';
@@ -106,7 +106,6 @@ export default function AddConditionModal({ metrics, onClose, qualityGate }: Rea
         </FormField>
 
         <FormField
-          description={selectedMetric && getLocalizedMetricName(selectedMetric)}
           htmlFor="condition-metric"
           label={translate('quality_gates.conditions.fails_when')}
         >

server/sonar-web/src/main/js/apps/quality-gates/components/MetricSelect.tsx

@@ -72,7 +72,7 @@ export function MetricSelect({ metric, metricsArray, metrics, onMetricChange }:
     optionsWithDomains.push(option);
   });
 
-  const handleAssigneeSearch = React.useCallback(
+  const handleMetricsSearch = React.useCallback(
     (query: string, resolve: (options: Options<LabelValueSelectOption<string>>) => void) => {
       resolve(options.filter((opt) => opt.label.toLowerCase().includes(query.toLowerCase())));
     },
@@ -86,7 +86,7 @@ export function MetricSelect({ metric, metricsArray, metrics, onMetricChange }:
       controlSize="full"
       inputId="condition-metric"
       defaultOptions={optionsWithDomains}
-      loadOptions={handleAssigneeSearch}
+      loadOptions={handleMetricsSearch}
       onChange={handleChange}
       placeholder={translate('search.search_for_metrics')}
       controlLabel={