From ca083645842e1abb93826c40e3590ba7ab26e1a6 Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Date: Mon, 22 Jul 2024 17:46:37 +0200
Subject: [PATCH] SONAR-22574 Fix selects usage

---
 .../js/apps/issues/components/AssigneeSelect.tsx    | 13 ++++++-------
 .../apps/projects/components/PerspectiveSelect.tsx  |  5 ++++-
 .../projects/components/ProjectsSortingSelect.tsx   |  8 ++++----
 3 files changed, 14 insertions(+), 12 deletions(-)

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 664fb673a63..dc28ba2913f 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,7 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { SelectAsync } from '@sonarsource/echoes-react';
+
+import { SelectAsync, SelectOption } from '@sonarsource/echoes-react';
 import * as React from 'react';
 import { CurrentUserContext } from '../../../app/components/current-user/CurrentUserContext';
 import Avatar from '../../../components/ui/Avatar';
@@ -32,10 +33,8 @@ export const MIN_QUERY_LENGTH = 2;
 
 const UNASSIGNED: Option = { value: '', label: translate('unassigned') };
 
-interface Option {
+interface Option extends SelectOption {
   Icon?: React.JSX.Element;
-  label: string;
-  value: string;
 }
 
 export interface AssigneeSelectProps {
@@ -56,7 +55,7 @@ function userToOption(user: RestUser | UserActive) {
   };
 }
 
-export default function AssigneeSelect(props: AssigneeSelectProps) {
+export default function AssigneeSelect(props: Readonly<AssigneeSelectProps>) {
   const { className, issues, inputId, label, selectedAssigneeKey } = props;
 
   const { currentUser } = React.useContext(CurrentUserContext);
@@ -103,8 +102,8 @@ export default function AssigneeSelect(props: AssigneeSelectProps) {
   );
 }
 
-function AssigneeOption(props: Omit<Option, 'value'>) {
-  const { label, Icon } = props;
+function AssigneeOption(props: Readonly<Option>) {
+  const { Icon, label } = props;
 
   return (
     <div className="sw-flex sw-flex-nowrap sw-items-center sw-overflow-hidden">
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx b/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx
index 61685af0e78..83f88e689bc 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx
@@ -17,7 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { Select } from '@sonarsource/echoes-react';
+
+import { InputSize, Select } from '@sonarsource/echoes-react';
 import { StyledPageTitle } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
@@ -55,11 +56,13 @@ export default function PerspectiveSelect(props: Readonly<Props>) {
       <Select
         ariaLabelledBy="aria-projects-perspective"
         className="sw-mr-4 sw-body-sm"
+        hasDropdownAutoWidth
         isNotClearable
         onChange={handleChange}
         data={options}
         placeholder={translate('project_activity.filter_events')}
         value={view}
+        size={InputSize.Small}
       />
     </div>
   );
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
index cbf6a81d223..e861202b865 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
@@ -17,7 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { Select, Tooltip } from '@sonarsource/echoes-react';
+
+import { InputSize, Select, SelectOption, Tooltip } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
 import { InteractiveIcon, SortAscendIcon, SortDescendIcon, StyledPageTitle } from 'design-system';
 import { sortBy } from 'lodash';
@@ -32,11 +33,9 @@ interface Props {
   view: string;
 }
 
-export interface Option {
-  label: string;
+export interface Option extends SelectOption {
   optionClass?: string;
   short?: string;
-  value: string;
 }
 
 export default class ProjectsSortingSelect extends React.PureComponent<Props> {
@@ -90,6 +89,7 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> {
           placeholder={translate('project_activity.filter_events')}
           isNotClearable
           value={sortValue}
+          size={InputSize.Medium}
         />
         <Tooltip
           content={
-- 
2.39.5