Add an 'x' button to close the error messages popup #1403

Author: ann-marie-ward

dash-renderer/src/components/error/FrontEnd/FrontEndError.css

@@ -2,6 +2,17 @@
     margin-top: 10px;
 }
 
+.dash-fe-error__icon-x {
+    width: 16px;
+    height: 16px;
+    background-color: red;
+    margin-left: 75px;
+    border-radius: 4px;
+    border: 1px solid;
+
+}
+
+
 .dash-fe-errors {
     min-width: 386px;
     max-width: 650px;

dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import './FrontEndError.css';
+import OffIcon from '../icons/OffIcon.svg';
 import PropTypes from 'prop-types';
 import {FrontEndError} from './FrontEndError.react';
 
@@ -9,9 +10,9 @@ class FrontEndErrorContainer extends Component {
     }
 
     render() {
-        const {errors, connected} = this.props;
+        const {errors, connected, errorsOpened, clickHandler} = this.props;
         const errorsLength = errors.length;
-        if (errorsLength === 0) {
+        if (errorsLength === 0 || !errorsOpened) {
             return null;
         }
 
@@ -34,17 +35,27 @@ class FrontEndErrorContainer extends Component {
                         </strong>
                         ){connected ? null : '\u00a0 🚫 Server Unavailable'}
                     </div>
+                    <div
+                        className='dash-error-card__message'
+                        onClick={() => clickHandler()}
+                    >
+                        <OffIcon className='dash-fe-error__icon-x' />
+                    </div>
                 </div>
+
                 <div className='dash-error-card__list'>{errorElements}</div>
             </div>
         );
     }
 }
 
 FrontEndErrorContainer.propTypes = {
+    id: PropTypes.string,
     errors: PropTypes.array,
     connected: PropTypes.bool,
-    inAlertsTray: PropTypes.any
+    inAlertsTray: PropTypes.any,
+    errorsOpened: PropTypes.any,
+    clickHandler: PropTypes.func
 };
 
 FrontEndErrorContainer.propTypes = {

dash-renderer/src/components/error/GlobalErrorOverlay.react.js

@@ -11,7 +11,7 @@ export default class GlobalErrorOverlay extends Component {
     }
 
     render() {
-        const {visible, error, errorsOpened} = this.props;
+        const {visible, error, errorsOpened, clickHandler} = this.props;
 
         let frontEndErrors;
         if (errorsOpened) {
@@ -21,6 +21,8 @@ export default class GlobalErrorOverlay extends Component {
                 <FrontEndErrorContainer
                     errors={errors}
                     connected={error.backEndConnected}
+                    errorsOpened={errorsOpened}
+                    clickHandler={clickHandler}
                 />
             );
         }
@@ -41,5 +43,6 @@ GlobalErrorOverlay.propTypes = {
     children: PropTypes.object,
     visible: PropTypes.bool,
     error: PropTypes.object,
-    errorsOpened: PropTypes.any
+    errorsOpened: PropTypes.any,
+    clickHandler: PropTypes.func
 };

dash-renderer/src/components/error/icons/OffIcon.svg

@@ -147,6 +147,7 @@ class DebugMenu extends Component {
                     error={error}
                     visible={errCount > 0}
                     errorsOpened={errorsOpened}
+                    clickHandler={toggleErrors}
                 >
                     {this.props.children}
                 </GlobalErrorOverlay>