From 4f49fdb5b4596540bd15e4a3cebe533911e0e6db Mon Sep 17 00:00:00 2001 From: Grégoire Aubert Date: Thu, 24 Aug 2017 12:20:03 +0200 Subject: Migrate to ts and improve Checkbox --- .../background-tasks/components/CurrentsFilter.js | 58 ----------------- .../background-tasks/components/CurrentsFilter.tsx | 48 ++++++++++++++ .../src/main/js/apps/web-api/components/Search.js | 69 +++++++------------- .../src/main/js/components/controls/Checkbox.js | 55 ---------------- .../src/main/js/components/controls/Checkbox.tsx | 71 ++++++++++++++++++++ .../components/controls/__tests__/Checkbox-test.js | 66 ------------------- .../controls/__tests__/Checkbox-test.tsx | 76 ++++++++++++++++++++++ server/sonar-web/src/main/less/init/icons.less | 2 +- server/sonar-web/src/main/less/init/links.less | 10 +++ 9 files changed, 230 insertions(+), 225 deletions(-) delete mode 100644 server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.js create mode 100644 server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.tsx delete mode 100644 server/sonar-web/src/main/js/components/controls/Checkbox.js create mode 100644 server/sonar-web/src/main/js/components/controls/Checkbox.tsx delete mode 100644 server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.js create mode 100644 server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx (limited to 'server/sonar-web/src') diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.js b/server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.js deleted file mode 100644 index dbc2767f132..00000000000 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.js +++ /dev/null @@ -1,58 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2017 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. - */ -/* @flow */ -import React from 'react'; -import Checkbox from '../../../components/controls/Checkbox'; -import { CURRENTS } from '../constants'; - -const CurrentsFilter = ( - { value, onChange } /*: { value: ?string, onChange: string => void } */ -) => { - function handleChange(value) { - const newValue = value ? CURRENTS.ONLY_CURRENTS : CURRENTS.ALL; - onChange(newValue); - } - - function handleLabelClick(e) { - const newValue = value === CURRENTS.ALL ? CURRENTS.ONLY_CURRENTS : CURRENTS.ALL; - - e.preventDefault(); - onChange(newValue); - } - - const checked = value === CURRENTS.ONLY_CURRENTS; - - return ( -
- -   - -
- ); -}; - -export default CurrentsFilter; diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.tsx new file mode 100644 index 00000000000..5b4ccbb090b --- /dev/null +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.tsx @@ -0,0 +1,48 @@ +/* + * SonarQube + * Copyright (C) 2009-2017 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 Checkbox from '../../../components/controls/Checkbox'; +import { CURRENTS } from '../constants'; +import { translate } from '../../../helpers/l10n'; + +interface Props { + value?: string; + onChange: (value: string) => void; +} + +export default class CurrentsFilter extends React.PureComponent { + handleChange = (value: boolean) => { + const newValue = value ? CURRENTS.ONLY_CURRENTS : CURRENTS.ALL; + this.props.onChange(newValue); + }; + + render() { + const checked = this.props.value === CURRENTS.ONLY_CURRENTS; + return ( +
+ + + {translate('yes')} + + +
+ ); + } +} diff --git a/server/sonar-web/src/main/js/apps/web-api/components/Search.js b/server/sonar-web/src/main/js/apps/web-api/components/Search.js index 859ad7704e8..c08bbb8bb2e 100644 --- a/server/sonar-web/src/main/js/apps/web-api/components/Search.js +++ b/server/sonar-web/src/main/js/apps/web-api/components/Search.js @@ -21,7 +21,8 @@ import React from 'react'; import { debounce } from 'lodash'; import Checkbox from '../../../components/controls/Checkbox'; -import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin'; +import HelpIcon from '../../../components/icons-components/HelpIcon'; +import Tooltip from '../../../components/controls/Tooltip'; import { translate } from '../../../helpers/l10n'; /*:: @@ -78,53 +79,31 @@ export default class Search extends React.PureComponent { /> - -
- - - Show Internal API +
+ + + {translate('api_documentation.show_deprecated')} - -
- + + + + + + +
- -
- - - Show Deprecated API +
+ + + {translate('api_documentation.show_internal')} - -
- + + + + + + +
); } diff --git a/server/sonar-web/src/main/js/components/controls/Checkbox.js b/server/sonar-web/src/main/js/components/controls/Checkbox.js deleted file mode 100644 index b1acc9f577e..00000000000 --- a/server/sonar-web/src/main/js/components/controls/Checkbox.js +++ /dev/null @@ -1,55 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2017 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 React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -export default class Checkbox extends React.PureComponent { - static propTypes = { - id: PropTypes.string, - onCheck: PropTypes.func.isRequired, - checked: PropTypes.bool.isRequired, - thirdState: PropTypes.bool, - className: PropTypes.any - }; - - static defaultProps = { - thirdState: false - }; - - componentWillMount() { - this.handleClick = this.handleClick.bind(this); - } - - handleClick(e) { - e.preventDefault(); - e.target.blur(); - this.props.onCheck(!this.props.checked, this.props.id); - } - - render() { - const className = classNames('icon-checkbox', this.props.className, { - 'icon-checkbox-checked': this.props.checked, - 'icon-checkbox-single': this.props.thirdState - }); - - return ; - } -} diff --git a/server/sonar-web/src/main/js/components/controls/Checkbox.tsx b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx new file mode 100644 index 00000000000..1e5afe85195 --- /dev/null +++ b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx @@ -0,0 +1,71 @@ +/* + * SonarQube + * Copyright (C) 2009-2017 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 * as classNames from 'classnames'; + +interface Props { + checked: boolean; + children?: React.ReactElement; + className?: string; + id?: string; + onCheck: (checked: boolean, id?: string) => void; + thirdState?: boolean; +} + +export default class Checkbox extends React.PureComponent { + static defaultProps = { + thirdState: false + }; + + handleClick = (e: React.SyntheticEvent) => { + e.preventDefault(); + e.currentTarget.blur(); + this.props.onCheck(!this.props.checked, this.props.id); + }; + + render() { + const className = classNames('icon-checkbox', { + 'icon-checkbox-checked': this.props.checked, + 'icon-checkbox-single': this.props.thirdState + }); + + if (this.props.children) { + return ( + + + {this.props.children} + + ); + } + + return ( + + ); + } +} diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.js b/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.js deleted file mode 100644 index 8d299009cbd..00000000000 --- a/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.js +++ /dev/null @@ -1,66 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2017 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 React from 'react'; -import Checkbox from '../Checkbox'; -import { click } from '../../../helpers/testUtils'; - -it('should render unchecked', () => { - const checkbox = shallow( true} />); - expect(checkbox.is('.icon-checkbox-checked')).toBe(false); -}); - -it('should render checked', () => { - const checkbox = shallow( true} />); - expect(checkbox.is('.icon-checkbox-checked')).toBe(true); -}); - -it('should render unchecked third state', () => { - const checkbox = shallow( true} />); - expect(checkbox.is('.icon-checkbox-single')).toBe(true); - expect(checkbox.is('.icon-checkbox-checked')).toBe(false); -}); - -it('should render checked third state', () => { - const checkbox = shallow( true} />); - expect(checkbox.is('.icon-checkbox-single')).toBe(true); - expect(checkbox.is('.icon-checkbox-checked')).toBe(true); -}); - -it('should call onCheck', () => { - const onCheck = jest.fn(); - const checkbox = shallow(); - click(checkbox); - expect(onCheck).toBeCalledWith(true, undefined); -}); - -it('should call onCheck with id as second parameter', () => { - const onCheck = jest.fn(); - const checkbox = shallow(); - click(checkbox); - expect(onCheck).toBeCalledWith(true, 'foo'); -}); - -it('should apply custom class', () => { - const checkbox = shallow( - true} /> - ); - expect(checkbox.is('.customclass')).toBe(true); -}); diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx new file mode 100644 index 00000000000..b8680f25d09 --- /dev/null +++ b/server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx @@ -0,0 +1,76 @@ +/* + * SonarQube + * Copyright (C) 2009-2017 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 Checkbox from '../Checkbox'; +import { click } from '../../../helpers/testUtils'; + +it('should render unchecked', () => { + const checkbox = shallow( true} />); + expect(checkbox.is('.icon-checkbox-checked')).toBe(false); +}); + +it('should render checked', () => { + const checkbox = shallow( true} />); + expect(checkbox.is('.icon-checkbox-checked')).toBe(true); +}); + +it('should render unchecked third state', () => { + const checkbox = shallow( true} />); + expect(checkbox.is('.icon-checkbox-single')).toBe(true); + expect(checkbox.is('.icon-checkbox-checked')).toBe(false); +}); + +it('should render checked third state', () => { + const checkbox = shallow( true} />); + expect(checkbox.is('.icon-checkbox-single')).toBe(true); + expect(checkbox.is('.icon-checkbox-checked')).toBe(true); +}); + +it('should render children', () => { + const checkbox = shallow( + true}> + foo + + ); + expect(checkbox.hasClass('link-checkbox')).toBeTruthy(); + expect(checkbox.find('span')).toHaveLength(1); +}); + +it('should call onCheck', () => { + const onCheck = jest.fn(); + const checkbox = shallow(); + click(checkbox); + expect(onCheck).toBeCalledWith(true, undefined); +}); + +it('should call onCheck with id as second parameter', () => { + const onCheck = jest.fn(); + const checkbox = shallow(); + click(checkbox); + expect(onCheck).toBeCalledWith(true, 'foo'); +}); + +it('should apply custom class', () => { + const checkbox = shallow( + true} /> + ); + expect(checkbox.is('.customclass')).toBe(true); +}); diff --git a/server/sonar-web/src/main/less/init/icons.less b/server/sonar-web/src/main/less/init/icons.less index c4c5d43a356..58171db82c6 100644 --- a/server/sonar-web/src/main/less/init/icons.less +++ b/server/sonar-web/src/main/less/init/icons.less @@ -264,7 +264,7 @@ a[class*=" icon-"] { &:before { content: " "; - display: block; + display: inline-block; width: 10px; height: 10px; border: 1px solid @darkBlue; diff --git a/server/sonar-web/src/main/less/init/links.less b/server/sonar-web/src/main/less/init/links.less index be43662f4f7..42e595415c7 100644 --- a/server/sonar-web/src/main/less/init/links.less +++ b/server/sonar-web/src/main/less/init/links.less @@ -73,6 +73,16 @@ a { border-bottom: 1px solid @lightBlue; } +.link-checkbox { + color: inherit; + border-bottom: none; + &:hover, + &:active, + &:focus { + color: inherit; + } +} + a.active-link, .link-active { .link-no-underline; -- cgit v1.2.3