From fbf14cd130c6f7f73697fad28730da485cb7c946 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Wed, 19 Sep 2018 15:52:39 -0230
Subject: Prevent loading screen from overlaying the app bar

Refs #4417

This change is functional copy of 3893469 that solves the problem in a way
that doesn't depend on the height of the app bar since the app bar isn't a
fixed height in the smaller views.
---
 ui/app/components/page-container/index.scss | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/components/page-container')

diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 14cdbacd3..61434cbcf 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -182,5 +182,7 @@
     max-height: 82vh;
     min-height: 570px;
     flex: 0 0 auto;
+    margin-right: auto;
+    margin-left: auto;
   }
 }
-- 
cgit v1.2.3


From a0a57c24fd639c4808ed3e083089b9f1fb3373e6 Mon Sep 17 00:00:00 2001
From: tmashuang <thomas.b.huang@gmail.com>
Date: Mon, 24 Sep 2018 11:28:04 -0500
Subject: Some Ui tests

---
 .../tests/page-container-footer.component.test.js  | 69 ++++++++++++++++++
 .../tests/page-container-header.component.test.js  | 82 ++++++++++++++++++++++
 2 files changed, 151 insertions(+)

(limited to 'ui/app/components/page-container')

diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
index e69de29bb..5e5dbf00b 100644
--- a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
+++ b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
@@ -0,0 +1,69 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import Button from '../../../button'
+import PageFooter from '../page-container-footer.component'
+
+describe('Page Footer', () => {
+  let wrapper
+  const onCancel = sinon.spy()
+  const onSubmit = sinon.spy()
+
+  beforeEach(() => {
+    wrapper = shallow(<PageFooter
+      onCancel = {onCancel}
+      onSubmit = {onSubmit}
+      cancelText = {'Cancel'}
+      submitText = {'Submit'}
+      disabled = {false}
+      submitButtonType = {'Test Type'}
+    />)
+  })
+
+  it('renders page container footer', () => {
+    assert.equal(wrapper.find('.page-container__footer').length, 1)
+  })
+
+  it('renders two button components', () => {
+    assert.equal(wrapper.find(Button).length, 2)
+  })
+
+  describe('Cancel Button', () => {
+
+    it('has button type of default', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').first().prop('type'), 'default')
+    })
+
+    it('has children text of Cancel', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').first().prop('children'), 'Cancel')
+    })
+
+    it('should call cancel when click is simulated', () => {
+      wrapper.find('.page-container__footer-button').first().prop('onClick')()
+      assert.equal(onCancel.callCount, 1)
+    })
+
+  })
+
+  describe('Submit Button', () => {
+
+    it('assigns button type based on props', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').last().prop('type'), 'Test Type')
+    })
+
+    it('has disabled prop', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').last().prop('disabled'), false)
+    })
+
+    it('has children text when submitText prop exists', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').last().prop('children'), 'Submit')
+    })
+
+    it('should call submit when click is simulated', () => {
+      wrapper.find('.page-container__footer-button').last().prop('onClick')()
+      assert.equal(onSubmit.callCount, 1)
+    })
+  })
+
+})
diff --git a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
index e69de29bb..59304b2bd 100644
--- a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
+++ b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import PageContainerHeader from '../page-container-header.component'
+
+describe('Page Container Header', () => {
+  let wrapper, style, onBackButtonClick, onClose
+
+  beforeEach(() => {
+    style = {test: 'style'}
+    onBackButtonClick = sinon.spy()
+    onClose = sinon.spy()
+
+    wrapper = shallow(<PageContainerHeader
+      showBackButton = {true}
+      onBackButtonClick = {onBackButtonClick}
+      backButtonStyles = {style}
+      title = {'Test Title'}
+      subtitle = {'Test Subtitle'}
+      tabs = {'Test Tab'}
+      onClose = {onClose}
+    />)
+  })
+
+  describe('Render Header Row', () => {
+
+    it('renders back button', () => {
+      assert.equal(wrapper.find('.page-container__back-button').length, 1)
+      assert.equal(wrapper.find('.page-container__back-button').text(), 'Back')
+    })
+
+    it('ensures style prop', () => {
+      assert.equal(wrapper.find('.page-container__back-button').props().style, style)
+    })
+
+    it('should call back button when click is simulated', () => {
+      wrapper.find('.page-container__back-button').prop('onClick')()
+      assert.equal(onBackButtonClick.callCount, 1)
+    })
+  })
+
+  describe('Render', () => {
+    let header, headerRow, pageTitle, pageSubtitle, pageClose, pageTab
+
+    beforeEach(() => {
+      header = wrapper.find('.page-container__header--no-padding-bottom')
+      headerRow = wrapper.find('.page-container__header-row')
+      pageTitle = wrapper.find('.page-container__title')
+      pageSubtitle = wrapper.find('.page-container__subtitle')
+      pageClose = wrapper.find('.page-container__header-close')
+      pageTab = wrapper.find('.page-container__tabs')
+    })
+
+    it('renders page container', () => {
+      assert.equal(header.length, 1)
+      assert.equal(headerRow.length, 1)
+      assert.equal(pageTitle.length, 1)
+      assert.equal(pageSubtitle.length, 1)
+      assert.equal(pageClose.length, 1)
+      assert.equal(pageTab.length, 1)
+    })
+
+    it('renders title', () => {
+      assert.equal(pageTitle.text(), 'Test Title')
+    })
+
+    it('renders subtitle', () => {
+      assert.equal(pageSubtitle.text(), 'Test Subtitle')
+    })
+
+    it('renders tabs', () => {
+      assert.equal(pageTab.text(), 'Test Tab')
+    })
+
+    it('should call close when click is simulated', () => {
+      pageClose.prop('onClick')()
+      assert.equal(onClose.callCount, 1)
+    })
+  })
+
+})
-- 
cgit v1.2.3


