From b2f23976700ffccf0f89f2218b3ae6e0180422c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milan=20Z=C3=A1zrivec?= <mzazrivec@redhat.com>
Date: Thu, 19 Sep 2019 19:59:51 +0200
Subject: [PATCH] Merge pull request #1031 from
 mturley/list-view-table-structure

Convert list views to table structure to fix alignment issues

(cherry picked from commit 40746f19d02a7c407c5d101accbd733766fa9d11)

https://bugzilla.redhat.com/show_bug.cgi?id=1716845
---
 app/javascript/react/screens/App/App.scss     |   1 +
 .../__snapshots__/MappingWizard.test.js.snap  |  52 ++--
 .../components/Migrations/Migrations.scss     |   4 +
 .../Migrations/MigrationsCompletedList.js     |  42 ++-
 .../Migrations/MigrationsNotStartedList.js    |  56 ++--
 .../Migrations/ScheduledTimeInfoItem.js       |  27 ++
 .../__test__/MigrationsCompletedList.test.js  |   9 +-
 .../__test__/MigrationsNotStartedList.test.js |   3 +-
 .../PlanWizardVMStep.test.js.snap             |   8 +-
 .../__snapshots__/Settings.test.js.snap       |   4 +-
 ...nHostWizardAuthenticationStep.test.js.snap |  78 ++---
 .../ConversionHostWizard.test.js.snap         |  52 ++--
 .../ConversionHostsList.test.js.snap          |  12 +-
 .../App/common/ListViewTable/ListViewTable.js |  66 +++++
 .../common/ListViewTable/ListViewTable.scss   |  48 +++
 .../common/ListViewTable/ListViewTableRow.js  |  69 +++++
 package.json                                  |   4 +-
 yarn.lock                                     | 276 +++++++++++++++---
 18 files changed, 608 insertions(+), 203 deletions(-)
 create mode 100644 app/javascript/react/screens/App/Overview/components/Migrations/ScheduledTimeInfoItem.js
 create mode 100644 app/javascript/react/screens/App/common/ListViewTable/ListViewTable.js
 create mode 100644 app/javascript/react/screens/App/common/ListViewTable/ListViewTable.scss
 create mode 100644 app/javascript/react/screens/App/common/ListViewTable/ListViewTableRow.js

diff --git a/app/javascript/react/screens/App/App.scss b/app/javascript/react/screens/App/App.scss
index ed2d40ad8b..50d51a8fc3 100644
--- a/app/javascript/react/screens/App/App.scss
+++ b/app/javascript/react/screens/App/App.scss
@@ -3,6 +3,7 @@
 @import './Settings/Settings.scss';
 @import './Plan/Plan.scss';
 @import './Mappings/Mappings.scss';
+@import './common/ListViewTable/ListViewTable.scss';
 @import './common/ModalWizard/ModalWizard.scss';
 @import './common/ShowWizardEmptyState/ShowWizardEmptyState.scss';
 @import './common/forms/TextFileInput/TextFileInput.scss';
