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

CHANGELOG.md

@@ -3,6 +3,10 @@ All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [UNRELEASED]
+### Added
+- [#1508](https://github.com/plotly/dash/pull/1508) Fix [#1403](https://github.com/plotly/dash/issues/1403): Adds an x button
+to close the error messages box.
+
 ### Changed
 - [#1503](https://github.com/plotly/dash/pull/1506) Fix [#1466](https://github.com/plotly/dash/issues/1466): loosen `dash[testing]` requirements for easier integration in external projects. This PR also bumps many `dash[dev]` requirements.
 

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

@@ -2,6 +2,22 @@
     margin-top: 10px;
 }
 
+.dash-fe-error__icon-x {
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: #B9C2CE;
+    font-size: 20px;
+    cursor: pointer;
+    margin-right: 10px
+}
+
+.dash-fe-error__icon-x:hover
+{
+ color:#a1a9b5;
+}
+
+
 .dash-fe-errors {
     min-width: 386px;
     max-width: 650px;

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

@@ -9,9 +9,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,6 +34,12 @@ class FrontEndErrorContainer extends Component {
                         </strong>
                         ){connected ? null : '\u00a0 🚫 Server Unavailable'}
                     </div>
+                    <div
+                        className='dash-fe-error__icon-x'
+                        onClick={() => clickHandler()}
+                    >
+                        ×
+                    </div>
                 </div>
                 <div className='dash-error-card__list'>{errorElements}</div>
             </div>
@@ -42,9 +48,12 @@ class FrontEndErrorContainer extends Component {
 }
 
 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.css

@@ -53,6 +53,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 }
 .dash-error-card__message {
     font-size: 14px;

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/menu/DebugMenu.react.js

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