SONAR-10811 Update editions boxes for marketing needs

12 files changed, 207 insertions, 94 deletions

diff --git a/server/sonar-web/src/main/js/apps/marketplace/App.tsx b/server/sonar-web/src/main/js/apps/marketplace/App.tsx
index 966ab400de0..486f4e2bd17 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/App.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/App.tsx
@@ -119,7 +119,7 @@ export default class App extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { currentEdition, standaloneMode, pendingPlugins } = this.props;
+    const { currentEdition = 'community', standaloneMode, pendingPlugins } = this.props;
     const { loadingPlugins, plugins } = this.state;
     const query = parseQuery(this.props.location.query);
     const filteredPlugins = query.search ? filterPlugins(plugins, query.search) : plugins;
@@ -128,8 +128,11 @@ export default class App extends React.PureComponent<Props, State> {
       <div className="page page-limited" id="marketplace-page">
         <Suggestions suggestions="marketplace" />
         <Helmet title={translate('marketplace.page')} />
-        <Header />
+        <Header currentEdition={currentEdition} />
         <EditionBoxes currentEdition={currentEdition} />
+        <header className="page-header">
+          <h1 className="page-title">{translate('marketplace.page.open_source_plugins')}</h1>
+        </header>
         <Search
           query={query}
           updateCenterActive={this.props.updateCenterActive}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/EditionBoxes.tsx b/server/sonar-web/src/main/js/apps/marketplace/EditionBoxes.tsx
index 0b762d28f7e..f79b349ec69 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/EditionBoxes.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/EditionBoxes.tsx
@@ -24,7 +24,7 @@ import { EDITIONS } from './utils';
 import { getFormData } from '../../api/marketplace';
 
 export interface Props {
-  currentEdition?: string;
+  currentEdition: string;
 }
 
 interface State {
@@ -59,11 +59,18 @@ export default class EditionBoxes extends React.PureComponent<Props, State> {
   render() {
     const { currentEdition } = this.props;
     const { serverId, ncloc } = this.state;
+    const currentEditionIdx = EDITIONS.findIndex(edition => edition.key === currentEdition);
+    const visibleEditions = EDITIONS.slice(currentEditionIdx + 1);
+
+    if (visibleEditions.length <= 0) {
+      return null;
+    }
+
     return (
       <div className="spacer-bottom marketplace-editions">
-        {EDITIONS.map(edition => (
+        {visibleEditions.map(edition => (
           <EditionBox
-            currentEdition={currentEdition || 'community'}
+            currentEdition={currentEdition}
             edition={edition}
             key={edition.key}
             ncloc={ncloc}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/Header.tsx b/server/sonar-web/src/main/js/apps/marketplace/Header.tsx
index 6e63ce4d401..2c17f03f8e7 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/Header.tsx
@@ -20,11 +20,22 @@
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 
-export default function Header() {
+interface Props {
+  currentEdition: string;
+}
+
+export default function Header({ currentEdition }: Props) {
   return (
-    <header id="marketplace-header" className="page-header">
+    <header className="page-header" id="marketplace-header">
       <h1 className="page-title">{translate('marketplace.page')}</h1>
-      <p className="page-description">{translate('marketplace.page.description')}</p>
+      <h3 className="page-description">
+        {translate('marketplace.page.you_are_running', currentEdition)}
+      </h3>
+      <p className="page-description">
+        {currentEdition === 'datacenter'
+          ? translate('marketplace.page.description_best_edition')
+          : translate('marketplace.page.description')}
+      </p>
     </header>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/EditionBoxes-test.tsx b/server/sonar-web/src/main/js/apps/marketplace/__tests__/EditionBoxes-test.tsx
index dd49bb10079..9c35ee382d6 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/__tests__/EditionBoxes-test.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/__tests__/EditionBoxes-test.tsx
@@ -23,19 +23,41 @@ import EditionBoxes from '../EditionBoxes';
 
 jest.mock('../utils', () => ({
   EDITIONS: [
-    { key: 'comunity', homeUrl: 'more_url' },
-    { key: 'developer', downloadUrl: 'download_url', homeUrl: 'more_url' }
+    { key: 'community', name: 'Community Edition', homeUrl: 'more_url' },
+    {
+      key: 'developer',
+      name: 'Developer Edition',
+      homeUrl: 'more_url'
+    },
+    {
+      key: 'enterprise',
+      name: 'Enterprise Edition',
+      homeUrl: 'more_url'
+    },
+    {
+      key: 'datacenter',
+      name: 'Data Center Edition',
+      homeUrl: 'more_url'
+    }
   ]
 }));
 
-it('should display the edition boxes correctly', () => {
+it('should display the available edition boxes correctly', () => {
   expect(getWrapper()).toMatchSnapshot();
 });
 
-it('should display the developer edition as installed', () => {
+it('should display the enterprise and datacenter edition boxes', () => {
   expect(getWrapper({ currentEdition: 'developer' })).toMatchSnapshot();
 });
 
+it('should display the datacenter edition box only', () => {
+  expect(getWrapper({ currentEdition: 'enterprise' })).toMatchSnapshot();
+});
+
+it('should not display any edition box', () => {
+  expect(getWrapper({ currentEdition: 'datacenter' }).type()).toBeNull();
+});
+
 function getWrapper(props = {}) {
-  return shallow(<EditionBoxes currentEdition={undefined} {...props} />);
+  return shallow(<EditionBoxes currentEdition={'community'} {...props} />);
 }
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/Header-test.tsx b/server/sonar-web/src/main/js/apps/marketplace/__tests__/Header-test.tsx
new file mode 100644
index 00000000000..3e0a609c781
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/marketplace/__tests__/Header-test.tsx
@@ -0,0 +1,27 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 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 { shallow } from 'enzyme';
+import Header from '../Header';
+
+it('should render with installed editions', () => {
+  expect(shallow(<Header currentEdition="community" />)).toMatchSnapshot();
+  expect(shallow(<Header currentEdition="datacenter" />)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/EditionBoxes-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/EditionBoxes-test.tsx.snap
index 687a2cde364..d8abf481899 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/EditionBoxes-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/EditionBoxes-test.tsx.snap
@@ -1,57 +1,88 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should display the developer edition as installed 1`] = `
+exports[`should display the available edition boxes correctly 1`] = `
 <div
   className="spacer-bottom marketplace-editions"
 >
   <EditionBox
-    currentEdition="developer"
+    currentEdition="community"
     edition={
       Object {
         "homeUrl": "more_url",
-        "key": "comunity",
+        "key": "developer",
+        "name": "Developer Edition",
       }
     }
-    key="comunity"
+    key="developer"
   />
   <EditionBox
-    currentEdition="developer"
+    currentEdition="community"
     edition={
       Object {
-        "downloadUrl": "download_url",
         "homeUrl": "more_url",
-        "key": "developer",
+        "key": "enterprise",
+        "name": "Enterprise Edition",
       }
     }
-    key="developer"
+    key="enterprise"
+  />
+  <EditionBox
+    currentEdition="community"
+    edition={
+      Object {
+        "homeUrl": "more_url",
+        "key": "datacenter",
+        "name": "Data Center Edition",
+      }
+    }
+    key="datacenter"
   />
 </div>
 `;
 
-exports[`should display the edition boxes correctly 1`] = `
+exports[`should display the datacenter edition box only 1`] = `
 <div
   className="spacer-bottom marketplace-editions"
 >
   <EditionBox
-    currentEdition="community"
+    currentEdition="enterprise"
     edition={
       Object {
         "homeUrl": "more_url",
-        "key": "comunity",
+        "key": "datacenter",
+        "name": "Data Center Edition",
       }
     }
-    key="comunity"
+    key="datacenter"
   />
+</div>
+`;
+
+exports[`should display the enterprise and datacenter edition boxes 1`] = `
+<div
+  className="spacer-bottom marketplace-editions"
+>
   <EditionBox
-    currentEdition="community"
+    currentEdition="developer"
     edition={
       Object {
-        "downloadUrl": "download_url",
         "homeUrl": "more_url",
-        "key": "developer",
+        "key": "enterprise",
+        "name": "Enterprise Edition",
       }
     }
-    key="developer"
+    key="enterprise"
+  />
+  <EditionBox
+    currentEdition="developer"
+    edition={
+      Object {
+        "homeUrl": "more_url",
+        "key": "datacenter",
+        "name": "Data Center Edition",
+      }
+    }
+    key="datacenter"
   />
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/Header-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/Header-test.tsx.snap
new file mode 100644
index 00000000000..4b6c283ca46
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/marketplace/__tests__/__snapshots__/Header-test.tsx.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render with installed editions 1`] = `
+<header
+  className="page-header"
+  id="marketplace-header"
+>
+  <h1
+    className="page-title"
+  >
+    marketplace.page
+  </h1>
+  <h3
+    className="page-description"
+  >
+    marketplace.page.you_are_running.community
+  </h3>
+  <p
+    className="page-description"
+  >
+    marketplace.page.description
+  </p>
+</header>
+`;
+
+exports[`should render with installed editions 2`] = `
+<header
+  className="page-header"
+  id="marketplace-header"
+>
+  <h1
+    className="page-title"
+  >
+    marketplace.page
+  </h1>
+  <h3
+    className="page-description"
+  >
+    marketplace.page.you_are_running.datacenter
+  </h3>
+  <p
+    className="page-description"
+  >
+    marketplace.page.description_best_edition
+  </p>
+</header>
+`;
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/EditionBox.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/EditionBox.tsx
index 968aa566020..55309126c7e 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/EditionBox.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/EditionBox.tsx
@@ -18,10 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import CheckIcon from '../../../components/icons-components/CheckIcon';
-import { translate } from '../../../helpers/l10n';
-import DocInclude from '../../../components/docs/DocInclude';
 import { Edition, getEditionUrl } from '../utils';
+import DocInclude from '../../../components/docs/DocInclude';
+import { translate } from '../../../helpers/l10n';
 
 interface Props {
   currentEdition: string;
@@ -30,23 +29,16 @@ interface Props {
   serverId?: string;
 }
 
-export default function EditionBox({ currentEdition, edition, ncloc, serverId }: Props) {
-  const isInstalled = currentEdition === edition.key;
-  const url = getEditionUrl(edition, { ncloc, serverId, sourceEdition: currentEdition });
+export default function EditionBox({ edition, ncloc, serverId, currentEdition }: Props) {
   return (
     <div className="boxed-group boxed-group-inner marketplace-edition">
-      {isInstalled && (
-        <span className="marketplace-edition-badge badge badge-normal-size display-flex-center">
-          <CheckIcon className="little-spacer-right" size={14} />
-          {translate('marketplace.installed')}
-        </span>
-      )}
-      <div>
-        <DocInclude path={'/tooltips/editions/' + edition.key} />
-      </div>
+      <DocInclude path={'/tooltips/editions/' + edition.key} />
       <div className="marketplace-edition-action spacer-top">
-        <a href={url} target="_blank">
-          {translate('marketplace.learn_more')}
+        <a
+          href={getEditionUrl(edition, { ncloc, serverId, sourceEdition: currentEdition })}
+          rel="noopener noreferrer"
+          target="_blank">
+          {translate('marketplace.ask_for_information')}
         </a>
       </div>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/EditionBox-test.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/EditionBox-test.tsx
index 4142b022e58..f4398076daf 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/EditionBox-test.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/EditionBox-test.tsx
@@ -29,13 +29,14 @@ const DEFAULT_EDITION = {
 };
 
 it('should display the edition', () => {
-  expect(getWrapper({ ncloc: 1000, serverId: 'serverId' })).toMatchSnapshot();
+  expect(
+    shallow(
+      <EditionBox
+        currentEdition="community"
+        edition={DEFAULT_EDITION}
+        ncloc={1000}
+        serverId="serverId"
+      />
+    )
+  ).toMatchSnapshot();
 });
-
-it('should show insalled badge', () => {
-  expect(getWrapper({ currentEdition: 'foo' })).toMatchSnapshot();
-});
-
-function getWrapper(props = {}) {
-  return shallow(<EditionBox currentEdition="community" edition={DEFAULT_EDITION} {...props} />);
-}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/EditionBox-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/EditionBox-test.tsx.snap
index 39c71155bc6..69af9d6c1db 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/EditionBox-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/EditionBox-test.tsx.snap
@@ -4,50 +4,18 @@ exports[`should display the edition 1`] = `
 <div
   className="boxed-group boxed-group-inner marketplace-edition"
 >
-  <div>
-    <DocInclude
-      path="/tooltips/editions/foo"
-    />
-  </div>
+  <DocInclude
+    path="/tooltips/editions/foo"
+  />
   <div
     className="marketplace-edition-action spacer-top"
   >
     <a
       href="more_url?ncloc=1000&serverId=serverId&sourceEdition=community"
+      rel="noopener noreferrer"
       target="_blank"
     >
-      marketplace.learn_more
-    </a>
-  </div>
-</div>
-`;
-
-exports[`should show insalled badge 1`] = `
-<div
-  className="boxed-group boxed-group-inner marketplace-edition"
->
-  <span
-    className="marketplace-edition-badge badge badge-normal-size display-flex-center"
-  >
-    <CheckIcon
-      className="little-spacer-right"
-      size={14}
-    />
-    marketplace.installed
-  </span>
-  <div>
-    <DocInclude
-      path="/tooltips/editions/foo"
-    />
-  </div>
-  <div
-    className="marketplace-edition-action spacer-top"
-  >
-    <a
-      href="more_url?sourceEdition=foo"
-      target="_blank"
-    >
-      marketplace.learn_more
+      marketplace.ask_for_information
     </a>
   </div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/marketplace/style.css b/server/sonar-web/src/main/js/apps/marketplace/style.css
index 0e2ef2a2831..5016e1db61b 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/style.css
+++ b/server/sonar-web/src/main/js/apps/marketplace/style.css
@@ -20,7 +20,6 @@
 .marketplace-editions {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   margin-left: -8px;
   margin-right: -8px;
 }
@@ -33,6 +32,11 @@
   justify-content: space-between;
   margin-left: 8px;
   margin-right: 8px;
+  max-width: 50%;
+}
+
+.marketplace-edition .markdown img {
+  width: 16px;
 }
 
 .marketplace-edition .markdown h3 {
diff --git a/server/sonar-web/src/main/js/apps/marketplace/utils.ts b/server/sonar-web/src/main/js/apps/marketplace/utils.ts
index 0c93eb22f17..29ea02d891f 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/utils.ts
+++ b/server/sonar-web/src/main/js/apps/marketplace/utils.ts
@@ -66,7 +66,7 @@ export const EDITIONS: Edition[] = [
 
 export function getEditionUrl(
   edition: Edition,
-  data: { serverId?: string; ncloc?: number; sourceEdition: string }
+  data: { serverId?: string; ncloc?: number; sourceEdition?: string }
 ) {
   let url = edition.homeUrl;
   const query = stringify(omitNil(data));