diff --git a/app/javascript/react/screens/App/Mappings/screens/MappingWizard/__tests__/__snapshots__/MappingWizard.test.js.snap b/app/javascript/react/screens/App/Mappings/screens/MappingWizard/__tests__/__snapshots__/MappingWizard.test.js.snap
index 8b48d6635c..f12a048c73 100644
--- a/app/javascript/react/screens/App/Mappings/screens/MappingWizard/__tests__/__snapshots__/MappingWizard.test.js.snap
+++ b/app/javascript/react/screens/App/Mappings/screens/MappingWizard/__tests__/__snapshots__/MappingWizard.test.js.snap
@@ -33,33 +33,31 @@ exports[`MappingWizard component renders the mapping wizard 1`] = `
   <WizardFooter
     className=""
   >
-    <React.Fragment>
-      <Button
-        active={false}
-        block={false}
-        bsClass="btn"
-        bsStyle="default"
-        className="btn-cancel"
-        disabled={false}
-        onClick={[MockFunction]}
-      >
-        Cancel
-      </Button>
-      <Button
-        active={false}
-        block={false}
-        bsClass="btn"
-        bsStyle="default"
-        disabled={true}
-        onClick={[Function]}
-      >
-        <Icon
-          name="angle-left"
-          type="fa"
-        />
-        Back
-      </Button>
-    </React.Fragment>
+    <Button
+      active={false}
+      block={false}
+      bsClass="btn"
+      bsStyle="default"
+      className="btn-cancel"
+      disabled={false}
+      onClick={[MockFunction]}
+    >
+      Cancel
+    </Button>
+    <Button
+      active={false}
+      block={false}
+      bsClass="btn"
+      bsStyle="default"
+      disabled={true}
+      onClick={[Function]}
+    >
+      <Icon
+        name="angle-left"
+        type="fa"
+      />
+      Back
+    </Button>
     <Button
       active={false}
       block={false}
diff --git a/app/javascript/react/screens/App/Overview/components/Migrations/Migrations.scss b/app/javascript/react/screens/App/Overview/components/Migrations/Migrations.scss
index 65ab5e86e2..e003cbfc2e 100644
--- a/app/javascript/react/screens/App/Overview/components/Migrations/Migrations.scss
+++ b/app/javascript/react/screens/App/Overview/components/Migrations/Migrations.scss
@@ -27,6 +27,10 @@
   }
 }
 
+.list-view-pf-additional-info-item.num-vms-migrated strong.total {
+  margin-left: 5px;
+}
+
 @media (min-width: 992px) {
   .migrations .list-view-pf-main-info .list-view-pf-body {
     .list-view-pf-description {
diff --git a/app/javascript/react/screens/App/Overview/components/Migrations/MigrationsCompletedList.js b/app/javascript/react/screens/App/Overview/components/Migrations/MigrationsCompletedList.js
index ea6ee6a3c2..8407e4a1e6 100644
--- a/app/javascript/react/screens/App/Overview/components/Migrations/MigrationsCompletedList.js
+++ b/app/javascript/react/screens/App/Overview/components/Migrations/MigrationsCompletedList.js
@@ -19,6 +19,8 @@ import DeleteMigrationMenuItem from './DeleteMigrationMenuItem';
 import StopPropagationOnClick from '../../../common/StopPropagationOnClick';
 import Visibility from '../../../common/Visibility';
 import getPlanScheduleInfo from './helpers/getPlanScheduleInfo';
+import ListViewTable from '../../../common/ListViewTable/ListViewTable';
+import ScheduledTimeInfoItem from './ScheduledTimeInfoItem';
 
 const MigrationsCompletedList = ({
   finishedTransformationPlans,
@@ -70,7 +72,7 @@ const MigrationsCompletedList = ({
                     {renderActiveFilters(filteredSortedPaginatedListItems)}
                   </Toolbar>
                 </Grid.Row>
-                <ListView className="plans-complete-list" style={{ marginTop: 10 }}>
+                <ListViewTable className="plans-complete-list" style={{ marginTop: 10 }}>
                   {filteredSortedPaginatedListItems.items.map(plan => {
                     const {
                       migrationScheduled,
@@ -170,10 +172,10 @@ const MigrationsCompletedList = ({
 
                     const isMissingMapping = !plan.infraMappingName;
 
-                    const showScheduledTime = migrationScheduled && !staleMigrationSchedule && !migrationStarting;
+                    const showScheduledTime = !!migrationScheduled && !staleMigrationSchedule && !migrationStarting;
 
                     return (
-                      <ListView.Item
+                      <ListViewTable.Row
                         stacked
                         className="plans-complete-list__list-item"
                         onClick={e => {
@@ -209,19 +211,18 @@ const MigrationsCompletedList = ({
                         heading={plan.name}
                         description={plan.description}
                         additionalInfo={[
-                          <ListView.InfoItem key={`${plan.id}-migrated`} style={{ paddingRight: 40 }}>
+                          <ListView.InfoItem className="num-vms-migrated" key={`${plan.id}-migrated`}>
                             <ListView.Icon type="pf" size="lg" name="screen" />
-                            &nbsp;
-                            <strong>{succeedCount}</strong> {__('of')} &nbsp;
-                            <strong>{Object.keys(tasks).length} </strong>
+                            <strong>{succeedCount}</strong>
+                            {__('of')}
+                            <strong className="total">{Object.keys(tasks).length} </strong>
                             {__('VMs successfully migrated.')}
                           </ListView.InfoItem>,
-                          isMissingMapping && (
+                          isMissingMapping ? (
                             <ListView.InfoItem key={`${plan.id}-infraMappingWarning`}>
                               <Icon type="pf" name="warning-triangle-o" /> {__('Infrastucture mapping does not exist.')}
                             </ListView.InfoItem>
-                          ),
-                          !isMissingMapping && (
+                          ) : (
                             <ListView.InfoItem key={`${plan.id}-infraMappingName`}>
                               {plan.infraMappingName}
                             </ListView.InfoItem>
@@ -240,19 +241,12 @@ const MigrationsCompletedList = ({
                               {formatDateTime(mostRecentRequest.fulfilled_on)}
                             </ListView.InfoItem>
                           ) : null,
-                          showScheduledTime ? (
-                            <ListView.InfoItem key={`${plan.id}-scheduledTime`} style={{ textAlign: 'left' }}>
-                              <Icon type="fa" name="clock-o" />
-                              {__('Migration scheduled')}
-                              <br />
-                              {formatDateTime(migrationScheduled)}
-                            </ListView.InfoItem>
-                          ) : null,
-                          migrationStarting && (
-                            <ListView.InfoItem key={`${plan.id}-starting`} style={{ textAlign: 'left' }}>
-                              {__('Migration in progress')}
-                            </ListView.InfoItem>
-                          )
+                          <ScheduledTimeInfoItem
+                            planId={plan.id}
+                            migrationStarting={migrationStarting}
+                            showScheduledTime={showScheduledTime}
+                            migrationScheduled={migrationScheduled}
+                          />
                         ]}
                         actions={
                           // Visibility helper is used instead of conditional rendering
@@ -334,7 +328,7 @@ const MigrationsCompletedList = ({
                       />
                     );
                   })}
-                </ListView>
+                </ListViewTable>
                 {renderPaginationRow(filteredSortedPaginatedListItems)}
               </React.Fragment>
             )}
diff --git a/app/javascript/react/screens/App/Overview/components/Migrations/MigrationsNotStartedList.js b/app/javascript/react/screens/App/Overview/components/Migrations/MigrationsNotStartedList.js
index c2cbe67f52..5c729b27b3 100644
--- a/app/javascript/react/screens/App/Overview/components/Migrations/MigrationsNotStartedList.js
+++ b/app/javascript/react/screens/App/Overview/components/Migrations/MigrationsNotStartedList.js
@@ -4,15 +4,15 @@ import { noop, Button, ListView, Grid, Icon, Spinner, Toolbar, DropdownKebab, Me
 import EllipsisWithTooltip from 'react-ellipsis-with-tooltip';
 import ShowWizardEmptyState from '../../../common/ShowWizardEmptyState/ShowWizardEmptyState';
 import ScheduleMigrationModal from '../ScheduleMigrationModal/ScheduleMigrationModal';
-import { formatDateTime } from '../../../../../../components/dates/MomentDate';
 import { MIGRATIONS_NOT_STARTED_SORT_FIELDS, MIGRATIONS_FILTER_TYPES } from './MigrationsConstants';
 import ScheduleMigrationButton from './ScheduleMigrationButton';
 import EditScheduleMenuItems from './EditScheduleMenuItems';
 import StopPropagationOnClick from '../../../common/StopPropagationOnClick';
-import Visibility from '../../../common/Visibility';
 import ListViewToolbar from '../../../common/ListViewToolbar/ListViewToolbar';
 import DeleteMigrationMenuItem from './DeleteMigrationMenuItem';
 import getPlanScheduleInfo from './helpers/getPlanScheduleInfo';
+import ListViewTable from '../../../common/ListViewTable/ListViewTable';
+import ScheduledTimeInfoItem from './ScheduledTimeInfoItem';
 
 const MigrationsNotStartedList = ({
   migrateClick,
@@ -58,7 +58,7 @@ const MigrationsNotStartedList = ({
                     {renderActiveFilters(filteredSortedPaginatedListItems)}
                   </Toolbar>
                 </Grid.Row>
-                <ListView className="plans-not-started-list" style={{ marginTop: 10 }}>
+                <ListViewTable className="plans-not-started-list" style={{ marginTop: 10 }}>
                   {filteredSortedPaginatedListItems.items.map(plan => {
                     const { migrationScheduled, migrationStarting, showInitialScheduleButton } = getPlanScheduleInfo(
                       plan
@@ -68,24 +68,22 @@ const MigrationsNotStartedList = ({
                     const editPlanDisabled = loading === plan.href;
 
                     return (
-                      <ListView.Item
+                      <ListViewTable.Row
                         stacked
                         className="plans-not-started-list__list-item"
                         onClick={() => {
                           redirectTo(`/plan/${plan.id}`);
                         }}
                         actions={
-                          // Visibility helper is used instead of conditional rendering
-                          // so hidden buttons still take up space and the list rows stay aligned
                           <div>
-                            <Visibility hidden={!showInitialScheduleButton}>
+                            {showInitialScheduleButton && (
                               <ScheduleMigrationButton
                                 loading={loading}
                                 toggleScheduleMigrationModal={toggleScheduleMigrationModal}
                                 plan={plan}
                                 isMissingMapping={isMissingMapping}
                               />
-                            </Visibility>
+                            )}
                             <Button
                               id={`migrate_${plan.id}`}
                               onClick={e => {
@@ -141,7 +139,6 @@ const MigrationsNotStartedList = ({
                             </StopPropagationOnClick>
                           </div>
                         }
-                        leftContent={<div />}
                         heading={plan.name}
                         description={
                           <EllipsisWithTooltip id={plan.description}>
@@ -153,35 +150,28 @@ const MigrationsNotStartedList = ({
                             <Icon type="pf" name="virtual-machine" />
                             <strong>{plan.options.config_info.actions.length}</strong> {__('VMs')}
                           </ListView.InfoItem>,
-                          isMissingMapping && (
-                            <ListView.InfoItem key={`${plan.id}-infraMappingWarning`}>
-                              <Icon type="pf" name="warning-triangle-o" /> {__('Infrastucture mapping does not exist.')}
-                            </ListView.InfoItem>
-                          ),
-                          !isMissingMapping && (
-                            <ListView.InfoItem key={`${plan.id}-infraMappingName`}>
-                              {plan.infraMappingName}
-                            </ListView.InfoItem>
-                          ),
-                          migrationScheduled && !migrationStarting ? (
-                            <ListView.InfoItem key={`${plan.id}-scheduledTime`} style={{ textAlign: 'left' }}>
-                              <Icon type="fa" name="clock-o" />
-                              {__('Migration scheduled')}
-                              <br />
-                              {formatDateTime(migrationScheduled)}
-                            </ListView.InfoItem>
-                          ) : null,
-                          migrationStarting && (
-                            <ListView.InfoItem key={`${plan.id}-starting`} style={{ textAlign: 'left' }}>
-                              {__('Migration in progress')}
-                            </ListView.InfoItem>
-                          )
+                          <ListView.InfoItem key={`${plan.id}-infraMappingName`}>
+                            {isMissingMapping ? (
+                              <React.Fragment>
+                                <Icon type="pf" name="warning-triangle-o" />{' '}
+                                {__('Infrastucture mapping does not exist.')}
+                              </React.Fragment>
+                            ) : (
+                              plan.infraMappingName
+                            )}
+                          </ListView.InfoItem>,
+                          <ScheduledTimeInfoItem
+                            planId={plan.id}
+                            migrationStarting={migrationStarting}
+                            showScheduledTime={!!migrationScheduled}
+                            migrationScheduled={migrationScheduled}
+                          />
                         ]}
                         key={plan.id}
                       />
                     );
                   })}
-                </ListView>
+                </ListViewTable>
                 {renderPaginationRow(filteredSortedPaginatedListItems)}
               </React.Fragment>
             )}
diff --git a/app/javascript/react/screens/App/Overview/components/Migrations/ScheduledTimeInfoItem.js b/app/javascript/react/screens/App/Overview/components/Migrations/ScheduledTimeInfoItem.js
new file mode 100644
index 0000000000..2657a104bf
--- /dev/null
+++ b/app/javascript/react/screens/App/Overview/components/Migrations/ScheduledTimeInfoItem.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ListView, Icon } from 'patternfly-react';
+import { formatDateTime } from '../../../../../../components/dates/MomentDate';
+
+const ScheduledTimeInfoItem = ({ planId, migrationStarting, showScheduledTime, migrationScheduled }) =>
+  migrationStarting ? (
+    <ListView.InfoItem key={`${planId}-starting`} style={{ textAlign: 'left' }}>
+      {__('Migration in progress')}
+    </ListView.InfoItem>
+  ) : showScheduledTime ? (
+    <ListView.InfoItem key={`${planId}-scheduledTime`} style={{ textAlign: 'left' }}>
+      <Icon type="fa" name="clock-o" />
+      {__('Migration scheduled')}
+      <br />
+      {formatDateTime(migrationScheduled)}
+    </ListView.InfoItem>
+  ) : null;
+
+ScheduledTimeInfoItem.propTypes = {
+  planId: PropTypes.string,
+  migrationStarting: PropTypes.bool,
+  showScheduledTime: PropTypes.bool,
+  migrationScheduled: PropTypes.number
+};
+
+export default ScheduledTimeInfoItem;
diff --git a/app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsCompletedList.test.js b/app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsCompletedList.test.js
index 926e37b68e..b4d5f1935c 100644
--- a/app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsCompletedList.test.js
+++ b/app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsCompletedList.test.js
@@ -5,6 +5,7 @@ import { shallow, mount } from 'enzyme';
 import { transformationPlans } from '../../../overview.transformationPlans.fixtures';
 import { allRequestsWithTasks } from '../../../overview.requestWithTasks.fixtures';
 import MigrationsCompletedList from '../MigrationsCompletedList';
+import ListViewTableRow from '../../../../common/ListViewTable/ListViewTableRow';
 
 const [, , , finishedPlanOne, finishedPlanTwo] = transformationPlans.resources;
 const finishedTransformationPlans = [
@@ -25,7 +26,7 @@ describe('when displaying archived migration plans', () => {
       />
     );
 
-    wrapper.find('ListViewItem').forEach(item => {
+    wrapper.find(ListViewTableRow).forEach(item => {
       expect(item.prop('actions')).toBeTruthy();
     });
   });
@@ -41,7 +42,7 @@ describe('when displaying archived migration plans', () => {
       />
     );
 
-    wrapper.find('ListViewItem').forEach(item => {
+    wrapper.find(ListViewTableRow).forEach(item => {
       const archiveButton = item.find('a').filterWhere(link => link.text() === 'Archive plan');
       expect(archiveButton).toHaveLength(0);
     });
@@ -72,13 +73,13 @@ describe('when displaying active (not archived) migration plans', () => {
   });
 
   test('each list item renders an actions node', () => {
-    wrapper.find('ListViewItem').forEach(item => {
+    wrapper.find(ListViewTableRow).forEach(item => {
       expect(item.prop('actions')).toBeTruthy();
     });
   });
 
   test('clicking the archive button launches the confirmation modal', () => {
-    wrapper.find('ListViewItem').forEach(item => {
+    wrapper.find(ListViewTableRow).forEach(item => {
       const archiveButton = item.find('a').filterWhere(link => link.text() === 'Archive plan');
 
       archiveButton.simulate('click');
diff --git a/app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsNotStartedList.test.js b/app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsNotStartedList.test.js
index 7ddab4bfea..b52bfd3d13 100644
--- a/app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsNotStartedList.test.js
+++ b/app/javascript/react/screens/App/Overview/components/Migrations/__test__/MigrationsNotStartedList.test.js
@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 
 import MigrationsNotStartedList from '../MigrationsNotStartedList';
 import { transformationPlans } from '../../../overview.transformationPlans.fixtures';
+import ListViewTableRow from '../../../../common/ListViewTable/ListViewTableRow';
 
 const { resources: plans } = transformationPlans;
 const [notStartedPlan] = plans;
@@ -25,7 +26,7 @@ beforeEach(() => {
 
 test('clicking on a plan fires redirectTo with the path to its details page', () => {
   wrapper
-    .find('ListViewItem')
+    .find(ListViewTableRow)
     .at(0)
     .simulate('click');
 
diff --git a/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardVMStep/__tests__/__snapshots__/PlanWizardVMStep.test.js.snap b/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardVMStep/__tests__/__snapshots__/PlanWizardVMStep.test.js.snap
index 708fa32848..0eed4aff1a 100644
--- a/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardVMStep/__tests__/__snapshots__/PlanWizardVMStep.test.js.snap
+++ b/app/javascript/react/screens/App/Overview/screens/PlanWizard/components/PlanWizardVMStep/__tests__/__snapshots__/PlanWizardVMStep.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`table rows render correctly with nothing pre-selected 1`] = `
-<React.Fragment>
+<Fragment>
   <Field
     component={[Function]}
     discoveryMode={true}
