From da5d47cdd9dcf6dd8b5fc6c9b5230e29f304ac10 Mon Sep 17 00:00:00 2001
From: Revanshu Paliwal <revanshu.paliwal@sonarsource.com>
Date: Thu, 17 Aug 2023 11:42:52 +0200
Subject: [PATCH] SONAR-19709 Fixing placeholder issue in assignee search

---
 .../src/components/TagsSelector.tsx           |   3 -
 .../src/components/__tests__/Tags-test.tsx    |   1 -
 .../src/components/input/InputSearch.tsx      |  73 +++++++------
 .../src/components/input/MultiSelectMenu.tsx  |   3 -
 .../src/components/input/SearchSelect.tsx     |  13 +--
 .../input/SearchSelectControlledInput.tsx     | 100 ++++++++++++++++++
 .../components/input/SearchSelectDropdown.tsx |   2 -
 .../input/__tests__/InputSearch-test.tsx      |   2 -
 .../input/__tests__/MultiSelectMenu-test.tsx  |   1 -
 .../SearchSelectControlledInput-test.tsx      |  57 ++++++++++
 .../components/global-search/GlobalSearch.tsx |   2 -
 .../__tests__/GlobalSearch-it.tsx             |   2 +-
 .../nav/component/branch-like/Menu.tsx        |   1 -
 .../main/js/apps/code/components/Search.tsx   |   1 -
 .../Azure/AzureProjectCreateRenderer.tsx      |   1 -
 .../BitbucketCloudSearchForm.tsx              |   1 -
 .../BitbucketImportRepositoryForm.tsx         |   1 -
 .../Github/GitHubProjectCreateRenderer.tsx    |   1 -
 .../Gitlab/GitlabProjectSelectionForm.tsx     |   3 +-
 .../apps/issues/components/AssigneeSelect.tsx |   1 -
 .../js/apps/issues/components/TagsSelect.tsx  |   1 -
 .../js/apps/issues/sidebar/ListStyleFacet.tsx |   2 -
 .../ListStyleFacet-test.tsx.snap              |  14 ---
 .../about/components/MetaTags.tsx             |   1 -
 .../apps/projects/components/PageHeader.tsx   |   4 +-
 .../security-hotspots/components/Assignee.tsx |   1 -
 .../apps/web-api-v2/components/ApiSidebar.tsx |   1 -
 .../activity-graph/AddGraphMetricPopup.tsx    |   1 -
 .../issue/components/IssueAssign.tsx          |   1 -
 .../issue/popups/IssueTagsPopup.tsx           |   1 -
 30 files changed, 203 insertions(+), 93 deletions(-)
 create mode 100644 server/sonar-web/design-system/src/components/input/SearchSelectControlledInput.tsx
 create mode 100644 server/sonar-web/design-system/src/components/input/__tests__/SearchSelectControlledInput-test.tsx

