SONAR-8747 Make in progress and pending background task status more visible

7 files changed, 158 insertions, 74 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
index 1a954a26d23..110c8b2a2ef 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
@@ -94,15 +94,23 @@ export default class ComponentNav extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { currentTask } = this.state;
-    const showNotif = currentTask && currentTask.status === STATUSES.FAILED;
+    const { currentTask, isInProgress, isPending } = this.state;
+    let notifComponent;
+    if (isInProgress || isPending || (currentTask && currentTask.status === STATUSES.FAILED)) {
+      notifComponent = (
+        <ComponentNavBgTaskNotif
+          component={this.props.component}
+          currentTask={currentTask}
+          isInProgress={isInProgress}
+          isPending={isPending}
+        />
+      );
+    }
     return (
       <ContextNavBar
         id="context-navigation"
-        height={showNotif ? 95 : 65}
-        notif={
-          showNotif ? <ComponentNavBgTaskNotif component={this.props.component} /> : undefined
-        }>
+        height={notifComponent ? 95 : 65}
+        notif={notifComponent}>
         <ComponentNavFavorite
           component={this.props.component.key}
           favorite={this.props.component.isFavorite}
@@ -120,12 +128,7 @@ export default class ComponentNav extends React.PureComponent<Props, State> {
             location={this.props.location}
           />
         )}
-        <ComponentNavMeta
-          branch={this.props.currentBranch}
-          component={this.props.component}
-          isInProgress={this.state.isInProgress}
-          isPending={this.state.isPending}
-        />
+        <ComponentNavMeta branch={this.props.currentBranch} component={this.props.component} />
         <ComponentNavMenu
           branch={this.props.currentBranch}
           component={this.props.component}
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx
index 120eb42ab53..7869f9a6710 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBgTaskNotif.tsx
@@ -19,28 +19,68 @@
  */
 import * as React from 'react';
 import NavBarNotif from '../../../../components/nav/NavBarNotif';
+import PendingIcon from '../../../../components/icons-components/PendingIcon';
 import { Component } from '../../../types';
+import { STATUSES } from '../../../../apps/background-tasks/constants';
 import { getComponentBackgroundTaskUrl } from '../../../../helpers/urls';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
+import { Task } from '../../../../api/ce';
 
 interface Props {
   component: Component;
+  currentTask?: Task;
+  isInProgress?: boolean;
+  isPending?: boolean;
 }
 
