From bb0c0ee739ec64d81a335284674d10e49786a4ec Mon Sep 17 00:00:00 2001 From: Grégoire Aubert Date: Thu, 28 Sep 2017 15:33:59 +0200 Subject: SONAR-8747 Make in progress and pending background task status more visible --- .../app/components/nav/component/ComponentNav.tsx | 27 +++++---- .../nav/component/ComponentNavBgTaskNotif.tsx | 66 +++++++++++++++++----- .../components/nav/component/ComponentNavMeta.tsx | 42 -------------- .../nav/component/__tests__/ComponentNav-test.tsx | 2 +- .../__tests__/ComponentNavBgTaskNotif-test.tsx | 34 ++++++++++- .../__snapshots__/ComponentNav-test.tsx.snap | 25 +++++++- .../ComponentNavBgTaskNotif-test.tsx.snap | 36 +++++++++++- .../js/components/icons-components/PendingIcon.tsx | 16 +++++- server/sonar-web/src/main/less/init/type.less | 6 +- 9 files changed, 174 insertions(+), 80 deletions(-) (limited to 'server/sonar-web/src') 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 { }; 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 = ( + + ); + } return ( : undefined - }> + height={notifComponent ? 95 : 65} + notif={notifComponent}> { location={this.props.location} /> )} - + - - - ); + if (isInProgress) { + return ( + + + + + ); + } else if (isPending) { + return ( + + + + + ); + } else if (currentTask && currentTask.status === STATUSES.FAILED) { + return ( + + + + ); + } + 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( - } - mouseLeaveDelay={2}> -
  • - {' '} - {translate('background_task.status.IN_PROGRESS')} -
    • -     - ); - } else if (props.isPending) { - const tooltip = canSeeBackgroundTasks - ? translateWithParameters('component_navigation.status.pending.admin', backgroundTasksUrl) - : translate('component_navigation.status.pending'); - metaList.push( - } - mouseLeaveDelay={2}> -
  • - {translate('background_task.status.PENDING')} -
    • -     - ); - } - if (props.component.analysisDate) { metaList.push(
  • 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(); - 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()).toMatchSnapshot(); +it('renders background task error correctly', () => { + expect( + shallow( + + ) + ).toMatchSnapshot(); +}); + +it('renders background task pending info correctly', () => { + expect( + shallow( + + ) + ).toMatchSnapshot(); +}); + +it('renders background task in progress info correctly', () => { + expect( + shallow( + + ) + ).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`] = ` + } > @@ -13,3 +13,37 @@ exports[`renders background task notif correctly 1`] = ` /> `; + +exports[`renders background task in progress info correctly 1`] = ` + + + + +`; + +exports[`renders background task pending info correctly 1`] = ` + + + + +`; 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 ( - + 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; -- cgit v1.2.3