Migrate to ts and improve Checkbox

2 files changed, 47 insertions, 78 deletions

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.tsx
index dbc2767f132..5b4ccbb090b 100644
--- 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.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;
+}
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 {
           />
         </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>
     );
   }