@@ -33,11 +33,11 @@ exports[`table rows render correctly with nothing pre-selected 1`] = `
       ]
     }
   />
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`table rows render correctly with some VMs pre-selected for editing 1`] = `
-<React.Fragment>
+<Fragment>
   <Field
     component={[Function]}
     discoveryMode={true}
@@ -73,5 +73,5 @@ exports[`table rows render correctly with some VMs pre-selected for editing 1`]
       ]
     }
   />
-</React.Fragment>
+</Fragment>
 `;
diff --git a/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap b/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap
index 75e70e867a..d1b12f9739 100644
--- a/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap
+++ b/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Settings component renders correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <MigrationBreadcrumbBar
     activeHref="#/settings"
   />
@@ -32,5 +32,5 @@ exports[`Settings component renders correctly 1`] = `
       </Tab>
     </Uncontrolled(Tabs)>
   </div>
-</React.Fragment>
+</Fragment>
 `;
diff --git a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/ConversionHostWizardAuthenticationStep/__tests__/__snapshots__/ConversionHostWizardAuthenticationStep.test.js.snap b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/ConversionHostWizardAuthenticationStep/__tests__/__snapshots__/ConversionHostWizardAuthenticationStep.test.js.snap
index 5ef969656b..504f868c6f 100644
--- a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/ConversionHostWizardAuthenticationStep/__tests__/__snapshots__/ConversionHostWizardAuthenticationStep.test.js.snap
+++ b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/ConversionHostWizardAuthenticationStep/__tests__/__snapshots__/ConversionHostWizardAuthenticationStep.test.js.snap
@@ -66,22 +66,22 @@ exports[`conversion host wizard authentication step renders correctly in the ini
       ]
     }
   />
