From 4f49fdb5b4596540bd15e4a3cebe533911e0e6db Mon Sep 17 00:00:00 2001
From: Grégoire Aubert <gregoire.aubert@sonarsource.com>
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 ++++++++--------------
 3 files changed, 72 insertions(+), 103 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

(limited to 'server/sonar-web/src/main/js/apps')

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 (
-    <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/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<Props> {
+  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 (
+      <div className="bt-search-form-field">
+        <Checkbox checked={checked} onCheck={this.handleChange}>
+          <span className="little-spacer-left">
+            {translate('yes')}
+          </span>
+        </Checkbox>
+      </div>
+    );
+  }
+}
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>
     );
   }
-- 
cgit v1.2.3