Squashed commit of the following:

commit 39d01d216b8d3abb10a0da4ac5ac8eb65824c176 Author: Josh McDonald <josh@joshmcdonald.info> Date: Thu Jan 19 15:32:31 2017 +1000 . commit f7ff19f7fb4f6445c1a5e78cafc8b9dda585d811 Author: Josh McDonald <josh@joshmcdonald.info> Date: Thu Jan 19 13:52:13 2017 +1000 josh/header-changes-redux * Publish beta of core-js again commit 5243cd8eb4b79b13d0af8a622bcd789fa9210e51 Author: Josh McDonald <josh@joshmcdonald.info> Date: Wed Jan 18 17:19:15 2017 +1000 josh/header-changes-redux * Fix an issue in the header dealing with base url for page tabs commit 4caf18021c92f7e908aa4dd95514a7e6b2c53a79 Author: Josh McDonald <josh@joshmcdonald.info> Date: Wed Jan 18 14:29:20 2017 +1000 josh/header-changes-redux * Apply new header to PipelinePage commit 54b1d04ab357d6fc89547038f5fd99d755037f9c Author: Josh McDonald <josh@joshmcdonald.info> Date: Tue Jan 17 17:35:12 2017 +1000 josh/header-changes-redux * New header for Pipelines / Dashboard screen commit d94e43d0756efa2fda4b8a360354e4d3714c4495 Author: Josh McDonald <josh@joshmcdonald.info> Date: Tue Jan 17 16:43:32 2017 +1000 josh/header-changes-redux * Fix a typo in core-js, new beta publish commit 5626addfdecebc89b5f3a651dfae9b2483396567 Author: Josh McDonald <josh@joshmcdonald.info> Date: Tue Jan 17 13:22:19 2017 +1000 josh/header-changes-redux * Switch to new site header commit 5811ed7e1b783303421e7f850c744fdb8108a791 Author: Josh McDonald <josh@joshmcdonald.info> Date: Tue Jan 17 11:34:17 2017 +1000 josh/header-changes-redux * Actually export the GD new component, maybe try that? Re-publish beta, and new beta dep commit c9b2f10b93cda758ea8d3730e5b9aa6a4b8cda46 Author: Josh McDonald <josh@joshmcdonald.info> Date: Mon Jan 16 17:53:20 2017 +1000 josh/header-changes-redux * Import beta of core-js commit 660bbbfb95ae16fa8cea5d95a1593de3d9511574 Author: Josh McDonald <josh@joshmcdonald.info> Date: Mon Jan 16 17:46:46 2017 +1000 josh/header-changes-redux * Split page content header into site + page header components, bump version to beta commit d73720d16bdd3dcbe1452e0befffee4b0851b2ba Author: Josh McDonald <josh@joshmcdonald.info> Date: Mon Jan 16 16:07:27 2017 +1000 josh/header-changes-redux * Update to use latest release JDL
jenkinsci · Jan 20, 2017 · c0fbf94 · c0fbf94
1 parent 362c599
commit c0fbf94
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 111 deletions.
diff --git a/blueocean-core-js/src/js/components/ContentPageHeader.jsx b/blueocean-core-js/src/js/components/ContentPageHeader.jsx
@@ -9,27 +9,47 @@ import {
 import { BlueLogo } from './BlueLogo';
 
 // Wrap an array of elements in a parent element without requiring a bunch "key" props
+// FIXME: This should be strengthened a little, and promoted to JDL with some tests
 export function _wrap(children, elementOrComponent = 'div', props = {}) {
     if (!children) {
         return null;
     }
+
     const childArray = Array.isArray(children) ? children : [children];
     return React.createElement(elementOrComponent, props, ...childArray);
 }
 
-export const ContentPageHeader = props => {
+export const SiteHeader = props => {
     const topNavLinks = _wrap(props.topNavLinks, 'nav');
     const userComponents = _wrap(props.userComponents, 'div', { className: 'ContentPageHeader-user' });
-    const pageTabLinks = _wrap(props.pageTabLinks, PageTabs);
 
     return (
-        <BasicHeader classname="ContentPageHeader">
+        <BasicHeader className="ContentPageHeader">
             <TopNav>
                 <BlueLogo />
                 <div className="u-flex-grow" />
                 { topNavLinks }
                 { userComponents }
             </TopNav>
+        </BasicHeader>
+    );
+};
+
+SiteHeader.propTypes = {
+    topNavLinks: PropTypes.node,
+    userComponents: PropTypes.node,
+    children: PropTypes.node,
+};
+
+export const ContentPageHeader = props => {
+    const pageTabLinks = _wrap(
+        props.pageTabLinks,
+        PageTabs,
+        { base: props.pageTabBase }
+    );
+
+    return (
+        <BasicHeader className="ContentPageHeader">
             <HeaderDetails>
                 <div className="ContentPageHeader-main u-flex-grow">
                     { props.children }
@@ -41,10 +61,9 @@ export const ContentPageHeader = props => {
 };
 
 ContentPageHeader.propTypes = {
-    topNavLinks: PropTypes.node,
-    userComponents: PropTypes.node,
     pageTabLinks: PropTypes.node,
     children: PropTypes.node,
+    pageTabBase: PropTypes.string,
 };
 
 export default ContentPageHeader;
diff --git a/blueocean-core-js/src/js/components/stories/ContentPageHeaderStories.js b/blueocean-core-js/src/js/components/stories/ContentPageHeaderStories.js
@@ -4,6 +4,7 @@ import React, { Component, PropTypes } from 'react';
 import { storiesOf } from '@kadira/storybook';
 import { BlueLogo } from '../BlueLogo';
 import { ContentPageHeader } from '../ContentPageHeader';
+import { SiteHeader } from '../ContentPageHeader';
 import { ResultPageHeader } from '../ResultPageHeader';
 import { LiveStatusIndicator, WeatherIcon } from '@jenkins-cd/design-language';
 
@@ -46,11 +47,12 @@ function pageHeaderDashboard() {
     ];
 
     return (
-        <ContentPageHeader topNavLinks={topNavLinks}
-          userComponents={userComponents}
-    >
-            <h1>Dashboard</h1>
-        </ContentPageHeader>
+        <div>
+            <SiteHeader topNavLinks={topNavLinks} userComponents={userComponents}/>
+            <ContentPageHeader>
+                <h1>Dashboard</h1>
+            </ContentPageHeader>
+        </div>
     );
 }
 
@@ -75,13 +77,13 @@ function pageHeaderPipeline() {
     ];
 
     return (
-        <ContentPageHeader topNavLinks={topNavLinks}
-          userComponents={userComponents}
-          pageTabLinks={pageTabLinks}
-    >
-            <WeatherIcon score={100} />
-            <h1>Lorem / Ipsum / Pipelineum</h1>
-        </ContentPageHeader>
+        <div>
+            <SiteHeader topNavLinks={topNavLinks} userComponents={userComponents}/>
+            <ContentPageHeader pageTabLinks={pageTabLinks}>
+                <WeatherIcon score={100} />
+                <h1>Lorem / Ipsum / <a href="#">Pipelineum</a></h1>
+            </ContentPageHeader>
+        </div>
     );
 }
 

diff --git a/blueocean-core-js/src/js/components/stories/index.js b/blueocean-core-js/src/js/components/stories/index.js
@@ -6,4 +6,4 @@ ext.store.init({
     },
 });
 
-require('./ContentPageHeaderStories'); // TODO: Split this into two
+require('./ContentPageHeaderStories');
diff --git a/blueocean-core-js/src/js/index.js b/blueocean-core-js/src/js/index.js
@@ -51,7 +51,7 @@ export {
     BlueLogo,
     BlueOceanIcon,
 } from './components/BlueLogo';
-export { ContentPageHeader } from './components/ContentPageHeader';
+export { ContentPageHeader, SiteHeader } from './components/ContentPageHeader';
 export { ResultPageHeader } from './components/ResultPageHeader';
 
 // Create and export the SSE connection that will be shared by other

diff --git a/blueocean-dashboard/src/main/js/components/PipelinePage.jsx b/blueocean-dashboard/src/main/js/components/PipelinePage.jsx
@@ -10,7 +10,7 @@ import {
     TabLink,
     WeatherIcon,
 } from '@jenkins-cd/design-language';
-import { i18nTranslator, NotFound, User, Paths } from '@jenkins-cd/blueocean-core-js';
+import { i18nTranslator, NotFound, User, Paths, ContentPageHeader } from '@jenkins-cd/blueocean-core-js';
 import { Icon } from '@jenkins-cd/react-material-icons';
 import PageLoading from './PageLoading';
 import { buildOrganizationUrl, buildPipelineUrl, buildClassicConfigUrl } from '../util/UrlUtils';
@@ -74,40 +74,43 @@ export class PipelinePage extends Component {
         setTitle(`${organization} / ${name}`);
 
         const baseUrl = buildPipelineUrl(organization, fullName);
-        return (
-            <Page>
-                <PageHeader>
-                    {!isReady && <PageLoading duration={2000} />}
-                    {!isReady &&
-                    <Title>
-                        <h1><Link to={orgUrl}>{organization}</Link>
-                        <span> / </span></h1>
-                    </Title>}
-                    {isReady &&
-                    <Title>
-                        <WeatherIcon score={pipeline.weatherScore} size="large" />
-                        <h1>
-                            <Link to={orgUrl} query={location.query}>{organization}</Link>
-                            <span>&nbsp;/&nbsp;</span>
+
+        const pageTabLinks = [
+            <TabLink to="/activity">{ translate('pipelinedetail.common.tab.activity', { defaultValue: 'Activity' }) }</TabLink>,
+            <TabLink to="/branches">{ translate('pipelinedetail.common.tab.branches', { defaultValue: 'Branches' }) }</TabLink>,
+            <TabLink to="/pr">{ translate('pipelinedetail.common.tab.pullrequests', { defaultValue: 'Pull Requests' }) }</TabLink>,
+        ];
+
+        const pageHeader = isReady ? (
+                <ContentPageHeader pageTabBase={baseUrl} pageTabLinks={pageTabLinks}>
+                    <WeatherIcon score={pipeline.weatherScore} />
+                    <h1>
+                        <Link to={orgUrl} query={location.query}>{organization}</Link>
+                        <span>&nbsp;/&nbsp;</span>
                             <Link to={activityUrl} query={location.query}>
                                 <ExpandablePath path={fullDisplayName} hideFirst className="dark-theme" iconSize={20} />
                             </Link>
-                        </h1>
-                        <Extensions.Renderer
-                          extensionPoint="jenkins.pipeline.detail.header.action"
-                          store={this.context.store}
-                          pipeline={pipeline}
-                        />
-                        {classicConfigLink(pipeline)}
-                    </Title>
-                    }
-
-                    <PageTabsOld base={baseUrl}>
-                        <TabLink to="/activity">{ translate('pipelinedetail.common.tab.activity', { defaultValue: 'Activity' }) }</TabLink>
-                        <TabLink to="/branches">{ translate('pipelinedetail.common.tab.branches', { defaultValue: 'Branches' }) }</TabLink>
-                        <TabLink to="/pr">{ translate('pipelinedetail.common.tab.pullrequests', { defaultValue: 'Pull Requests' }) }</TabLink>
-                    </PageTabsOld>
-                </PageHeader>
+                    </h1>
+                    <Extensions.Renderer
+                        extensionPoint="jenkins.pipeline.detail.header.action"
+                        store={this.context.store}
+                        pipeline={pipeline}
+                    />
+                    {classicConfigLink(pipeline)}
+                </ContentPageHeader>
+            ) : (
+                <ContentPageHeader pageTabBase={baseUrl} pageTabLinks={pageTabLinks}>
+                    <h1>
+                        <Link to={orgUrl}>{organization}</Link>
+                        <span> / </span>
+                    </h1>
+                </ContentPageHeader>
+            );
+
+        return (
+            <Page>
+                { pageHeader }
+                {!isReady && <PageLoading duration={2000} />}
                 {isReady && React.cloneElement(this.props.children, { pipeline, setTitle, t: translate, locale: translate.lng })}
             </Page>
         );

diff --git a/blueocean-dashboard/src/main/js/components/Pipelines.jsx b/blueocean-dashboard/src/main/js/components/Pipelines.jsx
@@ -1,14 +1,13 @@
-
-import React, { Component, PropTypes } from 'react';
-import { Link } from 'react-router';
-import { Page, PageHeader, Table, Title } from '@jenkins-cd/design-language';
-import { i18nTranslator } from '@jenkins-cd/blueocean-core-js';
+import React, {Component, PropTypes} from 'react';
+import {Link} from 'react-router';
+import {Page, PageHeader, Table, Title} from '@jenkins-cd/design-language';
+import {i18nTranslator, ContentPageHeader} from '@jenkins-cd/blueocean-core-js';
 import Extensions from '@jenkins-cd/js-extensions';
 import CreatePipelineLink from './CreatePipelineLink';
 import PipelineRowItem from './PipelineRowItem';
 import PageLoading from './PageLoading';
 
-import { observer } from 'mobx-react';
+import {observer} from 'mobx-react';
 
 const translate = i18nTranslator('blueocean-dashboard');
 
@@ -40,81 +39,80 @@ export class Pipelines extends Component {
 
     render() {
         const pipelines = this.pager.data;
-        const { organization, location = {} } = this.context.params;
+        const {organization, location = {}} = this.context.params;
 
         const orgLink = organization ?
             <Link
-              to={`organizations/${organization}`}
-              query={location.query}
+                to={`organizations/${organization}`}
+                query={location.query}
             >
                 {organization}
             </Link> : '';
 
         const headers = [
-            { label: translate('home.pipelineslist.header.name', { defaultValue: 'Name' }), className: 'name-col' },
-            translate('home.pipelineslist.header.health', { defaultValue: 'Health' }),
-            translate('home.pipelineslist.header.branches', { defaultValue: 'Branches' }),
-            translate('home.pipelineslist.header.pullrequests', { defaultValue: 'PR' }),
-            { label: '', className: 'actions-col' },
+            {label: translate('home.pipelineslist.header.name', {defaultValue: 'Name'}), className: 'name-col'},
+            translate('home.pipelineslist.header.health', {defaultValue: 'Health'}),
+            translate('home.pipelineslist.header.branches', {defaultValue: 'Branches'}),
+            translate('home.pipelineslist.header.pullrequests', {defaultValue: 'PR'}),
+            {label: '', className: 'actions-col'},
         ];
         return (
             <Page>
-                <PageHeader>
-                    {!pipelines || this.pager.pending && <PageLoading duration={2000} />}
-                    <Title>
+                <ContentPageHeader>
+                    <div className="u-flex-grow">
                         <h1>
-                            <Link
-                              to="/"
-                              query={location.query}
-                            >
-                                { translate('home.header.dashboard', { defaultValue: 'Dashboard' }) }
+                            <Link to="/" query={location.query}>
+                                { translate('home.header.dashboard', {defaultValue: 'Dashboard'}) }
                             </Link>
                             { organization && ' / ' }
                             { organization && orgLink }
                         </h1>
-                        <Extensions.Renderer extensionPoint="jenkins.pipeline.create.action">
-                            <CreatePipelineLink />
-                        </Extensions.Renderer>
-                    </Title>
-                </PageHeader>
+                    </div>
+                    <Extensions.Renderer extensionPoint="jenkins.pipeline.create.action">
+                        <CreatePipelineLink />
+                    </Extensions.Renderer>
+                </ContentPageHeader>
+
+                {!pipelines || this.pager.pending && <PageLoading duration={2000}/>}
+
                 <main>
                     <article>
                         { /* TODO: need to adjust Extensions to make store available */ }
                         <Extensions.Renderer
-                          extensionPoint="jenkins.pipeline.list.top"
-                          store={this.context.store}
-                          router={this.context.router}
+                            extensionPoint="jenkins.pipeline.list.top"
+                            store={this.context.store}
+                            router={this.context.router}
                         />
                         <Table
-                          className="pipelines-table"
-                          headers={headers}
+                            className="pipelines-table"
+                            headers={headers}
                         >
                             { pipelines &&
-                                pipelines.map(pipeline => {
-                                    const key = pipeline._links.self.href;
-                                    return (
-                                        <PipelineRowItem
-                                          t={translate}
-                                          key={key} pipeline={pipeline}
-                                          showOrganization={!organization}
-                                        />
-                                    );
-                                })
+                            pipelines.map(pipeline => {
+                                const key = pipeline._links.self.href;
+                                return (
+                                    <PipelineRowItem
+                                        t={translate}
+                                        key={key} pipeline={pipeline}
+                                        showOrganization={!organization}
+                                    />
+                                );
+                            })
                             }
                         </Table>
 
                         { pipelines &&
-                            <button disabled={!this.pager.hasMore} className="btn-show-more btn-secondary" onClick={() => this.pager.fetchNextPage()}>
-                                {this.pager.pending ? translate('common.pager.loading', { defaultValue: 'Loading...' }) : translate('common.pager.more', { defaultValue: 'Show more' })}
-                            </button>
+                        <button disabled={!this.pager.hasMore} className="btn-show-more btn-secondary" onClick={() => this.pager.fetchNextPage()}>
+                            {this.pager.pending ? translate('common.pager.loading', {defaultValue: 'Loading...'}) : translate('common.pager.more', {defaultValue: 'Show more'})}
+                        </button>
                         }
                     </article>
                 </main>
             </Page>);
     }
 }
 
-const { func, object } = PropTypes;
+const {func, object} = PropTypes;
 
 Pipelines.contextTypes = {
     config: object,

diff --git a/blueocean-web/src/main/js/main.jsx b/blueocean-web/src/main/js/main.jsx
@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { render } from 'react-dom';
 import { Router, Route, Link, useRouterHistory, IndexRedirect } from 'react-router';
 import { createHistory } from 'history';
-import { i18nTranslator, AppConfig, Security, UrlConfig, Utils, sseService, locationService, NotFound } from '@jenkins-cd/blueocean-core-js';
+import { i18nTranslator, AppConfig, Security, UrlConfig, Utils, sseService, locationService, NotFound, SiteHeader } from '@jenkins-cd/blueocean-core-js';
 import Extensions from '@jenkins-cd/js-extensions';
 
 import { Provider, configureStore, combineReducers} from './redux';
@@ -66,23 +66,27 @@ class App extends Component {
     render() {
         const { location } = this.context;
 
-        var pipeCaption = translate('pipelines', {
+
+        const pipeCaption = translate('pipelines', {
             defaultValue: 'Pipelines',
         });
+
+        const topNavLinks = [
+            <Link query={location.query} to="/pipelines">{pipeCaption}</Link>,
+            <AdminLink t={translate} />,
+        ];
+
+        const userComponents = [
+            <div className="button-bar layout-small inverse">
+                { loginOrLogout(translate) }
+            </div>
+        ];
+
         return (
             <div className="Site">
-                <header className="Site-header">
-                    <div className="global-header">
-                        <Extensions.Renderer extensionPoint="jenkins.logo.top"/>
-                        <nav>
-                            <Link query={location.query} to="/pipelines">{pipeCaption}</Link>
-                            <AdminLink t={translate} />
-                        </nav>
-                        <div className="button-bar layout-small inverse">
-                            { loginOrLogout(translate) }
-                        </div>
-                    </div>
-                </header>
+
+                <SiteHeader topNavLinks={topNavLinks} userComponents={userComponents}/>
+
                 <main className="Site-content">
                     {this.props.children /* Set by react-router */ }
                 </main>