[NO-JIRA] Fix react-select typings

16 files changed, 31 insertions, 45 deletions

diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx
index 4e80efeca57..6e248342f54 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx
@@ -53,8 +53,8 @@ export default class StatusFilter extends React.PureComponent<Props> {
         className="input-medium"
         onChange={this.handleChange}
         options={options}
-        searchable={false}
         value={options.find(o => o.value === this.props.value)}
+        isSearchable={false}
       />
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx
index bb7dd9de5f4..b84b2150539 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx
@@ -51,10 +51,10 @@ export default class TypesFilter extends React.PureComponent<Props> {
       <Select
         aria-labelledby="background-task-type-filter-label"
         className="input-large"
-        clearable={false}
+        isClearable={false}
         onChange={this.handleChange}
         options={allOptions}
-        searchable={false}
+        isSearchable={false}
         value={allOptions.find(o => o.value === value)}
       />
     );
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
index 697183bbaa5..921ad40aae3 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
@@ -282,7 +282,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
           aria-labelledby="coding-rules-custom-rule-status"
           onChange={this.handleStatusChange}
           options={statusesOptions}
-          searchable={false}
+          isSearchable={false}
           value={statusesOptions.find(s => s.value === this.state.status)}
         />
       </div>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
index 1af1f3d81d7..d3d7ca60de7 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
@@ -143,6 +143,7 @@ exports[`should handle re-activation 1`] = `
             aria-labelledby="coding-rules-custom-rule-status"
             isClearable={false}
             isDisabled={false}
+            isSearchable={false}
             onChange={[Function]}
             options={
               Array [
@@ -160,7 +161,6 @@ exports[`should handle re-activation 1`] = `
                 },
               ]
             }
-            searchable={false}
             value={
               Object {
                 "label": "rules.status.READY",
@@ -398,6 +398,7 @@ exports[`should render correctly: default 1`] = `
             aria-labelledby="coding-rules-custom-rule-status"
             isClearable={false}
             isDisabled={false}
+            isSearchable={false}
             onChange={[Function]}
             options={
               Array [
@@ -415,7 +416,6 @@ exports[`should render correctly: default 1`] = `
                 },
               ]
             }
