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

9 files changed, 174 insertions, 80 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>
+`;
diff --git a/server/sonar-web/src/main/js/components/icons-components/PendingIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/PendingIcon.tsx
index 74140a325e7..3e34178aa1c 100644
--- a/server/sonar-web/src/main/js/components/icons-components/PendingIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons-components/PendingIcon.tsx
@@ -18,11 +18,21 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as classNames from 'classnames';
 
-export default function PendingIcon() {
-  /* eslint max-len: 0 */
+interface Props {
+  className?: string;
+  size?: number;
+}
+
+export default function PendingIcon({ className, size = 16 }: Props) {
   return (
-    <svg width="16" height="16" className="icon-pending">
+    <svg
+      className={classNames('icon-pending', className)}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}>
       <g transform="matrix(0.0364583,0,0,0.0364583,1,-0.166667)">
         <path d="M224,136L224,248C224,250.333 223.25,252.25 221.75,253.75C220.25,255.25 218.333,256 216,256L136,256C133.667,256 131.75,255.25 130.25,253.75C128.75,252.25 128,250.333 128,248L128,232C128,229.667 128.75,227.75 130.25,226.25C131.75,224.75 133.667,224 136,224L192,224L192,136C192,133.667 192.75,131.75 194.25,130.25C195.75,128.75 197.667,128 200,128L216,128C218.333,128 220.25,128.75 221.75,130.25C223.25,131.75 224,133.667 224,136ZM328,224C328,199.333 321.917,176.583 309.75,155.75C297.583,134.917 281.083,118.417 260.25,106.25C239.417,94.083 216.667,88 192,88C167.333,88 144.583,94.083 123.75,106.25C102.917,118.417 86.417,134.917 74.25,155.75C62.083,176.583 56,199.333 56,224C56,248.667 62.083,271.417 74.25,292.25C86.417,313.083 102.917,329.583 123.75,341.75C144.583,353.917 167.333,360 192,360C216.667,360 239.417,353.917 260.25,341.75C281.083,329.583 297.583,313.083 309.75,292.25C321.917,271.417 328,248.667 328,224ZM384,224C384,258.833 375.417,290.958 358.25,320.375C341.083,349.792 317.792,373.083 288.375,390.25C258.958,407.417 226.833,416 192,416C157.167,416 125.042,407.417 95.625,390.25C66.208,373.083 42.917,349.792 25.75,320.375C8.583,290.958 0,258.833 0,224C0,189.167 8.583,157.042 25.75,127.625C42.917,98.208 66.208,74.917 95.625,57.75C125.042,40.583 157.167,32 192,32C226.833,32 258.958,40.583 288.375,57.75C317.792,74.917 341.083,98.208 358.25,127.625C375.417,157.042 384,189.167 384,224Z" />
       </g>
diff --git a/server/sonar-web/src/main/less/init/type.less b/server/sonar-web/src/main/less/init/type.less
index 8aaa5c2fa77..643a52789a9 100644
--- a/server/sonar-web/src/main/less/init/type.less
+++ b/server/sonar-web/src/main/less/init/type.less
@@ -147,13 +147,13 @@ small,
 }
 
 .text-top {
-  vertical-align: top;
+  vertical-align: top !important;
 }
 .text-middle {
-  vertical-align: middle;
+  vertical-align: middle !important;
 }
 .text-bottom {
-  vertical-align: bottom;
+  vertical-align: bottom !important;
 }
 .text-text-top {
   vertical-align: text-top !important;