diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js index f0f2d5d971..6e25a86ac8 100644 --- a/scm-ui-components/packages/ui-components/src/layout/Page.js +++ b/scm-ui-components/packages/ui-components/src/layout/Page.js @@ -20,8 +20,15 @@ class Page extends React.Component { return (
- - <Subtitle subtitle={subtitle} /> + <div className="columns"> + <div className="column"> + <Title title={title} /> + <Subtitle subtitle={subtitle} /> + </div> + <div className="column is-two-fifths is-pulled-right"> + {this.renderPageActions()} + </div> + </div> <ErrorNotification error={error} /> {this.renderContent()} </div> @@ -37,7 +44,26 @@ class Page extends React.Component<Props> { if (loading) { return <Loading />; } - return children; + + let content = []; + React.Children.forEach(children, child => { + if (child.type.name !== "PageActions") { + content.push(child); + } + }); + return content; + } + + renderPageActions() { + const { children } = this.props; + + let content = null; + React.Children.forEach(children, child => { + if (child.type.name === "PageActions") { + content = child; + } + }); + return content; } } diff --git a/scm-ui-components/packages/ui-components/src/layout/PageActions.js b/scm-ui-components/packages/ui-components/src/layout/PageActions.js new file mode 100644 index 0000000000..eb055a5605 --- /dev/null +++ b/scm-ui-components/packages/ui-components/src/layout/PageActions.js @@ -0,0 +1,28 @@ +//@flow +import * as React from "react"; +import Loading from "./../Loading"; + +type Props = { + loading?: boolean, + error?: Error, + children: React.Node +}; + +class PageActions extends React.Component<Props> { + render() { + return <>{this.renderContent()}</>; + } + + renderContent() { + const { loading, children, error } = this.props; + if (error) { + return null; + } + if (loading) { + return <Loading />; + } + return children; + } +} + +export default PageActions; diff --git a/scm-ui-components/packages/ui-components/src/layout/index.js b/scm-ui-components/packages/ui-components/src/layout/index.js index c93fe3b496..7708c45c99 100644 --- a/scm-ui-components/packages/ui-components/src/layout/index.js +++ b/scm-ui-components/packages/ui-components/src/layout/index.js @@ -3,6 +3,7 @@ export { default as Footer } from "./Footer.js"; export { default as Header } from "./Header.js"; export { default as Page } from "./Page.js"; +export { default as PageActions } from "./PageActions.js"; export { default as Subtitle } from "./Subtitle.js"; export { default as Title } from "./Title.js";