Add withBackground HOC to fix full page backgrounds (#5896)

* background HOC and application

* add test

* better displayName

* apply to nqf

frontend/src/metabase/dashboards/components/DashboardList.jsx

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import {Link} from "react-router";
 import cx from "classnames";
 import moment from "moment";
+import { withBackground } from "metabase/hoc/Background";
 
 import * as Urls from "metabase/lib/urls";
 
@@ -146,7 +147,7 @@ class DashboardListItem extends Component {
 
 }
 
-export default class DashboardList extends Component {
+class DashboardList extends Component {
     static propTypes = {
         dashboards: PropTypes.array.isRequired
     };
@@ -166,3 +167,5 @@ export default class DashboardList extends Component {
         );
     }
 }
+
+export default withBackground('bg-slate-extra-light')(DashboardList)

frontend/src/metabase/dashboards/containers/Dashboards.jsx

@@ -145,7 +145,7 @@ export class Dashboards extends Component {
         return (
             <LoadingAndErrorWrapper
                 loading={isLoading}
-                className={cx("relative px4 full-height bg-slate-extra-light", {"flex flex-full flex-column": noDashboardsCreated})}
+                className={cx("relative px4 full-height", {"flex flex-full flex-column": noDashboardsCreated})}
                 noBackground
             >
                 { modalOpen ? this.renderCreateDashboardModal() : null }

frontend/src/metabase/hoc/Background.jsx

+import React, { Component } from 'react'
+
+export const withBackground = (className) => (ComposedComponent) => {
+    return class extends Component {
+        static displayName = 'BackgroundApplicator'
+
+        componentWillMount () {
+            document.body.classList.add(className)
+        }
+
+        componentWillUnmount () {
+            document.body.classList.remove(className)
+        }
+
+        render () {
+            return <ComposedComponent {...this.props} />
+        }
+    }
+}
+

frontend/src/metabase/new_query/containers/MetricSearch.jsx

@@ -81,7 +81,7 @@ export default class MetricSearch extends Component {
                         )
                     } else {
                         return (
-                            <div className="mt2 flex-full flex align-center justify-center bg-slate-extra-light">
+                            <div className="mt2 flex-full flex align-center justify-center">
                                 <EmptyState
                                     message={<span>Defining common metrics for your team makes it even easier to ask questions</span>}
                                     image="/app/img/metrics_illustration"

frontend/src/metabase/new_query/containers/NewQueryOptions.jsx

@@ -7,6 +7,7 @@ import {
     fetchSegments,
 } from 'metabase/redux/metadata'
 
+import { withBackground } from 'metabase/hoc/Background'
 import { resetQuery } from '../new_query'
 
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
@@ -83,7 +84,7 @@ export class NewQueryOptions extends Component {
         const showCustomInsteadOfNewQuestionText = showMetricOption || showSegmentOption
 
         return (
-            <div className="bg-slate-extra-light full-height flex">
+            <div className="full-height flex">
                 <div className="wrapper wrapper--trim lg-wrapper--trim xl-wrapper--trim flex-full px1 mt4 mb2 align-center">
                      <div className="flex align-center justify-center" style={{minHeight: "100%"}}>
                         <ol className="flex-full Grid Grid--guttersXl Grid--full small-Grid--1of2 large-Grid--normal">
@@ -134,4 +135,4 @@ export class NewQueryOptions extends Component {
     }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(NewQueryOptions)
+export default connect(mapStateToProps, mapDispatchToProps)(withBackground('bg-slate-extra-light')(NewQueryOptions))

frontend/src/metabase/new_query/containers/SegmentSearch.jsx

@@ -81,7 +81,7 @@ export default class SegmentSearch extends Component {
                         />
                     } else {
                         return (
-                            <div className="mt2 flex-full flex align-center justify-center bg-slate-extra-light">
+                            <div className="mt2 flex-full flex align-center justify-center">
                                 <EmptyState
                                     message={<span>Defining common segments for your team makes it even easier to ask questions</span>}
                                     image="/app/img/segments_illustration"

frontend/src/metabase/new_query/router_wrappers.js

@@ -2,11 +2,14 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { push } from "react-router-redux";
 
+import { withBackground } from 'metabase/hoc/Background'
+
 import NewQueryOptions from "./containers/NewQueryOptions";
 import SegmentSearch from "./containers/SegmentSearch";
 import MetricSearch from "./containers/MetricSearch";
 
 @connect(null, { onChangeLocation: push })
+@withBackground('bg-slate-extra-light')
 export class NewQuestionStart extends Component {
     getUrlForQuery = (query) => {
         return query.question().getUrl()
@@ -24,6 +27,7 @@ export class NewQuestionStart extends Component {
 }
 
 @connect(null, { onChangeLocation: push })
+@withBackground('bg-slate-extra-light')
 export class NewQuestionMetricSearch extends Component {
     getUrlForQuery = (query) => {
         return query.question().getUrl()
@@ -40,6 +44,7 @@ export class NewQuestionMetricSearch extends Component {
 }
 
 @connect(null, { onChangeLocation: push })
+@withBackground('bg-slate-extra-light')
 export class NewQuestionSegmentSearch extends Component {
     getUrlForQuery = (query) => {
         return query.question().getUrl()

frontend/src/metabase/xray/components/XRayLayout.jsx

 import React from 'react'
+import { withBackground } from 'metabase/hoc/Background'
 
 // A small wrapper to get consistent page structure
-export const XRayPageWrapper = ({ children }) =>
-    <div className="XRayPageWrapper wrapper bg-slate-extra-light pb4 full-height">
+export const XRayPageWrapper = withBackground('bg-slate-extra-light')(({ children }) =>
+    <div className="XRayPageWrapper wrapper pb4 full-height">
         { children }
     </div>
+)
 
 
 // A unified heading for XRay pages

frontend/test/hoc/Background.unit.spec.js

+import React from 'react'
+import jsdom from 'jsdom'
+import { mount } from 'enzyme'
+import { withBackground } from 'metabase/hoc/Background'
+
+describe('withBackground', () => {
+    let wrapper
+
+    beforeEach(() => {
+        window.document = jsdom.jsdom('')
+        document.body.appendChild(document.createElement('div'))
+        // have an existing class to make sure we don't nuke stuff that might be there already
+        document.body.classList.add('existing-class')
+    })
+
+    afterEach(() => {
+        wrapper.detach()
+        window.document = jsdom.jsdom('')
+    })
+
+    it('should properly apply the provided class to the body', () => {
+        const TestComponent = withBackground('my-bg-class')(() => <div>Yo</div>)
+
+        wrapper = mount(<TestComponent />, { attachTo: document.body.firstChild })
+
+        const classListBefore = Object.values(document.body.classList)
+        expect(classListBefore.includes('my-bg-class')).toEqual(true)
+        expect(classListBefore.includes('existing-class')).toEqual(true)
+
+        wrapper.unmount()
+
+        const classListAfter = Object.values(document.body.classList)
+        expect(classListAfter.includes('my-bg-class')).toEqual(false)
+        expect(classListAfter.includes('existing-class')).toEqual(true)
+
+    })
+})