From 3c93ddc45bbd9210d55a9d6b7a8802e330247640 Mon Sep 17 00:00:00 2001
From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Tue, 22 Oct 2019 10:15:56 +0200
Subject: [PATCH] SONAR-12395 Upgrade download link should point to correct
 edition

---
 .../system-upgrade/SystemUpgradeForm.tsx      |  15 +-
 .../SystemUpgradeIntermediate.tsx             |  41 +-
 .../system-upgrade/SystemUpgradeItem.tsx      |  48 ++-
 .../system-upgrade/SystemUpgradeNotif.tsx     |   3 +-
 .../__tests__/SystemUpgradeForm-test.tsx      |  11 +-
 .../__tests__/SystemUpgradeItem-test.tsx      |  90 ++--
 .../__tests__/SystemUpgradeNotif-test.tsx     |  34 +-
 .../SystemUpgradeForm-test.tsx.snap           |   2 +
 .../SystemUpgradeItem-test.tsx.snap           | 390 +++++++++++++++++-
 .../SystemUpgradeNotif-test.tsx.snap          |  71 +++-
 10 files changed, 601 insertions(+), 104 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeForm.tsx b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeForm.tsx
index a6de6790b7f..fa0fbc96707 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeForm.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeForm.tsx
@@ -21,23 +21,27 @@ import * as React from 'react';
 import { ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { withAppState } from '../../../../components/hoc/withAppState';
+import { EditionKey } from '../../../../types/editions';
+import { SystemUpgrade } from '../../../../types/system';
 import SystemUpgradeItem from './SystemUpgradeItem';
 
 interface Props {
-  systemUpgrades: T.SystemUpgrade[][];
+  appState: Pick<T.AppState, 'edition'>;
   onClose: () => void;
+  systemUpgrades: SystemUpgrade[][];
 }
 
 interface State {
   upgrading: boolean;
 }
 
-export default class SystemUpgradeForm extends React.PureComponent<Props, State> {
+export class SystemUpgradeForm extends React.PureComponent<Props, State> {
   state: State = { upgrading: false };
 
   render() {
     const { upgrading } = this.state;
-    const { systemUpgrades } = this.props;
+    const { appState, systemUpgrades } = this.props;
     const header = translate('system.system_upgrade');
     return (
       <Modal contentLabel={header} onRequestClose={this.props.onClose}>
@@ -47,6 +51,9 @@ export default class SystemUpgradeForm extends React.PureComponent<Props, State>
         <div className="modal-body">
           {systemUpgrades.map((upgrades, idx) => (
             <SystemUpgradeItem
+              edition={
+                appState.edition as EditionKey /* TODO: Fix once AppState is no longer ambiant. */
+              }
               key={upgrades[upgrades.length - 1].version}
               systemUpgrades={upgrades}
               type={
@@ -70,3 +77,5 @@ export default class SystemUpgradeForm extends React.PureComponent<Props, State>
     );
   }
 }
+
+export default withAppState(SystemUpgradeForm);
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeIntermediate.tsx b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeIntermediate.tsx
index 86135043784..1b1902a67bb 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeIntermediate.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeIntermediate.tsx
@@ -22,10 +22,11 @@ import { ButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import DateFormatter from '../../../../components/intl/DateFormatter';
+import { SystemUpgrade } from '../../../../types/system';
 
 interface Props {
   className?: string;
-  upgrades: T.SystemUpgrade[];
+  upgrades: SystemUpgrade[];
 }
 
 interface State {
@@ -57,24 +58,26 @@ export default class SystemUpgradeIntermediate extends React.PureComponent<Props
         {showMore &&
           upgrades.map(upgrade => (
             <div className="note system-upgrade-intermediate" key={upgrade.version}>
-              <DateFormatter date={upgrade.releaseDate} long={true}>
-                {formattedDate => (
-                  <p>
-                    <b className="little-spacer-right">SonarQube {upgrade.version}</b>
-                    {formattedDate}
-                    {upgrade.changeLogUrl && (
-                      <a
-                        className="spacer-left"
-                        href={upgrade.changeLogUrl}
-                        rel="noopener noreferrer"
-                        target="_blank">
-                        {translate('system.release_notes')}
-                      </a>
-                    )}
-                  </p>
-                )}
-              </DateFormatter>
-              <p className="little-spacer-top">{upgrade.description}</p>
+              {upgrade.releaseDate && (
+                <DateFormatter date={upgrade.releaseDate} long={true}>
+                  {formattedDate => (
+                    <p>
+                      <b className="little-spacer-right">SonarQube {upgrade.version}</b>
+                      {formattedDate}
+                      {upgrade.changeLogUrl && (
+                        <a
+                          className="spacer-left"
+                          href={upgrade.changeLogUrl}
+                          rel="noopener noreferrer"
+                          target="_blank">
+                          {translate('system.release_notes')}
+                        </a>
+                      )}
+                    </p>
+                  )}
+                </DateFormatter>
+              )}
+              {upgrade.description && <p className="little-spacer-top">{upgrade.description}</p>}
             </div>
           ))}
       </div>
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeItem.tsx b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeItem.tsx
index 71494e0ab77..7d3a870ab99 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeItem.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeItem.tsx
@@ -21,22 +21,34 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import DateFormatter from '../../../../components/intl/DateFormatter';
+import {
+  getEdition,
+  getEditionDownloadFilename,
+  getEditionDownloadUrl
+} from '../../../../helpers/editions';
+import { EditionKey } from '../../../../types/editions';
+import { SystemUpgrade } from '../../../../types/system';
 import SystemUpgradeIntermediate from './SystemUpgradeIntermediate';
 
 interface Props {
-  type?: string;
-  systemUpgrades: T.SystemUpgrade[];
+  edition: EditionKey | undefined;
+  type: string;
+  systemUpgrades: SystemUpgrade[];
 }
 
-export default function SystemUpgradeItem({ type, systemUpgrades }: Props) {
+export default function SystemUpgradeItem(props: Props) {
+  const { edition, type, systemUpgrades } = props;
   const lastUpgrade = systemUpgrades[0];
+  const downloadUrl = getEditionDownloadUrl(
+    getEdition(edition || EditionKey.community),
+    lastUpgrade
+  );
+
   return (
     <div className="system-upgrade-version">
-      {type && (
-        <h1 className="spacer-bottom">
-          <strong>{type}</strong>
-        </h1>
-      )}
+      <h3 className="h1 spacer-bottom">
+        <strong>{type}</strong>
+      </h3>
       <p>
         <FormattedMessage
           defaultMessage={translate('system.version_is_availble')}
@@ -46,11 +58,13 @@ export default function SystemUpgradeItem({ type, systemUpgrades }: Props) {
       </p>
       <p className="spacer-top">{lastUpgrade.description}</p>
       <div className="big-spacer-top">
-        <DateFormatter date={lastUpgrade.releaseDate} long={true}>
-          {formattedDate => (
-            <span>{translateWithParameters('system.released_x', formattedDate)}</span>
-          )}
-        </DateFormatter>
+        {lastUpgrade.releaseDate && (
+          <DateFormatter date={lastUpgrade.releaseDate} long={true}>
+            {formattedDate => (
+              <span>{translateWithParameters('system.released_x', formattedDate)}</span>
+            )}
+          </DateFormatter>
+        )}
         {lastUpgrade.changeLogUrl && (
           <a
             className="spacer-left"
@@ -65,14 +79,16 @@ export default function SystemUpgradeItem({ type, systemUpgrades }: Props) {
       <div className="big-spacer-top">
         <a
           className="button"
-          download={`sonarqube-${lastUpgrade.version}.zip`}
-          href={lastUpgrade.downloadUrl}
-          target="blank">
+          download={getEditionDownloadFilename(downloadUrl)}
+          href={downloadUrl}
+          rel="noopener noreferrer"
+          target="_blank">
           {translateWithParameters('system.download_x', lastUpgrade.version)}
         </a>
         <a
           className="spacer-left"
           href="https://redirect.sonarsource.com/doc/upgrading.html"
+          rel="noopener noreferrer"
           target="_blank">
           {translate('system.how_to_upgrade')}
         </a>
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeNotif.tsx b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeNotif.tsx
index 9db71aa7c22..e76bf1de85a 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeNotif.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeNotif.tsx
@@ -22,11 +22,12 @@ import { Button } from 'sonar-ui-common/components/controls/buttons';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getSystemUpgrades } from '../../../../api/system';
+import { SystemUpgrade } from '../../../../types/system';
 import { groupUpgrades, sortUpgrades } from '../../utils';
 import SystemUpgradeForm from './SystemUpgradeForm';
 
 interface State {
-  systemUpgrades: T.SystemUpgrade[][];
+  systemUpgrades: SystemUpgrade[][];
   openSystemUpgradeForm: boolean;
 }
 
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeForm-test.tsx b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeForm-test.tsx
index be4a15b7a33..e78ca01b834 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeForm-test.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeForm-test.tsx
@@ -19,7 +19,8 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import SystemUpgradeForm from '../SystemUpgradeForm';
+import { EditionKey } from '../../../../../types/editions';
+import { SystemUpgradeForm } from '../SystemUpgradeForm';
 
 const UPGRADES = [
   [
@@ -70,6 +71,12 @@ const UPGRADES = [
 
 it('should display correctly', () => {
   expect(
-    shallow(<SystemUpgradeForm onClose={jest.fn()} systemUpgrades={UPGRADES} />)
+    shallow(
+      <SystemUpgradeForm
+        appState={{ edition: EditionKey.community }}
+        onClose={jest.fn()}
+        systemUpgrades={UPGRADES}
+      />
+    )
   ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeItem-test.tsx b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeItem-test.tsx
index ef7b7c632d2..dfde4ad1d4d 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeItem-test.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeItem-test.tsx
@@ -19,41 +19,65 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { EditionKey } from '../../../../../types/editions';
 import SystemUpgradeItem from '../SystemUpgradeItem';
 
-const UPGRADES = [
-  {
-    version: '5.6.7',
-    description: 'Version 5.6.7 description',
-    releaseDate: '2017-03-01',
-    changeLogUrl: 'changelogurl',
-    downloadUrl: 'downloadurl',
-    plugins: {}
-  },
-  {
-    version: '5.6.6',
-    description: 'Version 5.6.6 description',
-    releaseDate: '2017-04-02',
-    changeLogUrl: 'changelogurl',
-    downloadUrl: 'downloadurl',
-    plugins: {}
-  },
-  {
-    version: '5.6.5',
-    description: 'Version 5.6.5 description',
-    releaseDate: '2017-03-01',
-    changeLogUrl: 'changelogurl',
-    downloadUrl: 'downloadurl',
-    plugins: {}
-  }
-];
-
 it('should display correctly', () => {
-  const wrapper = shallow(<SystemUpgradeItem systemUpgrades={UPGRADES} />);
-  expect(wrapper).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender({ edition: EditionKey.developer })).toMatchSnapshot();
+  expect(shallowRender({ edition: EditionKey.enterprise })).toMatchSnapshot();
+  expect(shallowRender({ edition: EditionKey.datacenter })).toMatchSnapshot();
+  // Fallback to Community.
+  expect(
+    shallowRender({
+      edition: EditionKey.datacenter,
+      systemUpgrades: [
+        {
+          version: '5.6.7',
+          description: 'Version 5.6.7 description',
+          releaseDate: '2017-03-01',
+          changeLogUrl: 'http://changelog.url/',
+          downloadUrl: 'http://download.url/community'
+        }
+      ]
+    })
+  ).toMatchSnapshot();
 });
 
-it('should display a badge', () => {
-  const wrapper = shallow(<SystemUpgradeItem systemUpgrades={UPGRADES} type="LTS Version" />);
-  expect(wrapper.find('h1').exists()).toBeTruthy();
-});
+function shallowRender(props = {}) {
+  return shallow(
+    <SystemUpgradeItem
+      edition={EditionKey.community}
+      systemUpgrades={[
+        {
+          version: '5.6.7',
+          description: 'Version 5.6.7 description',
+          releaseDate: '2017-03-01',
+          changeLogUrl: 'http://changelog.url/',
+          downloadUrl: 'http://download.url/community',
+          downloadDeveloperUrl: 'http://download.url/developer',
+          downloadEnterpriseUrl: 'http://download.url/enterprise',
+          downloadDatacenterUrl: 'http://download.url/datacenter'
+        },
+        {
+          version: '5.6.6',
+          description: 'Version 5.6.6 description',
+          releaseDate: '2017-04-02',
+          changeLogUrl: 'http://changelog.url/',
+          downloadUrl: 'http://download.url/community',
+          downloadDeveloperUrl: 'http://download.url/developer'
+        },
+        {
+          version: '5.6.5',
+          description: 'Version 5.6.5 description',
+          releaseDate: '2017-03-01',
+          changeLogUrl: 'http://changelog.url/',
+          downloadUrl: 'http://download.url/community',
+          downloadDeveloperUrl: 'http://download.url/developer'
+        }
+      ]}
+      type="Latest Version"
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeNotif-test.tsx b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeNotif-test.tsx
index 28dcdf86aa0..eb1d7c7bdd0 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeNotif-test.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeNotif-test.tsx
@@ -21,6 +21,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { click, waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
+import { getSystemUpgrades } from '../../../../../api/system';
 import SystemUpgradeNotif from '../SystemUpgradeNotif';
 
 jest.mock('../../../../../api/system', () => ({
@@ -73,36 +74,31 @@ jest.mock('../../../../../api/system', () => ({
   )
 }));
 
-const getSystemUpgrades = require('../../../../../api/system').getSystemUpgrades as jest.Mock<any>;
-
 beforeEach(() => {
-  getSystemUpgrades.mockClear();
+  jest.clearAllMocks();
 });
 
-it('should display correctly', async () => {
-  const wrapper = shallow(<SystemUpgradeNotif />);
-  expect(wrapper.type()).toBeNull();
+it('should render correctly', async () => {
+  const wrapper = shallowRender();
   await waitAndUpdate(wrapper);
+  expect(getSystemUpgrades).toHaveBeenCalled();
+
+  expect(wrapper).toMatchSnapshot();
+
+  click(wrapper.find('Button'));
   expect(wrapper).toMatchSnapshot();
 });
 
 it('should display nothing', async () => {
-  getSystemUpgrades.mockImplementationOnce(() => {
+  (getSystemUpgrades as jest.Mock).mockImplementationOnce(() => {
     return Promise.resolve({ updateCenterRefresh: '', upgrades: [] });
   });
-  const wrapper = shallow(<SystemUpgradeNotif />);
+  const wrapper = shallowRender();
   await waitAndUpdate(wrapper);
-  expect(wrapper.type()).toBeNull();
-});
 
-it('should fetch upgrade when mounting', () => {
-  shallow(<SystemUpgradeNotif />);
-  expect(getSystemUpgrades).toHaveBeenCalled();
+  expect(wrapper.type()).toBeNull();
 });
 
-it('should open the upgrade form', async () => {
-  const wrapper = shallow(<SystemUpgradeNotif />);
-  await waitAndUpdate(wrapper);
-  click(wrapper.find('Button'));
-  expect(wrapper.find('SystemUpgradeForm').exists()).toBeTruthy();
-});
+function shallowRender() {
+  return shallow<SystemUpgradeNotif>(<SystemUpgradeNotif />);
+}
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeForm-test.tsx.snap
index d061c790af2..6301f09e45c 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeForm-test.tsx.snap
@@ -16,6 +16,7 @@ exports[`should display correctly 1`] = `
     className="modal-body"
   >
     <SystemUpgradeItem
+      edition="community"
       key="6.3"
       systemUpgrades={
         Array [
@@ -40,6 +41,7 @@ exports[`should display correctly 1`] = `
       type="system.latest_version"
     />
     <SystemUpgradeItem
+      edition="community"
       key="5.6.5"
       systemUpgrades={
         Array [
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeItem-test.tsx.snap
index 68d1a8b3ab7..4ffa1cd2858 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeItem-test.tsx.snap
@@ -4,6 +4,203 @@ exports[`should display correctly 1`] = `
 <div
   className="system-upgrade-version"
 >
+  <h3
+    className="h1 spacer-bottom"
+  >
+    <strong>
+      Latest Version
+    </strong>
+  </h3>
+  <p>
+    <FormattedMessage
+      defaultMessage="system.version_is_availble"
+      id="system.version_is_availble"
+      values={
+        Object {
+          "version": <b>
+            SonarQube 
+            5.6.7
+          </b>,
+        }
+      }
+    />
+  </p>
+  <p
+    className="spacer-top"
+  >
+    Version 5.6.7 description
+  </p>
+  <div
+    className="big-spacer-top"
+  >
+    <DateFormatter
+      date="2017-03-01"
+      long={true}
+    >
+      <Component />
+    </DateFormatter>
+    <a
+      className="spacer-left"
+      href="http://changelog.url/"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.release_notes
+    </a>
+  </div>
+  <SystemUpgradeIntermediate
+    className="spacer-top"
+    upgrades={
+      Array [
+        Object {
+          "changeLogUrl": "http://changelog.url/",
+          "description": "Version 5.6.6 description",
+          "downloadDeveloperUrl": "http://download.url/developer",
+          "downloadUrl": "http://download.url/community",
+          "releaseDate": "2017-04-02",
+          "version": "5.6.6",
+        },
+        Object {
+          "changeLogUrl": "http://changelog.url/",
+          "description": "Version 5.6.5 description",
+          "downloadDeveloperUrl": "http://download.url/developer",
+          "downloadUrl": "http://download.url/community",
+          "releaseDate": "2017-03-01",
+          "version": "5.6.5",
+        },
+      ]
+    }
+  />
+  <div
+    className="big-spacer-top"
+  >
+    <a
+      className="button"
+      download="http://download.url/community"
+      href="http://download.url/community"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.download_x.5.6.7
+    </a>
+    <a
+      className="spacer-left"
+      href="https://redirect.sonarsource.com/doc/upgrading.html"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.how_to_upgrade
+    </a>
+  </div>
+</div>
+`;
+
+exports[`should display correctly 2`] = `
+<div
+  className="system-upgrade-version"
+>
+  <h3
+    className="h1 spacer-bottom"
+  >
+    <strong>
+      Latest Version
+    </strong>
+  </h3>
+  <p>
+    <FormattedMessage
+      defaultMessage="system.version_is_availble"
+      id="system.version_is_availble"
+      values={
+        Object {
+          "version": <b>
+            SonarQube 
+            5.6.7
+          </b>,
+        }
+      }
+    />
+  </p>
+  <p
+    className="spacer-top"
+  >
+    Version 5.6.7 description
+  </p>
+  <div
+    className="big-spacer-top"
+  >
+    <DateFormatter
+      date="2017-03-01"
+      long={true}
+    >
+      <Component />
+    </DateFormatter>
+    <a
+      className="spacer-left"
+      href="http://changelog.url/"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.release_notes
+    </a>
+  </div>
+  <SystemUpgradeIntermediate
+    className="spacer-top"
+    upgrades={
+      Array [
+        Object {
+          "changeLogUrl": "http://changelog.url/",
+          "description": "Version 5.6.6 description",
+          "downloadDeveloperUrl": "http://download.url/developer",
+          "downloadUrl": "http://download.url/community",
+          "releaseDate": "2017-04-02",
+          "version": "5.6.6",
+        },
+        Object {
+          "changeLogUrl": "http://changelog.url/",
+          "description": "Version 5.6.5 description",
+          "downloadDeveloperUrl": "http://download.url/developer",
+          "downloadUrl": "http://download.url/community",
+          "releaseDate": "2017-03-01",
+          "version": "5.6.5",
+        },
+      ]
+    }
+  />
+  <div
+    className="big-spacer-top"
+  >
+    <a
+      className="button"
+      download="http://download.url/developer"
+      href="http://download.url/developer"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.download_x.5.6.7
+    </a>
+    <a
+      className="spacer-left"
+      href="https://redirect.sonarsource.com/doc/upgrading.html"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.how_to_upgrade
+    </a>
+  </div>
+</div>
+`;
+
+exports[`should display correctly 3`] = `
+<div
+  className="system-upgrade-version"
+>
+  <h3
+    className="h1 spacer-bottom"
+  >
+    <strong>
+      Latest Version
+    </strong>
+  </h3>
   <p>
     <FormattedMessage
       defaultMessage="system.version_is_availble"
@@ -34,7 +231,7 @@ exports[`should display correctly 1`] = `
     </DateFormatter>
     <a
       className="spacer-left"
-      href="changelogurl"
+      href="http://changelog.url/"
       rel="noopener noreferrer"
       target="_blank"
     >
@@ -46,18 +243,18 @@ exports[`should display correctly 1`] = `
     upgrades={
       Array [
         Object {
-          "changeLogUrl": "changelogurl",
+          "changeLogUrl": "http://changelog.url/",
           "description": "Version 5.6.6 description",
-          "downloadUrl": "downloadurl",
-          "plugins": Object {},
+          "downloadDeveloperUrl": "http://download.url/developer",
+          "downloadUrl": "http://download.url/community",
           "releaseDate": "2017-04-02",
           "version": "5.6.6",
         },
         Object {
-          "changeLogUrl": "changelogurl",
+          "changeLogUrl": "http://changelog.url/",
           "description": "Version 5.6.5 description",
-          "downloadUrl": "downloadurl",
-          "plugins": Object {},
+          "downloadDeveloperUrl": "http://download.url/developer",
+          "downloadUrl": "http://download.url/community",
           "releaseDate": "2017-03-01",
           "version": "5.6.5",
         },
@@ -69,15 +266,188 @@ exports[`should display correctly 1`] = `
   >
     <a
       className="button"
-      download="sonarqube-5.6.7.zip"
-      href="downloadurl"
-      target="blank"
+      download="http://download.url/enterprise"
+      href="http://download.url/enterprise"
+      rel="noopener noreferrer"
+      target="_blank"
     >
       system.download_x.5.6.7
     </a>
     <a
       className="spacer-left"
       href="https://redirect.sonarsource.com/doc/upgrading.html"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.how_to_upgrade
+    </a>
+  </div>
+</div>
+`;
+
+exports[`should display correctly 4`] = `
+<div
+  className="system-upgrade-version"
+>
+  <h3
+    className="h1 spacer-bottom"
+  >
+    <strong>
+      Latest Version
+    </strong>
+  </h3>
+  <p>
+    <FormattedMessage
+      defaultMessage="system.version_is_availble"
+      id="system.version_is_availble"
+      values={
+        Object {
+          "version": <b>
+            SonarQube 
+            5.6.7
+          </b>,
+        }
+      }
+    />
+  </p>
+  <p
+    className="spacer-top"
+  >
+    Version 5.6.7 description
+  </p>
+  <div
+    className="big-spacer-top"
+  >
+    <DateFormatter
+      date="2017-03-01"
+      long={true}
+    >
+      <Component />
+    </DateFormatter>
+    <a
+      className="spacer-left"
+      href="http://changelog.url/"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.release_notes
+    </a>
+  </div>
+  <SystemUpgradeIntermediate
+    className="spacer-top"
+    upgrades={
+      Array [
+        Object {
+          "changeLogUrl": "http://changelog.url/",
+          "description": "Version 5.6.6 description",
+          "downloadDeveloperUrl": "http://download.url/developer",
+          "downloadUrl": "http://download.url/community",
+          "releaseDate": "2017-04-02",
+          "version": "5.6.6",
+        },
+        Object {
+          "changeLogUrl": "http://changelog.url/",
+          "description": "Version 5.6.5 description",
+          "downloadDeveloperUrl": "http://download.url/developer",
+          "downloadUrl": "http://download.url/community",
+          "releaseDate": "2017-03-01",
+          "version": "5.6.5",
+        },
+      ]
+    }
+  />
+  <div
+    className="big-spacer-top"
+  >
+    <a
+      className="button"
+      download="http://download.url/datacenter"
+      href="http://download.url/datacenter"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.download_x.5.6.7
+    </a>
+    <a
+      className="spacer-left"
+      href="https://redirect.sonarsource.com/doc/upgrading.html"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.how_to_upgrade
+    </a>
+  </div>
+</div>
+`;
+
+exports[`should display correctly 5`] = `
+<div
+  className="system-upgrade-version"
+>
+  <h3
+    className="h1 spacer-bottom"
+  >
+    <strong>
+      Latest Version
+    </strong>
+  </h3>
+  <p>
+    <FormattedMessage
+      defaultMessage="system.version_is_availble"
+      id="system.version_is_availble"
+      values={
+        Object {
+          "version": <b>
+            SonarQube 
+            5.6.7
+          </b>,
+        }
+      }
+    />
+  </p>
+  <p
+    className="spacer-top"
+  >
+    Version 5.6.7 description
+  </p>
+  <div
+    className="big-spacer-top"
+  >
+    <DateFormatter
+      date="2017-03-01"
+      long={true}
+    >
+      <Component />
+    </DateFormatter>
+    <a
+      className="spacer-left"
+      href="http://changelog.url/"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.release_notes
+    </a>
+  </div>
+  <SystemUpgradeIntermediate
+    className="spacer-top"
+    upgrades={Array []}
+  />
+  <div
+    className="big-spacer-top"
+  >
+    <a
+      className="button"
+      download="http://download.url/community"
+      href="http://download.url/community"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      system.download_x.5.6.7
+    </a>
+    <a
+      className="spacer-left"
+      href="https://redirect.sonarsource.com/doc/upgrading.html"
+      rel="noopener noreferrer"
       target="_blank"
     >
       system.how_to_upgrade
diff --git a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeNotif-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeNotif-test.tsx.snap
index 6e9ef3d00dd..88e3fa2d032 100644
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeNotif-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeNotif-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should display correctly 1`] = `
+exports[`should render correctly 1`] = `
 <div
   className="page-notifs"
 >
@@ -17,3 +17,72 @@ exports[`should display correctly 1`] = `
   </Alert>
 </div>
 `;
+
+exports[`should render correctly 2`] = `
+<div
+  className="page-notifs"
+>
+  <Alert
+    variant="info"
+  >
+    system.new_version_available
+    <Button
+      className="spacer-left"
+      onClick={[Function]}
+    >
+      learn_more
+    </Button>
+  </Alert>
+  <Connect(withAppState(SystemUpgradeForm))
+    onClose={[Function]}
+    systemUpgrades={
+      Array [
+        Array [
+          Object {
+            "changeLogUrl": "changelogurl",
+            "description": "Version 6.4 description",
+            "downloadUrl": "downloadurl",
+            "plugins": Object {},
+            "releaseDate": "2017-06-02",
+            "version": "6.4",
+          },
+          Object {
+            "changeLogUrl": "changelogurl",
+            "description": "Version 6.3 description",
+            "downloadUrl": "downloadurl",
+            "plugins": Object {},
+            "releaseDate": "2017-05-02",
+            "version": "6.3",
+          },
+        ],
+        Array [
+          Object {
+            "changeLogUrl": "changelogurl",
+            "description": "Version 5.6.7 description",
+            "downloadUrl": "downloadurl",
+            "plugins": Object {},
+            "releaseDate": "2017-03-01",
+            "version": "5.6.7",
+          },
+          Object {
+            "changeLogUrl": "changelogurl",
+            "description": "Version 5.6.6 description",
+            "downloadUrl": "downloadurl",
+            "plugins": Object {},
+            "releaseDate": "2017-04-02",
+            "version": "5.6.6",
+          },
+          Object {
+            "changeLogUrl": "changelogurl",
+            "description": "Version 5.6.5 description",
+            "downloadUrl": "downloadurl",
+            "plugins": Object {},
+            "releaseDate": "2017-03-01",
+            "version": "5.6.5",
+          },
+        ],
+      ]
+    }
+  />
+</div>
+`;
-- 
2.39.5