SONAR-15627 Make the system update prompt same as globle prompt

9 files changed, 69 insertions, 241 deletions

diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
index 3ecf5816e69..485a716449d 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
@@ -27,8 +27,8 @@ import GlobalMessagesContainer from './GlobalMessagesContainer';
 import IndexationContextProvider from './indexation/IndexationContextProvider';
 import IndexationNotification from './indexation/IndexationNotification';
 import GlobalNav from './nav/global/GlobalNav';
-import StartupModal from './StartupModal';
 import PromotionNotification from './promotion-notification/PromotionNotification';
+import StartupModal from './StartupModal';
 import UpdateNotification from './update-notification/UpdateNotification';
 
 export interface Props {
@@ -54,7 +54,7 @@ export default function GlobalContainer(props: Props) {
                     <GlobalNav location={props.location} />
                     <GlobalMessagesContainer />
                     <IndexationNotification />
-                    <UpdateNotification />
+                    <UpdateNotification dismissable={true} />
                     {props.children}
                   </IndexationContextProvider>
                 </Workspace>
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalContainer-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalContainer-test.tsx.snap
index 5f47fc1d4a2..107d16e2a17 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalContainer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/GlobalContainer-test.tsx.snap
@@ -32,7 +32,9 @@ exports[`should render correctly 1`] = `
                 />
                 <Connect(GlobalMessages) />
                 <Connect(withCurrentUser(withIndexationContext(IndexationNotification))) />
-                <Connect(withCurrentUser(Connect(withAppState(UpdateNotification)))) />
+                <Connect(withCurrentUser(Connect(withAppState(UpdateNotification))))
+                  dismissable={true}
+                />
                 <ChildComponent />
               </Connect(withAppState(IndexationContextProvider))>
             </Workspace>
diff --git a/server/sonar-web/src/main/js/app/components/update-notification/UpdateNotification.tsx b/server/sonar-web/src/main/js/app/components/update-notification/UpdateNotification.tsx
index f7b188dcc85..e80c06fd3a2 100644
--- a/server/sonar-web/src/main/js/app/components/update-notification/UpdateNotification.tsx
+++ b/server/sonar-web/src/main/js/app/components/update-notification/UpdateNotification.tsx
@@ -23,7 +23,7 @@ import * as React from 'react';
 import { getSystemUpgrades } from '../../../api/system';
 import { withAppState } from '../../../components/hoc/withAppState';
 import { withCurrentUser } from '../../../components/hoc/withCurrentUser';
-import { AlertVariant } from '../../../components/ui/Alert';
+import { Alert, AlertVariant } from '../../../components/ui/Alert';
 import DismissableAlert from '../../../components/ui/DismissableAlert';
 import SystemUpgradeButton from '../../../components/upgrade/SystemUpgradeButton';
 import { sortUpgrades, UpdateUseCase } from '../../../components/upgrade/utils';
@@ -47,6 +47,7 @@ const MAP_VARIANT: T.Dict<AlertVariant> = {
 };
 
 interface Props {
+  dismissable: boolean;
   appState: Pick<T.AppState, 'version'>;
   currentUser: T.CurrentUser;
 }
@@ -218,11 +219,12 @@ export class UpdateNotification extends React.PureComponent<Props, State> {
   }
 
   render() {
+    const { dismissable } = this.props;
     const { latestLTS, systemUpgrades, canSeeNotification, useCase, dismissKey } = this.state;
     if (!canSeeNotification) {
       return null;
     }
-    return (
+    return dismissable ? (
       <DismissableAlert
         alertKey={dismissKey}
         variant={MAP_VARIANT[useCase]}
@@ -234,6 +236,15 @@ export class UpdateNotification extends React.PureComponent<Props, State> {
           latestLTS={latestLTS}
         />
       </DismissableAlert>
+    ) : (
+      <Alert variant={MAP_VARIANT[useCase]} className={`it__upgrade-prompt-${useCase}`}>
+        {translate('admin_notification.update', useCase)}
+        <SystemUpgradeButton
+          systemUpgrades={systemUpgrades}
+          updateUseCase={useCase}
+          latestLTS={latestLTS}
+        />
+      </Alert>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/app/components/update-notification/__tests__/UpdateNotification-test.tsx b/server/sonar-web/src/main/js/app/components/update-notification/__tests__/UpdateNotification-test.tsx
index e6f9a7b7404..b99a923dd6b 100644
--- a/server/sonar-web/src/main/js/app/components/update-notification/__tests__/UpdateNotification-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/update-notification/__tests__/UpdateNotification-test.tsx
@@ -20,6 +20,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { getSystemUpgrades } from '../../../../api/system';
+import { Alert } from '../../../../components/ui/Alert';
 import DismissableAlert from '../../../../components/ui/DismissableAlert';
 import { mockUpgrades } from '../../../../helpers/mocks/system-upgrades';
 import { mockAppState, mockCurrentUser, mockLoggedInUser } from '../../../../helpers/testMocks';
@@ -158,8 +159,32 @@ it('should show prompt when lts upgrade is more than 6 month', async () => {
   expect(wrapper.contains('admin_notification.update.previous_lts')).toBe(true);
 });
 
+it('should show correct alert when not dismissable', async () => {
+  (getSystemUpgrades as jest.Mock).mockResolvedValueOnce({
+    upgrades: [
+      mockUpgrades({ version: '8.9', releaseDate: formatDate(new Date(Date.now())) }),
+      mockUpgrades({ version: '9.2' }),
+      mockUpgrades({ version: '9.1.1' })
+    ],
+    latestLTS: '8.9'
+  });
+  const wrapper = shallowRender({
+    appState: mockAppState({ version: '8.8' }),
+    currentUser: mockLoggedInUser({ permissions: { global: [Permissions.Admin] } })
+  });
+  await waitAndUpdate(wrapper);
+  expect(wrapper.find(DismissableAlert).type).toBeDefined();
+  wrapper.setProps({ dismissable: false });
+  expect(wrapper.find(Alert).type).toBeDefined();
+});
+
 function shallowRender(props: Partial<UpdateNotification['props']> = {}) {
   return shallow(
-    <UpdateNotification appState={mockAppState()} currentUser={mockCurrentUser()} {...props} />
+    <UpdateNotification
+      dismissable={true}
+      appState={mockAppState()}
+      currentUser={mockCurrentUser()}
+      {...props}
+    />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/system/components/App.tsx b/server/sonar-web/src/main/js/apps/system/components/App.tsx
index 6df2047788c..7e5cdc02608 100644
--- a/server/sonar-web/src/main/js/apps/system/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/App.tsx
@@ -22,6 +22,7 @@ import { Helmet } from 'react-helmet-async';
 import { withRouter, WithRouterProps } from 'react-router';
 import { getSystemInfo } from '../../../api/system';
 import Suggestions from '../../../app/components/embed-docs-modal/Suggestions';
+import UpdateNotification from '../../../app/components/update-notification/UpdateNotification';
 import { translate } from '../../../helpers/l10n';
 import '../styles.css';
 import {
@@ -37,7 +38,6 @@ import {
 import ClusterSysInfos from './ClusterSysInfos';
 import PageHeader from './PageHeader';
 import StandaloneSysInfos from './StandaloneSysInfos';
-import SystemUpgradeNotif from './system-upgrade/SystemUpgradeNotif';
 
 type Props = WithRouterProps;
 
@@ -122,7 +122,9 @@ export class App extends React.PureComponent<Props, State> {
       <div className="page page-limited">
         <Suggestions suggestions="system_info" />
         <Helmet defer={false} title={translate('system_info.page')} />
-        <SystemUpgradeNotif />
+        <div className="page-notifs">
+          <UpdateNotification dismissable={false} />
+        </div>
         {sysInfoData && (
           <PageHeader
             isCluster={isCluster(sysInfoData)}
diff --git a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/App-test.tsx.snap
index c1191f63727..cc36c6dd0d6 100644
--- a/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -12,7 +12,13 @@ exports[`should render correctly: cluster sysinfo 1`] = `
     encodeSpecialCharacters={true}
     title="system_info.page"
   />
-  <SystemUpgradeNotif />
+  <div
+    className="page-notifs"
+  >
+    <Connect(withCurrentUser(Connect(withAppState(UpdateNotification))))
+      dismissable={false}
+    />
+  </div>
   <Connect(PageHeader)
     isCluster={true}
     loading={false}
@@ -198,7 +204,13 @@ exports[`should render correctly: loading 1`] = `
     encodeSpecialCharacters={true}
     title="system_info.page"
   />
-  <SystemUpgradeNotif />
+  <div
+    className="page-notifs"
+  >
+    <Connect(withCurrentUser(Connect(withAppState(UpdateNotification))))
+      dismissable={false}
+    />
+  </div>
 </div>
 `;
 
@@ -214,7 +226,13 @@ exports[`should render correctly: stand-alone sysinfo 1`] = `
     encodeSpecialCharacters={true}
     title="system_info.page"
   />
-  <SystemUpgradeNotif />
+  <div
+    className="page-notifs"
+  >
+    <Connect(withCurrentUser(Connect(withAppState(UpdateNotification))))
+      dismissable={false}
+    />
+  </div>
   <Connect(PageHeader)
     isCluster={false}
     loading={false}
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
deleted file mode 100644
index f39ddc3bdc0..00000000000
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeNotif.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2021 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 } from '../../../../api/system';
-import { Alert } from '../../../../components/ui/Alert';
-import SystemUpgradeButton from '../../../../components/upgrade/SystemUpgradeButton';
-import { translate } from '../../../../helpers/l10n';
-import { SystemUpgrade } from '../../../../types/system';
-
-interface State {
-  latestLTS: string;
-  systemUpgrades: SystemUpgrade[];
-}
-
-export default class SystemUpgradeNotif extends React.PureComponent<{}, State> {
-  mounted = false;
-  state: State = { systemUpgrades: [], latestLTS: '' };
-
-  componentDidMount() {
-    this.mounted = true;
-    this.fetchSystemUpgrade();
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  fetchSystemUpgrade = () =>
-    getSystemUpgrades().then(
-      ({ upgrades, latestLTS }) => {
-        if (this.mounted) {
-          this.setState({ latestLTS, systemUpgrades: upgrades });
-        }
-      },
-      () => {}
-    );
-
-  render() {
-    const { systemUpgrades, latestLTS } = this.state;
-
-    if (systemUpgrades.length <= 0) {
-      return null;
-    }
-
-    return (
-      <div className="page-notifs">
-        <Alert variant="info">
-          {translate('system.new_version_available')}
-          <SystemUpgradeButton systemUpgrades={systemUpgrades} latestLTS={latestLTS} />
-        </Alert>
-      </div>
-    );
-  }
-}
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
deleted file mode 100644
index 61673af52a2..00000000000
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/SystemUpgradeNotif-test.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2021 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 { getSystemUpgrades } from '../../../../../api/system';
-import { waitAndUpdate } from '../../../../../helpers/testUtils';
-import SystemUpgradeNotif from '../SystemUpgradeNotif';
-
-jest.mock('../../../../../api/system', () => ({
-  getSystemUpgrades: jest.fn(() =>
-    Promise.resolve({
-      updateCenterRefresh: '',
-      upgrades: [
-        {
-          version: '5.6.7',
-          description: 'Version 5.6.7 description',
-          releaseDate: '2017-03-01',
-          changeLogUrl: 'changelogurl',
-          downloadUrl: 'downloadurl',
-          plugins: {}
-        },
-        {
-          version: '5.6.5',
-          description: 'Version 5.6.5 description',
-          releaseDate: '2017-03-01',
-          changeLogUrl: 'changelogurl',
-          downloadUrl: 'downloadurl',
-          plugins: {}
-        },
-        {
-          version: '6.3',
-          description: 'Version 6.3 description',
-          releaseDate: '2017-05-02',
-          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: '6.4',
-          description: 'Version 6.4 description',
-          releaseDate: '2017-06-02',
-          changeLogUrl: 'changelogurl',
-          downloadUrl: 'downloadurl',
-          plugins: {}
-        }
-      ]
-    })
-  )
-}));
-
-beforeEach(() => {
-  jest.clearAllMocks();
-});
-
-it('should render correctly', async () => {
-  const wrapper = shallowRender();
-  await waitAndUpdate(wrapper);
-  expect(getSystemUpgrades).toHaveBeenCalled();
-
-  expect(wrapper).toMatchSnapshot();
-});
-
-it('should display nothing', async () => {
-  (getSystemUpgrades as jest.Mock).mockImplementationOnce(() => {
-    return Promise.resolve({ updateCenterRefresh: '', upgrades: [] });
-  });
-  const wrapper = shallowRender();
-  await waitAndUpdate(wrapper);
-
-  expect(wrapper.type()).toBeNull();
-});
-
-function shallowRender() {
-  return shallow<SystemUpgradeNotif>(<SystemUpgradeNotif />);
-}
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
deleted file mode 100644
index 3e3d05a2f7b..00000000000
--- a/server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeNotif-test.tsx.snap
+++ /dev/null
@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<div
-  className="page-notifs"
->
-  <Alert
-    variant="info"
-  >
-    system.new_version_available
-    <SystemUpgradeButton
-      systemUpgrades={
-        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.5 description",
-            "downloadUrl": "downloadurl",
-            "plugins": Object {},
-            "releaseDate": "2017-03-01",
-            "version": "5.6.5",
-          },
-          Object {
-            "changeLogUrl": "changelogurl",
-            "description": "Version 6.3 description",
-            "downloadUrl": "downloadurl",
-            "plugins": Object {},
-            "releaseDate": "2017-05-02",
-            "version": "6.3",
-          },
-          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 6.4 description",
-            "downloadUrl": "downloadurl",
-            "plugins": Object {},
-            "releaseDate": "2017-06-02",
-            "version": "6.4",
-          },
-        ]
-      }
-    />
-  </Alert>
-</div>
-`;