From a74f4d9475ab3548821fe9f6380c204d56f886d6 Mon Sep 17 00:00:00 2001
From: Jay <jeremy.davis@sonarsource.com>
Date: Thu, 1 Jun 2023 17:58:15 +0200
Subject: [PATCH] SONAR-19345 new UI for the issue Bulk Change Modal

---
 .../src/components/InputMultiSelect.tsx       |  70 ++++
 .../src/components/InputSelect.tsx            |   9 +-
 .../{MultiSelect.tsx => MultiSelectMenu.tsx}  |  13 +-
 ...ctOption.tsx => MultiSelectMenuOption.tsx} |   2 +-
 .../src/components/RadioButton.tsx            |   2 +-
 .../src/components/SearchSelectDropdown.tsx   |  12 +-
 .../SearchSelectDropdownControl.tsx           |  18 +-
 .../src/components/TagsSelector.tsx           |  13 +-
 .../__tests__/InputMultiSelect-test.tsx       |  40 ++
 ...lect-test.tsx => MultiSelectMenu-test.tsx} |   6 +-
 .../src/components/__tests__/Tags-test.tsx    |   1 -
 .../design-system/src/components/buttons.tsx  |   2 +-
 .../src/components/icons/index.ts             |   1 +
 .../design-system/src/components/index.ts     |   3 +
 .../src/components/modal/ModalBody.tsx        |   3 +-
 .../__snapshots__/ModalBody-test.tsx.snap     |   3 +
 .../js/apps/account/components/UserCard.tsx   |   4 +-
 .../apps/issues/components/AssigneeSelect.tsx | 162 ++++----
 .../issues/components/BulkChangeModal.tsx     | 356 ++++++++----------
 .../js/apps/issues/components/IssuesApp.tsx   |   4 +-
 .../js/apps/issues/components/TagsSelect.tsx  | 112 ++++++
 .../__tests__/AssigneeSelect-test.tsx         |  61 +--
 .../__tests__/BulkChangeModal-it.tsx          |  68 ++--
 .../js/apps/issues/sidebar/AssigneeFacet.tsx  |   3 +-
 .../components/PermissionItem.tsx             |   4 +-
 ...QualityGatePermissionsAddModalRenderer.tsx |   4 +-
 .../details/ProfilePermissionsFormSelect.tsx  |   8 +-
 .../details/ProfilePermissionsUser.tsx        |  11 +-
 .../ProfilePermissionsUser-test.tsx.snap      |   2 +-
 .../security-hotspots/components/Assignee.tsx |   3 +-
 .../components/HotspotReviewHistory.tsx       |   4 +-
 .../js/apps/users/components/UserListItem.tsx |   9 +-
 .../icon-mappers/IssueSeverityIcon.tsx        |  51 +++
 .../components/icon-mappers/IssueTypeIcon.tsx |   2 +-
 .../issue/components/IssueAssign.tsx          |  11 +-
 .../issue/components/IssueCommentLine.tsx     |   6 +-
 .../issue/popups/ChangelogPopup.tsx           |   4 +-
 .../components/issue/popups/CommentTile.tsx   |   4 +-
 .../issue/popups/SetAssigneePopup.tsx         |   9 +-
 .../issue/popups/SimilarIssuesPopup.tsx       |   4 +-
 .../js/components/permissions/UserHolder.tsx  |   4 +-
 .../src/main/js/components/ui/Avatar.tsx      |  52 +--
 .../main/js/components/ui/LegacyAvatar.tsx    |  74 ++++
 .../components/ui/__tests__/Avatar-test.tsx   |  47 +--
 .../ui/__tests__/LegacyAvatar-test.tsx        |  57 +++
 ...st.tsx.snap => LegacyAvatar-test.tsx.snap} |   0
 .../resources/org/sonar/l10n/core.properties  |   5 +-
 47 files changed, 837 insertions(+), 506 deletions(-)
 create mode 100644 server/sonar-web/design-system/src/components/InputMultiSelect.tsx
 rename server/sonar-web/design-system/src/components/{MultiSelect.tsx => MultiSelectMenu.tsx} (97%)
 rename server/sonar-web/design-system/src/components/{MultiSelectOption.tsx => MultiSelectMenuOption.tsx} (96%)
 create mode 100644 server/sonar-web/design-system/src/components/__tests__/InputMultiSelect-test.tsx
 rename server/sonar-web/design-system/src/components/__tests__/{MultiSelect-test.tsx => MultiSelectMenu-test.tsx} (96%)
 create mode 100644 server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx
 create mode 100644 server/sonar-web/src/main/js/components/icon-mappers/IssueSeverityIcon.tsx
 create mode 100644 server/sonar-web/src/main/js/components/ui/LegacyAvatar.tsx
 create mode 100644 server/sonar-web/src/main/js/components/ui/__tests__/LegacyAvatar-test.tsx
 rename server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/{Avatar-test.tsx.snap => LegacyAvatar-test.tsx.snap} (100%)

diff --git a/server/sonar-web/design-system/src/components/InputMultiSelect.tsx b/server/sonar-web/design-system/src/components/InputMultiSelect.tsx
new file mode 100644
index 00000000000..6a7eca741bf
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/InputMultiSelect.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 styled from '@emotion/styled';
+import classNames from 'classnames';
+import { themeBorder } from '../helpers';
+import { Badge } from './Badge';
+import { LightLabel } from './Text';
+import { ButtonProps, WrapperButton } from './buttons';
+import { ChevronDownIcon } from './icons';
+
+interface Props extends Pick<ButtonProps, 'onClick'> {
+  className?: string;
+  count?: number;
+  id?: string;
+  placeholder: string;
+  selectedLabel: string;
+}
+
+export function InputMultiSelect(props: Props) {
+  const { className, count, id, placeholder, selectedLabel } = props;
+
+  return (
+    <StyledWrapper
+      className={classNames('sw-flex sw-justify-between sw-px-2 sw-body-sm', className)}
+      id={id}
+      onClick={props.onClick}
+      role="combobox"
+    >
+      {count ? selectedLabel : <LightLabel>{placeholder}</LightLabel>}
+
+      <div>
+        {count !== undefined && count > 0 && <Badge variant="counter">{count}</Badge>}
+        <ChevronDownIcon className="sw-ml-2" />
+      </div>
+    </StyledWrapper>
+  );
+}
+
+const StyledWrapper = styled(WrapperButton)`
+  border: ${themeBorder('default', 'inputBorder')};
+
+  &:hover {
+    border: ${themeBorder('default', 'inputFocus')};
+  }
+
+  &:active,
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    border: ${themeBorder('default', 'inputFocus')};
+    outline: ${themeBorder('focus', 'inputFocus')};
+  }
+`;
diff --git a/server/sonar-web/design-system/src/components/InputSelect.tsx b/server/sonar-web/design-system/src/components/InputSelect.tsx
index 3b51e2a9a4f..1498b2edca8 100644
--- a/server/sonar-web/design-system/src/components/InputSelect.tsx
+++ b/server/sonar-web/design-system/src/components/InputSelect.tsx
@@ -111,11 +111,11 @@ export function InputSelect<
   Option extends LabelValueSelectOption<V>,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
