Merge pull request #1130 from mturley/1047-ivanchuk-backport

[IVANCHUK] Backport for #1129 ([#1047][BZ#1760001] Fix inconsistent scrollbar behavior by removing fixed headers and just having one scroll body for each page)
ManageIQ · May 11, 2020 · 44d5dbd · 44d5dbd
2 parents b2f2397 + 3932d87
commit 44d5dbd
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 39 deletions.
diff --git a/app/javascript/react/screens/App/App.scss b/app/javascript/react/screens/App/App.scss
@@ -11,3 +11,17 @@
 .required-asterisk {
   color: $color-pf-red-100;
 }
+
+.main-scroll-container {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin-left: -20px;
+  margin-right: -20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.main-body-content {
+  margin-bottom: 20px;
+}
diff --git a/app/javascript/react/screens/App/Mappings/Mappings.js b/app/javascript/react/screens/App/Mappings/Mappings.js
@@ -176,7 +176,7 @@ class Mappings extends Component {
     } = this.props;
 
     return (
-      <React.Fragment>
+      <div className="main-scroll-container">
         <MigrationBreadcrumbBar activeHref="#/mappings" productFeatures={productFeatures} />
         <Spinner
           loading={
@@ -228,7 +228,7 @@ class Mappings extends Component {
           )}
         </Spinner>
         {mappingWizardVisible && this.mappingWizard}
-      </React.Fragment>
+      </div>
     );
   }
 }

