Migrate to ts and improve Checkbox

server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.js → server/sonar-web/src/main/js/apps/background-tasks/components/CurrentsFilter.tsx

@@ -17,42 +17,32 @@
  * 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 * as React from 'react';
 import Checkbox from '../../../components/controls/Checkbox';
 import { CURRENTS } from '../constants';
+import { translate } from '../../../helpers/l10n';
 
-const CurrentsFilter = (
-  { value, onChange } /*: { value: ?string, onChange: string => void } */
-) => {
-  function handleChange(value) {
-    const newValue = value ? CURRENTS.ONLY_CURRENTS : CURRENTS.ALL;
-    onChange(newValue);
-  }
+interface Props {
+  value?: string;
+  onChange: (value: string) => void;
+}
 
-  function handleLabelClick(e) {
-    const newValue = value === CURRENTS.ALL ? CURRENTS.ONLY_CURRENTS : CURRENTS.ALL;
+export default class CurrentsFilter extends React.PureComponent<Props> {
+  handleChange = (value: boolean) => {
+    const newValue = value ? CURRENTS.ONLY_CURRENTS : CURRENTS.ALL;
+    this.props.onChange(newValue);
+  };
 
-    e.preventDefault();
-    onChange(newValue);
+  render() {
+    const checked = this.props.value === CURRENTS.ONLY_CURRENTS;
+    return (
+      <div className="bt-search-form-field">
+        <Checkbox checked={checked} onCheck={this.handleChange}>
+          <span className="little-spacer-left">
+            {translate('yes')}
+          </span>
+        </Checkbox>
+      </div>
+    );
   }
-
-  const checked = value === CURRENTS.ONLY_CURRENTS;
-
-  return (
-    <div className="bt-search-form-field">
-      <Checkbox checked={checked} onCheck={handleChange} />
-      &nbsp;
-      <label
-        style={{ cursor: 'pointer' }}
-        role="checkbox"
-        tabIndex="0"
-        aria-checked={checked ? 'true' : 'false'}
-        onClick={handleLabelClick}>
-        Yes
-      </label>
-    </div>
-  );
-};
-
-export default CurrentsFilter;
+}

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 {
           />
         </div>
 
-        <TooltipsContainer>
-          <div className="big-spacer-top">
-            <Checkbox
-              checked={showInternal}
-              className="little-spacer-right"
-              onCheck={onToggleInternal}
-            />
-            <span
-              style={{ cursor: 'pointer' }}
-              title={translate('api_documentation.internal_tooltip')}
-              tabIndex="0"
-              role="checkbox"
-              aria-checked={showInternal ? 'true' : 'false'}
-              onClick={onToggleInternal}>
-              Show Internal API
+        <div className="big-spacer-top">
+          <Checkbox checked={showInternal} onCheck={onToggleInternal}>
+            <span className="little-spacer-left">
+              {translate('api_documentation.show_deprecated')}
             </span>
-            <i
-              className="icon-help spacer-left"
-              title={translate('api_documentation.internal_tooltip')}
-              data-toggle="tooltip"
-            />
-          </div>
-        </TooltipsContainer>
+          </Checkbox>
+          <Tooltip overlay={translate('api_documentation.internal_tooltip')} placement="right">
+            <span>
+              <HelpIcon className="spacer-left text-info" />
+            </span>
+          </Tooltip>
+        </div>
 
-        <TooltipsContainer>
-          <div className="spacer-top">
-            <Checkbox
-              checked={showDeprecated}
-              className="little-spacer-right"
-              onCheck={onToggleDeprecated}
-            />
-            <span
-              style={{ cursor: 'pointer' }}
-              title={translate('api_documentation.deprecation_tooltip')}
-              tabIndex="0"
-              role="checkbox"
-              aria-checked={showDeprecated ? 'true' : 'false'}
-              onClick={onToggleDeprecated}>
-              Show Deprecated API
+        <div className="spacer-top">
+          <Checkbox checked={showDeprecated} onCheck={onToggleDeprecated}>
+            <span className="little-spacer-left">
+              {translate('api_documentation.show_internal')}
             </span>
-            <i
-              className="icon-help spacer-left"
-              title={translate('api_documentation.deprecation_tooltip')}
-              data-toggle="tooltip"
-            />
-          </div>
-        </TooltipsContainer>
+          </Checkbox>
+          <Tooltip overlay={translate('api_documentation.deprecation_tooltip')} placement="right">
+            <span>
+              <HelpIcon className="spacer-left text-info" />
+            </span>
+          </Tooltip>
+        </div>
       </div>
     );
   }

