SONAR-9953 Apply feedbacks on system upgrades

6 files changed, 24 insertions, 92 deletions

diff --git a/server/sonar-web/src/main/js/apps/system/components/SystemUpgradeNotif.tsx b/server/sonar-web/src/main/js/apps/system/components/SystemUpgradeNotif.tsx
deleted file mode 100644
index cdb15d71939..00000000000
--- a/server/sonar-web/src/main/js/apps/system/components/SystemUpgradeNotif.tsx
+++ /dev/null
@@ -1,71 +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.
- */
-import * as React from 'react';
-import { getSystemUpgrades, SystemUpgrade } from '../../../api/system';
-import { translate } from '../../../helpers/l10n';
-
-interface State {
-  systemUpgrades?: SystemUpgrade[];
-}
-
-export default class SystemUpgradeNotif extends React.PureComponent<{}, State> {
-  mounted: boolean;
-  state: State = {};
-
-  componentDidMount() {
-    this.mounted = true;
-    this.fetchSystemUpgrades();
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  fetchSystemUpgrades = () =>
-    getSystemUpgrades().then(
-      ({ upgrades }) => {
-        if (this.mounted) {
-          this.setState({ systemUpgrades: upgrades });
-        }
-      },
-      () => {}
-    );
-
-  handleLearnMore = () => {};
-
-  render() {
-    const { systemUpgrades } = this.state;
-
-    if (!systemUpgrades || systemUpgrades.length <= 0) {
-      return null;
-    }
-
-    return (
-      <div className="page-notifs">
-        <div className="alert alert-info">
-          {translate('system.new_version_available')}
-          <button className="spacer-left" onClick={this.handleLearnMore}>
-            {translate('learn_more')}
-          </button>
-        </div>
-      </div>
-    );
-  }
-}
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 9370ea4493b..0c508a86706 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
@@ -35,16 +35,6 @@ interface State {
 export default class SystemUpgradeForm extends React.PureComponent<Props, State> {
   state: State = { upgrading: false };
 
-  getBadge = (idx: number) => {
-    if (this.props.systemUpgrades.length <= 1) {
-      return undefined;
-    }
-    if (idx === 0) {
-      return translate('system.latest_version');
-    }
-    return translate('system.latest_lts_version');
-  };
-
   handleCancelClick = (event: React.SyntheticEvent<HTMLElement>) => {
     event.preventDefault();
     event.stopPropagation();
@@ -69,7 +59,9 @@ export default class SystemUpgradeForm extends React.PureComponent<Props, State>
           {systemUpgrades.map((upgrades, idx) => (
             <SystemUpgradeItem
               key={upgrades[upgrades.length - 1].version}
-              badge={this.getBadge(idx)}
+              type={
+                idx === 0 ? translate('system.latest_version') : translate('system.lts_version')
+              }
               systemUpgrades={upgrades}
             />
           ))}
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 d428dc2310b..ccafec8a1aa 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
@@ -74,6 +74,11 @@ export default class SystemUpgradeIntermediate extends React.PureComponent<Props
                   <p>
                     <b className="little-spacer-right">SonarQube {upgrade.version}</b>
                     {formattedDate}
+                    {upgrade.changeLogUrl && (
+                      <a className="spacer-left" href={upgrade.changeLogUrl} target="_blank">
+                        {translate('system.release_notes')}
+                      </a>
+                    )}
                   </p>
                 )}
               </DateFormatter>
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 980cae8d2e1..83d45e9ea63 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
@@ -25,15 +25,19 @@ import { SystemUpgrade } from '../../../../api/system';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
 
 interface Props {
-  badge?: string;
+  type?: string;
   systemUpgrades: SystemUpgrade[];
 }
 
-export default function SystemUpgradeItem({ badge, systemUpgrades }: Props) {
+export default function SystemUpgradeItem({ type, systemUpgrades }: Props) {
   const lastUpgrade = systemUpgrades[0];
   return (
     <div className="system-upgrade-version">
-      {badge && <span className="spacer-bottom badge badge-secondary">{badge}</span>}
+      {type && (
+        <h1 className="spacer-bottom">
+          <strong>{type}</strong>
+        </h1>
+      )}
       <p>
         <FormattedMessage
           defaultMessage={translate('system.version_is_availble')}
@@ -48,9 +52,11 @@ export default function SystemUpgradeItem({ badge, systemUpgrades }: Props) {
             <span>{translateWithParameters('system.released_x', formattedDate)}</span>
           )}
         </DateFormatter>
-        <a className="spacer-left" href={lastUpgrade.changeLogUrl} target="_blank">
-          {translate('system.release_notes')}
-        </a>
+        {lastUpgrade.changeLogUrl && (
+          <a className="spacer-left" href={lastUpgrade.changeLogUrl} target="_blank">
+            {translate('system.release_notes')}
+          </a>
+        )}
       </div>
       <SystemUpgradeIntermediate className="spacer-top" upgrades={systemUpgrades.slice(1)} />
       <div className="big-spacer-top">
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 f23842f8689..b7bd0280a44 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
@@ -54,6 +54,6 @@ it('should display correctly', () => {
 });
 
 it('should display a badge', () => {
-  const wrapper = shallow(<SystemUpgradeItem badge="test badge" systemUpgrades={UPGRADES} />);
-  expect(wrapper.find('.badge').exists()).toBeTruthy();
+  const wrapper = shallow(<SystemUpgradeItem type="LTS Version" systemUpgrades={UPGRADES} />);
+  expect(wrapper.find('h1').exists()).toBeTruthy();
 });
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 3bfbebace5a..0f84689c104 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
@@ -25,7 +25,6 @@ exports[`should display correctly 1`] = `
     className="modal-body"
   >
     <SystemUpgradeItem
-      badge="system.latest_version"
       systemUpgrades={
         Array [
           Object {
@@ -46,9 +45,9 @@ exports[`should display correctly 1`] = `
           },
         ]
       }
+      type="system.latest_version"
     />
     <SystemUpgradeItem
-      badge="system.latest_lts_version"
       systemUpgrades={
         Array [
           Object {
@@ -77,6 +76,7 @@ exports[`should display correctly 1`] = `
           },
         ]
       }
+      type="system.lts_version"
     />
   </div>
   <div