-  <React.Fragment>
-    <Field
-      component={[Function]}
-      controlId="verify-openstack-certs"
-      controlWidth={7}
-      label="Verify TLS Certificates for OpenStack"
-      labelWidth={4}
-      name="verifyOpenstackCerts"
-      style={
-        Object {
-          "marginTop": 25,
-        }
+  <Field
+    component={[Function]}
+    controlId="verify-openstack-certs"
+    controlWidth={7}
+    label="Verify TLS Certificates for OpenStack"
+    labelWidth={4}
+    name="verifyOpenstackCerts"
+    style={
+      Object {
+        "marginTop": 25,
       }
-      validate={[Function]}
-    />
-  </React.Fragment>
+    }
+    validate={[Function]}
+  >
+    <Component />
+  </Field>
 </Form>
 `;
 
@@ -338,31 +338,31 @@ exports[`conversion host wizard authentication step renders correctly with verif
       ]
     }
   />
-  <React.Fragment>
-    <Field
-      component={[Function]}
-      controlId="verify-openstack-certs"
-      controlWidth={7}
-      label="Verify TLS Certificates for OpenStack"
-      labelWidth={4}
-      name="verifyOpenstackCerts"
-      style={
-        Object {
-          "marginTop": 25,
-        }
+  <Field
+    component={[Function]}
+    controlId="verify-openstack-certs"
+    controlWidth={7}
+    label="Verify TLS Certificates for OpenStack"
+    labelWidth={4}
+    name="verifyOpenstackCerts"
+    style={
+      Object {
+        "marginTop": 25,
       }
-      validate={[Function]}
-    />
-    <TextFileField
-      controlId="openstack-ca-certs-input"
-      controlWidth={7}
-      help="Upload your certificates file, in PEM format, or paste its contents below."
-      hideBody={false}
-      label="OpenStack Trusted CA Certificates"
-      labelWidth={4}
-      name="openstackCaCerts"
-    />
-  </React.Fragment>
+    }
+    validate={[Function]}
+  >
+    <Component />
+  </Field>
+  <TextFileField
+    controlId="openstack-ca-certs-input"
+    controlWidth={7}
+    help="Upload your certificates file, in PEM format, or paste its contents below."
+    hideBody={false}
+    label="OpenStack Trusted CA Certificates"
+    labelWidth={4}
+    name="openstackCaCerts"
+  />
 </Form>
 `;
 
diff --git a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/__tests__/__snapshots__/ConversionHostWizard.test.js.snap b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/__tests__/__snapshots__/ConversionHostWizard.test.js.snap
index 17e6a8651e..a0e63150e0 100644
--- a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/__tests__/__snapshots__/ConversionHostWizard.test.js.snap
+++ b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostWizard/__tests__/__snapshots__/ConversionHostWizard.test.js.snap
@@ -51,33 +51,31 @@ exports[`conversion host wizard renders correctly 1`] = `
   <WizardFooter
     className="wizard-pf-footer"
   >
-    <React.Fragment>
-      <Button
-        active={false}
-        block={false}
-        bsClass="btn"
-        bsStyle="default"
-        className="btn-cancel"
-        disabled={false}
-        onClick={[MockFunction]}
-      >
-        Cancel
-      </Button>
-      <Button
-        active={false}
-        block={false}
-        bsClass="btn"
-        bsStyle="default"
-        disabled={true}
-        onClick={[Function]}
-      >
-        <Icon
-          name="angle-left"
-          type="fa"
-        />
-        Back
-      </Button>
-    </React.Fragment>
+    <Button
+      active={false}
+      block={false}
+      bsClass="btn"
+      bsStyle="default"
+      className="btn-cancel"
+      disabled={false}
+      onClick={[MockFunction]}
+    >
+      Cancel
+    </Button>
+    <Button
+      active={false}
+      block={false}
+      bsClass="btn"
+      bsStyle="default"
+      disabled={true}
+      onClick={[Function]}
+    >
+      <Icon
+        name="angle-left"
+        type="fa"
+      />
+      Back
+    </Button>
     <Button
       active={false}
       block={false}
diff --git a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap
index 1f8ea07658..920f0e4dd6 100644
--- a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap
+++ b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`conversion hosts list renders the inner list view correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <Row
     bsClass="row"
     componentClass="div"
@@ -172,11 +172,11 @@ exports[`conversion hosts list renders the inner list view correctly 1`] = `
       viewType="list"
     />
   </div>
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`conversion hosts list renders the outer components correctly 1`] = `
-<React.Fragment>
+<Fragment>
   <ListViewToolbar
     defaultFilterTypeIndex={0}
     defaultSortTypeIndex={0}
@@ -215,7 +215,9 @@ exports[`conversion hosts list renders the outer components correctly 1`] = `
         },
       ]
     }