server/sonar-web/src/main/js/components/controls/Checkbox.js → server/sonar-web/src/main/js/components/controls/Checkbox.tsx

@@ -17,39 +17,55 @@
  * 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';
+import * as React from 'react';
+import * as 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
-  };
+interface Props {
+  checked: boolean;
+  children?: React.ReactElement<any>;
+  className?: string;
+  id?: string;
+  onCheck: (checked: boolean, id?: string) => void;
+  thirdState?: boolean;
+}
 
+export default class Checkbox extends React.PureComponent<Props> {
   static defaultProps = {
     thirdState: false
   };
 
-  componentWillMount() {
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick(e) {
+  handleClick = (e: React.SyntheticEvent<HTMLElement>) => {
     e.preventDefault();
-    e.target.blur();
+    e.currentTarget.blur();
     this.props.onCheck(!this.props.checked, this.props.id);
-  }
+  };
 
   render() {
-    const className = classNames('icon-checkbox', this.props.className, {
+    const className = classNames('icon-checkbox', {
       'icon-checkbox-checked': this.props.checked,
       'icon-checkbox-single': this.props.thirdState
     });
 
-    return <a id={this.props.id} className={className} href="#" onClick={this.handleClick} />;
+    if (this.props.children) {
+      return (
+        <a
+          id={this.props.id}
+          className={classNames('link-checkbox', this.props.className)}
+          href="#"
+          onClick={this.handleClick}>
+          <i className={className} />
+          {this.props.children}
+        </a>
+      );
+    }
+
+    return (
+      <a
+        id={this.props.id}
+        className={classNames(className, this.props.className)}
+        href="#"
+        onClick={this.handleClick}
+      />
+    );
   }
 }

server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.js → server/sonar-web/src/main/js/components/controls/__tests__/Checkbox-test.tsx

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { shallow } from 'enzyme';
-import React from 'react';
+import * as React from 'react';
 import Checkbox from '../Checkbox';
 import { click } from '../../../helpers/testUtils';
 
@@ -44,6 +44,16 @@ it('should render checked  third state', () => {
   expect(checkbox.is('.icon-checkbox-checked')).toBe(true);
 });
 
+it('should render children', () => {
+  const checkbox = shallow(
+    <Checkbox checked={false} onCheck={() => true}>
+      <span>foo</span>
+    </Checkbox>
+  );
+  expect(checkbox.hasClass('link-checkbox')).toBeTruthy();
+  expect(checkbox.find('span')).toHaveLength(1);
+});
+
 it('should call onCheck', () => {
   const onCheck = jest.fn();
   const checkbox = shallow(<Checkbox checked={false} onCheck={onCheck} />);

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;

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;

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -205,6 +205,7 @@ violations=Violations
 visibility=Visibility
 with=With
 worst=Worst
+yes=Yes
 
 
 
@@ -2872,6 +2873,8 @@ widget.events.show_all=Show All
 api_documentation.deprecation_tooltip=If an API is deprecated in version X.Y, this API will be dropped in version (X+2).0. Example: an API deprecated in 4.1 is supported in 4.2, 4.3, 5.0, 5.1, 5.2, 5.3 and is dropped in version 6.0.
 api_documentation.internal_tooltip=Use at your own risk; internal services are subject to change or removal without notice.
 api_documentation.page=Web API
+api_documentation.show_deprecated=Show Deprecated API
+api_documentation.show_internal=Show Internal API
 
 #------------------------------------------------------------------------------
 #