SONAR-9847 Add tooltip explaining how to get branch support

6 files changed, 194 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
index 7215a3ab825..334fdfb5e1b 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx
@@ -22,6 +22,7 @@ import * as classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import ComponentNavBranchesMenu from './ComponentNavBranchesMenu';
 import SingleBranchHelperPopup from './SingleBranchHelperPopup';
+import NoBranchSupportPopup from './NoBranchSupportPopup';
 import { Branch, Component } from '../../../types';
 import BranchIcon from '../../../../components/icons-components/BranchIcon';
 import { isShortLivingBranch } from '../../../../helpers/branches';
@@ -52,7 +53,8 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
   };
 
   static contextTypes = {
-    branchesEnabled: PropTypes.bool.isRequired
+    branchesEnabled: PropTypes.bool.isRequired,
+    onSonarCloud: PropTypes.bool
   };
 
   componentDidMount() {
@@ -165,13 +167,37 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
     </div>
   );
 
+  renderNoBranchSupportPopup = () => (
+    <div className="display-inline-block spacer-left">
+      <a className="link-no-underline" href="#" onClick={this.handleNoBranchSupportClick}>
+        <HelpIcon fill="#cdcdcd" />
+      </a>
+      <BubblePopupHelper
+        isOpen={this.state.noBranchSupportPopupOpen}
+        position="bottomleft"
+        popup={<NoBranchSupportPopup />}
+        togglePopup={this.toggleNoBranchSupportPopup}
+      />
+    </div>
+  );
+
   render() {
     const { branches, currentBranch } = this.props;
 
-    if (!this.context.branchesEnabled) {
+    if (this.context.onSonarCloud && !this.context.branchesEnabled) {
       return null;
     }
 
+    if (!this.context.branchesEnabled) {
+      return (
+        <div className="navbar-context-branches">
+          <BranchIcon branch={currentBranch} className="little-spacer-right" color="#cdcdcd" />
+          <span className="note">{currentBranch.name}</span>
+          {this.renderNoBranchSupportPopup()}
+        </div>
+      );
+    }
+
     if (branches.length < 2) {
       return (
         <div className="navbar-context-branches">
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/NoBranchSupportPopup.tsx b/server/sonar-web/src/main/js/app/components/nav/component/NoBranchSupportPopup.tsx
new file mode 100644
index 00000000000..70cfb0edb28
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/nav/component/NoBranchSupportPopup.tsx
@@ -0,0 +1,48 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact 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 BubblePopup from '../../../../components/common/BubblePopup';
+import { translate } from '../../../../helpers/l10n';
+
+interface Props {
+  popupPosition?: any;
+}
+
+export default function NoBranchSupportPopup(props: Props) {
+  return (
+    <BubblePopup position={props.popupPosition} customClass="bubble-popup-bottom">
+      <div className="abs-width-400">
+        <h6 className="spacer-bottom">{translate('branches.no_support.header')}</h6>
+        <p className="big-spacer-bottom markdown">{translate('branches.no_support.header.text')}</p>
+        <p>
+          <a href="https://redirect.sonarsource.com/doc/branches.html" target="_blank">
+            {translate('branches.learn_more')}
+          </a>
+          <a
+            className="button spacer-left"
+            href="https://www.sonarsource.com/company/contact/"
+            target="_blank">
+            {translate('branches.buy_developer_pack')}
+          </a>
+        </p>
+      </div>
+    </BubblePopup>
+  );
+}
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx
index 8da338c23e1..fc12f64d040 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBranch-test.tsx
@@ -96,7 +96,7 @@ it('renders single branch popup', () => {
   expect(wrapper.find('BubblePopupHelper').prop('isOpen')).toBe(true);
 });
 
-it('renders nothing when no branch support', () => {
+it('renders no branch support popup', () => {
   const branch: MainBranch = { isMain: true, name: 'master' };
   const component = {} as Component;
   const wrapper = shallow(
@@ -107,5 +107,18 @@ it('renders nothing when no branch support', () => {
     />,
     { context: { branchesEnabled: false } }
   );
+  expect(wrapper).toMatchSnapshot();
+  expect(wrapper.find('BubblePopupHelper').prop('isOpen')).toBe(false);
+  click(wrapper.find('a'));
+  expect(wrapper.find('BubblePopupHelper').prop('isOpen')).toBe(true);
+});
+
+it('renders nothing on SonarCloud without branch support', () => {
+  const branch: MainBranch = { isMain: true, name: 'master' };
+  const component = {} as Component;
+  const wrapper = shallow(
+    <ComponentNavBranch branches={[branch]} component={component} currentBranch={branch} />,
+    { context: { branchesEnabled: false, onSonarCloud: true } }
+  );
   expect(wrapper.type()).toBeNull();
 });
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/NoBranchSupportPopup-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/NoBranchSupportPopup-test.tsx
new file mode 100644
index 00000000000..4f5925156fc
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/NoBranchSupportPopup-test.tsx
@@ -0,0 +1,26 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact 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 { shallow } from 'enzyme';
+import NoBranchSupportPopup from '../NoBranchSupportPopup';
+
+it('renders', () => {
+  expect(shallow(<NoBranchSupportPopup />)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
index 1a1f5a3db79..38c20e78b97 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranch-test.tsx.snap
@@ -26,6 +26,47 @@ exports[`renders main branch 1`] = `
 </div>
 `;
 
+exports[`renders no branch support popup 1`] = `
+<div
+  className="navbar-context-branches"
+>
+  <BranchIcon
+    branch={
+      Object {
+        "isMain": true,
+        "name": "master",
+      }
+    }
+    className="little-spacer-right"
+    color="#cdcdcd"
+  />
+  <span
+    className="note"
+  >
+    master
+  </span>
+  <div
+    className="display-inline-block spacer-left"
+  >
+    <a
+      className="link-no-underline"
+      href="#"
+      onClick={[Function]}
+    >
+      <HelpIcon
+        fill="#cdcdcd"
+      />
+    </a>
+    <BubblePopupHelper
+      isOpen={false}
+      popup={<NoBranchSupportPopup />}
+      position="bottomleft"
+      togglePopup={[Function]}
+    />
+  </div>
+</div>
+`;
+
 exports[`renders short-living branch 1`] = `
 <div
   className="navbar-context-branches dropdown"
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/NoBranchSupportPopup-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/NoBranchSupportPopup-test.tsx.snap
new file mode 100644
index 00000000000..8fb3b04224f
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/NoBranchSupportPopup-test.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+<BubblePopup
+  customClass="bubble-popup-bottom"
+>
+  <div
+    className="abs-width-400"
+  >
+    <h6
+      className="spacer-bottom"
+    >
+      branches.no_support.header
+    </h6>
+    <p
+      className="big-spacer-bottom markdown"
+    >
+      branches.no_support.header.text
+    </p>
+    <p>
+      <a
+        href="https://redirect.sonarsource.com/doc/branches.html"
+        target="_blank"
+      >
+        branches.learn_more
+      </a>
+      <a
+        className="button spacer-left"
+        href="https://www.sonarsource.com/company/contact/"
+        target="_blank"
+      >
+        branches.buy_developer_pack
+      </a>
+    </p>
+  </div>
+</BubblePopup>
+`;