josh/header-changes-redux-a * Integrate new header into run details b…

…etter, fix a bunch of styling
jenkinsci · Jan 27, 2017 · aeffbbf · aeffbbf
1 parent fe18c70
commit aeffbbf
Show file tree

Hide file tree

Showing 14 changed files with 189 additions and 81 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -1,40 +1,41 @@
-import React, { Component, PropTypes } from 'react';
+import React, {Component, PropTypes} from 'react';
 import {
     ModalView,
     ModalBody,
     ModalHeader,
     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,
     buildPipelineUrl,
     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;
     if (!User.current().isAnonymous()) {
         let url = buildClassicConfigUrl(pipeline);
         link = (
             <a href={url} target="_blank" style={{ height: '24px' }}>
-                <Icon size={24} icon="settings" style={{ fill: '#fff' }} />
+                <Icon size={24} icon="settings" style={{ fill: '#fff' }}/>
             </a>
         );
     }
@@ -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 <PageLoading />;
@@ -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 = [
+            <TabLink to="/pipeline" {...base}>{t('rundetail.header.tab.pipeline', {
+                defaultValue: 'Pipeline',
+            })}</TabLink>,
+            <TabLink to="/changes" {...base}>{t('rundetail.header.tab.changes', {
+                defaultValue: 'Changes',
+            })}</TabLink>,
+            <TabLink to="/tests" {...base}>{t('rundetail.header.tab.tests', {
+                defaultValue: 'Tests',
+            })}</TabLink>,
+            <TabLink to="/artifacts" {...base}>{t('rundetail.header.tab.artifacts', {
+                defaultValue: 'Artifacts',
+            })}</TabLink>
+        ];
+
+        const runButton = [
+            <ReplayButton className="dark"
+                          runnable={this.props.pipeline}
+                          latestRun={currentRun}
+                          onNavigation={switchRunDetails}
+                          autoNavigate/>,
+            <RunButton className="dark"
+                       runnable={this.props.pipeline}
+                       latestRun={currentRun}
+                       buttonType="stop-only"/>,
+            classicConfigLink(pipeline)
+        ];
+
+        return (
+            <FullScreen isVisible={isVisible} afterClose={this.afterClose}>
+
+                <RunDetailsHeader
+                    t={ t }
+                    locale={locale}
+                    pipeline={pipeline}
+                    data={currentRun}
+                    runButton={runButton}
+                    topNavLinks={tabs}
+                    onOrganizationClick={this.navigateToOrganization}
+                    onNameClick={this.navigateToPipeline}
+                    onAuthorsClick={this.navigateToChanges}
+                    onCloseClick={this.closeButtonClicked}
+                />
+
+                <div className="RunDetails-content">
+                    {run && React.cloneElement(
+                        this.props.children,
+                        {
+                            locale: translate.lng,
+                            baseUrl,
+                            t: translate,
+                            result: currentRun,
+                            isMultiBranch: this.isMultiBranch, ...this.props
+                        }
+                    )}
+                </div>
+
+            </FullScreen>
+        );
+
+
         return (
             <ModalView
-              isVisible
-              transitionClass="expand-in"
-              transitionDuration={150}
-              result={status}
-              {...{ afterClose }}
+                isVisible
+                transitionClass="expand-in"
+                transitionDuration={150}
+                result={status}
+                {...{afterClose}}
             >
                 <ModalHeader>
                     <div>
                         <RunDetailsHeader
-                          t={ t }
-                          locale={locale}
-                          pipeline={pipeline}
-                          data={currentRun}
-                          onOrganizationClick={() => 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()}
                         />
                         <PageTabsOld base={baseUrl}>
                             <TabLink to="/pipeline">{t('rundetail.header.tab.pipeline', {
@@ -191,18 +267,18 @@ class RunDetails extends Component {
 
                         <div className="button-bar">
                             <ReplayButton
-                              className="dark"
-                              runnable={this.props.pipeline}
-                              latestRun={currentRun}
-                              onNavigation={switchRunDetails}
-                              autoNavigate
+                                className="dark"
+                                runnable={this.props.pipeline}
+                                latestRun={currentRun}
+                                onNavigation={switchRunDetails}
+                                autoNavigate
                             />
 
                             <RunButton
-                              className="dark"
-                              runnable={this.props.pipeline}
-                              latestRun={currentRun}
-                              buttonType="stop-only"
+                                className="dark"
+                                runnable={this.props.pipeline}
+                                latestRun={currentRun}
+                                buttonType="stop-only"
                             />
                             {classicConfigLink(pipeline)}
                         </div>
@@ -212,7 +288,13 @@ class RunDetails extends Component {
                     <div>
                         {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
+                            }
                         )}
                     </div>
                 </ModalBody>