diff --git a/.../screens/App/Mappings/components/InfrastructureMappingsList/InfrastructureMappingsList.js b/.../screens/App/Mappings/components/InfrastructureMappingsList/InfrastructureMappingsList.js
@@ -180,7 +180,7 @@ class InfrastructureMappingsList extends React.Component {
                     {renderActiveFilters(filteredSortedPaginatedListItems)}
                   </Toolbar>
                 </Grid.Row>
-                <div style={{ overflow: 'auto', paddingBottom: 300, height: '100%' }}>
+                <div className="main-body-content">
                   <ListView style={{ marginTop: 10 }} className="infra-mappings-list-view" id="infrastructure_mappings">
                     {filteredSortedPaginatedListItems.items.map(mapping => {
                       const associatedPlansCount = mapping.service_templates && mapping.service_templates.length;

diff --git a/app/javascript/react/screens/App/Overview/Overview.js b/app/javascript/react/screens/App/Overview/Overview.js
@@ -291,20 +291,18 @@ class Overview extends React.Component {
       productFeatures
     } = this.props;
 
+    const isMainContentLoading =
+      !requestsWithTasksPreviouslyFetched &&
+      !this.hasMadeInitialPlansFetch &&
+      (isFetchingAllRequestsWithTasks ||
+        isFetchingProviders ||
+        isFetchingTransformationPlans ||
+        isFetchingArchivedTransformationPlans ||
+        isFetchingTransformationMappings);
+
     const mainContent = (
       <React.Fragment>
-        <Spinner
-          loading={
-            !requestsWithTasksPreviouslyFetched &&
-            !this.hasMadeInitialPlansFetch &&
-            (isFetchingAllRequestsWithTasks ||
-              isFetchingProviders ||
-              isFetchingTransformationPlans ||
-              isFetchingArchivedTransformationPlans ||
-              isFetchingTransformationMappings)
-          }
-          style={{ marginTop: 200 }}
-        >
+        <Spinner loading={isMainContentLoading} style={{ marginTop: 200 }}>
           {hasSufficientProviders ? (
             !!transformationMappings.length || !!transformationPlans.length || !!archivedTransformationPlans.length ? (
               <Migrations
@@ -390,16 +388,13 @@ class Overview extends React.Component {
 
     // Full-height grey background (.cards-pf) for in-progress cards and empty states, otherwise only grey behind aggregate cards
     const overviewContent =
-      inProgressCardsVisible || emptyStateVisible ? (
-        <div
-          className="row cards-pf"
-          style={{ overflow: 'auto', overflowX: 'hidden', paddingBottom: 50, height: '100%' }}
-        >
+      (inProgressCardsVisible || emptyStateVisible) && !isMainContentLoading ? (
+        <div className="row cards-pf main-body-content">
           {this.renderAggregateDataCards()}
           {mainContent}
         </div>
       ) : (
-        <div className="row" style={{ overflow: 'auto', overflowX: 'hidden', paddingBottom: 50, height: '100%' }}>
+        <div className="row main-body-content">
           <div className="row cards-pf" style={{ marginLeft: 0, marginRight: 0 }}>
             {this.renderAggregateDataCards()}
           </div>
@@ -410,12 +405,12 @@ class Overview extends React.Component {
       );
 
     return (
-      <React.Fragment>
+      <div className="main-scroll-container">
         <MigrationBreadcrumbBar activeHref="#/plans" productFeatures={productFeatures} />
         {overviewContent}
         {mappingWizardVisible && this.mappingWizard}
         {planWizardVisible && this.planWizard}
-      </React.Fragment>
+      </div>
     );
   }
 }

diff --git a/app/javascript/react/screens/App/Plan/Plan.js b/app/javascript/react/screens/App/Plan/Plan.js
@@ -163,7 +163,7 @@ class Plan extends React.Component {
       null;
 
     return (
-      <React.Fragment>
+      <div className="main-scroll-container">
         <Toolbar>
           <Breadcrumb.Item active>{__('Migration')}</Breadcrumb.Item>
           <Breadcrumb.Item href="#/plans">{__('Migration Plans')}</Breadcrumb.Item>
@@ -278,7 +278,7 @@ class Plan extends React.Component {
             }
           />
         )}
-      </React.Fragment>
+      </div>
     );
   }
 }

diff --git a/...vascript/react/screens/App/Plan/components/PlanRequestDetailList/PlanRequestDetailList.js b/...vascript/react/screens/App/Plan/components/PlanRequestDetailList/PlanRequestDetailList.js
@@ -208,7 +208,7 @@ class PlanRequestDetailList extends React.Component {
             </Toolbar>
           )}
         </Grid.Row>
-        <div style={{ overflow: 'auto', paddingBottom: 300, height: '100%' }}>
+        <div className="main-body-content">
           <ListView className="plan-request-details-list">
             {filteredSortedPaginatedListItems.items.map((task, n) => {
               let currentDescription = task.options.progress

diff --git a/app/javascript/react/screens/App/Plan/components/PlanVmsList.js b/app/javascript/react/screens/App/Plan/components/PlanVmsList.js
@@ -20,7 +20,7 @@ const PlanVmsList = props => (
             {renderActiveFilters(filteredSortedPaginatedListItems)}
           </Toolbar>
         </Grid.Row>
-        <div style={{ overflow: 'auto', paddingBottom: 300, height: '100%' }}>
+        <div className="main-body-content">
           <ListView className="plan-request-details-list">
             {filteredSortedPaginatedListItems.items.map((task, n) => (
               <ListView.Item

diff --git a/app/javascript/react/screens/App/Settings/Settings.js b/app/javascript/react/screens/App/Settings/Settings.js
@@ -16,7 +16,7 @@ class Settings extends React.Component {
     const { match, redirectTo, productFeatures } = this.props;
 
     return (
-      <React.Fragment>
+      <div className="main-scroll-container">
         <MigrationBreadcrumbBar activeHref="#/settings" productFeatures={productFeatures} />
         <div style={{ marginTop: 10 }}>
           <Tabs id="settings-tabs" activeKey={match.path} onSelect={key => redirectTo(key)} unmountOnExit>
@@ -28,7 +28,7 @@ class Settings extends React.Component {
             </Tab>
           </Tabs>
         </div>
-      </React.Fragment>
+      </div>
     );
   }
 }

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
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Settings component renders correctly 1`] = `
-<Fragment>
+<div
+  className="main-scroll-container"
+>
   <MigrationBreadcrumbBar
     activeHref="#/settings"
   />
@@ -32,5 +34,5 @@ exports[`Settings component renders correctly 1`] = `
       </Tab>
     </Uncontrolled(Tabs)>
   </div>
-</Fragment>
+</div>
 `;
diff --git a/...ct/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostsList.js b/...ct/screens/App/Settings/screens/ConversionHostsSettings/components/ConversionHostsList.js
@@ -43,7 +43,7 @@ const ConversionHostsList = ({
               {renderActiveFilters(filteredSortedPaginatedListItems)}
             </Toolbar>
           </Grid.Row>
-          <div style={{ overflow: 'auto', paddingBottom: 300, height: '100%' }}>
+          <div className="main-body-content">
             <ListView className="conversion-hosts-list" id="conversion_hosts">
               {filteredSortedPaginatedListItems.items.map(listItem => {
                 const { isTask } = listItem.meta;

diff --git a/...nversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap b/...nversionHostsSettings/components/__tests__/__snapshots__/ConversionHostsList.test.js.snap
@@ -82,13 +82,7 @@ exports[`conversion hosts list renders the inner list view correctly 1`] = `
     </withContext(Toolbar)>
   </Row>
   <div
-    style={
-      Object {
-        "height": "100%",
-        "overflow": "auto",
-        "paddingBottom": 300,
-      }
-    }
+    className="main-body-content"
   >
     <ListView
       className="conversion-hosts-list"