diff --git a/server/sonar-web/design-system/src/components/TagsSelector.tsx b/server/sonar-web/design-system/src/components/TagsSelector.tsx
index 4e1f7b47f70..55eaac13c04 100644
--- a/server/sonar-web/design-system/src/components/TagsSelector.tsx
+++ b/server/sonar-web/design-system/src/components/TagsSelector.tsx
@@ -21,7 +21,6 @@ import { MultiSelectMenu } from './input/MultiSelectMenu';
 
 interface Props {
   allowNewElements?: boolean;
-  clearIconAriaLabel: string;
   createElementLabel: string;
   headerLabel: string;
   noResultsLabel: string;
@@ -38,7 +37,6 @@ const LIST_SIZE = 10;
 export function TagsSelector(props: Props) {
   const {
     allowNewElements,
-    clearIconAriaLabel,
     createElementLabel,
     headerLabel,
     noResultsLabel,
@@ -50,7 +48,6 @@ export function TagsSelector(props: Props) {
   return (
     <MultiSelectMenu
       allowNewElements={allowNewElements}
-      clearIconAriaLabel={clearIconAriaLabel}
       createElementLabel={createElementLabel}
       elements={tags}
       headerNode={<div className="sw-mt-4 sw-font-semibold">{headerLabel}</div>}
diff --git a/server/sonar-web/design-system/src/components/__tests__/Tags-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Tags-test.tsx
index 2974d489803..73a623cee34 100644
--- a/server/sonar-web/design-system/src/components/__tests__/Tags-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/Tags-test.tsx
@@ -84,7 +84,6 @@ function Wrapper(overrides: Partial<FCProps<typeof Tags>> = {}) {
 
   const overlay = (
     <TagsSelector
-      clearIconAriaLabel="clear"
       createElementLabel="create new tag"
       headerLabel="edit tags"
       noResultsLabel="no results"
diff --git a/server/sonar-web/design-system/src/components/input/InputSearch.tsx b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
index b4f72d2f8de..1f7beabf840 100644
--- a/server/sonar-web/design-system/src/components/input/InputSearch.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputSearch.tsx
@@ -22,6 +22,7 @@ import styled from '@emotion/styled';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
 import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 import tw, { theme } from 'twin.macro';
 import { DEBOUNCE_DELAY, INPUT_SIZES } from '../../helpers/constants';
 import { Key } from '../../helpers/keyboard';
@@ -36,7 +37,6 @@ import { SearchIcon } from '../icons/SearchIcon';
 interface Props {
   autoFocus?: boolean;
   className?: string;
-  clearIconAriaLabel: string;
   id?: string;
   innerRef?: React.RefCallback<HTMLInputElement>;
   loading?: boolean;
@@ -50,7 +50,6 @@ interface Props {
   placeholder?: string;
   searchInputAriaLabel?: string;
   size?: InputSizeKeys;
-  tooShortText?: string;
   value?: string;
 }
 
@@ -72,14 +71,20 @@ export function InputSearch({
   maxLength = DEFAULT_MAX_LENGTH,
   size = 'medium',
   value: parentValue,
-  tooShortText,
   searchInputAriaLabel,
-  clearIconAriaLabel,
-  children,
 }: PropsWithChildren<Props>) {
+  const intl = useIntl();
   const input = useRef<null | HTMLElement>(null);
   const [value, setValue] = useState(parentValue ?? '');
-  const debouncedOnChange = useMemo(() => debounce(onChange, DEBOUNCE_DELAY), [onChange]);
+  const [dirty, setDirty] = useState(false);
+  const debouncedOnChange = useMemo(
+    () =>
+      debounce((val: string) => {
+        onChange(val);
+        setDirty(false);
+      }, DEBOUNCE_DELAY),
+    [onChange]
+  );
 
   const tooShort = isDefined(minLength) && value.length > 0 && value.length < minLength;
   const inputClassName = classNames('js-input-search', {
@@ -87,13 +92,8 @@ export function InputSearch({
     'sw-pr-10': value.length > 0,
   });
 
-  /*
-   * ParentValue is useful as an initial value for a page load
-   * And when the parent component wants to empty the search (facet search)
-   * After that the input value is controlled by this component
-   */
   useEffect(() => {
-    if (parentValue === '' || (parentValue !== undefined && value === '')) {
+    if (parentValue !== undefined && !dirty) {
       setValue(parentValue);
     }
   }, [parentValue]); // eslint-disable-line
@@ -113,6 +113,7 @@ export function InputSearch({
   const handleInputChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
     const eventValue = event.currentTarget.value;
     setValue(eventValue);
+    setDirty(true);
     changeValue(eventValue);
   };
 
@@ -140,42 +141,44 @@ export function InputSearch({
       id={id}
       onMouseDown={onMouseDown}
       style={{ '--inputSize': INPUT_SIZES[size] }}
-      title={tooShort && tooShortText && isDefined(minLength) ? tooShortText : ''}
+      title={
+        tooShort && isDefined(minLength)
+          ? intl.formatMessage({ id: 'select2.tooShort' }, { 0: minLength })
+          : ''
+      }
     >
       <StyledInputWrapper className="sw-flex sw-items-center">
-        {children ?? (
-          <input
-            aria-label={searchInputAriaLabel ?? placeholder}
-            autoComplete="off"
-            className={inputClassName}
-            maxLength={maxLength}
-            onBlur={onBlur}
-            onChange={handleInputChange}
-            onFocus={onFocus}
-            onKeyDown={handleInputKeyDown}
-            placeholder={placeholder}
-            ref={ref}
-            role="searchbox"
-            type="search"
-            value={value}
-          />
-        )}
+        <input
+          aria-label={searchInputAriaLabel ?? placeholder}
+          autoComplete="off"
+          className={inputClassName}
+          maxLength={maxLength}
+          onBlur={onBlur}
+          onChange={handleInputChange}
+          onFocus={onFocus}
+          onKeyDown={handleInputKeyDown}
+          placeholder={placeholder}
+          ref={ref}
+          role="searchbox"
+          type="search"
+          value={value}
+        />
         <Spinner className="sw-z-normal" loading={loading ?? false}>
           <StyledSearchIcon />
         </Spinner>
         {value && (
           <StyledInteractiveIcon
             Icon={CloseIcon}
-            aria-label={clearIconAriaLabel}
+            aria-label={intl.formatMessage({ id: 'clear' })}
             className="it__search-box-clear"
             onClick={handleClearClick}
             size="small"
           />
         )}
 
-        {tooShort && tooShortText && isDefined(minLength) && (
+        {tooShort && isDefined(minLength) && (
           <StyledNote className="sw-ml-1" role="note">
-            {tooShortText}
+            {intl.formatMessage({ id: 'select2.tooShort' }, { 0: minLength })}
           </StyledNote>
         )}
       </StyledInputWrapper>
@@ -237,7 +240,7 @@ export const StyledInputWrapper = styled.div`
   }
 `;
 
-const StyledSearchIcon = styled(SearchIcon)`
+export const StyledSearchIcon = styled(SearchIcon)`
   color: ${themeColor('inputBorder')};
   top: calc((${theme('height.control')} - ${theme('spacing.4')}) / 2);
 
@@ -251,7 +254,7 @@ export const StyledInteractiveIcon = styled(InteractiveIcon)`
   ${tw`sw-right-2`}
 `;
 
-const StyledNote = styled.span`
+export const StyledNote = styled.span`
   color: ${themeColor('inputPlaceholder')};
   top: calc(1px + ${theme('inset.2')});
 
diff --git a/server/sonar-web/design-system/src/components/input/MultiSelectMenu.tsx b/server/sonar-web/design-system/src/components/input/MultiSelectMenu.tsx
index 191de5d27f8..bd73d4672ec 100644
--- a/server/sonar-web/design-system/src/components/input/MultiSelectMenu.tsx
+++ b/server/sonar-web/design-system/src/components/input/MultiSelectMenu.tsx
@@ -28,7 +28,6 @@ import { MultiSelectMenuOption } from './MultiSelectMenuOption';
 interface Props {
   allowNewElements?: boolean;
   allowSelection?: boolean;
-  clearIconAriaLabel: string;
   createElementLabel: string;
   elements: string[];
   footerNode?: React.ReactNode;
@@ -262,7 +261,6 @@ export class MultiSelectMenu extends PureComponent<Props, State> {
       headerNode = '',
       footerNode = '',
       inputId,
-      clearIconAriaLabel,
       noResultsLabel,
       searchInputAriaLabel,
     } = this.props;
@@ -280,7 +278,6 @@ export class MultiSelectMenu extends PureComponent<Props, State> {
           <InputSearch
             autoFocus
             className="sw-mt-1"
-            clearIconAriaLabel={clearIconAriaLabel}
             id={inputId}
             loading={this.state.loading}
             onChange={this.handleSearchChange}
diff --git a/server/sonar-web/design-system/src/components/input/SearchSelect.tsx b/server/sonar-web/design-system/src/components/input/SearchSelect.tsx
index 91c14aa81da..7ed1c6fd88a 100644
--- a/server/sonar-web/design-system/src/components/input/SearchSelect.tsx
+++ b/server/sonar-web/design-system/src/components/input/SearchSelect.tsx
@@ -20,14 +20,13 @@
 import classNames from 'classnames';
 import { omit } from 'lodash';
 import React, { RefObject } from 'react';
-import { useIntl } from 'react-intl';
 import { GroupBase, InputProps, components } from 'react-select';
 import AsyncSelect, { AsyncProps } from 'react-select/async';
 import Select from 'react-select/dist/declarations/src/Select';
 import { INPUT_SIZES } from '../../helpers';
 import { Key } from '../../helpers/keyboard';
-import { InputSearch } from './InputSearch';
 import { LabelValueSelectOption, SelectProps, selectStyle } from './InputSelect';
+import { SearchSelectControlledInput } from './SearchSelectControlledInput';
 
 type SearchSelectProps<
   V,
@@ -89,11 +88,9 @@ export function SearchSelectInput<
   Group extends GroupBase<Option> = GroupBase<Option>
 >(props: InputProps<Option, IsMulti, Group>) {
   const {
-    selectProps: { clearIconLabel, placeholder, isLoading, inputValue, minLength, tooShortText },
+    selectProps: { placeholder, isLoading, inputValue, minLength },
   } = props;
 
-  const intl = useIntl();
-
   const onChange = (v: string, prevValue = '') => {
     props.selectProps.onInputChange(v, { action: 'input-change', prevInputValue: prevValue });
   };
@@ -108,13 +105,11 @@ export function SearchSelectInput<
   };
 
   return (
-    <InputSearch
-      clearIconAriaLabel={clearIconLabel ?? intl.formatMessage({ id: 'clear' })}
+    <SearchSelectControlledInput
       loading={isLoading && inputValue.length >= (minLength ?? 0)}
       minLength={minLength}
       onChange={onChange}
       size="full"
-      tooShortText={tooShortText}
       value={inputValue}
     >
       <components.Input
@@ -123,6 +118,6 @@ export function SearchSelectInput<
         placeholder={placeholder as string}
         style={{}}
       />
-    </InputSearch>
+    </SearchSelectControlledInput>
   );
 }
diff --git a/server/sonar-web/design-system/src/components/input/SearchSelectControlledInput.tsx b/server/sonar-web/design-system/src/components/input/SearchSelectControlledInput.tsx
new file mode 100644
index 00000000000..f737ce04fe7
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/input/SearchSelectControlledInput.tsx
@@ -0,0 +1,100 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import React, { PropsWithChildren } from 'react';
+import { useIntl } from 'react-intl';
+import { INPUT_SIZES } from '../../helpers/constants';
+import { isDefined } from '../../helpers/types';
+import { InputSizeKeys } from '../../types/theme';
+import { Spinner } from '../Spinner';
+import { CloseIcon } from '../icons/CloseIcon';
+import {
+  InputSearchWrapper,
+  StyledInputWrapper,
+  StyledInteractiveIcon,
+  StyledNote,
+  StyledSearchIcon,
+} from './InputSearch';
+
+interface Props {
+  className?: string;
+  id?: string;
+  loading?: boolean;
+  minLength?: number;
+  onChange: (value: string) => void;
+  onMouseDown?: React.MouseEventHandler<HTMLInputElement>;
+  size?: InputSizeKeys;
+  value: string;
+}
+
+export function SearchSelectControlledInput({
+  id,
+  className,
+  onChange,
+  onMouseDown,
+  loading,
+  minLength,
+  size = 'medium',
+  value,
+  children,
+}: PropsWithChildren<Props>) {
+  const intl = useIntl();
+  const tooShort = isDefined(minLength) && value.length > 0 && value.length < minLength;
+
+  return (
+    <InputSearchWrapper
+      className={className}
+      id={id}
+      onMouseDown={onMouseDown}
+      style={{ '--inputSize': INPUT_SIZES[size] }}
+      title={
+        tooShort && isDefined(minLength)
+          ? intl.formatMessage({ id: 'select2.tooShort' }, { 0: minLength })
+          : ''
+      }
+    >
+      <StyledInputWrapper className="sw-flex sw-items-center">
+        {children}
+        <Spinner className="sw-z-normal" loading={loading ?? false}>
+          <StyledSearchIcon />
+        </Spinner>
+        {value !== '' && (
+          <StyledInteractiveIcon
+            Icon={CloseIcon}
+            aria-label={intl.formatMessage({ id: 'clear' })}
+            className="it__search-box-clear"
+            onClick={() => {
+              onChange('');
+            }}
+            size="small"
+          />
+        )}
+
+        {tooShort && isDefined(minLength) && (
+          <StyledNote className="sw-ml-1" role="note">
+            {intl.formatMessage({ id: 'select2.tooShort' }, { 0: minLength })}
+          </StyledNote>
+        )}
+      </StyledInputWrapper>
+    </InputSearchWrapper>
+  );
+}
+
+SearchSelectControlledInput.displayName = 'SearchSelectControlledInput'; // so that tests don't see the obfuscated production name
diff --git a/server/sonar-web/design-system/src/components/input/SearchSelectDropdown.tsx b/server/sonar-web/design-system/src/components/input/SearchSelectDropdown.tsx
index 2e105e2365f..d6f0fe887d6 100644
--- a/server/sonar-web/design-system/src/components/input/SearchSelectDropdown.tsx
+++ b/server/sonar-web/design-system/src/components/input/SearchSelectDropdown.tsx
@@ -40,9 +40,7 @@ import { SearchSelectDropdownControl } from './SearchSelectDropdownControl';
 
 declare module 'react-select/dist/declarations/src/Select' {
   export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
-    clearIconLabel?: string;
     minLength?: number;
-    tooShortText?: string;
   }
 }
 
diff --git a/server/sonar-web/design-system/src/components/input/__tests__/InputSearch-test.tsx b/server/sonar-web/design-system/src/components/input/__tests__/InputSearch-test.tsx
index 55901ed7cec..79339d6a0d8 100644
--- a/server/sonar-web/design-system/src/components/input/__tests__/InputSearch-test.tsx
+++ b/server/sonar-web/design-system/src/components/input/__tests__/InputSearch-test.tsx
@@ -76,13 +76,11 @@ it('should clear input using escape', async () => {
 function setupWithProps(props: Partial<FCProps<typeof InputSearch>> = {}) {
   return renderWithContext(
     <InputSearch
-      clearIconAriaLabel=""
       maxLength={150}
       minLength={2}
       onChange={jest.fn()}
       placeholder="placeholder"
       searchInputAriaLabel=""
-      tooShortText="too short"
       value="foo"
       {...props}
     />
diff --git a/server/sonar-web/design-system/src/components/input/__tests__/MultiSelectMenu-test.tsx b/server/sonar-web/design-system/src/components/input/__tests__/MultiSelectMenu-test.tsx
index 7035ce401f2..9c2a7520aa9 100644
--- a/server/sonar-web/design-system/src/components/input/__tests__/MultiSelectMenu-test.tsx
+++ b/server/sonar-web/design-system/src/components/input/__tests__/MultiSelectMenu-test.tsx
@@ -97,7 +97,6 @@ it('should show no results', () => {
 function renderMultiselect(props: Partial<MultiSelectMenu['props']> = {}) {
   return renderWithContext(
     <MultiSelectMenu
-      clearIconAriaLabel="clear"
       createElementLabel="create thing"
       elements={[]}
       filterSelected={jest.fn()}
diff --git a/server/sonar-web/design-system/src/components/input/__tests__/SearchSelectControlledInput-test.tsx b/server/sonar-web/design-system/src/components/input/__tests__/SearchSelectControlledInput-test.tsx
new file mode 100644
index 00000000000..86ac616a252
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/input/__tests__/SearchSelectControlledInput-test.tsx
@@ -0,0 +1,57 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { screen } from '@testing-library/react';
+import { renderWithContext } from '../../../helpers/testUtils';
+import { FCProps } from '../../../types/misc';
+import { InputSearch } from '../InputSearch';
+import { SearchSelectControlledInput } from '../SearchSelectControlledInput';
+
+it('should work properly when input is passed as a children', async () => {
+  const onChange = jest.fn();
+  const { user } = setupWithProps({
+    onChange,
+    value: 'foo',
+    children: <input onChange={onChange} />,
+  });
+  await user.click(screen.getByLabelText('clear'));
+  expect(onChange).toHaveBeenCalledWith('');
+});
+
+it('should warn when input is too short', () => {
+  setupWithProps({
+    value: 'f',
+    children: <input />,
+  });
+  expect(screen.getByRole('note')).toBeInTheDocument();
+});
+
+function setupWithProps(props: Partial<FCProps<typeof InputSearch>> = {}) {
+  return renderWithContext(
+    <SearchSelectControlledInput
+      maxLength={150}
+      minLength={2}
+      onChange={jest.fn()}
+      placeholder="placeholder"
+      searchInputAriaLabel=""
+      value="foo"
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx
index 1bf0c8c2421..1554fc928ba 100644
--- a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx
+++ b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx
@@ -411,9 +411,7 @@ export class GlobalSearch extends React.PureComponent<Props, State> {
             placeholder={translate('search.search_for_projects')}
             size="auto"
             value={query}
-            tooShortText={translateWithParameters('select2.tooShort', MIN_SEARCH_QUERY_LENGTH)}
             searchInputAriaLabel={translate('search_verb')}
-            clearIconAriaLabel={translate('clear')}
           />
         </Popup>
       </div>
diff --git a/server/sonar-web/src/main/js/app/components/global-search/__tests__/GlobalSearch-it.tsx b/server/sonar-web/src/main/js/app/components/global-search/__tests__/GlobalSearch-it.tsx
index ae3197eb2a7..92885b62591 100644
--- a/server/sonar-web/src/main/js/app/components/global-search/__tests__/GlobalSearch-it.tsx
+++ b/server/sonar-web/src/main/js/app/components/global-search/__tests__/GlobalSearch-it.tsx
@@ -60,7 +60,7 @@ const ui = {
   searchItemListWrapper: byRole('menu'),
   searchItem: byRole('menuitem'),
   showMoreButton: byRole('menuitem', { name: 'show_more' }),
-  tooShortWarning: byText('select2.tooShort.2'),
+  tooShortWarning: byText('select2.tooShort'),
   noResultTextABCD: byText('no_results_for_x.abcd'),
 };
 
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/Menu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/Menu.tsx
index 777f2d999fd..6b8f94cf2aa 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/Menu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/Menu.tsx
@@ -172,7 +172,6 @@ export class Menu extends React.PureComponent<Props, State> {
           size="auto"
           value={query}
           searchInputAriaLabel={translate('search_verb')}
-          clearIconAriaLabel={translate('clear')}
         />
         <MenuItemList
           branchLikeTree={branchLikesToDisplayTree}
diff --git a/server/sonar-web/src/main/js/apps/code/components/Search.tsx b/server/sonar-web/src/main/js/apps/code/components/Search.tsx
index f7d8252248a..1813508e0ae 100644
--- a/server/sonar-web/src/main/js/apps/code/components/Search.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/Search.tsx
@@ -167,7 +167,6 @@ class Search extends React.PureComponent<Props, State> {
           </div>
         )}
         <InputSearch
-          clearIconAriaLabel={translate('clear')}
           searchInputAriaLabel={searchPlaceholder}
           minLength={3}
           onChange={this.handleQueryChange}
diff --git a/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx
index 0dfb6b79fd8..0e9a3cd5130 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx
@@ -136,7 +136,6 @@ export default function AzureProjectCreateRenderer(props: AzureProjectCreateRend
           <>
             <div className="sw-mb-10 sw-w-abs-400">
               <InputSearch
-                clearIconAriaLabel={translate('clear')}
                 onChange={props.onSearch}
                 placeholder={translate('onboarding.create_project.search_projects_repositories')}
                 size="full"
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx
index 9f9994d82a0..727b24720c7 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx
@@ -76,7 +76,6 @@ export default function BitbucketCloudSearchForm(props: BitbucketCloudSearchForm
     <div>
       <div className="sw-flex sw-items-center sw-mb-6 sw-w-abs-400">
         <InputSearch
-          clearIconAriaLabel={translate('clear')}
           loading={searching}
           minLength={3}
           onChange={props.onSearch}
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketImportRepositoryForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketImportRepositoryForm.tsx
index e7a05eb1c15..425373e435d 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketImportRepositoryForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketImportRepositoryForm.tsx
@@ -76,7 +76,6 @@ export default function BitbucketImportRepositoryForm(props: BitbucketImportRepo
       <div className="sw-mb-10 sw-w-abs-400">
         <InputSearch
           searchInputAriaLabel={translate('onboarding.create_project.search_repositories_by_name')}
-          clearIconAriaLabel={translate('clear')}
           onChange={props.onSearch}
           placeholder={translate('onboarding.create_project.search_repositories_by_name')}
           size="full"
diff --git a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx
index 97ffd1f2755..722a2027697 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx
@@ -80,7 +80,6 @@ function renderRepositoryList(props: GitHubProjectCreateRendererProps) {
             onChange={props.onSearch}
             placeholder={translate('onboarding.create_project.search_repositories')}
             value={searchQuery}
-            clearIconAriaLabel={translate('clear')}
           />
         </div>
 
diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx
index 3ae79b1ec60..953f4e8d921 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx
@@ -77,7 +77,8 @@ export default function GitlabProjectSelectionForm(props: GitlabProjectSelection
         onChange={props.onSearch}
         placeholder={translate('onboarding.create_project.search_repositories')}
         value={searchQuery}
-        clearIconAriaLabel={translate('clear')}
+        minLength={3}
+        loading={searching}
       />
 
       {projects.length === 0 ? (
diff --git a/server/sonar-web/src/main/js/apps/issues/components/AssigneeSelect.tsx b/server/sonar-web/src/main/js/apps/issues/components/AssigneeSelect.tsx
index 111f4561a85..0de539ae333 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/AssigneeSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/AssigneeSelect.tsx
@@ -100,7 +100,6 @@ export default function AssigneeSelect(props: AssigneeSelectProps) {
           ? translateWithParameters('select2.tooShort', MIN_QUERY_LENGTH)
           : translate('select2.noMatches')
       }
-      tooShortText={translateWithParameters('search.tooShort', MIN_QUERY_LENGTH)}
       placeholder={translate('search.search_for_users')}
       controlLabel={controlLabel}
       controlAriaLabel={translate('issue_bulk_change.assignee.change')}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx b/server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx
index 7956a5947ae..6b52f0e5319 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx
@@ -72,7 +72,6 @@ export default function TagsSelect(props: Props) {
           <TagsSelector
             allowNewElements={allowCreation}
             createElementLabel={translateWithParameters('issue.create_tag')}
-            clearIconAriaLabel={translate('clear')}
             headerLabel={translate('issue_bulk_change.select_tags')}
             noResultsLabel={translate('no_results')}
             onSelect={onSelect}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacet.tsx
index 106ea557690..8ea575ab347 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ListStyleFacet.tsx
@@ -380,9 +380,7 @@ export class ListStyleFacet<S> extends React.Component<Props<S>, State<S>> {
         size="auto"
         value={this.state.query}
         searchInputAriaLabel={translate('search_verb')}
-        clearIconAriaLabel={translate('clear')}
         minLength={minSearchLength}
-        tooShortText={translateWithParameters('select2.tooShort', minSearchLength)}
       />
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap
index f3f1bf306ff..b044ec5f777 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap
@@ -36,13 +36,11 @@ exports[`should display all selected items 1`] = `
     <InputSearch
       autoFocus={false}
       className="it__search-box-input sw-mb-4 sw-w-full"
-      clearIconAriaLabel="clear"
       minLength={2}
       onChange={[Function]}
       placeholder="search for foo..."
       searchInputAriaLabel="search_verb"
       size="auto"
-      tooShortText="select2.tooShort.2"
       value=""
     />
     <FacetItemsList
@@ -121,13 +119,11 @@ exports[`should render 1`] = `
     <InputSearch
       autoFocus={false}
       className="it__search-box-input sw-mb-4 sw-w-full"
-      clearIconAriaLabel="clear"
       minLength={2}
       onChange={[Function]}
       placeholder="search for foo..."
       searchInputAriaLabel="search_verb"
       size="auto"
-      tooShortText="select2.tooShort.2"
       value=""
     />
     <FacetItemsList
@@ -197,13 +193,11 @@ exports[`should search 1`] = `
     <InputSearch
       autoFocus={false}
       className="it__search-box-input sw-mb-4 sw-w-full"
-      clearIconAriaLabel="clear"
       minLength={2}
       onChange={[Function]}
       placeholder="search for foo..."
       searchInputAriaLabel="search_verb"
       size="auto"
-      tooShortText="select2.tooShort.2"
       value="query"
     />
     <FacetItemsList
@@ -266,13 +260,11 @@ exports[`should search 2`] = `
     <InputSearch
       autoFocus={false}
       className="it__search-box-input sw-mb-4 sw-w-full"
-      clearIconAriaLabel="clear"
       minLength={2}
       onChange={[Function]}
       placeholder="search for foo..."
       searchInputAriaLabel="search_verb"
       size="auto"
-      tooShortText="select2.tooShort.2"
       value="query"
     />
     <FacetItemsList
@@ -345,13 +337,11 @@ exports[`should search 3`] = `
     <InputSearch
       autoFocus={false}
       className="it__search-box-input sw-mb-4 sw-w-full"
-      clearIconAriaLabel="clear"
       minLength={2}
       onChange={[Function]}
       placeholder="search for foo..."
       searchInputAriaLabel="search_verb"
       size="auto"
-      tooShortText="select2.tooShort.2"
       value=""
     />
     <FacetItemsList
@@ -421,13 +411,11 @@ exports[`should search 4`] = `
     <InputSearch
       autoFocus={false}
       className="it__search-box-input sw-mb-4 sw-w-full"
-      clearIconAriaLabel="clear"
       minLength={2}
       onChange={[Function]}
       placeholder="search for foo..."
       searchInputAriaLabel="search_verb"
       size="auto"
-      tooShortText="select2.tooShort.2"
       value="blabla"
     />
     <div
@@ -463,13 +451,11 @@ exports[`should search 5`] = `
     <InputSearch
       autoFocus={false}
       className="it__search-box-input sw-mb-4 sw-w-full"
-      clearIconAriaLabel="clear"
       minLength={2}
       onChange={[Function]}
       placeholder="search for foo..."
       searchInputAriaLabel="search_verb"
       size="auto"
-      tooShortText="select2.tooShort.2"
       value="blabla"
     />
     <div
diff --git a/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaTags.tsx b/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaTags.tsx
index 65a075d8e25..fd7c98b51f8 100644
--- a/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaTags.tsx
+++ b/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaTags.tsx
@@ -119,7 +119,6 @@ function MetaTagsSelector({ selectedTags, setProjectTags }: MetaTagsSelectorProp
     <TagsSelector
       headerLabel={translate('tags')}
       searchInputAriaLabel={translate('search.search_for_tags')}
-      clearIconAriaLabel={translate('clear')}
       createElementLabel={translate('issue.create_tag')}
       noResultsLabel={translate('no_results')}
       onSearch={onSearch}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
index 40e5b836998..e4ca4d1c719 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
@@ -21,7 +21,7 @@ import { InputSearch, LightLabel, LightPrimary } from 'design-system';
 import * as React from 'react';
 import HomePageSelect from '../../../components/controls/HomePageSelect';
 import Tooltip from '../../../components/controls/Tooltip';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { translate } from '../../../helpers/l10n';
 import { RawQuery } from '../../../types/types';
 import { CurrentUser, isLoggedIn } from '../../../types/users';
 import ApplicationCreation from './ApplicationCreation';
@@ -66,9 +66,7 @@ export default function PageHeader(props: Props) {
               size="auto"
               placeholder={translate('search.search_for_projects')}
               value={query.search ?? ''}
-              tooShortText={translateWithParameters('select2.tooShort', MIN_SEARCH_QUERY_LENGTH)}
               searchInputAriaLabel={translate('search_verb')}
-              clearIconAriaLabel={translate('clear')}
             />
           </Tooltip>
           <PerspectiveSelect onChange={props.onPerspectiveChange} view={view} />
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/Assignee.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/Assignee.tsx
index c732c7b7e2d..7278b51fccd 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/Assignee.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/Assignee.tsx
@@ -122,7 +122,6 @@ export default function Assignee(props: Props) {
       minLength={minSearchLength}
       isDiscreet
       controlLabel={controlLabel}
-      tooShortText={translateWithParameters('search.tooShort', String(minSearchLength))}
       placeholder={translate('search.search_for_users')}
       aria-label={translate('search.search_for_users')}
     />
diff --git a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx
index 8a3cc3e0702..5d20aca8cc8 100644
--- a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiSidebar.tsx
@@ -79,7 +79,6 @@ export default function ApiSidebar({ apisList, docInfo }: Props) {
         className="sw-w-full"
         placeholder={translate('api_documentation.v2.search')}
         onChange={setSearch}
-        clearIconAriaLabel={translate('clear')}
         value={search}
       />
 
diff --git a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetricPopup.tsx b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetricPopup.tsx
index f762e83d855..a704df6ce52 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetricPopup.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetricPopup.tsx
@@ -62,7 +62,6 @@ export default function AddGraphMetricPopup({
 
   return (
     <MultiSelectMenu
-      clearIconAriaLabel={translate('clear_verb')}
       createElementLabel=""
       searchInputAriaLabel={translate('project_activity.graphs.custom.select_metric')}
       allowNewElements={false}
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx
index fa0e959ff83..752163d452c 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueAssign.tsx
@@ -150,7 +150,6 @@ export default function IssueAssignee(props: Props) {
         onMenuClose={handleClose}
         isDiscreet
         controlLabel={controlLabel}
-        tooShortText={translateWithParameters('search.tooShort', String(minSearchLength))}
         placeholder={translate('search.search_for_users')}
         aria-label={translate('search.search_for_users')}
         zLevel={PopupZLevel.Absolute}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/IssueTagsPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/IssueTagsPopup.tsx
index d238b18829e..2e37c484840 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/IssueTagsPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/IssueTagsPopup.tsx
@@ -56,7 +56,6 @@ function IssueTagsPopup({ selectedTags, setTags }: IssueTagsPopupProps) {
     <TagsSelector
       headerLabel={translate('issue.tags')}
       searchInputAriaLabel={translate('search.search_for_tags')}
-      clearIconAriaLabel={translate('clear')}
       createElementLabel={translate('issue.create_tag')}
       noResultsLabel={translate('no_results')}
       onSearch={onSearch}
-- 
2.39.5