SONAR-13880 internationalize tooltips

3 files changed, 224 insertions, 0 deletions

diff --git a/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
new file mode 100644
index 00000000000..c2ede9b95f1
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/DocumentationTooltip.tsx
@@ -0,0 +1,72 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 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 HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
+import DetachIcon from 'sonar-ui-common/components/icons/DetachIcon';
+import { isWebUri } from 'valid-url';
+
+export interface DocumentationTooltipProps {
+  children?: React.ReactNode;
+  className?: string;
+  content?: React.ReactNode;
+  links?: Array<{ href: string; label: string }>;
+  title?: string;
+}
+
+export default function DocumentationTooltip(props: DocumentationTooltipProps) {
+  const { className, content, links, title } = props;
+
+  return (
+    <HelpTooltip
+      className={className}
+      overlay={
+        <div className="big-padded-top big-padded-bottom">
+          {title && (
+            <div className="spacer-bottom">
+              <strong>{title}</strong>
+            </div>
+          )}
+
+          {content && <p>{content}</p>}
+
+          {links && (
+            <>
+              <hr className="big-spacer-top big-spacer-bottom" />
+
+              {links.map(({ href, label }) => (
+                <div className="little-spacer-bottom" key={label}>
+                  <a
+                    className="display-inline-flex-center link-with-icon"
+                    href={href}
+                    rel="noopener noreferrer"
+                    target="_blank">
+                    {isWebUri(href) && <DetachIcon size={14} className="spacer-right" />}
+                    <span>{label}</span>
+                  </a>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+      }>
+      {props.children}
+    </HelpTooltip>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx
new file mode 100644
index 00000000000..fc7ae766eb8
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/__tests__/DocumentationTooltip-test.tsx
@@ -0,0 +1,40 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 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 DocumentationTooltip, { DocumentationTooltipProps } from '../DocumentationTooltip';
+
+it('renders correctly', () => {
+  expect(shallowRender()).toMatchSnapshot('basic');
+  expect(
+    shallowRender({
+      links: [
+        { href: 'http://link.tosome.place', label: 'external link' },
+        { href: '/documentation/guide', label: 'internal link' }
+      ]
+    })
+  ).toMatchSnapshot('with links');
+  expect(shallowRender({ title: undefined })).toMatchSnapshot('no title');
+  expect(shallowRender({ content: undefined })).toMatchSnapshot('no content');
+});
+
+function shallowRender(props: Partial<DocumentationTooltipProps> = {}) {
+  return shallow(<DocumentationTooltip content="content" title="title" {...props} />);
+}
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap
new file mode 100644
index 00000000000..423376fa2ce
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/DocumentationTooltip-test.tsx.snap
@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly: basic 1`] = `
+<HelpTooltip
+  overlay={
+    <div
+      className="big-padded-top big-padded-bottom"
+    >
+      <div
+        className="spacer-bottom"
+      >
+        <strong>
+          title
+        </strong>
+      </div>
+      <p>
+        content
+      </p>
+    </div>
+  }
+/>
+`;
+
+exports[`renders correctly: no content 1`] = `
+<HelpTooltip
+  overlay={
+    <div
+      className="big-padded-top big-padded-bottom"
+    >
+      <div
+        className="spacer-bottom"
+      >
+        <strong>
+          title
+        </strong>
+      </div>
+    </div>
+  }
+/>
+`;
+
+exports[`renders correctly: no title 1`] = `
+<HelpTooltip
+  overlay={
+    <div
+      className="big-padded-top big-padded-bottom"
+    >
+      <p>
+        content
+      </p>
+    </div>
+  }
+/>
+`;
+
+exports[`renders correctly: with links 1`] = `
+<HelpTooltip
+  overlay={
+    <div
+      className="big-padded-top big-padded-bottom"
+    >
+      <div
+        className="spacer-bottom"
+      >
+        <strong>
+          title
+        </strong>
+      </div>
+      <p>
+        content
+      </p>
+      <React.Fragment>
+        <hr
+          className="big-spacer-top big-spacer-bottom"
+        />
+        <div
+          className="little-spacer-bottom"
+        >
+          <a
+            className="display-inline-flex-center link-with-icon"
+            href="http://link.tosome.place"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <DetachIcon
+              className="spacer-right"
+              size={14}
+            />
+            <span>
+              external link
+            </span>
+          </a>
+        </div>
+        <div
+          className="little-spacer-bottom"
+        >
+          <a
+            className="display-inline-flex-center link-with-icon"
+            href="/documentation/guide"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <span>
+              internal link
+            </span>
+          </a>
+        </div>
+      </React.Fragment>
+    </div>
+  }
+/>
+`;