->({ size = 'medium', ...props }: SelectProps<V, Option, IsMulti, Group>) {
+>({ size = 'medium', className, ...props }: SelectProps<V, Option, IsMulti, Group>) {
   return (
     <ReactSelect<Option, IsMulti, Group>
       {...omit(props, 'className', 'large')}
-      className={classNames('react-select', props.className)}
+      className={classNames('react-select', className)}
       classNamePrefix="react-select"
       classNames={{
         container: () => 'sw-relative sw-inline-block sw-align-middle',
@@ -156,13 +156,10 @@ export function selectStyle<
   const theme = themeInfo();
 
   return {
-    container: (base) => ({
-      ...base,
-      width: INPUT_SIZES[size],
-    }),
     control: (base, { isFocused, menuIsOpen, isDisabled }) => ({
       ...base,
       color: themeContrast('inputBackground')({ theme }),
+      cursor: 'pointer',
       background: themeColor('inputBackground')({ theme }),
       transition: 'border 0.2s ease, outline 0.2s ease',
       outline: isFocused && !menuIsOpen ? themeBorder('focus', 'inputFocus')({ theme }) : 'none',
diff --git a/server/sonar-web/design-system/src/components/MultiSelect.tsx b/server/sonar-web/design-system/src/components/MultiSelectMenu.tsx
similarity index 97%
rename from server/sonar-web/design-system/src/components/MultiSelect.tsx
rename to server/sonar-web/design-system/src/components/MultiSelectMenu.tsx
index 8766b057c4e..b0c77bfcd74 100644
--- a/server/sonar-web/design-system/src/components/MultiSelect.tsx
+++ b/server/sonar-web/design-system/src/components/MultiSelectMenu.tsx
@@ -23,7 +23,7 @@ import { PureComponent } from 'react';
 import { Key } from '../helpers/keyboard';
 import { ItemDivider, ItemHeader } from './DropdownMenu';
 import { InputSearch } from './InputSearch';
-import { MultiSelectOption } from './MultiSelectOption';
+import { MultiSelectMenuOption } from './MultiSelectMenuOption';
 
 interface Props {
   allowNewElements?: boolean;
@@ -33,6 +33,7 @@ interface Props {
   elements: string[];
   footerNode?: React.ReactNode;
   headerNode?: React.ReactNode;
+  inputId?: string;
   listSize: number;
   noResultsLabel: string;
   onSearch: (query: string) => Promise<void>;
@@ -60,7 +61,7 @@ interface DefaultProps {
 
 type PropsWithDefault = Props & DefaultProps;
 
-export class MultiSelect extends PureComponent<Props, State> {
+export class MultiSelectMenu extends PureComponent<Props, State> {
   container?: HTMLDivElement | null;
   searchInput?: HTMLInputElement | null;
   mounted = false;
@@ -258,6 +259,7 @@ export class MultiSelect extends PureComponent<Props, State> {
       createElementLabel,
       headerNode = '',
       footerNode = '',
+      inputId,
       clearIconAriaLabel,
       noResultsLabel,
       searchInputAriaLabel,
@@ -275,6 +277,7 @@ export class MultiSelect extends PureComponent<Props, State> {
             autoFocus
             className="sw-mt-1"
             clearIconAriaLabel={clearIconAriaLabel}
+            id={inputId}
             loading={this.state.loading}
             onChange={this.handleSearchChange}
             placeholder={this.props.placeholder}
@@ -291,7 +294,7 @@ export class MultiSelect extends PureComponent<Props, State> {
         >
           {selectedElements.length > 0 &&
             selectedElements.map((element) => (
-              <MultiSelectOption
+              <MultiSelectMenuOption
                 active={activeElement === element}
                 createElementLabel={createElementLabel}
                 element={element}
@@ -303,7 +306,7 @@ export class MultiSelect extends PureComponent<Props, State> {
             ))}
           {unselectedElements.length > 0 &&
             unselectedElements.map((element) => (
-              <MultiSelectOption
+              <MultiSelectMenuOption
                 active={activeElement === element}
                 createElementLabel={createElementLabel}
                 disabled={!allowSelection}
@@ -314,7 +317,7 @@ export class MultiSelect extends PureComponent<Props, State> {
               />
             ))}
           {showNewElement && (
-            <MultiSelectOption
+            <MultiSelectMenuOption
               active={activeElement === query}
               createElementLabel={createElementLabel}
               custom
diff --git a/server/sonar-web/design-system/src/components/MultiSelectOption.tsx b/server/sonar-web/design-system/src/components/MultiSelectMenuOption.tsx
similarity index 96%
rename from server/sonar-web/design-system/src/components/MultiSelectOption.tsx
rename to server/sonar-web/design-system/src/components/MultiSelectMenuOption.tsx
index ccabda0b225..27147703f96 100644
--- a/server/sonar-web/design-system/src/components/MultiSelectOption.tsx
+++ b/server/sonar-web/design-system/src/components/MultiSelectMenuOption.tsx
@@ -31,7 +31,7 @@ export interface MultiSelectOptionProps {
   selected?: boolean;
 }
 
-export function MultiSelectOption(props: MultiSelectOptionProps) {
+export function MultiSelectMenuOption(props: MultiSelectOptionProps) {
   const { active, createElementLabel, custom, disabled, element, onSelectChange, selected } = props;
   const onHover = () => props.onHover(element);
 
diff --git a/server/sonar-web/design-system/src/components/RadioButton.tsx b/server/sonar-web/design-system/src/components/RadioButton.tsx
index 5dd58756d73..7bfd61f4bbc 100644
--- a/server/sonar-web/design-system/src/components/RadioButton.tsx
+++ b/server/sonar-web/design-system/src/components/RadioButton.tsx
@@ -53,7 +53,7 @@ export function RadioButton({
   };
 
   return (
-    <label className={classNames('sw-flex sw-items-center', className)}>
+    <label className={classNames('sw-flex sw-items-center sw-cursor-pointer', className)}>
       <RadioButtonStyled
         aria-disabled={disabled}
         checked={checked}
diff --git a/server/sonar-web/design-system/src/components/SearchSelectDropdown.tsx b/server/sonar-web/design-system/src/components/SearchSelectDropdown.tsx
index 13f719a91ab..8212eefd90c 100644
--- a/server/sonar-web/design-system/src/components/SearchSelectDropdown.tsx
+++ b/server/sonar-web/design-system/src/components/SearchSelectDropdown.tsx
@@ -30,7 +30,8 @@ import {
 import { AsyncProps } from 'react-select/async';
 import Select from 'react-select/dist/declarations/src/Select';
 import tw from 'twin.macro';
-import { DEBOUNCE_DELAY, themeBorder } from '../helpers';
+import { DEBOUNCE_DELAY, PopupPlacement, PopupZLevel, themeBorder } from '../helpers';
+import { InputSizeKeys } from '../types/theme';
 import { DropdownToggler } from './DropdownToggler';
 import { IconOption, LabelValueSelectOption, SelectProps } from './InputSelect';
 import { SearchHighlighterContext } from './SearchHighlighter';
@@ -52,8 +53,10 @@ export interface SearchSelectDropdownProps<
   Group extends GroupBase<Option> = GroupBase<Option>
 > extends SelectProps<V, Option, IsMulti, Group>,
     AsyncProps<Option, IsMulti, Group> {
+  className?: string;
   controlAriaLabel?: string;
   controlLabel?: React.ReactNode | string;
+  controlSize?: InputSizeKeys;
   isDiscreet?: boolean;
 }
 
@@ -64,10 +67,12 @@ export function SearchSelectDropdown<
   Group extends GroupBase<Option> = GroupBase<Option>
 >(props: SearchSelectDropdownProps<V, Option, IsMulti, Group>) {
   const {
+    className,
     isDiscreet,
     value,
     loadOptions,
     controlLabel,
+    controlSize,
     isDisabled,
     minLength,
     controlAriaLabel,
@@ -122,7 +127,6 @@ export function SearchSelectDropdown<
     <DropdownToggler
       allowResizing
       className="sw-overflow-visible sw-border-none"
-      isPortal
       onRequestClose={() => {
         toggleDropdown(false);
       }}
@@ -149,15 +153,19 @@ export function SearchSelectDropdown<
           </StyledSearchSelectWrapper>
         </SearchHighlighterContext.Provider>
       }
+      placement={PopupPlacement.BottomLeft}
+      zLevel={PopupZLevel.Global}
     >
       <SearchSelectDropdownControl
         ariaLabel={controlAriaLabel}
+        className={className}
         disabled={isDisabled}
         isDiscreet={isDiscreet}
         label={controlLabel}
         onClick={() => {
           toggleDropdown(true);
         }}
+        size={controlSize}
       />
     </DropdownToggler>
   );
diff --git a/server/sonar-web/design-system/src/components/SearchSelectDropdownControl.tsx b/server/sonar-web/design-system/src/components/SearchSelectDropdownControl.tsx
index e0b50db401c..83873796134 100644
--- a/server/sonar-web/design-system/src/components/SearchSelectDropdownControl.tsx
+++ b/server/sonar-web/design-system/src/components/SearchSelectDropdownControl.tsx
@@ -28,6 +28,7 @@ import { ChevronDownIcon } from './icons';
 
 interface SearchSelectDropdownControlProps {
   ariaLabel?: string;
+  className?: string;
   disabled?: boolean;
   isDiscreet?: boolean;
   label?: React.ReactNode | string;
@@ -36,11 +37,11 @@ interface SearchSelectDropdownControlProps {
 }
 
 export function SearchSelectDropdownControl(props: SearchSelectDropdownControlProps) {
-  const { disabled, label, isDiscreet, onClick, size = 'full', ariaLabel = '' } = props;
+  const { className, disabled, label, isDiscreet, onClick, size = 'full', ariaLabel = '' } = props;
   return (
     <StyledControl
       aria-label={ariaLabel}
-      className={classNames({ 'is-discreet': isDiscreet })}
+      className={classNames(className, { 'is-discreet': isDiscreet })}
       onClick={() => {
         if (!disabled) {
           onClick();
@@ -52,17 +53,17 @@ export function SearchSelectDropdownControl(props: SearchSelectDropdownControlPr
         }
       }}
       role="combobox"
+      style={{ '--inputSize': isDiscreet ? 'auto' : INPUT_SIZES[size] }}
       tabIndex={disabled ? -1 : 0}
     >
       <InputValue
-        className={classNames('js-search-input-value', {
+        className={classNames('it__js-search-input-value sw-flex sw-justify-between', {
           'is-disabled': disabled,
           'is-placeholder': !label,
         })}
-        style={{ '--inputSize': isDiscreet ? 'auto' : INPUT_SIZES[size] }}
       >
-        {label}
-        <ChevronDownIcon />
+        <span className="sw-truncate">{label}</span>
+        <ChevronDownIcon className="sw-ml-1" />
       </InputValue>
     </StyledControl>
   );
@@ -72,13 +73,14 @@ const StyledControl = styled.div`
   color: ${themeContrast('inputBackground')};
   background: ${themeColor('inputBackground')};
   border: ${themeBorder('default', 'inputBorder')};
+  width: var(--inputSize);
 
   ${tw`sw-flex sw-justify-between sw-items-center`};
   ${tw`sw-rounded-2`};
   ${tw`sw-box-border`};
   ${tw`sw-px-3 sw-py-2`};
   ${tw`sw-body-sm`};
-  ${tw`sw-w-full sw-h-control`};
+  ${tw`sw-h-control`};
   ${tw`sw-leading-4`};
   ${tw`sw-cursor-pointer`};
 
@@ -113,7 +115,7 @@ const StyledControl = styled.div`
 `;
 
 const InputValue = styled.span`
-  width: var(--inputSize);
+  width: 100%;
   color: ${themeContrast('inputBackground')};
 
   ${tw`sw-truncate`};
diff --git a/server/sonar-web/design-system/src/components/TagsSelector.tsx b/server/sonar-web/design-system/src/components/TagsSelector.tsx
index 5c4ad8d52b3..9a748075138 100644
--- a/server/sonar-web/design-system/src/components/TagsSelector.tsx
+++ b/server/sonar-web/design-system/src/components/TagsSelector.tsx
@@ -17,13 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { MultiSelect } from './MultiSelect';
+import { MultiSelectMenu } from './MultiSelectMenu';
 
 interface Props {
+  allowNewElements?: boolean;
   clearIconAriaLabel: string;
   createElementLabel: string;
   headerLabel: string;
-  listSize: number;
   noResultsLabel: string;
   onSearch: (query: string) => Promise<void>;
   onSelect: (item: string) => void;
@@ -33,12 +33,14 @@ interface Props {
   tags: string[];
 }
 
+const LIST_SIZE = 10;
+
 export function TagsSelector(props: Props) {
   const {
+    allowNewElements,
     clearIconAriaLabel,
     createElementLabel,
     headerLabel,
-    listSize,
     noResultsLabel,
     searchInputAriaLabel,
     selectedTags,
@@ -46,12 +48,13 @@ export function TagsSelector(props: Props) {
   } = props;
 
   return (
-    <MultiSelect
+    <MultiSelectMenu
+      allowNewElements={allowNewElements}
       clearIconAriaLabel={clearIconAriaLabel}
       createElementLabel={createElementLabel}
       elements={tags}
       headerNode={<div className="sw-mt-4 sw-font-semibold">{headerLabel}</div>}
-      listSize={listSize}
+      listSize={LIST_SIZE}
       noResultsLabel={noResultsLabel}
       onSearch={props.onSearch}
       onSelect={props.onSelect}
diff --git a/server/sonar-web/design-system/src/components/__tests__/InputMultiSelect-test.tsx b/server/sonar-web/design-system/src/components/__tests__/InputMultiSelect-test.tsx
new file mode 100644
index 00000000000..d40de11ab10
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/__tests__/InputMultiSelect-test.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 { render, screen } from '@testing-library/react';
+import { FCProps } from '../../types/misc';
+import { InputMultiSelect } from '../InputMultiSelect';
+
+it('should render correctly', () => {
+  renderInputMultiSelect();
+  expect(screen.getByText('select')).toBeInTheDocument();
+  expect(screen.queryByText('selected')).not.toBeInTheDocument();
+  expect(screen.queryByText(/\d+/)).not.toBeInTheDocument();
+});
+
+it('should render correctly with a counter', () => {
+  renderInputMultiSelect({ count: 42 });
+  expect(screen.queryByText('select')).not.toBeInTheDocument();
+  expect(screen.getByText('selected')).toBeInTheDocument();
+  expect(screen.getByText('42')).toBeInTheDocument();
+});
+
+function renderInputMultiSelect(props: Partial<FCProps<typeof InputMultiSelect>> = {}) {
+  render(<InputMultiSelect placeholder="select" selectedLabel="selected" {...props} />);
+}
diff --git a/server/sonar-web/design-system/src/components/__tests__/MultiSelect-test.tsx b/server/sonar-web/design-system/src/components/__tests__/MultiSelectMenu-test.tsx
similarity index 96%
rename from server/sonar-web/design-system/src/components/__tests__/MultiSelect-test.tsx
rename to server/sonar-web/design-system/src/components/__tests__/MultiSelectMenu-test.tsx
index 2e79eb02cd0..e2077ecf2a0 100644
--- a/server/sonar-web/design-system/src/components/__tests__/MultiSelect-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/MultiSelectMenu-test.tsx
@@ -19,7 +19,7 @@
  */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MultiSelect } from '../MultiSelect';
+import { MultiSelectMenu } from '../MultiSelectMenu';
 
 const elements = ['foo', 'bar', 'baz'];
 
@@ -92,9 +92,9 @@ it('should show no results', () => {
   expect(screen.getByText('no results')).toBeInTheDocument();
 });
 
-function renderMultiselect(props: Partial<MultiSelect['props']> = {}) {
+function renderMultiselect(props: Partial<MultiSelectMenu['props']> = {}) {
   return render(
-    <MultiSelect
+    <MultiSelectMenu
       clearIconAriaLabel="clear"
       createElementLabel="create thing"
       elements={[]}
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 4749a34cb40..7192c8d91e0 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
@@ -86,7 +86,6 @@ function Wrapper(overrides: Partial<FCProps<typeof Tags>> = {}) {
       clearIconAriaLabel="clear"
       createElementLabel="create new tag"
       headerLabel="edit tags"
-      listSize={4}
       noResultsLabel="no results"
       onSearch={jest.fn().mockResolvedValue(undefined)}
       onSelect={(tag) => {
diff --git a/server/sonar-web/design-system/src/components/buttons.tsx b/server/sonar-web/design-system/src/components/buttons.tsx
index dd679d3ae56..6cb9c86f756 100644
--- a/server/sonar-web/design-system/src/components/buttons.tsx
+++ b/server/sonar-web/design-system/src/components/buttons.tsx
@@ -29,7 +29,7 @@ import { BaseLink, LinkProps } from './Link';
 
 type AllowedButtonAttributes = Pick<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
-  'aria-label' | 'autoFocus' | 'id' | 'name' | 'role' | 'style' | 'title' | 'type'
+  'aria-label' | 'autoFocus' | 'id' | 'name' | 'role' | 'style' | 'title' | 'type' | 'form'
 >;
 
 export interface ButtonProps extends AllowedButtonAttributes {
diff --git a/server/sonar-web/design-system/src/components/icons/index.ts b/server/sonar-web/design-system/src/components/icons/index.ts
index 898e9a46890..5112f869cfd 100644
--- a/server/sonar-web/design-system/src/components/icons/index.ts
+++ b/server/sonar-web/design-system/src/components/icons/index.ts
@@ -41,6 +41,7 @@ export { FlagWarningIcon } from './FlagWarningIcon';
 export { HelperHintIcon } from './HelperHintIcon';
 export { HomeFillIcon } from './HomeFillIcon';
 export { HomeIcon } from './HomeIcon';
+export * from './Icon';
 export { IssueLocationIcon } from './IssueLocationIcon';
 export { LinkIcon } from './LinkIcon';
 export { LockIcon } from './LockIcon';
diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts
index 27126e7a328..9cd9b190184 100644
--- a/server/sonar-web/design-system/src/components/index.ts
+++ b/server/sonar-web/design-system/src/components/index.ts
@@ -50,6 +50,7 @@ export { Histogram } from './Histogram';
 export { HotspotRating } from './HotspotRating';
 export * from './HtmlFormatter';
 export * from './InputField';
+export * from './InputMultiSelect';
 export { InputSearch } from './InputSearch';
 export * from './InputSelect';
 export * from './InteractiveIcon';
@@ -61,10 +62,12 @@ export * from './MainAppBar';
 export * from './MainMenu';
 export * from './MainMenuItem';
 export * from './MetricsRatingBadge';
+export * from './MultiSelectMenu';
 export * from './NavBarTabs';
 export * from './NewCodeLegend';
 export * from './OutsideClickHandler';
 export { QualityGateIndicator } from './QualityGateIndicator';
+export * from './RadioButton';
 export * from './SearchSelect';
 export * from './SearchSelectDropdown';
 export * from './SelectionCard';
diff --git a/server/sonar-web/design-system/src/components/modal/ModalBody.tsx b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx
index 1d5af12d9cf..6b7ead1f8db 100644
--- a/server/sonar-web/design-system/src/components/modal/ModalBody.tsx
+++ b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx
@@ -35,7 +35,8 @@ export function ModalBody({ children, isScrollable = true }: Props) {
 
 const StyledMain = styled.div`
   ${tw`sw-body-sm`}
-  ${tw`sw-pr-3`} // to accomodate a possible scrollbar
+  ${tw`sw-px-3`} // to accomodate a possible scrollbar
+  ${tw`-sw-mx-3`}
   ${tw`sw-my-12`}
   ${tw`sw-overflow-x-hidden`}
 
diff --git a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap
index 6c86070b3b4..4d41d0c95e2 100644
--- a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap
@@ -6,7 +6,10 @@ exports[`renders with children 1`] = `
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
+  padding-left: 0.75rem;
   padding-right: 0.75rem;
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
   margin-top: 3rem;
   margin-bottom: 3rem;
   overflow-x: hidden;
diff --git a/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx b/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx
index 6e72459c326..7479073a8c6 100644
--- a/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx
+++ b/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Avatar from '../../../components/ui/Avatar';
+import LegacyAvatar from '../../../components/ui/LegacyAvatar';
 import { LoggedInUser } from '../../../types/users';
 
 interface Props {
@@ -29,7 +29,7 @@ export default function UserCard({ user }: Props) {
   return (
     <div className="account-user">
       <div className="pull-left account-user-avatar" id="avatar">
-        <Avatar hash={user.avatar} name={user.name} size={60} />
+        <LegacyAvatar hash={user.avatar} name={user.name} size={60} />
       </div>
       <h1 className="pull-left" id="name">
         {user.name}
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 5da901f7a48..5bca99c6339 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
@@ -17,127 +17,93 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-
-import { debounce } from 'lodash';
+import { LabelValueSelectOption, SearchSelectDropdown } from 'design-system';
 import * as React from 'react';
-import { components, OptionProps, SingleValueProps } from 'react-select';
-import { LabelValueSelectOption, SearchSelect } from '../../../components/controls/Select';
+import { Options, SingleValue } from 'react-select';
+import { CurrentUserContext } from '../../../app/components/current-user/CurrentUserContext';
 import Avatar from '../../../components/ui/Avatar';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Issue } from '../../../types/types';
-import { CurrentUser, isLoggedIn, isUserActive } from '../../../types/users';
+import { UserActive, isLoggedIn, isUserActive } from '../../../types/users';
 import { searchAssignees } from '../utils';
 
-const DEBOUNCE_DELAY = 250;
 // exported for test
 export const MIN_QUERY_LENGTH = 2;
 
-export interface AssigneeOption extends LabelValueSelectOption {
-  avatar?: string;
-  email?: string;
-  label: string;
-  value: string;
-}
+const UNASSIGNED = { value: '', label: translate('unassigned') };
 
 export interface AssigneeSelectProps {
-  currentUser: CurrentUser;
+  assignee?: SingleValue<LabelValueSelectOption<string>>;
+  className?: string;
   issues: Issue[];
-  onAssigneeSelect: (assignee: AssigneeOption) => void;
+  onAssigneeSelect: (assignee: SingleValue<LabelValueSelectOption<string>>) => void;
   inputId: string;
 }
 
-export default class AssigneeSelect extends React.Component<AssigneeSelectProps> {
-  constructor(props: AssigneeSelectProps) {
-    super(props);
-
-    this.handleAssigneeSearch = debounce(this.handleAssigneeSearch, DEBOUNCE_DELAY);
-  }
-
-  getDefaultAssignee = () => {
-    const { currentUser, issues } = this.props;
-    const options = [];
-
-    if (isLoggedIn(currentUser)) {
-      const canBeAssignedToMe =
-        issues.filter((issue) => issue.assignee !== currentUser.login).length > 0;
-      if (canBeAssignedToMe) {
-        options.push({
-          avatar: currentUser.avatar,
-          label: currentUser.name,
-          value: currentUser.login,
-        });
-      }
-    }
-
-    const canBeUnassigned = issues.filter((issue) => issue.assignee).length > 0;
-    if (canBeUnassigned) {
-      options.push({ label: translate('unassigned'), value: '' });
-    }
-
-    return options;
+function userToOption(user: UserActive) {
+  const userInfo = user.name || user.login;
+  return {
+    value: user.login,
+    label: isUserActive(user) ? userInfo : translateWithParameters('user.x_deleted', userInfo),
+    Icon: <Avatar hash={user.avatar} name={user.name} size="xs" />,
   };
+}
 
-  handleAssigneeSearch = (query: string, resolve: (options: AssigneeOption[]) => void) => {
-    if (query.length < MIN_QUERY_LENGTH) {
-      resolve([]);
-      return;
-    }
+export default function AssigneeSelect(props: AssigneeSelectProps) {
+  const { assignee, className, issues, inputId } = props;
 
-    searchAssignees(query)
-      .then(({ results }) =>
-        results.map((r) => {
-          const userInfo = r.name ?? r.login;
+  const { currentUser } = React.useContext(CurrentUserContext);
 
-          return {
-            avatar: r.avatar,
-            label: isUserActive(r) ? userInfo : translateWithParameters('user.x_deleted', userInfo),
-            value: r.login,
-          };
-        })
-      )
-      .then(resolve)
-      .catch(() => resolve([]));
-  };
+  const allowCurrentUserSelection =
+    isLoggedIn(currentUser) && issues.some((issue) => currentUser.login !== issue.assignee);
 
-  renderAssignee = (option: AssigneeOption) => {
-    return (
-      <div className="display-flex-center">
-        {option.avatar !== undefined && (
-          <Avatar className="spacer-right" hash={option.avatar} name={option.label} size={16} />
-        )}
-        {option.label}
-      </div>
-    );
-  };
+  const defaultOptions = allowCurrentUserSelection
+    ? [UNASSIGNED, userToOption(currentUser)]
+    : [UNASSIGNED];
 
-  renderAssigneeOption = (props: OptionProps<AssigneeOption, false>) => (
-    <components.Option {...props}>{this.renderAssignee(props.data)}</components.Option>
+  const controlLabel = assignee ? (
+    <>
+      {assignee.Icon} {assignee.label}
+    </>
+  ) : (
+    translate('select_verb')
   );
 
-  renderSingleAssignee = (props: SingleValueProps<AssigneeOption, false>) => (
-    <components.SingleValue {...props}>{this.renderAssignee(props.data)}</components.SingleValue>
+  const handleAssigneeSearch = React.useCallback(
+    (query: string, resolve: (options: Options<LabelValueSelectOption<string>>) => void) => {
+      if (query.length < MIN_QUERY_LENGTH) {
+        resolve([]);
+        return;
+      }
+
+      searchAssignees(query)
+        .then(({ results }) => results.map(userToOption))
+        .then(resolve)
+        .catch(() => resolve([]));
+    },
+    []
   );
 
-  render() {
-    const { inputId } = this.props;
-    return (
-      <SearchSelect
-        className="input-super-large"
-        inputId={inputId}
-        components={{
-          Option: this.renderAssigneeOption,
-          SingleValue: this.renderSingleAssignee,
-        }}
-        isClearable
-        defaultOptions={this.getDefaultAssignee()}
-        loadOptions={this.handleAssigneeSearch}
-        onChange={this.props.onAssigneeSelect}
-        noOptionsMessage={({ inputValue }) =>
-          inputValue.length < MIN_QUERY_LENGTH
-            ? translateWithParameters('select2.tooShort', MIN_QUERY_LENGTH)
-            : translate('select2.noMatches')
-        }
-      />
-    );
-  }
+  return (
+    <SearchSelectDropdown
+      aria-label={translate('search.search_for_users')}
+      className={className}
+      size="full"
+      controlSize="full"
+      inputId={inputId}
+      isClearable
+      defaultOptions={defaultOptions}
+      loadOptions={handleAssigneeSearch}
+      onChange={props.onAssigneeSelect}
+      noOptionsMessage={({ inputValue }) =>
+        inputValue.length < MIN_QUERY_LENGTH
+          ? 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/BulkChangeModal.tsx b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
index 8c49f77e4e7..5e47667161a 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
@@ -17,61 +17,55 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { debounce, pickBy, sortBy } from 'lodash';
+import {
+  ButtonPrimary,
+  Checkbox,
+  DeferredSpinner,
+  FlagMessage,
+  FormField,
+  HelperHintIcon,
+  Highlight,
+  InputSelect,
+  LabelValueSelectOption,
+  LightLabel,
+  Modal,
+  RadioButton,
+} from 'design-system';
+import { pickBy, sortBy } from 'lodash';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { components, OptionProps, SingleValueProps } from 'react-select';
+import { SingleValue } from 'react-select';
 import { bulkChangeIssues, searchIssueTags } from '../../../api/issues';
 import FormattingTips from '../../../components/common/FormattingTips';
-import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
-import Checkbox from '../../../components/controls/Checkbox';
-import HelpTooltip from '../../../components/controls/HelpTooltip';
-import Modal from '../../../components/controls/Modal';
-import Radio from '../../../components/controls/Radio';
-import Select, {
-  CreatableSelect,
-  LabelValueSelectOption,
-  SearchSelect,
-} from '../../../components/controls/Select';
-import IssueTypeIcon from '../../../components/icons/IssueTypeIcon';
-import SeverityHelper from '../../../components/shared/SeverityHelper';
-import { Alert } from '../../../components/ui/Alert';
-import DeferredSpinner from '../../../components/ui/DeferredSpinner';
+import IssueSeverityIcon from '../../../components/icon-mappers/IssueSeverityIcon';
+import IssueTypeIcon from '../../../components/icon-mappers/IssueTypeIcon';
 import { SEVERITIES } from '../../../helpers/constants';
 import { throwGlobalError } from '../../../helpers/error';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { Component, Dict, Issue, IssueType, Paging } from '../../../types/types';
-import { CurrentUser } from '../../../types/users';
-import AssigneeSelect, { AssigneeOption } from './AssigneeSelect';
-
-const DEBOUNCE_DELAY = 250;
-
-interface TagOption extends LabelValueSelectOption {
-  label: string;
-  value: string;
-}
+import { IssueSeverity } from '../../../types/issues';
+import { Dict, Issue, IssueType, Paging } from '../../../types/types';
+import AssigneeSelect from './AssigneeSelect';
+import TagsSelect from './TagsSelect';
 
 interface Props {
-  component: Component | undefined;
-  currentUser: CurrentUser;
   fetchIssues: (x: {}) => Promise<{ issues: Issue[]; paging: Paging }>;
   onClose: () => void;
   onDone: () => void;
 }
 
 interface FormFields {
-  addTags?: Array<{ label: string; value: string }>;
-  assignee?: AssigneeOption;
+  addTags?: Array<string>;
+  assignee?: SingleValue<LabelValueSelectOption<string>>;
   comment?: string;
   notifications?: boolean;
-  removeTags?: Array<{ label: string; value: string }>;
+  removeTags?: Array<string>;
   severity?: string;
   transition?: string;
   type?: string;
 }
 
 interface State extends FormFields {
-  initialTags: Array<{ label: string; value: string }>;
+  initialTags: Array<string>;
   issues: Issue[];
   // used for initial loading of issues
   loading: boolean;
@@ -90,49 +84,12 @@ enum InputField {
 
 export const MAX_PAGE_SIZE = 500;
 
-function typeFieldTypeRenderer(option: LabelValueSelectOption) {
-  return (
-    <div className="display-flex-center">
-      <IssueTypeIcon query={option.value} />
-      <span className="little-spacer-left">{option.label}</span>
-    </div>
-  );
-}
-
-function TypeFieldOptionComponent(props: OptionProps<LabelValueSelectOption, false>) {
-  return <components.Option {...props}>{typeFieldTypeRenderer(props.data)}</components.Option>;
-}
-
-function TypeFieldSingleValueComponent(props: SingleValueProps<LabelValueSelectOption, false>) {
-  return (
-    <components.SingleValue {...props}>{typeFieldTypeRenderer(props.data)}</components.SingleValue>
-  );
-}
-
-function SeverityFieldOptionComponent(props: OptionProps<LabelValueSelectOption, false>) {
-  return (
-    <components.Option {...props}>
-      {<SeverityHelper className="display-flex-center" severity={props.data.value} />}
-    </components.Option>
-  );
-}
-
-function SeverityFieldSingleValueComponent(props: SingleValueProps<LabelValueSelectOption, false>) {
-  return (
-    <components.SingleValue {...props}>
-      {<SeverityHelper className="display-flex-center" severity={props.data.value} />}
-    </components.SingleValue>
-  );
-}
-
 export default class BulkChangeModal extends React.PureComponent<Props, State> {
   mounted = false;
 
   constructor(props: Props) {
     super(props);
     this.state = { initialTags: [], issues: [], loading: true, submitting: false };
-
-    this.handleTagsSearch = debounce(this.handleTagsSearch, DEBOUNCE_DELAY);
   }
 
   componentDidMount() {
@@ -146,7 +103,7 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
           }
 
           this.setState({
-            initialTags: tags.map((tag) => ({ label: tag, value: tag })),
+            initialTags: tags,
             issues,
             loading: false,
             paging,
@@ -165,19 +122,18 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     return this.props.fetchIssues({ additionalFields: 'actions,transitions', ps: MAX_PAGE_SIZE });
   };
 
-  handleAssigneeSelect = (assignee: AssigneeOption) => {
+  handleAssigneeSelect = (assignee: SingleValue<LabelValueSelectOption<string>>) => {
     this.setState({ assignee });
   };
 
-  handleTagsSearch = (query: string, resolve: (option: TagOption[]) => void) => {
-    searchIssueTags({ q: query })
-      .then((tags) => tags.map((tag) => ({ label: tag, value: tag })))
-      .then(resolve)
-      .catch(() => resolve([]));
+  handleTagsSearch = (query: string): Promise<string[]> => {
+    return searchIssueTags({ q: query })
+      .then((tags) => tags)
+      .catch(() => []);
   };
 
   handleTagsSelect =
-    (field: InputField.addTags | InputField.removeTags) => (options: TagOption[]) => {
+    (field: InputField.addTags | InputField.removeTags) => (options: Array<string>) => {
       this.setState<keyof FormFields>({ [field]: options });
     };
 
@@ -198,7 +154,7 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
   };
 
   handleSelectFieldChange =
-    (field: 'severity' | 'type') => (data: LabelValueSelectOption | null) => {
+    (field: 'severity' | 'type') => (data: LabelValueSelectOption<string> | null) => {
       if (data) {
         this.setState<keyof FormFields>({ [field]: data.value });
       } else {
@@ -211,11 +167,11 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
 
     const query = pickBy(
       {
-        add_tags: this.state.addTags && this.state.addTags.map((t) => t.value).join(),
+        add_tags: this.state.addTags?.join(),
         assign: this.state.assignee ? this.state.assignee.value : null,
         comment: this.state.comment,
         do_transition: this.state.transition,
-        remove_tags: this.state.removeTags && this.state.removeTags.map((t) => t.value).join(),
+        remove_tags: this.state.removeTags?.join(),
         sendNotifications: this.state.notifications,
         set_severity: this.state.severity,
         set_type: this.state.type,
@@ -270,48 +226,26 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     );
   };
 
-  renderLoading = () => (
-    <div>
-      <div className="modal-head">
-        <h2>{translate('bulk_change')}</h2>
-      </div>
-      <div className="modal-body">
-        <div className="text-center">
-          <DeferredSpinner
-            timeout={0}
-            className="spacer"
-            ariaLabel={translate('issues.loading_issues')}
-          />
-        </div>
-      </div>
-      <div className="modal-foot">
-        <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
-      </div>
-    </div>
-  );
-
-  renderAffected = (affected: number) => (
-    <div className="pull-right note">
-      ({translateWithParameters('issue_bulk_change.x_issues', affected)})
-    </div>
-  );
-
   renderField = (
     field: InputField,
     label: string,
     affected: number | undefined,
     input: React.ReactNode
   ) => (
-    <div className="modal-field">
-      <label htmlFor={`issues-bulk-change-${field}`}>{translate(label)}</label>
-      {input}
-      {affected !== undefined && this.renderAffected(affected)}
-    </div>
+    <FormField htmlFor={`issues-bulk-change-${field}`} label={translate(label)}>
+      <div className="sw-flex sw-items-center sw-justify-between">
+        {input}
+        {affected !== undefined && (
+          <LightLabel>
+            ({translateWithParameters('issue_bulk_change.x_issues', affected)})
+          </LightLabel>
+        )}
+      </div>
+    </FormField>
   );
 
   renderAssigneeField = () => {
-    const { currentUser } = this.props;
-    const { issues } = this.state;
+    const { assignee, issues } = this.state;
     const affected = this.state.issues.filter(hasAction('assign')).length;
     const field = InputField.assignee;
 
@@ -321,8 +255,9 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
 
     const input = (
       <AssigneeSelect
+        assignee={assignee}
+        className="sw-max-w-abs-300"
         inputId={`issues-bulk-change-${field}`}
-        currentUser={currentUser}
         issues={issues}
         onAssigneeSelect={this.handleAssigneeSelect}
       />
@@ -340,23 +275,21 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     }
 
     const types: IssueType[] = ['BUG', 'VULNERABILITY', 'CODE_SMELL'];
-    const options: LabelValueSelectOption[] = types.map((type) => ({
+    const options: LabelValueSelectOption<IssueType>[] = types.map((type) => ({
       label: translate('issue.type', type),
       value: type,
+      Icon: <IssueTypeIcon height={16} type={type} />,
     }));
 
     const input = (
-      <Select
-        className="input-super-large"
+      <InputSelect
+        className="sw-w-abs-300"
         inputId={`issues-bulk-change-${field}`}
         isClearable
         isSearchable={false}
-        components={{
-          Option: TypeFieldOptionComponent,
-          SingleValue: TypeFieldSingleValueComponent,
-        }}
         onChange={this.handleSelectFieldChange('type')}
         options={options}
+        size="full"
       />
     );
 
@@ -371,23 +304,21 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
       return null;
     }
 
-    const options: LabelValueSelectOption[] = SEVERITIES.map((severity) => ({
+    const options: LabelValueSelectOption<IssueSeverity>[] = SEVERITIES.map((severity) => ({
       label: translate('severity', severity),
       value: severity,
+      Icon: <IssueSeverityIcon height={16} severity={severity} />,
     }));
 
     const input = (
-      <Select
-        className="input-super-large"
+      <InputSelect
+        className="sw-w-abs-300"
         inputId={`issues-bulk-change-${field}`}
         isClearable
         isSearchable={false}
         onChange={this.handleSelectFieldChange('severity')}
-        components={{
-          Option: SeverityFieldOptionComponent,
-          SingleValue: SeverityFieldSingleValueComponent,
-        }}
         options={options}
+        size="full"
       />
     );
 
@@ -400,26 +331,21 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     allowCreate: boolean
   ) => {
     const { initialTags } = this.state;
+    const tags = this.state[field] ?? [];
     const affected = this.state.issues.filter(hasAction('set_tags')).length;
 
     if (initialTags === undefined || affected === 0) {
       return null;
     }
 
-    const props = {
-      className: 'input-super-large',
-      inputId: `issues-bulk-change-${field}`,
-      isClearable: true,
-      defaultOptions: this.state.initialTags,
-      isMulti: true,
-      onChange: this.handleTagsSelect(field),
-      loadOptions: this.handleTagsSearch,
-    };
-
-    const input = allowCreate ? (
-      <CreatableSelect {...props} formatCreateLabel={createTagPrompt} />
-    ) : (
-      <SearchSelect {...props} />
+    const input = (
+      <TagsSelect
+        allowCreation={allowCreate}
+        inputId={`issues-bulk-change-${field}`}
+        onChange={this.handleTagsSelect(field)}
+        selectedTags={tags}
+        onSearch={this.handleTagsSearch}
+      />
     );
 
     return this.renderField(field, label, affected, input);
@@ -433,23 +359,27 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     }
 
     return (
-      <div className="modal-field">
+      <div className="sw-mb-6">
         <fieldset>
-          <legend>{translate('issue.transition')}</legend>
+          <Highlight as="legend" className="sw-mb-2">
+            {translate('issue.transition')}
+          </Highlight>
           {transitions.map((transition) => (
-            <span
-              className="bulk-change-radio-button display-flex-center display-flex-space-between"
+            <div
+              className="sw-mb-1 sw-flex sw-items-center sw-justify-between"
               key={transition.transition}
             >
-              <Radio
+              <RadioButton
                 checked={this.state.transition === transition.transition}
                 onCheck={this.handleRadioTransitionChange}
                 value={transition.transition}
               >
                 {translate('issue.transition', transition.transition)}
-              </Radio>
-              {this.renderAffected(transition.count)}
-            </span>
+              </RadioButton>
+              <LightLabel>
+                ({translateWithParameters('issue_bulk_change.x_issues', transition.count)})
+              </LightLabel>
+            </div>
           ))}
         </fieldset>
       </div>
@@ -464,58 +394,62 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     }
 
     return (
-      <div className="modal-field">
-        <label htmlFor="comment">
-          <span className="text-middle">{translate('issue.comment.formlink')}</span>
-          <HelpTooltip
-            className="spacer-left"
-            overlay={translate('issue_bulk_change.comment.help')}
-          />
-        </label>
+      <FormField
+        label={translate('issue.comment.formlink')}
+        htmlFor="comment"
+        help={
+          <div className="-sw-mt-1" title={translate('issue_bulk_change.comment.help')}>
+            <HelperHintIcon />
+          </div>
+        }
+      >
         <textarea
           id="comment"
           onChange={this.handleCommentChange}
           rows={4}
-          value={this.state.comment || ''}
+          value={this.state.comment ?? ''}
         />
-        <FormattingTips className="modal-field-descriptor text-right" />
-      </div>
+        <FormattingTips className="sw-text-right" />
+      </FormField>
     );
   };
 
   renderNotificationsField = () => (
-    <Checkbox
-      checked={this.state.notifications !== undefined}
-      className="display-inline-block spacer-top"
-      id="send-notifications"
-      onCheck={this.handleFieldCheck('notifications')}
-      right
-    >
-      <strong className="little-spacer-right">{translate('issue.send_notifications')}</strong>
-    </Checkbox>
+    <div>
+      <Checkbox
+        checked={this.state.notifications !== undefined}
+        className="sw-my-2 sw-gap-1/2"
+        id="send-notifications"
+        onCheck={this.handleFieldCheck('notifications')}
+        right
+      >
+        {translate('issue.send_notifications')}
+      </Checkbox>
+    </div>
   );
 
   renderForm = () => {
-    const { issues, paging, submitting } = this.state;
+    const { issues, loading, paging } = this.state;
 
     const limitReached = paging && paging.total > MAX_PAGE_SIZE;
-    const canSubmit = this.canSubmit();
 
     return (
-      <form id="bulk-change-form" onSubmit={this.handleSubmit}>
-        <div className="modal-head">
-          <h2>{translateWithParameters('issue_bulk_change.form.title', issues.length)}</h2>
-        </div>
-
-        <div className="modal-body modal-container">
+      <DeferredSpinner loading={loading}>
+        <form id="bulk-change-form" onSubmit={this.handleSubmit}>
           {limitReached && (
-            <Alert variant="warning">
-              <FormattedMessage
-                defaultMessage={translate('issue_bulk_change.max_issues_reached')}
-                id="issue_bulk_change.max_issues_reached"
-                values={{ max: <strong>{MAX_PAGE_SIZE}</strong> }}
-              />
-            </Alert>
+            <FlagMessage
+              ariaLabel={translate('alert.tooltip.warning')}
+              className="sw-mb-4"
+              variant="warning"
+            >
+              <span>
+                <FormattedMessage
+                  defaultMessage={translate('issue_bulk_change.max_issues_reached')}
+                  id="issue_bulk_change.max_issues_reached"
+                  values={{ max: <strong>{MAX_PAGE_SIZE}</strong> }}
+                />
+              </span>
+            </FlagMessage>
           )}
 
           {this.renderAssigneeField()}
@@ -527,29 +461,43 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
           {this.renderCommentField()}
           {issues.length > 0 && this.renderNotificationsField()}
           {issues.length === 0 && (
-            <Alert variant="warning">{translate('issue_bulk_change.no_match')}</Alert>
+            <FlagMessage ariaLabel={translate('alert.tooltip.warning')} variant="warning">
+              {translate('issue_bulk_change.no_match')}
+            </FlagMessage>
           )}
-        </div>
-
-        <div className="modal-foot">
-          {submitting && <i className="spinner spacer-right" />}
-          <SubmitButton
-            disabled={!canSubmit || submitting || issues.length === 0}
-            id="bulk-change-submit"
-          >
-            {translate('apply')}
-          </SubmitButton>
-          <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
-        </div>
-      </form>
+        </form>
+      </DeferredSpinner>
     );
   };
 
   render() {
+    const { issues, loading, submitting } = this.state;
+
+    const canSubmit = this.canSubmit();
+
     return (
-      <Modal onRequestClose={this.props.onClose} size="small">
-        {this.state.loading ? this.renderLoading() : this.renderForm()}
-      </Modal>
+      <Modal
+        onClose={this.props.onClose}
+        headerTitle={
+          loading
+            ? translate('bulk_change')
+            : translateWithParameters('issue_bulk_change.form.title', issues.length)
+        }
+        isScrollable={true}
+        loading={submitting}
+        body={this.renderForm()}
+        primaryButton={
+          <ButtonPrimary
+            id="bulk-change-submit"
+            form="bulk-change-form"
+            type="submit"
+            disabled={!canSubmit || submitting || issues.length === 0}
+          >
+            {translate('apply')}
+          </ButtonPrimary>
+        }
+        secondaryButtonLabel={translate('cancel')}
+      />
     );
   }
 }
@@ -557,7 +505,3 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
 function hasAction(action: string) {
   return (issue: Issue) => issue.actions && issue.actions.includes(action);
 }
-
-function createTagPrompt(label: string) {
-  return translateWithParameters('issue.create_tag_x', label);
-}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index 2326968dc26..ac4a86b744e 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
@@ -901,7 +901,7 @@ export class App extends React.PureComponent<Props, State> {
   };
 
   renderBulkChange() {
-    const { component, currentUser } = this.props;
+    const { currentUser } = this.props;
     const { checkAll, bulkChangeModal, checked, issues, paging } = this.state;
 
     const isAllChecked = checked.length > 0 && issues.length === checked.length;
@@ -935,8 +935,6 @@ export class App extends React.PureComponent<Props, State> {
 
         {bulkChangeModal && (
           <BulkChangeModal
-            component={component}
-            currentUser={currentUser}
             fetchIssues={checkAll ? this.fetchIssues : this.getCheckedIssues}
             onClose={this.handleCloseBulkChange}
             onDone={this.handleBulkChangeDone}
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
new file mode 100644
index 00000000000..19a5d7dffd6
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/issues/components/TagsSelect.tsx
@@ -0,0 +1,112 @@
+/*
+ * 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 {
+  Dropdown,
+  InputMultiSelect,
+  PopupPlacement,
+  PopupZLevel,
+  TagsSelector,
+} from 'design-system';
+import * as React from 'react';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
+
+interface Props {
+  allowCreation: boolean;
+  inputId?: string;
+  onChange: (selected: string[]) => void;
+  onSearch: (query: string) => Promise<string[]>;
+  selectedTags: string[];
+}
+
+export default function TagsSelect(props: Props) {
+  const { allowCreation, inputId, onSearch, onChange, selectedTags } = props;
+  const [searchResults, setSearchResults] = React.useState<string[]>([]);
+
+  const doSearch = React.useCallback(
+    async (query: string) => {
+      const results = await onSearch(query);
+      setSearchResults(results);
+    },
+    [onSearch, setSearchResults]
+  );
+
+  const onSelect = React.useCallback(
+    (newTag: string) => {
+      onChange([...selectedTags, newTag]);
+    },
+    [onChange, selectedTags]
+  );
+
+  const onUnselect = React.useCallback(
+    (toRemove: string) => {
+      onChange(selectedTags.filter((tag) => tag !== toRemove));
+    },
+    [onChange, selectedTags]
+  );
+
+  return (
+    <Dropdown
+      allowResizing={true}
+      closeOnClick={false}
+      id="tag-selector"
+      overlay={
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div onMouseDown={handleMousedown}>
+          <TagsSelector
+            allowNewElements={allowCreation}
+            createElementLabel={translateWithParameters('issue.create_tag')}
+            clearIconAriaLabel={translate('clear')}
+            headerLabel={translate('issue_bulk_change.select_tags')}
+            noResultsLabel={translate('no_results')}
+            onSelect={onSelect}
+            onUnselect={onUnselect}
+            searchInputAriaLabel={translate('search.search_for_tags')}
+            selectedTags={selectedTags}
+            onSearch={doSearch}
+            tags={searchResults}
+          />
+        </div>
+      }
+      placement={PopupPlacement.BottomLeft}
+      zLevel={PopupZLevel.Global}
+    >
+      {({ onToggleClick }) => (
+        <InputMultiSelect
+          className="sw-w-abs-300"
+          id={inputId}
+          onClick={onToggleClick}
+          placeholder={translate('select_verb')}
+          selectedLabel={translate('issue_bulk_change.selected_tags')}
+          count={selectedTags.length}
+        />
+      )}
+    </Dropdown>
+  );
+}
+
+/*
+ * Prevent click from triggering a change of focus that would close the dropdown
+ */
+function handleMousedown(e: React.MouseEvent) {
+  if ((e.target as HTMLElement).tagName !== 'INPUT') {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/AssigneeSelect-test.tsx b/server/sonar-web/src/main/js/apps/issues/components/__tests__/AssigneeSelect-test.tsx
index 48474e56cf3..b471b83dc05 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/AssigneeSelect-test.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/AssigneeSelect-test.tsx
@@ -21,10 +21,12 @@ import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
-import { byRole } from 'testing-library-selector';
+import { byLabelText } from 'testing-library-selector';
+import CurrentUserContextProvider from '../../../../app/components/current-user/CurrentUserContextProvider';
 import { mockUserBase } from '../../../../helpers/mocks/users';
 import { mockCurrentUser, mockIssue, mockLoggedInUser } from '../../../../helpers/testMocks';
 import { renderComponent } from '../../../../helpers/testReactTestingUtils';
+import { CurrentUser } from '../../../../types/users';
 import AssigneeSelect, { AssigneeSelectProps, MIN_QUERY_LENGTH } from '../AssigneeSelect';
 
 jest.mock('../../utils', () => ({
@@ -52,15 +54,18 @@ jest.mock('../../utils', () => ({
 }));
 
 const ui = {
-  combobox: byRole('combobox'),
+  combobox: byLabelText('issue_bulk_change.assignee.change'),
+  searchbox: byLabelText('search.search_for_users'),
 };
 
 it('should show correct suggestions when there is assignable issue for the current user', async () => {
   const user = userEvent.setup();
-  renderAssigneeSelect({
-    currentUser: mockLoggedInUser({ name: 'Skywalker' }),
-    issues: [mockIssue(false, { assignee: 'someone' })],
-  });
+  renderAssigneeSelect(
+    {
+      issues: [mockIssue(false, { assignee: 'someone' })],
+    },
+    mockLoggedInUser({ name: 'Skywalker' })
+  );
 
   await user.click(ui.combobox.get());
   expect(await screen.findByText('Skywalker')).toBeInTheDocument();
@@ -68,10 +73,12 @@ it('should show correct suggestions when there is assignable issue for the curre
 
 it('should show correct suggestions when all issues are already assigned to current user', async () => {
   const user = userEvent.setup();
-  renderAssigneeSelect({
-    currentUser: mockLoggedInUser({ login: 'luke', name: 'Skywalker' }),
-    issues: [mockIssue(false, { assignee: 'luke' })],
-  });
+  renderAssigneeSelect(
+    {
+      issues: [mockIssue(false, { assignee: 'luke' })],
+    },
+    mockLoggedInUser({ login: 'luke', name: 'Skywalker' })
+  );
 
   await user.click(ui.combobox.get());
   expect(screen.queryByText('Skywalker')).not.toBeInTheDocument();
@@ -79,9 +86,7 @@ it('should show correct suggestions when all issues are already assigned to curr
 
 it('should show correct suggestions when there is no assigneable issue', async () => {
   const user = userEvent.setup();
-  renderAssigneeSelect({
-    currentUser: mockLoggedInUser({ name: 'Skywalker' }),
-  });
+  renderAssigneeSelect({}, mockLoggedInUser({ name: 'Skywalker' }));
 
   await user.click(ui.combobox.get());
   expect(screen.queryByText('Skywalker')).not.toBeInTheDocument();
@@ -92,11 +97,17 @@ it('should handle assignee search correctly', async () => {
   renderAssigneeSelect();
 
   // Minimum MIN_QUERY_LENGTH charachters to trigger search
-  await user.type(ui.combobox.get(), 'a');
+  await act(async () => {
+    await user.click(ui.combobox.get());
+    await user.type(ui.searchbox.get(), 'a');
+  });
   expect(await screen.findByText(`select2.tooShort.${MIN_QUERY_LENGTH}`)).toBeInTheDocument();
 
   // Trigger search
-  await user.type(ui.combobox.get(), 'someone');
+  await act(async () => {
+    await user.click(ui.combobox.get());
+    await user.type(ui.searchbox.get(), 'someone');
+  });
   expect(await screen.findByText('toto')).toBeInTheDocument();
   expect(await screen.findByText('user.x_deleted.tata')).toBeInTheDocument();
   expect(await screen.findByText('user.x_deleted.titi@titi')).toBeInTheDocument();
@@ -108,25 +119,25 @@ it('should handle assignee selection', async () => {
   renderAssigneeSelect({ onAssigneeSelect });
 
   await act(async () => {
-    await user.type(ui.combobox.get(), 'tot');
+    await user.click(ui.combobox.get());
+    await user.type(ui.searchbox.get(), 'tot');
   });
 
   // Do not select assignee until suggestion is selected
   expect(onAssigneeSelect).not.toHaveBeenCalled();
 
   // Select assignee when suggestion is selected
-  await user.click(screen.getByText('toto'));
+  await user.click(screen.getByLabelText('toto'));
   expect(onAssigneeSelect).toHaveBeenCalledTimes(1);
 });
 
-function renderAssigneeSelect(overrides: Partial<AssigneeSelectProps> = {}) {
+function renderAssigneeSelect(
+  overrides: Partial<AssigneeSelectProps> = {},
+  currentUser: CurrentUser = mockCurrentUser()
+) {
   return renderComponent(
-    <AssigneeSelect
-      inputId="id"
-      currentUser={mockCurrentUser()}
-      issues={[]}
-      onAssigneeSelect={jest.fn()}
-      {...overrides}
-    />
+    <CurrentUserContextProvider currentUser={currentUser}>
+      <AssigneeSelect inputId="id" issues={[]} onAssigneeSelect={jest.fn()} {...overrides} />
+    </CurrentUserContextProvider>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/BulkChangeModal-it.tsx b/server/sonar-web/src/main/js/apps/issues/components/__tests__/BulkChangeModal-it.tsx
index d629ed13c86..b964c4f1172 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/BulkChangeModal-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/BulkChangeModal-it.tsx
@@ -17,16 +17,18 @@
  * 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 { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 import selectEvent from 'react-select-event';
 import { bulkChangeIssues } from '../../../../api/issues';
+import CurrentUserContextProvider from '../../../../app/components/current-user/CurrentUserContextProvider';
 import { SEVERITIES } from '../../../../helpers/constants';
 import { mockIssue, mockLoggedInUser } from '../../../../helpers/testMocks';
 import { renderComponent } from '../../../../helpers/testReactTestingUtils';
 import { IssueType } from '../../../../types/issues';
 import { Issue } from '../../../../types/types';
+import { CurrentUser } from '../../../../types/users';
 import BulkChangeModal, { MAX_PAGE_SIZE } from '../BulkChangeModal';
 
 jest.mock('../../../../api/issues', () => ({
@@ -120,28 +122,31 @@ it('should properly submit', async () => {
     ],
     {
       onDone,
-      currentUser: mockLoggedInUser({
-        login: 'toto',
-        name: 'Toto',
-      }),
-    }
+    },
+    mockLoggedInUser({
+      login: 'toto',
+      name: 'Toto',
+    })
   );
 
   expect(bulkChangeIssues).toHaveBeenCalledTimes(0);
   expect(onDone).toHaveBeenCalledTimes(0);
 
   // Assign
-  await user.click(await screen.findByRole('combobox', { name: 'issue.assign.formlink' }));
+  await user.click(
+    await screen.findByRole('combobox', { name: 'issue_bulk_change.assignee.change' })
+  );
   await user.click(await screen.findByText('Toto'));
 
   // Transition
   await user.click(await screen.findByText('issue.transition.Transition2'));
 
   // Add a tag
-  await selectEvent.select(screen.getByRole('combobox', { name: 'issue.add_tags' }), [
-    'tag1',
-    'tag2',
-  ]);
+  await act(async () => {
+    await user.click(screen.getByRole('combobox', { name: 'issue.add_tags' }));
+    await user.click(screen.getByText('tag1'));
+    await user.click(screen.getByText('tag2'));
+  });
 
   // Select a type
   await selectEvent.select(screen.getByRole('combobox', { name: 'issue.set_type' }), [
@@ -180,24 +185,29 @@ it('should properly submit', async () => {
   });
 });
 
-function renderBulkChangeModal(issues: Issue[], props: Partial<BulkChangeModal['props']> = {}) {
+function renderBulkChangeModal(
+  issues: Issue[],
+  props: Partial<BulkChangeModal['props']> = {},
+  currentUser: CurrentUser = mockLoggedInUser()
+) {
   return renderComponent(
-    <BulkChangeModal
-      component={undefined}
-      currentUser={{ isLoggedIn: true, dismissedNotices: {} }}
-      fetchIssues={() =>
-        Promise.resolve({
-          issues,
-          paging: {
-            pageIndex: issues.length,
-            pageSize: issues.length,
-            total: issues.length,
-          },
-        })
-      }
-      onClose={() => {}}
-      onDone={() => {}}
-      {...props}
-    />
+    <CurrentUserContextProvider currentUser={currentUser}>
+      <BulkChangeModal
+        fetchIssues={() =>
+          Promise.resolve({
+            issues,
+            paging: {
+              pageIndex: issues.length,
+              pageSize: issues.length,
+              total: issues.length,
+            },
+          })
+        }
+        onClose={() => {}}
+        onDone={() => {}}
+        {...props}
+      />
+    </CurrentUserContextProvider>,
+    ''
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/AssigneeFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/AssigneeFacet.tsx
index 95d4efd2410..e02b0abe463 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/AssigneeFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/AssigneeFacet.tsx
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { Avatar } from 'design-system';
 import { omit, sortBy, without } from 'lodash';
 import * as React from 'react';
+import Avatar from '../../../components/ui/Avatar';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { highlightTerm } from '../../../helpers/search';
 import { Facet } from '../../../types/issues';
@@ -120,7 +120,6 @@ export class AssigneeFacet extends React.PureComponent<Props> {
     return (
       <>
         <Avatar className="sw-mr-1" hash={user.avatar} name={userName} size="xs" />
-
         {isUserActive(user) ? userName : translateWithParameters('user.x_deleted', userName)}
       </>
     );
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx
index 7f2ba88edb3..ec30c1f8039 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { DeleteButton } from '../../../components/controls/buttons';
 import GroupIcon from '../../../components/icons/GroupIcon';
-import Avatar from '../../../components/ui/Avatar';
+import LegacyAvatar from '../../../components/ui/LegacyAvatar';
 import { Group, isUser } from '../../../types/quality-gates';
 import { UserBase } from '../../../types/users';
 
@@ -35,7 +35,7 @@ export default function PermissionItem(props: PermissionItemProps) {
   return (
     <div className="display-flex-center permission-list-item padded">
       {isUser(item) ? (
-        <Avatar className="spacer-right" hash={item.avatar} name={item.name} size={32} />
+        <LegacyAvatar className="spacer-right" hash={item.avatar} name={item.name} size={32} />
       ) : (
         <GroupIcon className="pull-left spacer-right" size={32} />
       )}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx
index 6bb9d8b78c6..d5dfb77954e 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx
@@ -24,7 +24,7 @@ import { ResetButtonLink, SubmitButton } from '../../../components/controls/butt
 import Modal from '../../../components/controls/Modal';
 import { SearchSelect } from '../../../components/controls/Select';
 import GroupIcon from '../../../components/icons/GroupIcon';
-import Avatar from '../../../components/ui/Avatar';
+import LegacyAvatar from '../../../components/ui/LegacyAvatar';
 import { translate } from '../../../helpers/l10n';
 import { Group, isUser } from '../../../types/quality-gates';
 import { UserBase } from '../../../types/users';
@@ -92,7 +92,7 @@ export function customOptions(option: OptionWithValue) {
   return (
     <span className="display-flex-center" data-testid="qg-add-permission-option">
       {isUser(option) ? (
-        <Avatar hash={option.avatar} name={option.name} size={16} />
+        <LegacyAvatar hash={option.avatar} name={option.name} size={16} />
       ) : (
         <GroupIcon size={16} />
       )}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
index 7e99bc501e6..3d1f8ee2f2b 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
@@ -19,15 +19,15 @@
  */
 import { debounce, omit } from 'lodash';
 import * as React from 'react';
-import { components, ControlProps, OptionProps, SingleValueProps } from 'react-select';
+import { ControlProps, OptionProps, SingleValueProps, components } from 'react-select';
 import {
+  SearchUsersGroupsParameters,
   searchGroups,
   searchUsers,
-  SearchUsersGroupsParameters,
 } from '../../../api/quality-profiles';
 import { SearchSelect } from '../../../components/controls/Select';
 import GroupIcon from '../../../components/icons/GroupIcon';
-import Avatar from '../../../components/ui/Avatar';
+import LegacyAvatar from '../../../components/ui/LegacyAvatar';
 import { translate } from '../../../helpers/l10n';
 import { UserSelected } from '../../../types/types';
 import { Group } from './ProfilePermissions';
@@ -115,7 +115,7 @@ function getStringValue(option: Option) {
 function customOptions(option: OptionWithValue) {
   return isUser(option) ? (
     <span className="display-flex-center">
-      <Avatar hash={option.avatar} name={option.name} size={16} />
+      <LegacyAvatar hash={option.avatar} name={option.name} size={16} />
       <strong className="spacer-left">{option.name}</strong>
       <span className="note little-spacer-left">{option.login}</span>
     </span>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
index b460024d93e..fc343d6e1e2 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx
@@ -20,9 +20,9 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { removeUser } from '../../../api/quality-profiles';
-import { DeleteButton, ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
 import SimpleModal, { ChildrenProps } from '../../../components/controls/SimpleModal';
-import Avatar from '../../../components/ui/Avatar';
+import { DeleteButton, ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
+import LegacyAvatar from '../../../components/ui/LegacyAvatar';
 import { translate } from '../../../helpers/l10n';
 import { UserSelected } from '../../../types/types';
 
@@ -110,7 +110,12 @@ export default class ProfilePermissionsUser extends React.PureComponent<Props, S
           className="pull-right spacer-top spacer-left spacer-right button-small"
           onClick={this.handleDeleteClick}
         />
-        <Avatar className="pull-left spacer-right" hash={user.avatar} name={user.name} size={32} />
+        <LegacyAvatar
+          className="pull-left spacer-right"
+          hash={user.avatar}
+          name={user.name}
+          size={32}
+        />
         <div className="overflow-hidden">
           <strong>{user.name}</strong>
           <div className="note">{user.login}</div>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap
index fc1970f5c72..a1fb25cecb6 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsUser-test.tsx.snap
@@ -8,7 +8,7 @@ exports[`renders 1`] = `
     className="pull-right spacer-top spacer-left spacer-right button-small"
     onClick={[Function]}
   />
-  <withAppStateContext(Avatar)
+  <withAppStateContext(LegacyAvatar)
     className="pull-left spacer-right"
     name="Luke Skywalker"
     size={32}
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 4f670dfc33b..8631310d85d 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
@@ -17,13 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { Avatar, LabelValueSelectOption, SearchSelectDropdown } from 'design-system';
+import { LabelValueSelectOption, SearchSelectDropdown } from 'design-system';
 import { noop } from 'lodash';
 import * as React from 'react';
 import { Options, SingleValue } from 'react-select';
 import { assignSecurityHotspot } from '../../../api/security-hotspots';
 import { searchUsers } from '../../../api/users';
 import { CurrentUserContext } from '../../../app/components/current-user/CurrentUserContext';
+import Avatar from '../../../components/ui/Avatar';
 import { addGlobalSuccessMessage } from '../../../helpers/globalMessages';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Hotspot, HotspotResolution, HotspotStatus } from '../../../types/security-hotspots';
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx
index 5bb9fccbc3c..659f9193264 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx
@@ -32,7 +32,7 @@ import {
 import * as React from 'react';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import IssueChangelogDiff from '../../../components/issue/components/IssueChangelogDiff';
-import Avatar from '../../../components/ui/Avatar';
+import LegacyAvatar from '../../../components/ui/LegacyAvatar';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { sanitizeUserInput } from '../../../helpers/sanitize';
 import { Hotspot, ReviewHistoryType } from '../../../types/security-hotspots';
@@ -63,7 +63,7 @@ export default function HotspotReviewHistory(props: HotspotReviewHistoryProps) {
             <LightLabel as="div" className="sw-flex sw-gap-2">
               {user.name && (
                 <div className="sw-flex sw-items-center sw-gap-1">
-                  <Avatar hash={user.avatar} name={user.name} size={20} />
+                  <LegacyAvatar hash={user.avatar} name={user.name} size={20} />
                   <span className="sw-body-sm-highlight">
                     {user.active ? user.name : translateWithParameters('user.x_deleted', user.name)}
                   </span>
diff --git a/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx b/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx
index 54f39d8ce69..a3840b67f3a 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/UserListItem.tsx
@@ -21,7 +21,7 @@ import * as React from 'react';
 import { ButtonIcon } from '../../../components/controls/buttons';
 import BulletListIcon from '../../../components/icons/BulletListIcon';
 import DateFromNow from '../../../components/intl/DateFromNow';
-import Avatar from '../../../components/ui/Avatar';
+import LegacyAvatar from '../../../components/ui/LegacyAvatar';
 import { translateWithParameters } from '../../../helpers/l10n';
 import { IdentityProvider } from '../../../types/types';
 import { User } from '../../../types/users';
@@ -56,7 +56,12 @@ export default function UserListItem(props: UserListItemProps) {
     <tr>
       <td className="thin text-middle">
         <div className="sw-flex sw-items-center">
-          <Avatar className="sw-shrink-0 sw-mr-4" hash={user.avatar} name={user.name} size={36} />
+          <LegacyAvatar
+            className="sw-shrink-0 sw-mr-4"
+            hash={user.avatar}
+            name={user.name}
+            size={36}
+          />
           <UserListItemIdentity
             identityProvider={identityProvider}
             user={user}
diff --git a/server/sonar-web/src/main/js/components/icon-mappers/IssueSeverityIcon.tsx b/server/sonar-web/src/main/js/components/icon-mappers/IssueSeverityIcon.tsx
new file mode 100644
index 00000000000..6659db606eb
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icon-mappers/IssueSeverityIcon.tsx
@@ -0,0 +1,51 @@
+/*
+ * 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 {
+  IconProps,
+  SeverityBlockerIcon,
+  SeverityCriticalIcon,
+  SeverityInfoIcon,
+  SeverityMajorIcon,
+  SeverityMinorIcon,
+} from 'design-system';
+import React from 'react';
+import { IssueSeverity } from '../../types/issues';
+import { Dict } from '../../types/types';
+
+interface Props extends IconProps {
+  severity: IssueSeverity | undefined;
+}
+
+const severityIcons: Dict<(props: IconProps) => React.ReactElement> = {
+  blocker: SeverityBlockerIcon,
+  critical: SeverityCriticalIcon,
+  major: SeverityMajorIcon,
+  minor: SeverityMinorIcon,
+  info: SeverityInfoIcon,
+};
+
+export default function IssueSeverityIcon({ severity, ...iconProps }: Props) {
+  if (!severity) {
+    return null;
+  }
+
+  const IconComponent = severityIcons[severity.toLowerCase()];
+  return IconComponent ? <IconComponent {...iconProps} /> : null;
+}
diff --git a/server/sonar-web/src/main/js/components/icon-mappers/IssueTypeIcon.tsx b/server/sonar-web/src/main/js/components/icon-mappers/IssueTypeIcon.tsx
index d035d4aa400..4863731e284 100644
--- a/server/sonar-web/src/main/js/components/icon-mappers/IssueTypeIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icon-mappers/IssueTypeIcon.tsx
@@ -23,12 +23,12 @@ import classNames from 'classnames';
 import {
   BugIcon,
   CodeSmellIcon,
+  IconProps,
   SecurityHotspotIcon,
   VulnerabilityIcon,
   themeColor,
   themeContrast,
 } from 'design-system';
-import { IconProps } from 'design-system/lib/components/icons/Icon';
 import React from 'react';
 import { IssueType } from '../../types/issues';
 
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 0c86f616a33..4b739af1156 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
@@ -18,12 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { ButtonLink } from '../../../components/controls/buttons';
 import Toggler from '../../../components/controls/Toggler';
+import { ButtonLink } from '../../../components/controls/buttons';
 import DropdownIcon from '../../../components/icons/DropdownIcon';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Issue } from '../../../types/types';
-import Avatar from '../../ui/Avatar';
+import LegacyAvatar from '../../ui/LegacyAvatar';
 import SetAssigneePopup from '../popups/SetAssigneePopup';
 
 interface Props {
@@ -55,7 +55,12 @@ export default class IssueAssign extends React.PureComponent<Props> {
       return (
         <>
           <span className="text-top">
-            <Avatar className="little-spacer-right" hash={issue.assigneeAvatar} name="" size={16} />
+            <LegacyAvatar
+              className="little-spacer-right"
+              hash={issue.assigneeAvatar}
+              name=""
+              size={16}
+            />
           </span>
           <span className="issue-meta-label" title={assigneeDisplay}>
             {assigneeDisplay}
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx
index 08ec3edc3cf..748283724e1 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueCommentLine.tsx
@@ -18,14 +18,14 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { DeleteButton, EditButton } from '../../../components/controls/buttons';
 import Toggler from '../../../components/controls/Toggler';
+import { DeleteButton, EditButton } from '../../../components/controls/buttons';
 import { PopupPlacement } from '../../../components/ui/popups';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { sanitizeUserInput } from '../../../helpers/sanitize';
 import { IssueComment } from '../../../types/types';
 import DateFromNow from '../../intl/DateFromNow';
-import Avatar from '../../ui/Avatar';
+import LegacyAvatar from '../../ui/LegacyAvatar';
 import CommentDeletePopup from '../popups/CommentDeletePopup';
 import CommentPopup from '../popups/CommentPopup';
 
@@ -87,7 +87,7 @@ export default class IssueCommentLine extends React.PureComponent<Props, State>
     return (
       <li className="issue-comment">
         <div className="issue-comment-author" title={displayName}>
-          <Avatar
+          <LegacyAvatar
             className="little-spacer-right"
             hash={comment.authorAvatar}
             name={author}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
index 3cd9bcbb419..eb4e580156c 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.tsx
@@ -24,7 +24,7 @@ import { PopupPlacement } from '../../../components/ui/popups';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Issue, IssueChangelog } from '../../../types/types';
 import DateTimeFormatter from '../../intl/DateTimeFormatter';
-import Avatar from '../../ui/Avatar';
+import LegacyAvatar from '../../ui/LegacyAvatar';
 import IssueChangelogDiff from '../components/IssueChangelogDiff';
 
 interface Props {
@@ -88,7 +88,7 @@ export default class ChangelogPopup extends React.PureComponent<Props, State> {
                       <div>
                         {userName && (
                           <>
-                            <Avatar
+                            <LegacyAvatar
                               className="little-spacer-right"
                               hash={item.avatar}
                               name={userName}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx b/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx
index 2efd8d9ea1c..c280798cf42 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentTile.tsx
@@ -23,7 +23,7 @@ import { sanitizeUserInput } from '../../../helpers/sanitize';
 import { IssueComment } from '../../../types/types';
 import { DeleteButton, EditButton } from '../../controls/buttons';
 import DateTimeFormatter from '../../intl/DateTimeFormatter';
-import Avatar from '../../ui/Avatar';
+import LegacyAvatar from '../../ui/LegacyAvatar';
 import CommentForm from './CommentForm';
 
 interface CommentTileProps {
@@ -68,7 +68,7 @@ export default class CommentTile extends React.PureComponent<CommentTileProps, C
       <div className="issue-comment-tile spacer-bottom padded">
         <div className="display-flex-center">
           <div className="issue-comment-author display-flex-center" title={displayName}>
-            <Avatar
+            <LegacyAvatar
               className="little-spacer-right"
               hash={comment.authorAvatar}
               name={author}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.tsx
index 1dc729aed53..181dc2989e8 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.tsx
@@ -27,7 +27,7 @@ import { translate } from '../../../helpers/l10n';
 import { CurrentUser, isLoggedIn, isUserActive, UserActive, UserBase } from '../../../types/users';
 import SelectList from '../../common/SelectList';
 import SelectListItem from '../../common/SelectListItem';
-import Avatar from '../../ui/Avatar';
+import LegacyAvatar from '../../ui/LegacyAvatar';
 
 interface Props {
   currentUser: CurrentUser;
@@ -107,7 +107,12 @@ export class SetAssigneePopup extends React.PureComponent<Props, State> {
             {this.state.users.map((user) => (
               <SelectListItem item={user.login} key={user.login}>
                 {!!user.login && (
-                  <Avatar className="spacer-right" hash={user.avatar} name={user.name} size={16} />
+                  <LegacyAvatar
+                    className="spacer-right"
+                    hash={user.avatar}
+                    name={user.name}
+                    size={16}
+                  />
                 )}
                 <span className="text-middle" style={{ marginLeft: user.login ? 24 : undefined }}>
                   {user.name}
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.tsx
index 9662a5bad95..6da1f303387 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.tsx
@@ -30,7 +30,7 @@ import SelectList from '../../common/SelectList';
 import SelectListItem from '../../common/SelectListItem';
 import SeverityHelper from '../../shared/SeverityHelper';
 import StatusHelper from '../../shared/StatusHelper';
-import Avatar from '../../ui/Avatar';
+import LegacyAvatar from '../../ui/LegacyAvatar';
 
 interface SimilarIssuesPopupProps {
   issue: Issue;
@@ -95,7 +95,7 @@ export default function SimilarIssuesPopup(props: SimilarIssuesPopupProps) {
           {assignee ? (
             <span>
               {translate('assigned_to')}
-              <Avatar
+              <LegacyAvatar
                 className="little-spacer-left little-spacer-right"
                 hash={issue.assigneeAvatar}
                 name={assignee}
diff --git a/server/sonar-web/src/main/js/components/permissions/UserHolder.tsx b/server/sonar-web/src/main/js/components/permissions/UserHolder.tsx
index 7336a716a63..ada77a541cf 100644
--- a/server/sonar-web/src/main/js/components/permissions/UserHolder.tsx
+++ b/server/sonar-web/src/main/js/components/permissions/UserHolder.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { isPermissionDefinitionGroup } from '../../helpers/permissions';
 import { PermissionDefinitions, PermissionUser } from '../../types/types';
-import Avatar from '../ui/Avatar';
+import LegacyAvatar from '../ui/LegacyAvatar';
 import PermissionCell from './PermissionCell';
 
 interface Props {
@@ -97,7 +97,7 @@ export default class UserHolder extends React.PureComponent<Props, State> {
       <tr>
         <td className="nowrap text-middle">
           <div className="display-flex-center">
-            <Avatar
+            <LegacyAvatar
               className="text-middle big-spacer-right flex-0"
               hash={user.avatar}
               name={user.name}
diff --git a/server/sonar-web/src/main/js/components/ui/Avatar.tsx b/server/sonar-web/src/main/js/components/ui/Avatar.tsx
index e59bf061b3b..affb330f8cc 100644
--- a/server/sonar-web/src/main/js/components/ui/Avatar.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Avatar.tsx
@@ -17,55 +17,27 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import classNames from 'classnames';
+import { Avatar as BaseAvatar } from 'design-system';
 import * as React from 'react';
-import withAppStateContext from '../../app/components/app-state/withAppStateContext';
-import GenericAvatar from '../../components/ui/GenericAvatar';
-import { AppState } from '../../types/appstate';
+import { AppStateContext } from '../../app/components/app-state/AppStateContext';
+import { FCProps } from '../../types/misc';
 import { GlobalSettingKeys } from '../../types/settings';
 
-const GRAVATAR_SIZE_MULTIPLIER = 2;
+type ExcludedProps =
+  | 'enableGravatar'
+  | 'gravatarServerUrl'
+  | 'organizationAvatar'
+  | 'organizationName';
 
-interface Props {
-  appState: AppState;
-  className?: string;
-  hash?: string;
-  name?: string;
-  size: number;
-}
+type Props = Omit<FCProps<typeof BaseAvatar>, ExcludedProps>;
 
-export function Avatar(props: Props) {
-  const {
-    appState: { settings },
-    className,
-    hash,
-    name,
-    size,
-  } = props;
+export default function Avatar(props: Props) {
+  const { settings } = React.useContext(AppStateContext);
 
   const enableGravatar = settings[GlobalSettingKeys.EnableGravatar] === 'true';
-
-  if (!enableGravatar || !hash) {
-    if (!name) {
-      return null;
-    }
-    return <GenericAvatar className={className} name={name} size={size} />;
-  }
-
   const gravatarServerUrl = settings[GlobalSettingKeys.GravatarServerUrl] ?? '';
-  const url = gravatarServerUrl
-    .replace('{EMAIL_MD5}', hash)
-    .replace('{SIZE}', String(size * GRAVATAR_SIZE_MULTIPLIER));
 
   return (
-    <img
-      alt={name}
-      className={classNames(className, 'rounded')}
-      height={size}
-      src={url}
-      width={size}
-    />
+    <BaseAvatar enableGravatar={enableGravatar} gravatarServerUrl={gravatarServerUrl} {...props} />
   );
 }
-
-export default withAppStateContext(Avatar);
diff --git a/server/sonar-web/src/main/js/components/ui/LegacyAvatar.tsx b/server/sonar-web/src/main/js/components/ui/LegacyAvatar.tsx
new file mode 100644
index 00000000000..aa1a8e32c46
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/LegacyAvatar.tsx
@@ -0,0 +1,74 @@
+/*
+ * 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 classNames from 'classnames';
+import * as React from 'react';
+import withAppStateContext from '../../app/components/app-state/withAppStateContext';
+import { AppState } from '../../types/appstate';
+import { GlobalSettingKeys } from '../../types/settings';
+import GenericAvatar from './GenericAvatar';
+
+const GRAVATAR_SIZE_MULTIPLIER = 2;
+
+interface Props {
+  appState: AppState;
+  className?: string;
+  hash?: string;
+  name?: string;
+  size: number;
+}
+
+/**
+ * @deprecated Use Avatar instead
+ */
+export function LegacyAvatar(props: Props) {
+  const {
+    appState: { settings },
+    className,
+    hash,
+    name,
+    size,
+  } = props;
+
+  const enableGravatar = settings[GlobalSettingKeys.EnableGravatar] === 'true';
+
+  if (!enableGravatar || !hash) {
+    if (!name) {
+      return null;
+    }
+    return <GenericAvatar className={className} name={name} size={size} />;
+  }
+
+  const gravatarServerUrl = settings[GlobalSettingKeys.GravatarServerUrl] ?? '';
+  const url = gravatarServerUrl
+    .replace('{EMAIL_MD5}', hash)
+    .replace('{SIZE}', String(size * GRAVATAR_SIZE_MULTIPLIER));
+
+  return (
+    <img
+      alt={name}
+      className={classNames(className, 'rounded')}
+      height={size}
+      src={url}
+      width={size}
+    />
+  );
+}
+
+export default withAppStateContext(LegacyAvatar);
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/Avatar-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/Avatar-test.tsx
index c8f2bec7ca4..79956d51acb 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/Avatar-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/Avatar-test.tsx
@@ -17,41 +17,24 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import { screen } from '@testing-library/react';
 import * as React from 'react';
 import { mockAppState } from '../../../helpers/testMocks';
-import { GlobalSettingKeys } from '../../../types/settings';
-import { Avatar } from '../Avatar';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
+import Avatar from '../Avatar';
 
 const gravatarServerUrl = 'http://example.com/{EMAIL_MD5}.jpg?s={SIZE}';
 
-it('should be able to render with hash only', () => {
-  const avatar = shallow(
-    <Avatar
-      appState={mockAppState({
-        settings: {
-          [GlobalSettingKeys.EnableGravatar]: 'true',
-          [GlobalSettingKeys.GravatarServerUrl]: gravatarServerUrl,
-        },
-      })}
-      hash="7daf6c79d4802916d83f6266e24850af"
-      name="Foo"
-      size={30}
-    />
-  );
-  expect(avatar).toMatchSnapshot();
-});
-
-it('falls back to dummy avatar', () => {
-  const avatar = shallow(
-    <Avatar appState={mockAppState({ settings: {} })} name="Foo Bar" size={30} />
-  );
-  expect(avatar).toMatchSnapshot();
-});
-
-it('do not fail when name is missing', () => {
-  const avatar = shallow(
-    <Avatar appState={mockAppState({ settings: {} })} name={undefined} size={30} />
-  );
-  expect(avatar.getElement()).toBeNull();
+it('renders correctly', () => {
+  renderComponent(<Avatar name="John Doe" hash="johndoe" />, '', {
+    appState: mockAppState({
+      settings: {
+        'sonar.lf.enableGravatar': 'true',
+        'sonar.lf.gravatarServerUrl': gravatarServerUrl,
+      },
+    }),
+  });
+  const image = screen.getByAltText('John Doe');
+  expect(image).toBeInTheDocument();
+  expect(image).toHaveAttribute('src', 'http://example.com/johndoe.jpg?s=48');
 });
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/LegacyAvatar-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/LegacyAvatar-test.tsx
new file mode 100644
index 00000000000..46337a62294
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/LegacyAvatar-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 { shallow } from 'enzyme';
+import * as React from 'react';
+import { mockAppState } from '../../../helpers/testMocks';
+import { GlobalSettingKeys } from '../../../types/settings';
+import { LegacyAvatar } from '../LegacyAvatar';
+
+const gravatarServerUrl = 'http://example.com/{EMAIL_MD5}.jpg?s={SIZE}';
+
+it('should be able to render with hash only', () => {
+  const avatar = shallow(
+    <LegacyAvatar
+      appState={mockAppState({
+        settings: {
+          [GlobalSettingKeys.EnableGravatar]: 'true',
+          [GlobalSettingKeys.GravatarServerUrl]: gravatarServerUrl,
+        },
+      })}
+      hash="7daf6c79d4802916d83f6266e24850af"
+      name="Foo"
+      size={30}
+    />
+  );
+  expect(avatar).toMatchSnapshot();
+});
+
+it('falls back to dummy avatar', () => {
+  const avatar = shallow(
+    <LegacyAvatar appState={mockAppState({ settings: {} })} name="Foo Bar" size={30} />
+  );
+  expect(avatar).toMatchSnapshot();
+});
+
+it('do not fail when name is missing', () => {
+  const avatar = shallow(
+    <LegacyAvatar appState={mockAppState({ settings: {} })} name={undefined} size={30} />
+  );
+  expect(avatar.getElement()).toBeNull();
+});
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Avatar-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/LegacyAvatar-test.tsx.snap
similarity index 100%
rename from server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Avatar-test.tsx.snap
rename to server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/LegacyAvatar-test.tsx.snap
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index c63734107ca..f0d3add55d7 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -883,7 +883,7 @@ issues.on_file_x=Issues on file {0}
 issue.add_tags=Add Tags
 issue.remove_tags=Remove Tags
 issue.no_tag=No tags
-issue.create_tag_x=Create Tag '{0}'
+issue.create_tag=Create Tag
 issue.assign.assigned_to_x_click_to_change=Assigned to {0}, click to change
 issue.assign.unassigned_click_to_assign=Unassigned, click to assign issue
 issue.assign.formlink=Assign
@@ -1097,6 +1097,9 @@ issue_bulk_change.comment.help=This comment will be applied only to issues that
 issue_bulk_change.max_issues_reached=There are more issues available than can be treated by a single bulk action. Your changes will only be applied to the first {max} issues.
 issue_bulk_change.x_issues={0} issues
 issue_bulk_change.no_match=There is no issue matching your filter selection
+issue_bulk_change.assignee.change=Assign the selected issues to a user
+issue_bulk_change.select_tags=Select tags
+issue_bulk_change.selected_tags=Selected tags
 
 #------------------------------------------------------------------------------
 #
-- 
2.39.5