From 84e8de22330886ae02907ae86e250e486e3ddfd4 Mon Sep 17 00:00:00 2001 From: Grégoire Aubert Date: Mon, 6 May 2019 15:59:07 +0200 Subject: Create and use ClearButton component --- .../src/main/js/components/controls/DateInput.tsx | 13 ++--- .../main/js/components/controls/GlobalMessages.tsx | 65 ++++++++++++---------- .../src/main/js/components/controls/SearchBox.tsx | 13 ++--- .../src/main/js/components/controls/Select.tsx | 10 +--- .../controls/__tests__/GlobalMessages-test.tsx | 50 +++++++++++++++++ .../__snapshots__/DateInput-test.tsx.snap | 28 +++++----- .../__snapshots__/GlobalMessages-test.tsx.snap | 44 +++++++++++++++ .../__snapshots__/SearchBox-test.tsx.snap | 14 ++--- 8 files changed, 162 insertions(+), 75 deletions(-) create mode 100644 server/sonar-web/src/main/js/components/controls/__tests__/GlobalMessages-test.tsx create mode 100644 server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/GlobalMessages-test.tsx.snap (limited to 'server/sonar-web/src/main/js/components/controls') 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 { /> {this.props.value !== undefined && ( - - - + iconProps={{ size: 12 }} + onClick={this.handleResetClick} + /> )} {this.state.open && (
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 { - 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 ( +
+ {messages.map(message => ( + + ))} +
+ ); +} + +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 ( -
- {this.cutLongWords(message.message)} - + {cutLongWords(message.message)} + this.props.closeGlobalMessage(message.id)}> - - + onClick={this.handleClose} + />
); - }; - - render() { - const { messages } = this.props; - - if (messages.length === 0) { - return null; - } - - return
{messages.map(this.renderMessage)}
; } } 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 { {value && ( - - - + 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 ( - - - - ); + return ; } 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 = {}) { + return shallow( + + ); +} 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="" /> - - - + /> `; @@ -76,15 +76,15 @@ exports[`should render 3`] = ` className="date-input-control-icon" fill="" /> - - - + />
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`] = ` +
+ + +
+`; + +exports[`should render correctly with a message 2`] = ` +
+ Test + +
+`; 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" /> - - - + />
`; -- cgit v1.2.3