added pageactions for every page component

scm-ui-components/packages/ui-components/src/layout/Page.js

@@ -20,8 +20,15 @@ class Page extends React.Component<Props> {
     return (
       <section className="section">
         <div className="container">
-          <Title title={title} />
-          <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;
   }
 }
 

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;

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";