-  />
+  >
+    <Component />
+  </ListViewToolbar>
   <DeleteConversionHostConfirmationModal
     conversionHostDeleteModalVisible={false}
     conversionHostToDelete={null}
@@ -223,5 +225,5 @@ exports[`conversion hosts list renders the outer components correctly 1`] = `
     hideConversionHostDeleteModalAction={[MockFunction]}
     isDeletingConversionHost={false}
   />
-</React.Fragment>
+</Fragment>
 `;
diff --git a/app/javascript/react/screens/App/common/ListViewTable/ListViewTable.js b/app/javascript/react/screens/App/common/ListViewTable/ListViewTable.js
new file mode 100644
index 0000000000..3b884e2e6c
--- /dev/null
+++ b/app/javascript/react/screens/App/common/ListViewTable/ListViewTable.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ListView, layout as pfLayout } from 'patternfly-react';
+import ListViewTableRow from './ListViewTableRow';
+
+export const ListViewTableContext = React.createContext({});
+
+const BaseListViewTable = ({ children, className, isSmallViewport, ...props }) =>
+  isSmallViewport ? (
+    <ListView className={className} {...props}>
+      {children}
+    </ListView>
+  ) : (
+    <ListView className={`${className} list-view-table-pf`} {...props}>
+      <table>
+        <tbody>{children}</tbody>
+      </table>
+    </ListView>
+  );
+
+BaseListViewTable.propTypes = {
+  ...ListView.propTypes,
+  isSmallViewport: PropTypes.bool
+};
+
+const layout =
+  process.env.NODE_ENV === 'test'
+    ? {
+        is: () => true,
+        addChangeListener: () => {},
+        removeChangeListener: () => {}
+      }
+    : pfLayout;
+
+class ListViewTable extends React.Component {
+  state = { isSmallViewport: !layout.is('desktop') };
+
+  componentDidMount() {
+    layout.addChangeListener(this.onLayoutChange);
+  }
+
+  componentWillUnmount() {
+    layout.removeChangeListener(this.onLayoutChange);
+  }
+
+  onLayoutChange = newLayout => {
+    this.setState({ isSmallViewport: newLayout !== 'desktop' });
+  };
+
+  render() {
+    const { isSmallViewport } = this.state;
+    return (
+      <ListViewTableContext.Provider value={{ isSmallViewport }}>
+        <BaseListViewTable isSmallViewport={isSmallViewport} {...this.props} />
+      </ListViewTableContext.Provider>
+    );
+  }
+}
+
+ListViewTable.propTypes = {
+  ...ListView.propTypes
+};
+
+ListViewTable.Row = ListViewTableRow;
+
+export default ListViewTable;
diff --git a/app/javascript/react/screens/App/common/ListViewTable/ListViewTable.scss b/app/javascript/react/screens/App/common/ListViewTable/ListViewTable.scss
new file mode 100644
index 0000000000..3ce5203063
--- /dev/null
+++ b/app/javascript/react/screens/App/common/ListViewTable/ListViewTable.scss
@@ -0,0 +1,48 @@
+.list-view-pf.list-view-table-pf > table {
+  width: 100%;
+
+  tr.list-group-item {
+    display: table-row;
+
+    td {
+      display: table-cell;
+      width: auto;
+      vertical-align: middle;
+      padding-left: 15px;
+
+      &:last-child {
+        padding-right: 15px;
+      }
+
+      &.list-view-pf-main-info.empty-info-item {
+        padding-left: 0;
+      }
+
+      .list-view-pf-left {
+        padding-right: 5px;
+      }
+
+      .list-view-pf-description {
+        float: none;
+        width: auto;
+        max-width: 20vw;
+
+        .list-group-item-heading,
+        .list-group-item-text {
+          margin-right: 15px;
+        }
+      }
+
+      .list-view-pf-additional-info-item {
+        margin: 0;
+      }
+
+      .list-view-pf-actions {
+        float: none;
+        text-align: right;
+        white-space: nowrap;
+        margin-left: 0;
+      }
+    }
+  }
+}
diff --git a/app/javascript/react/screens/App/common/ListViewTable/ListViewTableRow.js b/app/javascript/react/screens/App/common/ListViewTable/ListViewTableRow.js
new file mode 100644
index 0000000000..9849704e17
--- /dev/null
+++ b/app/javascript/react/screens/App/common/ListViewTable/ListViewTableRow.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ListView } from 'patternfly-react';
+import { ListViewTableContext } from './ListViewTable';
+
+// TODO implement expandable support
+
+const BaseListViewTableRow = ({
+  className,
+  stacked,
+  leftContent,
+  heading,
+  description,
+  additionalInfo,
+  actions,
+  ...props
+}) => {
+  const row = (
+    <tr
+      className={classNames(className, 'list-group-item', {
+        'list-view-pf-stacked': stacked
+      })}
+      {...props}
+    >
+      {leftContent && <td className="list-view-pf-left list-view-pf-main-info">{leftContent}</td>}
+      {(heading || description) && (
+        <td className="list-view-pf-main-info">
+          <ListView.Description>
+            {heading && <ListView.DescriptionHeading>{heading}</ListView.DescriptionHeading>}
+            {description && <ListView.DescriptionText>{description}</ListView.DescriptionText>}
+          </ListView.Description>
+        </td>
+      )}
+      {additionalInfo &&
+        additionalInfo.map((infoItem, index) => (
+          <td
+            key={`info-item-${index}`}
+            className={classNames('list-view-pf-main-info', { 'empty-info-item': !infoItem })}
+          >
+            {infoItem}
+          </td>
+        ))}
+      {actions && (
+        <td>
+          <ListView.Actions>{actions}</ListView.Actions>
+        </td>
+      )}
+    </tr>
+  );
+  const numColumns = row.props.children.filter(child => !!child).length; // eslint-disable-line no-unused-vars
+  // TODO: use numColumns for colspan of expanded content
+  return row;
+};
+
+BaseListViewTableRow.propTypes = {
+  ...ListView.Item.propTypes
+};
+
+const ListViewTableRow = props => (
+  <ListViewTableContext.Consumer>
+    {({ isSmallViewport }) => (isSmallViewport ? <ListView.Item {...props} /> : <BaseListViewTableRow {...props} />)}
+  </ListViewTableContext.Consumer>
+);
+
+ListViewTableRow.propTypes = {
+  ...BaseListViewTableRow.propTypes
+};
+
+export default ListViewTableRow;
diff --git a/package.json b/package.json
index 085d57a072..872719f70f 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,8 @@
     "babel-preset-minify": "^0.2.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.3",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.0.0",