From 2e5a09e28c07b2b3865d3eb0112d8705e99f572d Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 24 Sep 2018 00:47:54 -0230
Subject: Have PageContainerFooter take children node

---
 ui/app/components/page-container/index.scss        | 27 ++++++++++++-
 .../page-container-footer.component.js             | 46 +++++++++++++---------
 .../tests/page-container-footer.component.test.js  | 12 +++++-
 3 files changed, 64 insertions(+), 21 deletions(-)

(limited to 'ui/app/components/page-container')

diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 61434cbcf..b7bf1b8b5 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -43,10 +43,9 @@
 
   &__footer {
     display: flex;
-    flex-flow: row;
+    flex-flow: column;
     justify-content: center;
     border-top: 1px solid $geyser;
-    padding: 16px;
     flex: 0 0 auto;
 
     .btn-default,
@@ -55,6 +54,30 @@
     }
   }
 
+  &__footer-header {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    padding: 16px;
+    flex: 0 0 auto;
+  }
+
+  &__footer-footer {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-around;
+    padding: 0 16px 16px;
+    flex: 0 0 auto;
+
+    a, a:hover {
+      text-decoration: none;
+      cursor: pointer;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      color: #2f9ae0;
+    }
+  }
+
   &__footer-button {
     height: 55px;
     font-size: 1rem;
diff --git a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
index 3d15df294..5e99d2a26 100644
--- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
@@ -5,6 +5,7 @@ import Button from '../../button'
 export default class PageContainerFooter extends Component {
 
   static propTypes = {
+    children: PropTypes.node,
     onCancel: PropTypes.func,
     cancelText: PropTypes.string,
     onSubmit: PropTypes.func,
@@ -19,6 +20,7 @@ export default class PageContainerFooter extends Component {
 
   render () {
     const {
+      children,
       onCancel,
       cancelText,
       onSubmit,
@@ -30,24 +32,32 @@ export default class PageContainerFooter extends Component {
     return (
       <div className="page-container__footer">
 
-        <Button
-          type="default"
-          large
-          className="page-container__footer-button"
-          onClick={e => onCancel(e)}
-        >
-          { cancelText || this.context.t('cancel') }
-        </Button>
-
-        <Button
-          type={submitButtonType || 'primary'}
-          large
-          className="page-container__footer-button"
-          disabled={disabled}
-          onClick={e => onSubmit(e)}
-        >
-          { submitText || this.context.t('next') }
-        </Button>
+        <div className="page-container__footer-header">
+          <Button
+            type="default"
+            large
+            className="page-container__footer-button"
+            onClick={e => onCancel(e)}
+          >
+            { cancelText || this.context.t('cancel') }
+          </Button>
+
+          <Button
+            type={submitButtonType || 'primary'}
+            large
+            className="page-container__footer-button"
+            disabled={disabled}
+            onClick={e => onSubmit(e)}
+          >
+            { submitText || this.context.t('next') }
+          </Button>
+        </div>
+
+        {children && (
+          <div className="page-container__footer-footer">
+            {children}
+          </div>
+        )}
 
       </div>
     )
diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
index 5e5dbf00b..75ee09fba 100644
--- a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
+++ b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
@@ -25,6 +25,17 @@ describe('Page Footer', () => {
     assert.equal(wrapper.find('.page-container__footer').length, 1)
   })
 
+  it('should render a page-container__footer-footer class when given children', () => {
+    const wrapper = shallow(
+      <PageFooter>
+        <div>Works</div>
+      </PageFooter>,
+      { context: { t: sinon.spy((k) => `[${k}]`) } }
+    )
+
+    assert.equal(wrapper.find('.page-container__footer-footer').length, 1)
+  })
+
   it('renders two button components', () => {
     assert.equal(wrapper.find(Button).length, 2)
   })
@@ -65,5 +76,4 @@ describe('Page Footer', () => {
       assert.equal(onSubmit.callCount, 1)
     })
   })
-
 })
-- 
cgit v1.2.3


From e351a7dd7439d65b47321c9ce18e661da67929ee Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 1 Oct 2018 10:34:11 -0230
Subject: Switch page-container__footer-* for header and footer tags

---
 ui/app/components/page-container/index.scss        | 42 +++++++++++-----------
 .../page-container-footer.component.js             |  8 ++---
 .../tests/page-container-footer.component.test.js  |  4 +--
 3 files changed, 27 insertions(+), 27 deletions(-)

(limited to 'ui/app/components/page-container')

diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index b7bf1b8b5..6742e3082 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -52,29 +52,29 @@
     .btn-confirm {
       font-size: 1rem;
     }
-  }
 
-  &__footer-header {
-    display: flex;
-    flex-flow: row;
-    justify-content: center;
-    padding: 16px;
-    flex: 0 0 auto;
-  }
-
-  &__footer-footer {
-    display: flex;
-    flex-flow: row;
-    justify-content: space-around;
-    padding: 0 16px 16px;
-    flex: 0 0 auto;
+    header {
+      display: flex;
+      flex-flow: row;
+      justify-content: center;
+      padding: 16px;
+      flex: 0 0 auto;
+    }
 
-    a, a:hover {
-      text-decoration: none;
-      cursor: pointer;
-      font-size: 0.75rem;
-      text-transform: uppercase;
-      color: #2f9ae0;
+    footer {
+      display: flex;
+      flex-flow: row;
+      justify-content: space-around;
+      padding: 0 16px 16px;
+      flex: 0 0 auto;
+
+      a, a:hover {
+        text-decoration: none;
+        cursor: pointer;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        color: #2f9ae0;
+      }
     }
   }
 
diff --git a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
index 5e99d2a26..773fe1f56 100644
--- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
@@ -32,7 +32,7 @@ export default class PageContainerFooter extends Component {
     return (
       <div className="page-container__footer">
 
-        <div className="page-container__footer-header">
+        <header>
           <Button
             type="default"
             large
@@ -51,12 +51,12 @@ export default class PageContainerFooter extends Component {
           >
             { submitText || this.context.t('next') }
           </Button>
-        </div>
+        </header>
 
         {children && (
-          <div className="page-container__footer-footer">
+          <footer>
             {children}
-          </div>
+          </footer>
         )}
 
       </div>
diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
index 75ee09fba..64efabab0 100644
--- a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
+++ b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
@@ -25,7 +25,7 @@ describe('Page Footer', () => {
     assert.equal(wrapper.find('.page-container__footer').length, 1)
   })
 
-  it('should render a page-container__footer-footer class when given children', () => {
+  it('should render a footer inside page-container__footer when given children', () => {
     const wrapper = shallow(
       <PageFooter>
         <div>Works</div>
@@ -33,7 +33,7 @@ describe('Page Footer', () => {
       { context: { t: sinon.spy((k) => `[${k}]`) } }
     )
 
-    assert.equal(wrapper.find('.page-container__footer-footer').length, 1)
+    assert.equal(wrapper.find('.page-container__footer footer').length, 1)
   })
 
   it('renders two button components', () => {
-- 
cgit v1.2.3