Create and use ClearButton component

8 files changed, 162 insertions, 75 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/DateInput.tsx b/server/sonar-web/src/main/js/components/controls/DateInput.tsx
index 93ad3ac3910..f7155206822 100644
--- a/server/sonar-web/src/main/js/components/controls/DateInput.tsx
+++ b/server/sonar-web/src/main/js/components/controls/DateInput.tsx
@@ -29,12 +29,10 @@ import * as subMonths from 'date-fns/sub_months';
 import OutsideClickHandler from './OutsideClickHandler';
 import Select from './Select';
 import { lazyLoad } from '../lazyLoad';
-import * as theme from '../../app/theme';
 import CalendarIcon from '../icons-components/CalendarIcon';
 import ChevronLeftIcon from '../icons-components/ChevronLeftIcon';
 import ChevronRightIcon from '../icons-components/ChevronRightcon';
-import ClearIcon from '../icons-components/ClearIcon';
-import { ButtonIcon } from '../ui/buttons';
+import { ButtonIcon, ClearButton } from '../ui/buttons';
 import { getShortMonthName, getWeekDayName, getShortWeekDayName } from '../../helpers/l10n';
 import './DayPicker.css';
 import './styles.css';
@@ -164,12 +162,11 @@ export default class DateInput extends React.PureComponent<Props, State> {
           />
           <CalendarIcon className="date-input-control-icon" fill="" />
           {this.props.value !== undefined && (
-            <ButtonIcon
+            <ClearButton
               className="button-tiny date-input-control-reset"
-              color={theme.gray60}
-              onClick={this.handleResetClick}>
-              <ClearIcon size={12} />
-            </ButtonIcon>
+              iconProps={{ size: 12 }}
+              onClick={this.handleResetClick}
+            />
           )}
           {this.state.open && (
             <div className="date-input-calendar">
diff --git a/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx b/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx
index f72d57e1360..037aabf5ff3 100644
--- a/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx
+++ b/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import * as classNames from 'classnames';
-import ClearIcon from '../icons-components/ClearIcon';
-import { ButtonIcon } from '../ui/buttons';
+import { ClearButton } from '../ui/buttons';
+import { cutLongWords } from '../../helpers/path';
 import './GlobalMessages.css';
 
 interface Message {
@@ -29,44 +29,49 @@ interface Message {
   message: string;
 }
 
-interface Props {
+export interface Props {
   closeGlobalMessage: (id: string) => void;
   messages: Message[];
 }
 
-export default class GlobalMessages extends React.PureComponent<Props> {
-  cutLongWords = (message: string) => {
-    return message
-      .split(' ')
-      .map(word => (word.length > 35 ? word.substr(0, 35) + '...' : word))
-      .join(' ');
+export default function GlobalMessages({ closeGlobalMessage, messages }: Props) {
+  if (messages.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="processes-container">
+      {messages.map(message => (
+        <GlobalMessage closeGlobalMessage={closeGlobalMessage} key={message.id} message={message} />
+      ))}
+    </div>
+  );
+}
+
+export class GlobalMessage extends React.PureComponent<{
+  closeGlobalMessage: (id: string) => void;
+  message: Message;
+}> {
+  handleClose = () => {
+    this.props.closeGlobalMessage(this.props.message.id);
   };
 
-  renderMessage = (message: Message) => {
-    const className = classNames('process-spinner', 'shown', {
-      'process-spinner-failed': message.level === 'ERROR',
-      'process-spinner-success': message.level === 'SUCCESS'
-    });
+  render() {
+    const { message } = this.props;
     return (
-      <div className={className} key={message.id}>
-        {this.cutLongWords(message.message)}
-        <ButtonIcon
+      <div
+        className={classNames('process-spinner', 'shown', {
+          'process-spinner-failed': message.level === 'ERROR',
+          'process-spinner-success': message.level === 'SUCCESS'
+        })}
+        key={message.id}>
+        {cutLongWords(message.message)}
+        <ClearButton
           className="button-small process-spinner-close"
           color="#fff"
-          onClick={() => this.props.closeGlobalMessage(message.id)}>
-          <ClearIcon />
-        </ButtonIcon>
+          onClick={this.handleClose}
+        />
       </div>
     );
-  };
-
-  render() {
-    const { messages } = this.props;
-
-    if (messages.length === 0) {
-      return null;
-    }
-
-    return <div className="processes-container">{messages.map(this.renderMessage)}</div>;
   }
 }
diff --git a/server/sonar-web/src/main/js/components/controls/SearchBox.tsx b/server/sonar-web/src/main/js/components/controls/SearchBox.tsx
index 2d2b5669917..0a6d8e62f09 100644
--- a/server/sonar-web/src/main/js/components/controls/SearchBox.tsx
+++ b/server/sonar-web/src/main/js/components/controls/SearchBox.tsx
@@ -20,11 +20,9 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { debounce, Cancelable } from 'lodash';
-import ClearIcon from '../icons-components/ClearIcon';
 import SearchIcon from '../icons-components/SearchIcon';
 import DeferredSpinner from '../common/DeferredSpinner';
-import { ButtonIcon } from '../ui/buttons';
-import * as theme from '../../app/theme';
+import { ClearButton } from '../ui/buttons';
 import { translateWithParameters, translate } from '../../helpers/l10n';
 import './SearchBox.css';
 
@@ -156,12 +154,11 @@ export default class SearchBox extends React.PureComponent<Props, State> {
         </DeferredSpinner>
 
         {value && (
-          <ButtonIcon
+          <ClearButton
             className="button-tiny search-box-clear"
-            color={theme.gray60}
-            onClick={this.handleResetClick}>
-            <ClearIcon size={12} />
-          </ButtonIcon>
+            iconProps={{ size: 12 }}
+            onClick={this.handleResetClick}
+          />
         )}
 
         {tooShort && (
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 28ce819edbf..05be7b0c5e3 100644
--- a/server/sonar-web/src/main/js/components/controls/Select.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Select.tsx
@@ -19,9 +19,7 @@
  */
 import * as React from 'react';
 import { ReactSelectProps, ReactCreatableSelectProps, ReactAsyncSelectProps } from 'react-select';
-import * as theme from '../../app/theme';
-import ClearIcon from '../icons-components/ClearIcon';
-import { ButtonIcon } from '../ui/buttons';
+import { ClearButton } from '../ui/buttons';
 import { lazyLoad } from '../lazyLoad';
 import './react-select.css';
 
@@ -31,11 +29,7 @@ const ReactCreatable = lazyLoad(() => ReactSelectLib.then(lib => ({ default: lib
 const ReactAsync = lazyLoad(() => ReactSelectLib.then(lib => ({ default: lib.Async })));
 
 function renderInput() {
-  return (
-    <ButtonIcon className="button-tiny spacer-left text-middle" color={theme.gray60}>
-      <ClearIcon size={12} />
-    </ButtonIcon>
-  );
+  return <ClearButton className="button-tiny spacer-left text-middle" iconProps={{ size: 12 }} />;
 }
 
 interface WithInnerRef {
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/GlobalMessages-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/GlobalMessages-test.tsx
new file mode 100644
index 00000000000..f4632492e35
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/GlobalMessages-test.tsx
@@ -0,0 +1,50 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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 * as React from 'react';
+import { shallow } from 'enzyme';
+import GlobalMessages, { Props } from '../GlobalMessages';
+
+it('should not render when no message', () => {
+  expect(shallowRender({ messages: [] }).type()).toBeNull();
+});
+
+it('should render correctly with a message', () => {
+  const wrapper = shallowRender();
+  expect(wrapper).toMatchSnapshot();
+  expect(
+    wrapper
+      .find('GlobalMessage')
+      .first()
+      .dive()
+  ).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<Props> = {}) {
+  return shallow(
+    <GlobalMessages
+      closeGlobalMessage={jest.fn()}
+      messages={[
+        { id: '1', level: 'ERROR', message: 'Test' },
+        { id: '2', level: 'ERROR', message: 'Test 2' }
+      ]}
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/DateInput-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/DateInput-test.tsx.snap
index f4dc4048d63..5b49a50d0f5 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/DateInput-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/DateInput-test.tsx.snap
@@ -43,15 +43,15 @@ exports[`should render 2`] = `
       className="date-input-control-icon"
       fill=""
     />
-    <ButtonIcon
+    <ClearButton
       className="button-tiny date-input-control-reset"
-      color="#999"
+      iconProps={
+        Object {
+          "size": 12,
+        }
+      }
       onClick={[Function]}
-    >
-      <ClearIcon
-        size={12}
-      />
-    </ButtonIcon>
+    />
   </span>
 </OutsideClickHandler>
 `;
@@ -76,15 +76,15 @@ exports[`should render 3`] = `
       className="date-input-control-icon"
       fill=""
     />
-    <ButtonIcon
+    <ClearButton
       className="button-tiny date-input-control-reset"
-      color="#999"
+      iconProps={
+        Object {
+          "size": 12,
+        }
+      }
       onClick={[Function]}
-    >
-      <ClearIcon
-        size={12}
-      />
-    </ButtonIcon>
+    />
     <div
       className="date-input-calendar"
     >
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/GlobalMessages-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/GlobalMessages-test.tsx.snap
new file mode 100644
index 00000000000..cf1235d7cd2
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/GlobalMessages-test.tsx.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly with a message 1`] = `
+<div
+  className="processes-container"
+>
+  <GlobalMessage
+    closeGlobalMessage={[MockFunction]}
+    key="1"
+    message={
+      Object {
+        "id": "1",
+        "level": "ERROR",
+        "message": "Test",
+      }
+    }
+  />
+  <GlobalMessage
+    closeGlobalMessage={[MockFunction]}
+    key="2"
+    message={
+      Object {
+        "id": "2",
+        "level": "ERROR",
+        "message": "Test 2",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`should render correctly with a message 2`] = `
+<div
+  className="process-spinner shown process-spinner-failed"
+  key="1"
+>
+  Test
+  <ClearButton
+    className="button-small process-spinner-close"
+    color="#fff"
+    onClick={[Function]}
+  />
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchBox-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchBox-test.tsx.snap
index e7183478c77..3a61b8d4358 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchBox-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchBox-test.tsx.snap
@@ -24,14 +24,14 @@ exports[`renders 1`] = `
       className="search-box-magnifier"
     />
   </DeferredSpinner>
-  <ButtonIcon
+  <ClearButton
     className="button-tiny search-box-clear"
-    color="#999"
+    iconProps={
+      Object {
+        "size": 12,
+      }
+    }
     onClick={[Function]}
-  >
-    <ClearIcon
-      size={12}
-    />
-  </ButtonIcon>
+  />
 </div>
 `;