From 3e53583cc71533a1602f94ffe17feed2fcdeed44 Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Fri, 25 Mar 2022 17:43:34 +0100
Subject: [PATCH] SONAR-16086 migrate selectlegacy in component-measures

---
 .../components/MeasureContent.tsx             |  4 +-
 .../components/MeasureViewSelect.tsx          | 55 +++++++++++------
 .../__tests__/MeasureViewSelect-test.tsx      |  3 +-
 .../MeasureContent-test.tsx.snap              | 16 +++--
 .../MeasureViewSelect-test.tsx.snap           | 59 +++++++++++++------
 .../main/js/apps/component-measures/style.css | 13 ++--
 6 files changed, 98 insertions(+), 52 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.tsx
index 130abf96800..fad332407d8 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureContent.tsx
@@ -376,7 +376,9 @@ export default class MeasureContent extends React.PureComponent<Props, State> {
                   <div className="display-flex-center">
                     {!isFileComponent && metric && (
                       <>
-                        <div>{translate('component_measures.view_as')}</div>
+                        <div id="measures-view-selection-label">
+                          {translate('component_measures.view_as')}
+                        </div>
                         <MeasureViewSelect
                           className="measure-view-select spacer-left big-spacer-right"
                           handleViewChange={this.updateView}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureViewSelect.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureViewSelect.tsx
index c1b79eea750..c215877eb7c 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureViewSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureViewSelect.tsx
@@ -18,7 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
+import { components, OptionProps, SingleValueProps } from 'react-select';
+import Select from '../../../components/controls/Select';
 import ListIcon from '../../../components/icons/ListIcon';
 import TreeIcon from '../../../components/icons/TreeIcon';
 import TreemapIcon from '../../../components/icons/TreemapIcon';
@@ -34,10 +35,16 @@ interface Props {
   view: MeasurePageView;
 }
 
+interface ViewOption {
+  icon: JSX.Element;
+  label: string;
+  value: string;
+}
+
 export default class MeasureViewSelect extends React.PureComponent<Props> {
   getOptions = () => {
     const { metric } = this.props;
-    const options = [];
+    const options: ViewOption[] = [];
     if (hasTree(metric.key)) {
       options.push({
         icon: <TreeIcon />,
@@ -62,31 +69,41 @@ export default class MeasureViewSelect extends React.PureComponent<Props> {
     return options;
   };
 
-  handleChange = (option: { value: string }) => {
+  handleChange = (option: ViewOption) => {
     return this.props.handleViewChange(option.value as MeasurePageView);
   };
 
-  renderOption = (option: { icon: JSX.Element; label: string }) => {
-    return (
-      <>
-        {option.icon}
-        <span className="little-spacer-left">{option.label}</span>
-      </>
-    );
-  };
+  renderOption = (props: OptionProps<ViewOption, false>) => (
+    <components.Option {...props} className="display-flex-center">
+      {props.data.icon}
+      <span className="little-spacer-left">{props.data.label}</span>
+    </components.Option>
+  );
+
+  renderValue = (props: SingleValueProps<ViewOption>) => (
+    <components.SingleValue {...props} className="display-flex-center">
+      {props.data.icon}
+      <span className="little-spacer-left">{props.data.label}</span>
+    </components.SingleValue>
+  );
 
   render() {
+    const { className, view } = this.props;
+    const options = this.getOptions();
+
     return (
-      <SelectLegacy
+      <Select
+        aria-labelledby="measures-view-selection-label"
         autoBlur={true}
-        className={this.props.className}
-        clearable={false}
+        className={className}
         onChange={this.handleChange}
-        optionRenderer={this.renderOption}
-        options={this.getOptions()}
-        searchable={false}
-        value={this.props.view}
-        valueRenderer={this.renderOption}
+        components={{
+          Option: this.renderOption,
+          SingleValue: this.renderValue
+        }}
+        options={options}
+        isSearchable={false}
+        value={options.find(o => o.value === view)}
       />
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/MeasureViewSelect-test.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/MeasureViewSelect-test.tsx
index 557b05229d8..2bb5a708616 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/MeasureViewSelect-test.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/MeasureViewSelect-test.tsx
@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import ListIcon from '../../../../components/icons/ListIcon';
 import { mockMetric } from '../../../../helpers/testMocks';
 import { MetricKey } from '../../../../types/metrics';
 import MeasureViewSelect from '../MeasureViewSelect';
@@ -38,7 +39,7 @@ it('should render correctly', () => {
 it('should correctly trigger a selection change', () => {
   const handleViewChange = jest.fn();
   const wrapper = shallowRender({ handleViewChange });
-  wrapper.instance().handleChange({ value: 'list' });
+  wrapper.instance().handleChange({ icon: <ListIcon />, label: 'List View', value: 'list' });
   expect(handleViewChange).toBeCalledWith('list');
 });
 
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureContent-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureContent-test.tsx.snap
index 8446a01bac0..46fe354db7c 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureContent-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureContent-test.tsx.snap
@@ -162,7 +162,9 @@ exports[`should render correctly for a project 1`] = `
               className="display-flex-center"
             >
               <React.Fragment>
-                <div>
+                <div
+                  id="measures-view-selection-label"
+                >
                   component_measures.view_as
                 </div>
                 <MeasureViewSelect
@@ -371,7 +373,9 @@ exports[`should render correctly when asc prop is defined 1`] = `
               className="display-flex-center"
             >
               <React.Fragment>
-                <div>
+                <div
+                  id="measures-view-selection-label"
+                >
                   component_measures.view_as
                 </div>
                 <MeasureViewSelect
@@ -580,7 +584,9 @@ exports[`should render correctly when view prop is tree 1`] = `
               className="display-flex-center"
             >
               <React.Fragment>
-                <div>
+                <div
+                  id="measures-view-selection-label"
+                >
                   component_measures.view_as
                 </div>
                 <MeasureViewSelect
@@ -789,7 +795,9 @@ exports[`should test fetchMoreComponents to work correctly 1`] = `
               className="display-flex-center"
             >
               <React.Fragment>
-                <div>
+                <div
+                  id="measures-view-selection-label"
+                >
                   component_measures.view_as
                 </div>
                 <MeasureViewSelect
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureViewSelect-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureViewSelect-test.tsx.snap
index 60095af45a3..f72fdab814b 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureViewSelect-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureViewSelect-test.tsx.snap
@@ -1,11 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: has no list 1`] = `
-<SelectLegacy
+<Select
+  aria-labelledby="measures-view-selection-label"
   autoBlur={true}
-  clearable={false}
+  components={
+    Object {
+      "Option": [Function],
+      "SingleValue": [Function],
+    }
+  }
+  isSearchable={false}
   onChange={[Function]}
-  optionRenderer={[Function]}
   options={
     Array [
       Object {
@@ -20,18 +26,21 @@ exports[`should render correctly: has no list 1`] = `
       },
     ]
   }
-  searchable={false}
-  value="list"
-  valueRenderer={[Function]}
 />
 `;
 
 exports[`should render correctly: has no tree 1`] = `
-<SelectLegacy
+<Select
+  aria-labelledby="measures-view-selection-label"
   autoBlur={true}
-  clearable={false}
+  components={
+    Object {
+      "Option": [Function],
+      "SingleValue": [Function],
+    }
+  }
+  isSearchable={false}
   onChange={[Function]}
-  optionRenderer={[Function]}
   options={
     Array [
       Object {
@@ -41,18 +50,28 @@ exports[`should render correctly: has no tree 1`] = `
       },
     ]
   }
-  searchable={false}
-  value="list"
-  valueRenderer={[Function]}
+  value={
+    Object {
+      "icon": <ListIcon />,
+      "label": "component_measures.tab.list",
+      "value": "list",
+    }
+  }
 />
 `;
 
 exports[`should render correctly: has no treemap 1`] = `
-<SelectLegacy
+<Select
+  aria-labelledby="measures-view-selection-label"
   autoBlur={true}
-  clearable={false}
+  components={
+    Object {
+      "Option": [Function],
+      "SingleValue": [Function],
+    }
+  }
+  isSearchable={false}
   onChange={[Function]}
-  optionRenderer={[Function]}
   options={
     Array [
       Object {
@@ -72,8 +91,12 @@ exports[`should render correctly: has no treemap 1`] = `
       },
     ]
   }
-  searchable={false}
-  value="list"
-  valueRenderer={[Function]}
+  value={
+    Object {
+      "icon": <ListIcon />,
+      "label": "component_measures.tab.list",
+      "value": "list",
+    }
+  }
 />
 `;
diff --git a/server/sonar-web/src/main/js/apps/component-measures/style.css b/server/sonar-web/src/main/js/apps/component-measures/style.css
index c0915cedb8f..b4e0cdd5d32 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/style.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/style.css
@@ -134,20 +134,15 @@
   }
 }
 
-.measure-view-select {
-  width: 102px;
-}
-
-.measure-view-select .Select-menu-outer {
-  width: 100px;
-  border-top-right-radius: 4px;
-}
-
 .measure-content-header {
   display: flex;
   align-items: center;
 }
 
+.measure-content-header .measure-view-select {
+  width: 102px;
+}
+
 .measure-content-header-left {
   flex: 1;
   min-width: 0;
-- 
2.39.5