]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-16084 Migrate SelectLegacy in background tasks
authorJeremy Davis <jeremy.davis@sonarsource.com>
Tue, 29 Mar 2022 14:41:28 +0000 (16:41 +0200)
committersonartech <sonartech@sonarsource.com>
Wed, 30 Mar 2022 20:03:09 +0000 (20:03 +0000)
server/sonar-web/src/main/js/apps/background-tasks/components/Search.tsx
server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx
server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx
server/sonar-web/src/main/js/apps/background-tasks/components/WorkersForm.tsx
server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/StatusFilter-test.tsx [new file with mode: 0644]
server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/TypesFilter-test.tsx [new file with mode: 0644]
server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/WorkersForm-test.tsx
server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/StatusFilter-test.tsx.snap [new file with mode: 0644]
server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/TypesFilter-test.tsx.snap [new file with mode: 0644]
server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/WorkersForm-test.tsx.snap

index cefe1faf87293455d8d6a0ed3d81d496010e2a14..198317542dcd287137e15ab21609cf108f62dffc 100644 (file)
@@ -102,12 +102,16 @@ export default class Search extends React.PureComponent<Props> {
       <section className="big-spacer-top big-spacer-bottom">
         <ul className="bt-search-form">
           <li>
-            <h6 className="bt-search-form-label">{translate('status')}</h6>
+            <h6 id="background-task-status-filter-label" className="bt-search-form-label">
+              {translate('status')}
+            </h6>
             <StatusFilter onChange={this.handleStatusChange} value={status} />
           </li>
           {types.length > 1 && (
             <li>
-              <h6 className="bt-search-form-label">{translate('type')}</h6>
+              <h6 id="background-task-type-filter-label" className="bt-search-form-label">
+                {translate('type')}
+              </h6>
               <TypesFilter onChange={this.handleTypeChange} types={types} value={taskType} />
             </li>
           )}
index f902b9d84058ec737449b2d3f7ad27546c802451..4e80efeca5738a81be5badd94d62ecee209ffb11 100644 (file)
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
+import Select, { BasicSelectOption } from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 import { TaskStatuses } from '../../../types/tasks';
 import { STATUSES } from '../constants';
@@ -29,12 +29,12 @@ interface Props {
 }
 
 export default class StatusFilter extends React.PureComponent<Props> {
-  handleChange = ({ value }: { value: string }) => {
+  handleChange = ({ value }: BasicSelectOption) => {
     this.props.onChange(value);
   };
 
   render() {
-    const options = [
+    const options: BasicSelectOption[] = [
       { value: STATUSES.ALL, label: translate('background_task.status.ALL') },
       {
         value: STATUSES.ALL_EXCEPT_PENDING,
@@ -48,13 +48,13 @@ export default class StatusFilter extends React.PureComponent<Props> {
     ];
 
     return (
-      <SelectLegacy
+      <Select
+        aria-labelledby="background-task-status-filter-label"
         className="input-medium"
-        clearable={false}
         onChange={this.handleChange}
         options={options}
         searchable={false}
-        value={this.props.value}
+        value={options.find(o => o.value === this.props.value)}
       />
     );
   }
index 6e13aa839aa8755b4d5fac51b80c1a592cc0eaa4..bb7dd9de5f4daeddb15d9d7fbefd727f082c290c 100644 (file)
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
+import Select, { BasicSelectOption } from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 import { ALL_TYPES } from '../constants';
 
@@ -29,7 +29,7 @@ interface Props {
 }
 
 export default class TypesFilter extends React.PureComponent<Props> {
-  handleChange = ({ value }: { value: string }) => {
+  handleChange = ({ value }: BasicSelectOption) => {
     this.props.onChange(value);
   };
 
@@ -42,19 +42,20 @@ export default class TypesFilter extends React.PureComponent<Props> {
       };
     });
 
-    const allOptions = [
+    const allOptions: BasicSelectOption[] = [
       { value: ALL_TYPES, label: translate('background_task.type.ALL') },
       ...options
     ];
 
     return (
-      <SelectLegacy
+      <Select
+        aria-labelledby="background-task-type-filter-label"
         className="input-large"
         clearable={false}
         onChange={this.handleChange}
         options={allOptions}
         searchable={false}
-        value={value}
+        value={allOptions.find(o => o.value === value)}
       />
     );
   }
index 17ef30a6203cf3f384d3edc612a6cbf1b096ae96..9ed563ce94676de6a5f337651c86302866b14572 100644 (file)
@@ -21,7 +21,7 @@ import * as React from 'react';
 import { setWorkerCount } from '../../../api/ce';
 import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
 import Modal from '../../../components/controls/Modal';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
+import Select from '../../../components/controls/Select';
 import { Alert } from '../../../components/ui/Alert';
 import { translate } from '../../../helpers/l10n';
 
@@ -92,17 +92,19 @@ export default class WorkersForm extends React.PureComponent<Props, State> {
         contentLabel={translate('background_tasks.change_number_of_workers')}
         onRequestClose={this.handleClose}>
         <header className="modal-head">
-          <h2>{translate('background_tasks.change_number_of_workers')}</h2>
+          <h2 id="background-task-workers-label">
+            {translate('background_tasks.change_number_of_workers')}
+          </h2>
         </header>
         <form onSubmit={this.handleSubmit}>
           <div className="modal-body">
-            <SelectLegacy
+            <Select
+              aria-labelledby="background-task-workers-label"
               className="input-tiny spacer-top"
-              clearable={false}
+              isSearchable={false}
               onChange={this.handleWorkerCountChange}
               options={options}
-              searchable={false}
-              value={this.state.newWorkerCount}
+              value={options.find(o => o.value === this.state.newWorkerCount)}
             />
             <Alert className="big-spacer-top" variant="info">
               {translate('background_tasks.change_number_of_workers.hint')}
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/StatusFilter-test.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/StatusFilter-test.tsx
new file mode 100644 (file)
index 0000000..f38f267
--- /dev/null
@@ -0,0 +1,41 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 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 StatusFilter from '../StatusFilter';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot('default');
+});
+
+it('should handle change', () => {
+  const onChange = jest.fn();
+  const wrapper = shallowRender({ onChange });
+
+  const newValue = 'status1';
+
+  wrapper.instance().handleChange({ value: newValue, label: 'Status 1' });
+
+  expect(onChange).toBeCalledWith(newValue);
+});
+
+function shallowRender(overrides: Partial<StatusFilter['props']> = {}) {
+  return shallow<StatusFilter>(<StatusFilter onChange={jest.fn()} {...overrides} />);
+}
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/TypesFilter-test.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/TypesFilter-test.tsx
new file mode 100644 (file)
index 0000000..66dc3bb
--- /dev/null
@@ -0,0 +1,43 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 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 TypesFilter from '../TypesFilter';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot('default');
+});
+
+it('should handle change', () => {
+  const onChange = jest.fn();
+  const wrapper = shallowRender({ onChange });
+
+  const newValue = 't1';
+
+  wrapper.instance().handleChange({ value: newValue, label: 'Type 1' });
+
+  expect(onChange).toBeCalledWith(newValue);
+});
+
+function shallowRender(overrides: Partial<TypesFilter['props']> = {}) {
+  return shallow<TypesFilter>(
+    <TypesFilter onChange={jest.fn()} types={['t1', 't2']} value="t2" {...overrides} />
+  );
+}
index 232daa34045f6559a7ec174415293ed5dba6da86..7505563e52cd0169080dbc322530ed20b5969710 100644 (file)
@@ -24,7 +24,7 @@ jest.mock('../../../../api/ce', () => ({
 
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import SelectLegacy from '../../../../components/controls/SelectLegacy';
+import Select from '../../../../components/controls/Select';
 import { submit } from '../../../../helpers/testUtils';
 import WorkersForm from '../WorkersForm';
 
@@ -32,7 +32,7 @@ it('changes select', () => {
   const wrapper = shallow(<WorkersForm onClose={jest.fn()} workerCount={1} />);
   expect(wrapper).toMatchSnapshot();
 
-  wrapper.find(SelectLegacy).prop<Function>('onChange')({ value: 7 });
+  wrapper.find(Select).prop<Function>('onChange')({ value: 7 });
   wrapper.update();
   expect(wrapper).toMatchSnapshot();
 });
@@ -41,7 +41,7 @@ it('returns new worker count', async () => {
   const onClose = jest.fn();
   const wrapper = shallow(<WorkersForm onClose={onClose} workerCount={1} />);
   (wrapper.instance() as WorkersForm).mounted = true;
-  wrapper.find(SelectLegacy).prop<Function>('onChange')({ value: 7 });
+  wrapper.find(Select).prop<Function>('onChange')({ value: 7 });
 
   wrapper.update();
   submit(wrapper.find('form'));
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/StatusFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/StatusFilter-test.tsx.snap
new file mode 100644 (file)
index 0000000..9610a43
--- /dev/null
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly: default 1`] = `
+<Select
+  aria-labelledby="background-task-status-filter-label"
+  className="input-medium"
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "label": "background_task.status.ALL",
+        "value": "__ALL__",
+      },
+      Object {
+        "label": "background_task.status.ALL_EXCEPT_PENDING",
+        "value": "__ALL_EXCEPT_PENDING__",
+      },
+      Object {
+        "label": "background_task.status.PENDING",
+        "value": "PENDING",
+      },
+      Object {
+        "label": "background_task.status.IN_PROGRESS",
+        "value": "IN_PROGRESS",
+      },
+      Object {
+        "label": "background_task.status.SUCCESS",
+        "value": "SUCCESS",
+      },
+      Object {
+        "label": "background_task.status.FAILED",
+        "value": "FAILED",
+      },
+      Object {
+        "label": "background_task.status.CANCELED",
+        "value": "CANCELED",
+      },
+    ]
+  }
+  searchable={false}
+/>
+`;
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/TypesFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/TypesFilter-test.tsx.snap
new file mode 100644 (file)
index 0000000..67de93d
--- /dev/null
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly: default 1`] = `
+<Select
+  aria-labelledby="background-task-type-filter-label"
+  className="input-large"
+  clearable={false}
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "label": "background_task.type.ALL",
+        "value": "ALL_TYPES",
+      },
+      Object {
+        "label": "background_task.type.t1",
+        "value": "t1",
+      },
+      Object {
+        "label": "background_task.type.t2",
+        "value": "t2",
+      },
+    ]
+  }
+  searchable={false}
+  value={
+    Object {
+      "label": "background_task.type.t2",
+      "value": "t2",
+    }
+  }
+/>
+`;
index da66d6be96bb4aee6f693e2f198be79275a8c30c..077ddd74661c6eec68407d58e326375b14da3c1b 100644 (file)
@@ -8,7 +8,9 @@ exports[`changes select 1`] = `
   <header
     className="modal-head"
   >
-    <h2>
+    <h2
+      id="background-task-workers-label"
+    >
       background_tasks.change_number_of_workers
     </h2>
   </header>
@@ -18,9 +20,10 @@ exports[`changes select 1`] = `
     <div
       className="modal-body"
     >
-      <SelectLegacy
+      <Select
+        aria-labelledby="background-task-workers-label"
         className="input-tiny spacer-top"
-        clearable={false}
+        isSearchable={false}
         onChange={[Function]}
         options={
           Array [
@@ -66,8 +69,12 @@ exports[`changes select 1`] = `
             },
           ]
         }
-        searchable={false}
-        value={1}
+        value={
+          Object {
+            "label": "1",
+            "value": 1,
+          }
+        }
       />
       <Alert
         className="big-spacer-top"
@@ -104,7 +111,9 @@ exports[`changes select 2`] = `
   <header
     className="modal-head"
   >
-    <h2>
+    <h2
+      id="background-task-workers-label"
+    >
       background_tasks.change_number_of_workers
     </h2>
   </header>
@@ -114,9 +123,10 @@ exports[`changes select 2`] = `
     <div
       className="modal-body"
     >
-      <SelectLegacy
+      <Select
+        aria-labelledby="background-task-workers-label"
         className="input-tiny spacer-top"
-        clearable={false}
+        isSearchable={false}
         onChange={[Function]}
         options={
           Array [
@@ -162,8 +172,12 @@ exports[`changes select 2`] = `
             },
           ]
         }
-        searchable={false}
-        value={7}
+        value={
+          Object {
+            "label": "7",
+            "value": 7,
+          }
+        }
       />
       <Alert
         className="big-spacer-top"