diff --git a/yarn.lock b/yarn.lock
index 34824e95e4..d86ecd663e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -314,6 +314,22 @@ acorn@^5.0.0, acorn@^5.5.0, acorn@^5.5.3:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
 
+airbnb-prop-types@^2.13.2:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef"
+  integrity sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==
+  dependencies:
+    array.prototype.find "^2.1.0"
+    function.prototype.name "^1.1.1"
+    has "^1.0.3"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object.assign "^4.1.0"
+    object.entries "^1.1.0"
+    prop-types "^15.7.2"
+    prop-types-exact "^1.2.0"
+    react-is "^16.9.0"
+
 ajv-keywords@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
@@ -440,6 +456,11 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
@@ -473,6 +494,23 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
+array.prototype.find@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.0.tgz#630f2eaf70a39e608ac3573e45cf8ccd0ede9ad7"
+  integrity sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.13.0"
+
+array.prototype.flat@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4"
+  integrity sha512-rVqIs330nLJvfC7JqYvEWwqVr5QjYF1ib02i3YJtR/fICO6527Tjpc/e4Mvmxh3GIePPreRXMdaGyC99YphWEw==
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.10.0"
+    function-bind "^1.1.1"
+
 arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
@@ -2146,6 +2184,13 @@ define-properties@^1.1.2:
     foreach "^2.0.5"
     object-keys "^1.0.8"
 
