From 408ae7ddfe2bc8ea7206e5e424ebf4891c7962e5 Mon Sep 17 00:00:00 2001
From: CD Cabrera <ccabrera@redhat.com>
Date: Thu, 12 Nov 2020 01:31:01 -0500
Subject: [PATCH] feat(pageMessages): issues/502 section for messaging (#503)

* pageLayout, allow pageMessages
* pageMessages, messaging display
* pageToolbar, alignment with pageMessages
---
 .../__snapshots__/openshiftView.test.js.snap  | 12 ++++--
 .../__snapshots__/pageMesages.test.js.snap    | 23 +++++++++++
 .../__snapshots__/pageToolbar.test.js.snap    |  4 +-
 .../pageLayout/__tests__/pageMesages.test.js  | 18 +++++++++
 src/components/pageLayout/pageLayout.js       |  8 +++-
 src/components/pageLayout/pageMessages.js     | 38 +++++++++++++++++++
 src/components/pageLayout/pageToolbar.js      | 18 +++++++--
 .../__snapshots__/rhelView.test.js.snap       | 12 ++++--
 src/styles/_page-layout.scss                  |  2 +-
 9 files changed, 120 insertions(+), 15 deletions(-)
 create mode 100644 src/components/pageLayout/__tests__/__snapshots__/pageMesages.test.js.snap
 create mode 100644 src/components/pageLayout/__tests__/pageMesages.test.js
 create mode 100644 src/components/pageLayout/pageMessages.js

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
index d672ba161..c50a632e4 100644
--- a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
+++ b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -8,7 +8,9 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
   >
     t(curiosity-view.title, {"appName":"Subscription Watch","context":"OpenShift"})
   </PageHeader>
-  <PageToolbar>
+  <PageToolbar
+    className=""
+  >
     <Connect(Toolbar)
       filterOptions={
         Array [
@@ -161,7 +163,9 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
   >
     t(curiosity-view.title, {"appName":"Subscription Watch","context":"OpenShift"})
   </PageHeader>
-  <PageToolbar>
+  <PageToolbar
+    className=""
+  >
     <Connect(Toolbar)
       filterOptions={
         Array [
@@ -731,7 +735,9 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
   >
     t(curiosity-view.title, {"appName":"Subscription Watch","context":"OpenShift"})
   </PageHeader>
-  <PageToolbar>
+  <PageToolbar
+    className=""
+  >
     <Connect(Toolbar)
       filterOptions={
         Array [
diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageMesages.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageMesages.test.js.snap
new file mode 100644
index 000000000..34eb822ee
--- /dev/null
+++ b/src/components/pageLayout/__tests__/__snapshots__/pageMesages.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageMessages Component should render a basic component: basic 1`] = `
+<PageMessages
+  className="lorem"
+>
+  <Section
+    className="curiosity-page-messages lorem"
+  >
+    <section
+      className="curiosity-page-messages lorem"
+    >
+       
+      <span
+        className="test"
+      >
+        lorem
+      </span>
+       
+    </section>
+  </Section>
+</PageMessages>
+`;
diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageToolbar.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageToolbar.test.js.snap
index 16e7f46c9..2d3426b64 100644
--- a/src/components/pageLayout/__tests__/__snapshots__/pageToolbar.test.js.snap
+++ b/src/components/pageLayout/__tests__/__snapshots__/pageToolbar.test.js.snap
@@ -5,10 +5,10 @@ exports[`PageToolbar Component should render a basic component: basic 1`] = `
   className="lorem"
 >
   <Section
-    className="lorem"
+    className="curiosity-page-toolbar lorem"
   >
     <section
-      className="lorem"
+      className="curiosity-page-toolbar lorem"
     >
        
       <span
diff --git a/src/components/pageLayout/__tests__/pageMesages.test.js b/src/components/pageLayout/__tests__/pageMesages.test.js
new file mode 100644
index 000000000..1cdd66ded
--- /dev/null
+++ b/src/components/pageLayout/__tests__/pageMesages.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { PageMessages } from '../pageMessages';
+
+describe('PageMessages Component', () => {
+  it('should render a basic component', () => {
+    const props = {
+      className: 'lorem'
+    };
+    const component = mount(
+      <PageMessages {...props}>
+        <span className="test">lorem</span>
+      </PageMessages>
+    );
+
+    expect(component).toMatchSnapshot('basic');
+  });
+});
diff --git a/src/components/pageLayout/pageLayout.js b/src/components/pageLayout/pageLayout.js
index 4c0036969..78c9b7ac1 100644
--- a/src/components/pageLayout/pageLayout.js
+++ b/src/components/pageLayout/pageLayout.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { PageSection as Main } from '@patternfly/react-core';
 import { PageHeader } from './pageHeader';
+import { PageMessages } from './pageMessages';
 import { PageSection } from './pageSection';
 import { PageToolbar } from './pageToolbar';
 
@@ -19,9 +20,12 @@ import { PageToolbar } from './pageToolbar';
 const PageLayout = ({ children }) => (
   <React.Fragment>
     {React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === PageHeader)}
+    {React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === PageMessages)}
     {React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === PageToolbar)}
     <Main padding={{ default: 'noPadding' }} className="curiosity">
-      {React.Children.toArray(children).filter(child => child.type !== PageHeader && child.type !== PageToolbar)}
+      {React.Children.toArray(children).filter(
+        child => child.type !== PageHeader && child.type !== PageMessages && child.type !== PageToolbar
+      )}
     </Main>
   </React.Fragment>
 );
@@ -40,4 +44,4 @@ PageLayout.propTypes = {
  */
 PageLayout.defaultProps = {};
 
-export { PageLayout as default, PageLayout, PageHeader, PageSection, PageToolbar };
+export { PageLayout as default, PageLayout, PageHeader, PageMessages, PageSection, PageToolbar };
diff --git a/src/components/pageLayout/pageMessages.js b/src/components/pageLayout/pageMessages.js
new file mode 100644
index 000000000..1ad1ddbdc
--- /dev/null
+++ b/src/components/pageLayout/pageMessages.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Section } from '@redhat-cloud-services/frontend-components/components/cjs/Section';
+
+/**
+ * Render a platform toolbar section.
+ *
+ * @param {object} props
+ * @param {Node} props.children
+ * @param {string} props.className
+ * @returns {Node}
+ */
+const PageMessages = ({ children, className, ...props }) => (
+  <Section className={`curiosity-page-messages ${className}`} {...props}>
+    {children}
+  </Section>
+);
+
+/**
+ * Prop types.
+ *
+ * @type {{children: Node, className: string}}
+ */
+PageMessages.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string
+};
+
+/**
+ * Default props.
+ *
+ * @type {{className: string}}
+ */
+PageMessages.defaultProps = {
+  className: ''
+};
+
+export { PageMessages as default, PageMessages };
diff --git a/src/components/pageLayout/pageToolbar.js b/src/components/pageLayout/pageToolbar.js
index ae866d201..6cddf913d 100644
--- a/src/components/pageLayout/pageToolbar.js
+++ b/src/components/pageLayout/pageToolbar.js
@@ -7,22 +7,32 @@ import { Section } from '@redhat-cloud-services/frontend-components/components/c
  *
  * @param {object} props
  * @param {Node} props.children
+ * @param {string} props.className
  * @returns {Node}
  */
-const PageToolbar = ({ children, ...props }) => <Section {...props}>{children}</Section>;
+const PageToolbar = ({ children, className, ...props }) => (
+  <Section className={`curiosity-page-toolbar ${className}`} {...props}>
+    {children}
+  </Section>
+);
 
 /**
  * Prop types.
  *
- * @type {{children: Node}}
+ * @type {{children: Node, className: string}}
  */
 PageToolbar.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string
 };
 
 /**
  * Default props.
+ *
+ * @type {{className: string}}
  */
-PageToolbar.defaultProps = {};
+PageToolbar.defaultProps = {
+  className: ''
+};
 
 export { PageToolbar as default, PageToolbar };
diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
index b773d72f7..48cb07a4d 100644
--- a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
+++ b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -8,7 +8,9 @@ exports[`RhelView Component should display an alternate graph on query-string up
   >
     t(curiosity-view.title, {"appName":"Subscription Watch","context":"RHEL"})
   </PageHeader>
-  <PageToolbar>
+  <PageToolbar
+    className=""
+  >
     <Connect(Toolbar)
       filterOptions={
         Array [
@@ -146,7 +148,9 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
   >
     t(curiosity-view.title, {"appName":"Subscription Watch","context":"RHEL"})
   </PageHeader>
-  <PageToolbar>
+  <PageToolbar
+    className=""
+  >
     <Connect(Toolbar)
       filterOptions={
         Array [
@@ -673,7 +677,9 @@ exports[`RhelView Component should render a non-connected component: non-connect
   >
     t(curiosity-view.title, {"appName":"Subscription Watch","context":"RHEL"})
   </PageHeader>
-  <PageToolbar>
+  <PageToolbar
+    className=""
+  >
     <Connect(Toolbar)
       filterOptions={
         Array [
diff --git a/src/styles/_page-layout.scss b/src/styles/_page-layout.scss
index 0939b4733..0cdf6ef42 100644
--- a/src/styles/_page-layout.scss
+++ b/src/styles/_page-layout.scss
@@ -1,4 +1,4 @@
-.curiosity {
+.curiosity, .curiosity-page-messages, .curiosity-page-toolbar {
   background-color: var(--pf-global--BackgroundColor--100);
   min-width: 320px;
 }