From aeffbbf3cd08cd9f506c9010edd46a2dad2b966e Mon Sep 17 00:00:00 2001 From: Josh McDonald Date: Fri, 27 Jan 2017 17:26:12 +1000 Subject: [PATCH] josh/header-changes-redux-a * Integrate new header into run details better, fix a bunch of styling --- blueocean-core-js/package.json | 2 +- .../src/js/components/ResultPageHeader.jsx | 2 +- blueocean-core-js/src/less/header.less | 4 +- blueocean-dashboard/npm-shrinkwrap.json | 6 +- blueocean-dashboard/package.json | 2 +- .../src/main/js/components/FullScreen.jsx | 4 + .../src/main/js/components/RunDetails.jsx | 188 +++++++++++++----- .../main/js/components/RunDetailsHeader.jsx | 31 +-- .../stories/RunDetailsHeaderStories.js | 11 +- .../src/main/less/run-details-header.less | 4 + blueocean-personalization/npm-shrinkwrap.json | 6 +- blueocean-personalization/package.json | 2 +- blueocean-web/npm-shrinkwrap.json | 6 +- blueocean-web/package.json | 2 +- 14 files changed, 189 insertions(+), 81 deletions(-) diff --git a/blueocean-core-js/package.json b/blueocean-core-js/package.json index c09f0241031..b7bc778f864 100644 --- a/blueocean-core-js/package.json +++ b/blueocean-core-js/package.json @@ -1,6 +1,6 @@ { "name": "@jenkins-cd/blueocean-core-js", - "version": "0.0.53-jm-a", + "version": "0.0.53-jm-b", "description": "Shared JavaScript libraries for use with Jenkins Blue Ocean", "main": "dist/js/index.js", "scripts": { diff --git a/blueocean-core-js/src/js/components/ResultPageHeader.jsx b/blueocean-core-js/src/js/components/ResultPageHeader.jsx index 2e4b9097422..dab13d58a2c 100644 --- a/blueocean-core-js/src/js/components/ResultPageHeader.jsx +++ b/blueocean-core-js/src/js/components/ResultPageHeader.jsx @@ -46,7 +46,7 @@ export const ResultPageHeader = props => { const topNavLinks = _wrap(props.topNavLinks, 'nav'); const runButton = _wrap(props.runButton, 'div', { className: 'ResultPageHeader-run' }); - const classNames = ["ResultPageHeader"]; + const classNames = ['ResultPageHeader']; if (props.className) { classNames.push(props.className); } diff --git a/blueocean-core-js/src/less/header.less b/blueocean-core-js/src/less/header.less index 020a4eae18a..fb7f93ee211 100644 --- a/blueocean-core-js/src/less/header.less +++ b/blueocean-core-js/src/less/header.less @@ -54,8 +54,10 @@ .ResultPageHeader-run { padding-left: 1em; + display:flex; + align-items: center; - * { + &>*+* { margin-left: 1em; } diff --git a/blueocean-dashboard/npm-shrinkwrap.json b/blueocean-dashboard/npm-shrinkwrap.json index 58c1514c570..005f4f90db3 100644 --- a/blueocean-dashboard/npm-shrinkwrap.json +++ b/blueocean-dashboard/npm-shrinkwrap.json @@ -3,9 +3,9 @@ "version": "0.0.1", "dependencies": { "@jenkins-cd/blueocean-core-js": { - "version": "0.0.53-jm-a", - "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-a", - "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-a.tgz", + "version": "0.0.53-jm-b", + "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-b", + "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-b.tgz", "dependencies": { "react-router": { "version": "3.0.0", diff --git a/blueocean-dashboard/package.json b/blueocean-dashboard/package.json index f4e62047f34..e94c54b5ebc 100644 --- a/blueocean-dashboard/package.json +++ b/blueocean-dashboard/package.json @@ -39,7 +39,7 @@ "skin-deep": "0.16.0" }, "dependencies": { - "@jenkins-cd/blueocean-core-js": "0.0.53-jm-a", + "@jenkins-cd/blueocean-core-js": "0.0.53-jm-b", "@jenkins-cd/design-language": "0.0.102", "@jenkins-cd/js-extensions": "0.0.32", "@jenkins-cd/js-modules": "0.0.8", diff --git a/blueocean-dashboard/src/main/js/components/FullScreen.jsx b/blueocean-dashboard/src/main/js/components/FullScreen.jsx index d3c73077688..cb4f48ca400 100644 --- a/blueocean-dashboard/src/main/js/components/FullScreen.jsx +++ b/blueocean-dashboard/src/main/js/components/FullScreen.jsx @@ -41,6 +41,9 @@ export class FullScreen extends Component { this.transitionTimeout = setTimeout(() => { this.transitionTimeout = undefined; this.forceUpdate(); + if (this.props.afterClose) { + this.props.afterClose(); + } }, transitionDuration); } } @@ -89,6 +92,7 @@ FullScreen.propTypes = { isVisible: PropTypes.bool, children: PropTypes.node, style: PropTypes.object, + afterClose: PropTypes.func, }; FullScreen.defaultProps = { diff --git a/blueocean-dashboard/src/main/js/components/RunDetails.jsx b/blueocean-dashboard/src/main/js/components/RunDetails.jsx index 97b2436fdc3..91896f1377f 100644 --- a/blueocean-dashboard/src/main/js/components/RunDetails.jsx +++ b/blueocean-dashboard/src/main/js/components/RunDetails.jsx @@ -1,4 +1,4 @@ -import React, { Component, PropTypes } from 'react'; +import React, {Component, PropTypes} from 'react'; import { ModalView, ModalBody, @@ -6,9 +6,9 @@ import { PageTabsOld, TabLink, } from '@jenkins-cd/design-language'; -import { i18nTranslator, ReplayButton, RunButton } from '@jenkins-cd/blueocean-core-js'; +import {i18nTranslator, ReplayButton, RunButton} from '@jenkins-cd/blueocean-core-js'; -import { Icon } from '@jenkins-cd/react-material-icons'; +import {Icon} from '@jenkins-cd/react-material-icons'; import { buildOrganizationUrl, @@ -16,17 +16,18 @@ import { buildRunDetailsUrl, buildClassicConfigUrl, } from '../util/UrlUtils'; -import { MULTIBRANCH_PIPELINE } from '../Capabilities'; -import { RunDetailsHeader } from './RunDetailsHeader'; -import { RunRecord } from './records'; +import {MULTIBRANCH_PIPELINE} from '../Capabilities'; +import {RunDetailsHeader} from './RunDetailsHeader'; +import {RunRecord} from './records'; +import {FullScreen} from './FullScreen'; import PageLoading from './PageLoading'; -import { Paths, capable, locationService } from '@jenkins-cd/blueocean-core-js'; -import { observer } from 'mobx-react'; -import { User } from '@jenkins-cd/blueocean-core-js'; +import {Paths, capable, locationService} from '@jenkins-cd/blueocean-core-js'; +import {observer} from 'mobx-react'; +import {User} from '@jenkins-cd/blueocean-core-js'; -const { func, object, any, string } = PropTypes; +const {func, object, any, string} = PropTypes; -const { rest: RestPaths } = Paths; +const {rest: RestPaths} = Paths; const classicConfigLink = (pipeline) => { let link = null; @@ -34,7 +35,7 @@ const classicConfigLink = (pipeline) => { let url = buildClassicConfigUrl(pipeline); link = ( - + ); } @@ -72,7 +73,7 @@ class RunDetails extends Component { runId: props.params.runId, }); - this.context.activityService.fetchActivity(this.href, { useCache: true }); + this.context.activityService.fetchActivity(this.href, {useCache: true}); if (storePreviousRoute) { this.opener = locationService.previous; } @@ -81,26 +82,28 @@ class RunDetails extends Component { _didRunChange(oldParams, newParams) { return oldParams.organization !== newParams.organization || - oldParams.pipeline !== newParams.pipeline || - oldParams.branch !== newParams.branch || - oldParams.runId !== newParams.runId; + oldParams.pipeline !== newParams.pipeline || + oldParams.branch !== newParams.branch || + oldParams.runId !== newParams.runId; } - navigateToOrganization() { - const { organization } = this.props.pipeline; - const { location } = this.context; + navigateToOrganization = () => { + const {organization} = this.props.pipeline; + const {location} = this.context; const organizationUrl = buildOrganizationUrl(organization); location.pathname = organizationUrl; this.context.router.push(location); - } - navigateToPipeline() { - const { organization, fullName } = this.props.pipeline; - const { location } = this.context; + }; + + navigateToPipeline = () => { + const {organization, fullName} = this.props.pipeline; + const {location} = this.context; const pipelineUrl = buildPipelineUrl(organization, fullName); location.pathname = pipelineUrl; this.context.router.push(location); - } - navigateToChanges() { + }; + + navigateToChanges = () => { const { location, params: { @@ -114,7 +117,16 @@ class RunDetails extends Component { const changesUrl = buildRunDetailsUrl(organization, pipeline, branch, runId, 'changes'); location.pathname = changesUrl; this.context.router.push(location); - } + }; + + closeButtonClicked = () => { + console.log("TODO: CLOSE"); + }; + + afterClose = () => { + + }; + render() { const run = this.context.activityService.getActivity(this.href); // early out @@ -123,9 +135,8 @@ class RunDetails extends Component { return null; } - - const { router, location, params } = this.context; - const { pipeline, setTitle, t, locale } = this.props; + const {router, location, params} = this.context; + const {pipeline, setTitle, t, locale} = this.props; if (!run || !pipeline) { return ; @@ -148,31 +159,96 @@ class RunDetails extends Component { location.pathname = this.opener || fallbackUrl; // reset query /* - FIXME: reset query when you go back, we may want to store the whole location object in previous so we have a perfect prev. - this.opener would then be location and we the above location = this.opener || {pathname: fallbackUrl] + FIXME: reset query when you go back, we may want to store the whole location object in previous so we have a perfect prev. + this.opener would then be location and we the above location = this.opener || {pathname: fallbackUrl] */ location.query = null; router.push(location); }; + const isVisible = true; // TODO: Change this on close button click? Set on initial render? + + const base = {base: baseUrl}; + + const tabs = [ + {t('rundetail.header.tab.pipeline', { + defaultValue: 'Pipeline', + })}, + {t('rundetail.header.tab.changes', { + defaultValue: 'Changes', + })}, + {t('rundetail.header.tab.tests', { + defaultValue: 'Tests', + })}, + {t('rundetail.header.tab.artifacts', { + defaultValue: 'Artifacts', + })} + ]; + + const runButton = [ + , + , + classicConfigLink(pipeline) + ]; + + return ( + + + + +
+ {run && React.cloneElement( + this.props.children, + { + locale: translate.lng, + baseUrl, + t: translate, + result: currentRun, + isMultiBranch: this.isMultiBranch, ...this.props + } + )} +
+ + + ); + + return (
this.navigateToOrganization()} - onNameClick={() => this.navigateToPipeline()} - onAuthorsClick={() => this.navigateToChanges()} + t={ t } + locale={locale} + pipeline={pipeline} + data={currentRun} + onOrganizationClick={() => this.navigateToOrganization()} + onNameClick={() => this.navigateToPipeline()} + onAuthorsClick={() => this.navigateToChanges()} /> {t('rundetail.header.tab.pipeline', { @@ -191,18 +267,18 @@ class RunDetails extends Component {
{classicConfigLink(pipeline)}
@@ -212,7 +288,13 @@ class RunDetails extends Component {
{run && React.cloneElement( this.props.children, - { locale: translate.lng, baseUrl, t: translate, result: currentRun, isMultiBranch: this.isMultiBranch, ...this.props } + { + locale: translate.lng, + baseUrl, + t: translate, + result: currentRun, + isMultiBranch: this.isMultiBranch, ...this.props + } )}
diff --git a/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx b/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx index 60cb9a51989..a598d5c90f2 100644 --- a/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx +++ b/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx @@ -18,7 +18,9 @@ class RunDetailsHeader extends Component { onCloseClick, onAuthorsClick, onOrganizationClick, - onNameClick + onNameClick, + topNavLinks, + runButton, } = this.props; const {fullDisplayName} = pipeline; @@ -94,7 +96,12 @@ class RunDetailsHeader extends Component { ); return ( - +
{ branchSourceDetails } { commitSourceDetails } @@ -111,18 +118,18 @@ class RunDetailsHeader extends Component { } } -const { object, func, string } = PropTypes; - RunDetailsHeader.propTypes = { - data: object.isRequired, - pipeline: object, - colors: object, - onOrganizationClick: func, - onNameClick: func, - onAuthorsClick: func, + data: PropTypes.object.isRequired, + pipeline: PropTypes.object, + colors: PropTypes.object, + onOrganizationClick: PropTypes.func, + onNameClick: PropTypes.func, + onAuthorsClick: PropTypes.func, onCloseClick: PropTypes.func, - t: func, - locale: string, + t: PropTypes.func, + locale: PropTypes.string, + topNavLinks: PropTypes.node, + runButton: PropTypes.node, }; export { RunDetailsHeader }; diff --git a/blueocean-dashboard/src/main/js/components/stories/RunDetailsHeaderStories.js b/blueocean-dashboard/src/main/js/components/stories/RunDetailsHeaderStories.js index f1886906c27..5d952ad0cea 100644 --- a/blueocean-dashboard/src/main/js/components/stories/RunDetailsHeaderStories.js +++ b/blueocean-dashboard/src/main/js/components/stories/RunDetailsHeaderStories.js @@ -40,6 +40,14 @@ storiesOf('Run Details Header', module) ; function someChanges() { + + const topNavLinks = [ + Pipeline, + Changes, + Tests, + Artifacts, + ]; + return ( + onAuthorsClick={ action('button-click')} + topNavLinks={topNavLinks}/> ); } diff --git a/blueocean-dashboard/src/main/less/run-details-header.less b/blueocean-dashboard/src/main/less/run-details-header.less index 937d2dd4343..e45ae3b513d 100644 --- a/blueocean-dashboard/src/main/less/run-details-header.less +++ b/blueocean-dashboard/src/main/less/run-details-header.less @@ -34,3 +34,7 @@ .RunDetailsHeader-authors { flex-grow: 1; } + +.RunDetails-content { + margin: 21px 42px; +} diff --git a/blueocean-personalization/npm-shrinkwrap.json b/blueocean-personalization/npm-shrinkwrap.json index f1330a7bd66..422d52d101e 100644 --- a/blueocean-personalization/npm-shrinkwrap.json +++ b/blueocean-personalization/npm-shrinkwrap.json @@ -3,9 +3,9 @@ "version": "0.0.2-unpublished", "dependencies": { "@jenkins-cd/blueocean-core-js": { - "version": "0.0.53-jm-a", - "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-a", - "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-a.tgz", + "version": "0.0.53-jm-b", + "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-b", + "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-b.tgz", "dependencies": { "react-router": { "version": "3.0.0", diff --git a/blueocean-personalization/package.json b/blueocean-personalization/package.json index 9de5f6bb357..b21abb6ee9d 100644 --- a/blueocean-personalization/package.json +++ b/blueocean-personalization/package.json @@ -35,7 +35,7 @@ "react-addons-test-utils": "15.3.2" }, "dependencies": { - "@jenkins-cd/blueocean-core-js": "0.0.53-jm-a", + "@jenkins-cd/blueocean-core-js": "0.0.53-jm-b", "@jenkins-cd/design-language": "0.0.102", "@jenkins-cd/js-extensions": "0.0.32", "@jenkins-cd/js-modules": "0.0.8", diff --git a/blueocean-web/npm-shrinkwrap.json b/blueocean-web/npm-shrinkwrap.json index f53220d87e3..887d2138d35 100644 --- a/blueocean-web/npm-shrinkwrap.json +++ b/blueocean-web/npm-shrinkwrap.json @@ -3,9 +3,9 @@ "version": "0.0.1", "dependencies": { "@jenkins-cd/blueocean-core-js": { - "version": "0.0.53-jm-a", - "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-a", - "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-a.tgz", + "version": "0.0.53-jm-b", + "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-b", + "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-b.tgz", "dependencies": { "history": { "version": "3.2.1", diff --git a/blueocean-web/package.json b/blueocean-web/package.json index de5e8019d85..09a957c149f 100644 --- a/blueocean-web/package.json +++ b/blueocean-web/package.json @@ -29,7 +29,7 @@ "zombie": "4.2.1" }, "dependencies": { - "@jenkins-cd/blueocean-core-js": "0.0.53-jm-a", + "@jenkins-cd/blueocean-core-js": "0.0.53-jm-b", "@jenkins-cd/design-language": "0.0.102", "@jenkins-cd/js-extensions": "0.0.32", "@jenkins-cd/js-modules": "0.0.8",