-export default function ComponentNavBgTaskNotif({ component }: Props) {
+export default function ComponentNavBgTaskNotif({
+  component,
+  currentTask,
+  isInProgress,
+  isPending
+}: Props) {
   const canSeeBackgroundTasks =
     component.configuration != undefined && component.configuration.showBackgroundTasks;
+  const url = getComponentBackgroundTaskUrl(component.key);
 
-  const message = canSeeBackgroundTasks
-    ? translateWithParameters(
-        'component_navigation.status.failed.admin',
-        getComponentBackgroundTaskUrl(component.key)
-      )
-    : translate('component_navigation.status.failed');
-
-  return (
-    <NavBarNotif className="alert alert-danger">
-      <span dangerouslySetInnerHTML={{ __html: message }} />
-    </NavBarNotif>
-  );
+  if (isInProgress) {
+    return (
+      <NavBarNotif className="alert alert-info">
+        <i className="spinner spacer-right" />
+        <span
+          dangerouslySetInnerHTML={{
+            __html: canSeeBackgroundTasks
+              ? translateWithParameters('component_navigation.status.in_progress.admin', url)
+              : translate('component_navigation.status.in_progress')
+          }}
+        />
+      </NavBarNotif>
+    );
+  } else if (isPending) {
+    return (
+      <NavBarNotif className="alert alert-info">
+        <PendingIcon className="spacer-right" />
+        <span
+          dangerouslySetInnerHTML={{
+            __html: canSeeBackgroundTasks
+              ? translateWithParameters('component_navigation.status.pending.admin', url)
+              : translate('component_navigation.status.pending')
+          }}
+        />
+      </NavBarNotif>
+    );
+  } else if (currentTask && currentTask.status === STATUSES.FAILED) {
+    return (
+      <NavBarNotif className="alert alert-danger">
+        <span
+          dangerouslySetInnerHTML={{
+            __html: canSeeBackgroundTasks
+              ? translateWithParameters('component_navigation.status.failed.admin', url)
+              : translate('component_navigation.status.failed')
+          }}
+        />
+      </NavBarNotif>
+    );
+  }
+  return null;
 }
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
index 2e0f3f2a560..43540593843 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
@@ -20,60 +20,18 @@
 import * as React from 'react';
 import BranchStatus from '../../../../components/common/BranchStatus';
 import { Branch, Component } from '../../../types';
-import Tooltip from '../../../../components/controls/Tooltip';
-import PendingIcon from '../../../../components/icons-components/PendingIcon';
 import DateTimeFormatter from '../../../../components/intl/DateTimeFormatter';
-import { translate, translateWithParameters } from '../../../../helpers/l10n';
 import { isShortLivingBranch } from '../../../../helpers/branches';
 
 interface Props {
   branch?: Branch;
   component: Component;
-  isInProgress?: boolean;
-  isPending?: boolean;
 }
 
 export default function ComponentNavMeta(props: Props) {
   const metaList = [];
-  const canSeeBackgroundTasks =
-    props.component.configuration != undefined && props.component.configuration.showBackgroundTasks;
-  const backgroundTasksUrl =
-    (window as any).baseUrl +
-    `/project/background_tasks?id=${encodeURIComponent(props.component.key)}`;
-
   const shortBranch = props.branch && isShortLivingBranch(props.branch);
 
-  if (props.isInProgress) {
-    const tooltip = canSeeBackgroundTasks
-      ? translateWithParameters('component_navigation.status.in_progress.admin', backgroundTasksUrl)
-      : translate('component_navigation.status.in_progress');
-    metaList.push(
-      <Tooltip
-        key="isInProgress"
-        overlay={<div dangerouslySetInnerHTML={{ __html: tooltip }} />}
-        mouseLeaveDelay={2}>
-        <li>
-          <i className="spinner" style={{ marginTop: '-1px' }} />{' '}
-          <span className="text-info">{translate('background_task.status.IN_PROGRESS')}</span>
-        </li>
-      </Tooltip>
-    );
-  } else if (props.isPending) {
-    const tooltip = canSeeBackgroundTasks
-      ? translateWithParameters('component_navigation.status.pending.admin', backgroundTasksUrl)
-      : translate('component_navigation.status.pending');
-    metaList.push(
-      <Tooltip
-        key="isPending"
-        overlay={<div dangerouslySetInnerHTML={{ __html: tooltip }} />}
-        mouseLeaveDelay={2}>
-        <li>
-          <PendingIcon /> <span>{translate('background_task.status.PENDING')}</span>
-        </li>
-      </Tooltip>
-    );
-  }
-
   if (props.component.analysisDate) {
     metaList.push(
       <li key="analysisDate">
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNav-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNav-test.tsx
index 945ceed22ad..7db06bfa00c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNav-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNav-test.tsx
@@ -68,6 +68,6 @@ it('loads status', () => {
 
 it('renders', () => {
   const wrapper = shallow(<ComponentNav branches={[]} component={component} location={{}} />);
-  wrapper.setState({ isFailed: true, isInProgress: true, isPending: true });
+  wrapper.setState({ isInProgress: true, isPending: true });
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBgTaskNotif-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBgTaskNotif-test.tsx
index 7a4fe19162b..3a06ad1fadb 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBgTaskNotif-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/ComponentNavBgTaskNotif-test.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import ComponentNavBgTaskNotif from '../ComponentNavBgTaskNotif';
+import { Task } from '../../../../../api/ce';
 
 const component = {
   analysisDate: '2017-01-02T00:00:00.000Z',
@@ -31,6 +32,35 @@ const component = {
   version: '0.0.1'
 };
 
-it('renders background task notif correctly', () => {
-  expect(shallow(<ComponentNavBgTaskNotif component={component} />)).toMatchSnapshot();
+it('renders background task error correctly', () => {
+  expect(
+    shallow(
+      <ComponentNavBgTaskNotif component={component} currentTask={{ status: 'FAILED' } as Task} />
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders background task pending info correctly', () => {
+  expect(
+    shallow(
+      <ComponentNavBgTaskNotif
+        component={component}
+        isPending={true}
+        currentTask={{ status: 'FAILED' } as Task}
+      />
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders background task in progress info correctly', () => {
+  expect(
+    shallow(
+      <ComponentNavBgTaskNotif
+        component={component}
+        isInProgress={true}
+        isPending={true}
+        currentTask={{ status: 'FAILED' } as Task}
+      />
+    )
+  ).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNav-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNav-test.tsx.snap
index 5222368fae8..a8090844fd9 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNav-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNav-test.tsx.snap
@@ -2,8 +2,29 @@
 
 exports[`renders 1`] = `
 <ContextNavBar
-  height={65}
+  height={95}
   id="context-navigation"
+  notif={
+    <ComponentNavBgTaskNotif
+      component={
+        Object {
+          "breadcrumbs": Array [
+            Object {
+              "key": "component",
+              "name": "component",
+              "qualifier": "TRK",
+            },
+          ],
+          "key": "component",
+          "name": "component",
+          "organization": "org",
+          "qualifier": "TRK",
+        }
+      }
+      isInProgress={true}
+      isPending={true}
+    />
+  }
 >
   <ComponentNavFavorite
     component="component"
@@ -50,8 +71,6 @@ exports[`renders 1`] = `
         "qualifier": "TRK",
       }
     }
-    isInProgress={true}
-    isPending={true}
   />
   <ComponentNavMenu
     component={
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap
index de960261c68..423b6a5d618 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBgTaskNotif-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders background task notif correctly 1`] = `
+exports[`renders background task error correctly 1`] = `
 <NavBarNotif
   className="alert alert-danger"
 >
@@ -13,3 +13,37 @@ exports[`renders background task notif correctly 1`] = `
   />
 </NavBarNotif>
 `;
+
+exports[`renders background task in progress info correctly 1`] = `
+<NavBarNotif
+  className="alert alert-info"
+>
+  <i
+    className="spinner spacer-right"
+  />
+  <span
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "component_navigation.status.in_progress",
+      }
+    }
+  />
+</NavBarNotif>
+`;
+
+exports[`renders background task pending info correctly 1`] = `
+<NavBarNotif
+  className="alert alert-info"
+>
+  <PendingIcon
+    className="spacer-right"
+  />
+  <span
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "component_navigation.status.pending",
+      }
+    }
+  />
+</NavBarNotif>
+`;