-            searchable={false}
             value={
               Object {
                 "label": "rules.status.READY",
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 c215877eb7c..8c0d2a31e8a 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
@@ -94,7 +94,7 @@ export default class MeasureViewSelect extends React.PureComponent<Props> {
     return (
       <Select
         aria-labelledby="measures-view-selection-label"
-        autoBlur={true}
+        blurInputOnSelect={true}
         className={className}
         onChange={this.handleChange}
         components={{
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 f72fdab814b..ca6e1b17787 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
@@ -3,7 +3,7 @@
 exports[`should render correctly: has no list 1`] = `
 <Select
   aria-labelledby="measures-view-selection-label"
-  autoBlur={true}
+  blurInputOnSelect={true}
   components={
     Object {
       "Option": [Function],
@@ -32,7 +32,7 @@ exports[`should render correctly: has no list 1`] = `
 exports[`should render correctly: has no tree 1`] = `
 <Select
   aria-labelledby="measures-view-selection-label"
-  autoBlur={true}
+  blurInputOnSelect={true}
   components={
     Object {
       "Option": [Function],
@@ -63,7 +63,7 @@ exports[`should render correctly: has no tree 1`] = `
 exports[`should render correctly: has no treemap 1`] = `
 <Select
   aria-labelledby="measures-view-selection-label"
-  autoBlur={true}
+  blurInputOnSelect={true}
   components={
     Object {
       "Option": [Function],
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.tsx
index 57b70d18ebe..2ac68912d7c 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.tsx
@@ -142,16 +142,14 @@ export default class ProjectActivityGraphs extends React.PureComponent<Props, St
       .map(graph => graph[0].type);
   };
 
-  addCustomMetric = (metric: string) => {
-    const customMetrics = [...this.props.query.customMetrics, metric];
-    saveActivityGraph(PROJECT_ACTIVITY_GRAPH, this.props.project, GraphType.custom, customMetrics);
-    this.props.updateQuery({ customMetrics });
-  };
-
-  removeCustomMetric = (removedMetric: string) => {
-    const customMetrics = this.props.query.customMetrics.filter(metric => metric !== removedMetric);
-    saveActivityGraph(PROJECT_ACTIVITY_GRAPH, this.props.project, GraphType.custom, customMetrics);
-    this.props.updateQuery({ customMetrics });
+  updateSelectedMetrics = (selectedMetrics: string[]) => {
+    saveActivityGraph(
+      PROJECT_ACTIVITY_GRAPH,
+      this.props.project,
+      GraphType.custom,
+      selectedMetrics
+    );
+    this.props.updateQuery({ customMetrics: selectedMetrics });
   };
 
   updateGraph = (graph: GraphType) => {
@@ -195,12 +193,10 @@ export default class ProjectActivityGraphs extends React.PureComponent<Props, St
     return (
       <div className="project-activity-layout-page-main-inner boxed-group boxed-group-inner">
         <GraphsHeader
-          addCustomMetric={this.addCustomMetric}
           className="big-spacer-bottom"
           graph={query.graph}
           metrics={metrics}
           metricsTypeFilter={this.getMetricsTypeFilter()}
-          removeCustomMetric={this.removeCustomMetric}
           selectedMetrics={this.props.query.customMetrics}
           updateGraph={this.updateGraph}
         />
@@ -213,7 +209,6 @@ export default class ProjectActivityGraphs extends React.PureComponent<Props, St
           leakPeriodDate={leakPeriodDate}
           loading={loading}
           measuresHistory={this.props.measuresHistory}
-          removeCustomMetric={this.removeCustomMetric}
           selectedDate={this.props.query.selectedDate}
           series={series}
           updateGraphZoom={this.updateGraphZoom}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityGraphs-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityGraphs-test.tsx.snap
index b817fd80c5e..cbc6c857b88 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityGraphs-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityGraphs-test.tsx.snap
@@ -5,7 +5,6 @@ exports[`should render correctly the graph and legends 1`] = `
   className="project-activity-layout-page-main-inner boxed-group boxed-group-inner"
 >
   <GraphsHeader
-    addCustomMetric={[Function]}
     className="big-spacer-bottom"
     graph="issues"
     metrics={
@@ -18,7 +17,6 @@ exports[`should render correctly the graph and legends 1`] = `
         },
       ]
     }
-    removeCustomMetric={[Function]}
     selectedMetrics={Array []}
     updateGraph={[Function]}
   />
@@ -108,7 +106,6 @@ exports[`should render correctly the graph and legends 1`] = `
         },
       ]
     }
-    removeCustomMetric={[Function]}
     series={
       Array [
         Object {
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx
index 9cf2517a172..7a34d01e6d3 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx
@@ -112,8 +112,7 @@ export default function BaselineSettingReferenceBranch(props: BaselineSettingRef
                 <strong>{translate('baseline.reference_branch.choose')}</strong>
                 <MandatoryFieldMarker />
               </label>
-              <Select<BranchOption>
-                autofocus={false}
+              <Select
                 className="little-spacer-top spacer-bottom"
                 options={branchList}
                 onChange={(option: BranchOption) => props.onChangeReferenceBranch(option.value)}
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisListRenderer.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisListRenderer.tsx
index b9031a25063..f33c1ddb72a 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisListRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisListRenderer.tsx
@@ -19,8 +19,8 @@
  */
 import classNames from 'classnames';
 import * as React from 'react';
-import Select from '../../../components/controls/Select';
 import Radio from '../../../components/controls/Radio';
+import Select from '../../../components/controls/Select';
 import Tooltip from '../../../components/controls/Tooltip';
 import DateFormatter from '../../../components/intl/DateFormatter';
 import TimeFormatter from '../../../components/intl/TimeFormatter';
@@ -113,7 +113,7 @@ export default function BranchAnalysisListRenderer(props: BranchAnalysisListRend
           {translate('baseline.analysis_from')}
         </label>
         <Select
-          autoBlur={true}
+          blurInputOnSelect={true}
           inputId="branch-analysis-from-input"
           className="input-medium spacer-left"
           onChange={props.handleRangeChange}
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap
index d4f3b6d5534..a481b29936d 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap
@@ -109,7 +109,6 @@ exports[`should render correctly: Branch level - no other branches 1`] = `
       <MandatoryFieldMarker />
     </label>
     <Select
-      autofocus={false}
       className="little-spacer-top spacer-bottom"
       components={
         Object {
@@ -163,7 +162,6 @@ exports[`should render correctly: Branch level 1`] = `
       <MandatoryFieldMarker />
     </label>
     <Select
-      autofocus={false}
       className="little-spacer-top spacer-bottom"
       components={
         Object {
@@ -227,7 +225,6 @@ exports[`should render correctly: Project level 1`] = `
       <MandatoryFieldMarker />
     </label>
     <Select
-      autofocus={false}
       className="little-spacer-top spacer-bottom"
       components={
         Object {
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchAnalysisListRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchAnalysisListRenderer-test.tsx.snap
index fff6d543a90..3085961afa5 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchAnalysisListRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchAnalysisListRenderer-test.tsx.snap
@@ -12,7 +12,7 @@ exports[`should render correctly: Analyses 1`] = `
       baseline.analysis_from
     </label>
     <Select
-      autoBlur={true}
+      blurInputOnSelect={true}
       className="input-medium spacer-left"
       inputId="branch-analysis-from-input"
       isSearchable={false}
@@ -320,7 +320,7 @@ exports[`should render correctly: empty 1`] = `
       baseline.analysis_from
     </label>
     <Select
-      autoBlur={true}
+      blurInputOnSelect={true}
       className="input-medium spacer-left"
       inputId="branch-analysis-from-input"
       isSearchable={false}
@@ -376,7 +376,7 @@ exports[`should render correctly: loading 1`] = `
       baseline.analysis_from
     </label>
     <Select
-      autoBlur={true}
+      blurInputOnSelect={true}
       className="input-medium spacer-left"
       inputId="branch-analysis-from-input"
       isSearchable={false}
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx
index cfe93e04d91..cc9baa67013 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx
@@ -46,7 +46,7 @@ export default class SearchableFilterFooter extends React.PureComponent<Props> {
           isLoading={this.props.isLoading}
           onChange={this.handleOptionChange}
           onInputChange={this.props.onInputChange}
-          onOpen={this.props.onOpen}
+          onMenuOpen={this.props.onOpen}
           options={this.props.options}
           placeholder={translate('search_verb')}
         />
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
index 123ae2ec623..9a51ec49016 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
@@ -153,7 +153,7 @@ export class Search extends React.PureComponent<Props, State> {
       <td className="thin nowrap text-middle">
         <Select
           className="input-medium it__project-qualifier-select"
-          disabled={!this.props.ready}
+          isDisabled={!this.props.ready}
           name="projects-qualifier"
           onChange={this.handleQualifierChange}
           isSearchable={false}
@@ -162,7 +162,6 @@ export class Search extends React.PureComponent<Props, State> {
             SingleValue: this.singleValueRenderer
           }}
           options={this.getQualifierOptions()}
-          searchable={false}
           value={options.find(option => option.value === this.props.qualifiers)}
         />
       </td>
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
index 1f5862a1285..830774bb1aa 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
@@ -59,7 +59,7 @@ exports[`render qualifiers filter 1`] = `
                 "SingleValue": [Function],
               }
             }
-            disabled={false}
+            isDisabled={false}
             isSearchable={false}
             name="projects-qualifier"
             onChange={[Function]}
@@ -79,7 +79,6 @@ exports[`render qualifiers filter 1`] = `
                 },
               ]
             }
-            searchable={false}
             value={
               Object {
                 "label": "qualifiers.TRK",
diff --git a/server/sonar-web/src/main/js/components/controls/Select.tsx b/server/sonar-web/src/main/js/components/controls/Select.tsx
index 0807f4f6dee..87cf5d50d15 100644
--- a/server/sonar-web/src/main/js/components/controls/Select.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Select.tsx
@@ -24,8 +24,8 @@ import * as React from 'react';
 import ReactSelect, {
   GroupTypeBase,
   IndicatorProps,
+  NamedProps,
   OptionTypeBase,
-  Props,
   StylesConfig
 } from 'react-select';
 import AsyncReactSelect, { AsyncProps } from 'react-select/async';
@@ -99,7 +99,7 @@ export default class Select<
   Option,
   IsMulti extends boolean = false,
   Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
-> extends React.Component<Props<Option, IsMulti, Group> & StyleExtensionProps> {
+> extends React.Component<NamedProps<Option, IsMulti, Group> & StyleExtensionProps> {
   render() {
     return (
       <ReactSelect
@@ -142,7 +142,7 @@ export function SearchSelect<
   Option,
   IsMulti extends boolean,
   Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
->(props: Props<Option, IsMulti, Group> & AsyncProps<Option, Group> & StyleExtensionProps) {
+>(props: NamedProps<Option, IsMulti, Group> & AsyncProps<Option, Group> & StyleExtensionProps) {
   return (
     <AsyncReactSelect
       {...omit(props, 'className', 'large')}
@@ -161,7 +161,7 @@ export function SearchSelect<
 }
 
 export function selectStyle<Option, IsMulti extends boolean, Group extends GroupTypeBase<Option>>(
-  props?: Props<Option, IsMulti, Group> & AsyncProps<Option, Group> & StyleExtensionProps
+  props?: NamedProps<Option, IsMulti, Group> & AsyncProps<Option, Group> & StyleExtensionProps
 ): StylesConfig<Option, IsMulti, Group> {
   return {
     container: () => ({