#12120 - Fix: cookies panel is not correctly visible

web/client/components/cookie/Cookie.jsx

@@ -8,6 +8,7 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
+import { createPortal } from 'react-dom';
 import { Glyphicon, Col } from 'react-bootstrap';
 import Button from '../misc/Button';
 import Message from '../../components/I18N/Message';
@@ -94,7 +95,10 @@ class Cookie extends React.Component {
         </a>);
     }
     render() {
-        return this.props.show ? (
+        if (!this.props.show) {
+            return null;
+        }
+        const content = (
             <div className={this.props.seeMore ? "mapstore-cookie-panel see-more" : "mapstore-cookie-panel not-see-more"}>
                 <div role="header" className="cookie-header" style={{height: this.props.seeMore ? "44px" : "0px"}}>
                     {this.props.seeMore ? <Glyphicon className="cookie-close-btn" glyph="1-close" onClick={() => this.props.onMoreDetails(false)}/> : null }
@@ -124,7 +128,8 @@ class Cookie extends React.Component {
                         </div>) : null }
                 </div>
             </div>
-        ) : null;
+        );
+        return createPortal(content, document.body);
     }
     moreDetails = () => {
         this.props.onMoreDetails(!this.props.seeMore);

web/client/components/cookie/__tests__/Cookie-test.jsx

@@ -10,7 +10,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Cookie from '../Cookie';
 import expect from 'expect';
-import TestUtils from 'react-dom/test-utils';
 
 describe('Test for Cookie component', () => {
     beforeEach((done) => {
@@ -27,12 +26,22 @@ describe('Test for Cookie component', () => {
     it('render with defaults', () => {
         const cmp = ReactDOM.render(<Cookie/>, document.getElementById("container"));
         expect(cmp).toExist();
+        expect(document.body.querySelector('.mapstore-cookie-panel')).toNotExist();
     });
 
     it('render with show = true', () => {
         const cmp = ReactDOM.render(<Cookie show externalCookieUrl=""/>, document.getElementById("container"));
         expect(cmp).toExist();
-        expect(TestUtils.scryRenderedDOMComponentsWithClass(cmp, "mapstore-cookie-panel")).toExist();
+        const panel = document.body.querySelector('.mapstore-cookie-panel');
+        expect(panel).toExist();
+        expect(panel.classList.contains('not-see-more')).toBe(true);
+    });
+
+    it('renders cookie panel into document.body via portal', () => {
+        ReactDOM.render(<Cookie show/>, document.getElementById("container"));
+        const panel = document.body.querySelector('.mapstore-cookie-panel');
+        expect(panel).toExist();
+        expect(panel.parentNode).toBe(document.body);
     });
 
 });