+define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -2313,25 +2358,31 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
-enzyme-adapter-react-16@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz#a8f4278b47e082fbca14f5bfb1ee50ee650717b4"
+enzyme-adapter-react-16@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.14.0.tgz#204722b769172bcf096cb250d33e6795c1f1858f"
+  integrity sha512-7PcOF7pb4hJUvjY7oAuPGpq3BmlCig3kxXGi2kFx0YzJHppqX1K8IIV9skT1IirxXlu8W7bneKi+oQ10QRnhcA==
   dependencies:
-    enzyme-adapter-utils "^1.3.0"
-    lodash "^4.17.4"
-    object.assign "^4.0.4"
-    object.values "^1.0.4"
-    prop-types "^15.6.0"
-    react-reconciler "^0.7.0"
+    enzyme-adapter-utils "^1.12.0"
+    has "^1.0.3"
+    object.assign "^4.1.0"
+    object.values "^1.1.0"
+    prop-types "^15.7.2"
+    react-is "^16.8.6"
     react-test-renderer "^16.0.0-0"
+    semver "^5.7.0"
 
-enzyme-adapter-utils@^1.3.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.5.0.tgz#a020ab3ae79bb1c85e1d51f48f35e995e0eed810"
+enzyme-adapter-utils@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.0.tgz#96e3730d76b872f593e54ce1c51fa3a451422d93"
+  integrity sha512-wkZvE0VxcFx/8ZsBw0iAbk3gR1d9hK447ebnSYBf95+r32ezBq+XDSAvRErkc4LZosgH8J7et7H7/7CtUuQfBA==
   dependencies:
+    airbnb-prop-types "^2.13.2"
     function.prototype.name "^1.1.0"
     object.assign "^4.1.0"
-    prop-types "^15.6.2"
+    object.fromentries "^2.0.0"
+    prop-types "^15.7.2"
+    semver "^5.6.0"
 
 enzyme-to-json@^3.3.3:
   version "3.3.4"
@@ -2339,26 +2390,32 @@ enzyme-to-json@^3.3.3:
   dependencies:
     lodash "^4.17.4"
 
-enzyme@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.3.0.tgz#0971abd167f2d4bf3f5bd508229e1c4b6dc50479"
+enzyme@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.10.0.tgz#7218e347c4a7746e133f8e964aada4a3523452f6"
+  integrity sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==
   dependencies:
+    array.prototype.flat "^1.2.1"
     cheerio "^1.0.0-rc.2"
-    function.prototype.name "^1.0.3"
-    has "^1.0.1"
+    function.prototype.name "^1.1.0"
+    has "^1.0.3"
+    html-element-map "^1.0.0"
     is-boolean-object "^1.0.0"
-    is-callable "^1.1.3"
+    is-callable "^1.1.4"
     is-number-object "^1.0.3"
+    is-regex "^1.0.4"
     is-string "^1.0.4"
     is-subset "^0.1.1"
-    lodash "^4.17.4"
-    object-inspect "^1.5.0"
+    lodash.escape "^4.0.1"
+    lodash.isequal "^4.5.0"
+    object-inspect "^1.6.0"
     object-is "^1.0.1"
     object.assign "^4.1.0"
     object.entries "^1.0.4"
     object.values "^1.0.4"
     raf "^3.4.0"
     rst-selector-parser "^2.2.3"
+    string.prototype.trim "^1.1.2"
 
 eonasdan-bootstrap-datetimepicker@^4.17.47:
   version "4.17.47"
