SONAR-10229 Remove checkboxes in Issues Bulk Change modal (#21)

4 files changed, 18 insertions, 9 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
index e8f9b22fd0c..f664d3a7782 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
+++ b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
@@ -177,8 +177,14 @@ export default class BulkChangeModal extends React.PureComponent {
     this.setState({ [field]: event.target.value });
   };
 
-  handleSelectFieldChange = (field /*: string */) => ({ value } /*: { value: string } */) => {
-    this.setState({ [field]: value });
+  handleSelectFieldChange = (field /*: string */) => (
+    data /*: { label: string, value: string } */
+  ) => {
+    if (data) {
+      this.setState({ [field]: data.value });
+    } else {
+      this.setState({ [field]: null });
+    }
   };
 
   handleSubmit = (e /*: Event */) => {
@@ -236,7 +242,7 @@ export default class BulkChangeModal extends React.PureComponent {
   }
 
   renderCancelButton = () => (
-    <a id="bulk-change-cancel" href="#" onClick={this.handleCloseClick}>
+    <a href="#" id="bulk-change-cancel" onClick={this.handleCloseClick}>
       {translate('cancel')}
     </a>
   );
@@ -273,7 +279,6 @@ export default class BulkChangeModal extends React.PureComponent {
   ) => (
     <div className="modal-field" id={`issues-bulk-change-${field}`}>
       <label htmlFor={field}>{translate(label)}</label>
-      {this.renderCheckbox(field)}
       {input}
       {affected != null && this.renderAffected(affected)}
     </div>
@@ -299,6 +304,7 @@ export default class BulkChangeModal extends React.PureComponent {
 
     const input = (
       <SearchSelect
+        clearable={true}
         defaultOptions={this.getDefaultAssignee()}
         onSearch={this.handleAssigneeSearch}
         onSelect={this.handleAssigneeSelect}
@@ -330,7 +336,7 @@ export default class BulkChangeModal extends React.PureComponent {
 
     const input = (
       <Select
-        clearable={false}
+        clearable={true}
         id="type"
         onChange={this.handleSelectFieldChange('type')}
         optionRenderer={optionRenderer}
@@ -359,7 +365,7 @@ export default class BulkChangeModal extends React.PureComponent {
 
     const input = (
       <Select
-        clearable={false}
+        clearable={true}
         id="severity"
         onChange={this.handleSelectFieldChange('severity')}
         optionRenderer={option => <SeverityHelper severity={option.value} />}
@@ -384,6 +390,7 @@ export default class BulkChangeModal extends React.PureComponent {
     const input = (
       <SearchSelect
         canCreate={allowCreate}
+        clearable={true}
         defaultOptions={this.state.initialTags}
         id={field}
         minimumQueryLength={0}
diff --git a/server/sonar-web/src/main/js/components/controls/SearchSelect.tsx b/server/sonar-web/src/main/js/components/controls/SearchSelect.tsx
index 1712ac8c4f0..0e31f84bc57 100644
--- a/server/sonar-web/src/main/js/components/controls/SearchSelect.tsx
+++ b/server/sonar-web/src/main/js/components/controls/SearchSelect.tsx
@@ -30,6 +30,7 @@ interface Option {
 interface Props {
   autofocus?: boolean;
   canCreate?: boolean;
+  clearable?: boolean;
   defaultOptions?: Option[];
   minimumQueryLength?: number;
   multi?: boolean;
@@ -128,7 +129,7 @@ export default class SearchSelect extends React.PureComponent<Props, State> {
       <Component
         autofocus={this.autofocus}
         className="input-super-large"
-        clearable={false}
+        clearable={this.props.clearable}
         escapeClearsValue={false}
         filterOption={this.handleFilterOption}
         isLoading={this.state.loading}
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 04e49151b88..85fa556edc9 100644
--- a/server/sonar-web/src/main/js/components/controls/Select.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Select.tsx
@@ -54,7 +54,9 @@ export default function Select({ innerRef, ...props }: WithInnerRef & ReactSelec
 }
 
 export function Creatable(props: ReactCreatableSelectProps) {
-  return <ReactCreatable {...props} />;
+  // ReactSelect doesn't declare `clearRenderer` prop
+  const ReactCreatableAny = ReactCreatable as any;
+  return <ReactCreatableAny {...props} clearRenderer={renderInput} />;
 }
 
 // TODO figure out why `ref` prop is incompatible
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchSelect-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchSelect-test.tsx.snap
index 0e61c2bcc6e..de7d83d6b2a 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchSelect-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchSelect-test.tsx.snap
@@ -4,7 +4,6 @@ exports[`should render Select 1`] = `
 <Select
   autofocus={true}
   className="input-super-large"
-  clearable={false}
   escapeClearsValue={false}
   filterOption={[Function]}
   isLoading={false}