@@ -2375,6 +2432,22 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+es-abstract@^1.10.0, es-abstract@^1.11.0, es-abstract@^1.12.0, es-abstract@^1.13.0:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.14.2.tgz#7ce108fad83068c8783c3cdf62e504e084d8c497"
+  integrity sha512-DgoQmbpFNOofkjJtKwr87Ma5EW4Dc8fWhD0R+ndq7Oc456ivUfGOOP6oAZTTKl5/CcNMP+EN+e3/iUzgE0veZg==
+  dependencies:
+    es-to-primitive "^1.2.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.0"
+    is-callable "^1.1.4"
+    is-regex "^1.0.4"
+    object-inspect "^1.6.0"
+    object-keys "^1.1.1"
+    string.prototype.trimleft "^2.0.0"
+    string.prototype.trimright "^2.0.0"
+
 es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
@@ -2393,6 +2466,15 @@ es-to-primitive@^1.1.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.1"
 
+es-to-primitive@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
+  integrity sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
 es6-error@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
@@ -2911,7 +2993,7 @@ function-bind@^1.1.0, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
-function.prototype.name@^1.0.3, function.prototype.name@^1.1.0:
+function.prototype.name@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327"
   dependencies:
@@ -2919,10 +3001,25 @@ function.prototype.name@^1.0.3, function.prototype.name@^1.1.0:
     function-bind "^1.1.1"
     is-callable "^1.1.3"
 
+function.prototype.name@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.1.tgz#6d252350803085abc2ad423d4fe3be2f9cbda392"
+  integrity sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+    functions-have-names "^1.1.1"
+    is-callable "^1.1.4"
+
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
+functions-have-names@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.1.1.tgz#79d35927f07b8e7103d819fed475b64ccf7225ea"
+  integrity sha512-U0kNHUoxwPNPWOJaMG7Z00d4a/qZVrFtzWJRaK8V9goaVOCXBSQSJpt3MYGNtkScKEBKovxLjnNdC9MlXwo5Pw==
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -3143,6 +3240,13 @@ hosted-git-info@^2.1.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
 
+html-element-map@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.1.0.tgz#e5aab9a834caf883b421f8bd9eaedcaac887d63c"
+  integrity sha512-iqiG3dTZmy+uUaTmHarTL+3/A2VW9ox/9uasKEZC+R/wAtUrTcRlXPSaPqsnWPfIu8wqn09jQNwMRqzL54jSYA==
+  dependencies:
+    array-filter "^1.0.0"
+
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
@@ -3336,7 +3440,7 @@ is-builtin-module@^1.0.0:
   dependencies:
     builtin-modules "^1.0.0"
 
-is-callable@^1.1.1, is-callable@^1.1.3:
+is-callable@^1.1.1, is-callable@^1.1.3, is-callable@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
 
@@ -3536,6 +3640,13 @@ is-symbol@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
 
+is-symbol@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
+  integrity sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==
+  dependencies:
+    has-symbols "^1.0.0"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4149,6 +4260,11 @@ lodash-es@^4.17.10, lodash-es@^4.17.5, lodash-es@^4.2.1:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.10.tgz#62cd7104cdf5dd87f235a837f0ede0e8e5117e05"
 
+lodash.escape@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
+  integrity sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -4157,6 +4273,11 @@ lodash.get@~4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.isplainobject@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
@@ -4210,7 +4331,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   dependencies:
@@ -4612,9 +4733,10 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-inspect@^1.5.0:
+object-inspect@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
+  integrity sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==
 
 object-is@^1.0.1:
   version "1.0.1"
@@ -4624,13 +4746,18 @@ object-keys@^1.0.11, object-keys@^1.0.8:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
 
+object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.0.4, object.assign@^4.1.0:
+object.assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
   dependencies:
@@ -4648,6 +4775,26 @@ object.entries@^1.0.4:
     function-bind "^1.1.0"
     has "^1.0.1"
 
+object.entries@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
+  integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.12.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+object.fromentries@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.0.tgz#49a543d92151f8277b3ac9600f1e930b189d30ab"
+  integrity sha512-9iLiI6H083uiqUuvzyY6qrlmc/Gz8hLQFOcb/Ri/0xXFkSNS3ctV+CbE6yM2+AnkYfOB3dGjdzC0wrMLIhQICA==
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.11.0"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -4677,6 +4824,16 @@ object.values@^1.0.4:
     function-bind "^1.1.0"
     has "^1.0.1"
 
+object.values@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
+  integrity sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.12.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 once@^1.3.0, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -5117,6 +5274,15 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types-exact@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869"
+  integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==
+  dependencies:
+    has "^1.0.3"
+    object.assign "^4.1.0"
+    reflect.ownkeys "^0.2.0"
+
 prop-types-extra@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.0.tgz#32609910ea2dcf190366bacd3490d5a6412a605f"
@@ -5131,6 +5297,15 @@ prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0,
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 property-expr@^1.2.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.0.tgz#05cda8be960720a8b3dc337c77a2a914c0e84c5f"
@@ -5283,6 +5458,11 @@ react-is@^16.3.2, react-is@^16.4.2:
   version "16.4.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88"
 
+react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
+  integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -5319,15 +5499,6 @@ react-prop-types@^0.4.0:
   dependencies:
     warning "^3.0.0"
 
-react-reconciler@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
 react-redux@^5.0.6:
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
@@ -5529,6 +5700,11 @@ redux@^3.7.2:
     loose-envify "^1.1.0"
     symbol-observable "^1.0.3"
 
+reflect.ownkeys@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
+  integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
+
 regenerate@^1.2.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
@@ -5842,6 +6018,11 @@ seamless-immutable@^7.1.2:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
+semver@^5.6.0, semver@^5.7.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -6073,6 +6254,31 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+string.prototype.trim@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz#75a729b10cfc1be439543dae442129459ce61e3d"
+  integrity sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.13.0"
+    function-bind "^1.1.1"
+
+string.prototype.trimleft@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
+  integrity sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
+string.prototype.trimright@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz#669d164be9df9b6f7559fa8e89945b168a5a6c58"
+  integrity sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"