Remove opt out dialog

Author: marthacryan

dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css

@@ -2,7 +2,7 @@
     border-radius: 4px;
     width: 80vw;
     position: relative;
-    height: calc(100vh - 200px);
+    height: calc(100vh - 75px);
     overflow: auto;
     box-sizing: border-box;
     background: #ffffff;

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

@@ -169,7 +169,6 @@
     padding: 16px;
     width: 600px;
     max-width: 800px;
-    max-height: calc(100vh - 200px);
     margin-bottom: 4px;
     background-color: white;
     overflow: auto;

dash/dash-renderer/src/components/error/menu/DebugMenu.react.js

@@ -10,7 +10,8 @@ import ErrorIcon from '../icons/ErrorIcon.svg';
 import GraphIcon from '../icons/GraphIcon.svg';
 import OffIcon from '../icons/OffIcon.svg';
 import {VersionInfo} from './VersionInfo.react';
-import {PopupContent} from './PopupContent.react';
+import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react';
+import {FrontEndErrorContainer} from '../FrontEnd/FrontEndErrorContainer.react';
 
 const classes = (base, variant, variant2) =>
     `${base} ${base}--${variant}` + (variant2 ? ` ${base}--${variant2}` : '');
@@ -22,9 +23,7 @@ const MenuContent = ({
     toggleErrors,
     errCount,
     toggleCallbackGraph,
-    config,
-    showNotifications,
-    setShowNotifications
+    config
 }) => {
     const _StatusIcon = hotReload
         ? connected
@@ -62,11 +61,7 @@ const MenuContent = ({
                 Callbacks
             </button>
             <div className='dash-debug-menu__divider' />
-            <VersionInfo
-                config={config}
-                showNotifications={showNotifications}
-                setShowNotifications={setShowNotifications}
-            />
+            <VersionInfo config={config} />
             <div className='dash-debug-menu__divider' />
             <div className='dash-debug-menu__status'>
                 Server
@@ -82,12 +77,7 @@ class DebugMenu extends Component {
 
         this.state = {
             opened: false,
-            popup: 'errors',
-            // Should be undefined if the user has not made a choice yet
-            showNotifications:
-                localStorage.getItem('showNotifications') === null
-                    ? null
-                    : localStorage.getItem('showNotifications') === 'true'
+            popup: 'errors'
         };
     }
 
@@ -97,11 +87,6 @@ class DebugMenu extends Component {
         const errCount = error.frontEnd.length + error.backEnd.length;
         const connected = error.backEndConnected;
 
-        const setShowNotifications = value => {
-            localStorage.setItem('showNotifications', value);
-            this.setState({showNotifications: value});
-        };
-
         const toggleErrors = () => {
             this.setState({popup: popup == 'errors' ? null : 'errors'});
         };
@@ -115,15 +100,18 @@ class DebugMenu extends Component {
         const errors = concat(error.frontEnd, error.backEnd);
 
         const popupContent = (
-            <PopupContent
-                popup={popup}
-                errors={errors}
-                backEndConnected={error.backEndConnected}
-                errCount={errCount}
-                toggleErrors={toggleErrors}
-                showNotifications={this.state.showNotifications}
-                setShowNotifications={setShowNotifications}
-            />
+            <div className='dash-debug-menu__popup'>
+                {popup == 'callbackGraph' ? (
+                    <CallbackGraphContainer />
+                ) : undefined}
+                {popup == 'errors' && errCount > 0 ? (
+                    <FrontEndErrorContainer
+                        clickHandler={toggleErrors}
+                        errors={errors}
+                        connected={error.backEndConnected}
+                    />
+                ) : undefined}
+            </div>
         );
 
         const menuContent = (
@@ -135,8 +123,6 @@ class DebugMenu extends Component {
                 config={config}
                 hotReload={hotReload}
                 connected={connected}
-                showNotifications={this.state.showNotifications}
-                setShowNotifications={setShowNotifications}
             />
         );
 

dash/dash-renderer/src/components/error/menu/PopupContent.react.js

@@ -2,7 +2,6 @@ import React, {useEffect, useState} from 'react';
 
 import './VersionInfo.css';
 
-const HOUR_IN_MS = 3600000;
 const DAY_IN_MS = 86400000;
 
 function compareVersions(v1, v2) {
@@ -25,7 +24,7 @@ async function requestDashVersionInfo(currentDashVersion, dashVersionUrl) {
     const lastFetched = localStorage.getItem('lastFetched');
     if (
         lastFetched &&
-        Date.now() - Number(lastFetched) < HOUR_IN_MS &&
+        Date.now() - Number(lastFetched) < DAY_IN_MS &&
         cachedVersionInfo
     ) {
         return JSON.parse(cachedVersionInfo);
@@ -51,11 +50,8 @@ async function requestDashVersionInfo(currentDashVersion, dashVersionUrl) {
     }
 }
 
-function shouldShowUpgradeNotification(
-    currentDashVersion,
-    newDashVersion,
-    showNotifications
-) {
+function shouldShowUpgradeNotification(currentDashVersion, newDashVersion) {
+    const showNotifications = localStorage.getItem('showNotifications');
     const lastDismissed = localStorage.getItem('lastDismissed');
     const lastDismissedVersion = localStorage.getItem('lastDismissedVersion');
     if (
@@ -83,18 +79,14 @@ function shouldShowUpgradeNotification(
     }
 }
 
-export const VersionInfo = ({
-    config,
-    showNotifications,
-    setShowNotifications
-}) => {
+export const VersionInfo = ({config}) => {
     const [newDashVersion, setNewDashVersion] = useState(undefined);
     const [upgradeTooltipOpened, setUpgradeTooltipOpened] = useState(false);
 
     const setDontShowAgain = () => {
         // Set local storage to record the last dismissed notification
         setUpgradeTooltipOpened(false);
-        setShowNotifications(false);
+        localStorage.setItem('showNotifications', true);
     };
 
     const setRemindMeLater = () => {
@@ -110,15 +102,13 @@ export const VersionInfo = ({
     };
 
     useEffect(() => {
-        if (showNotifications) {
-            requestDashVersionInfo(
-                config.dash_version,
-                config.dash_version_url
-            ).then(version => {
-                setNewDashVersion(version);
-            });
-        }
-    }, [showNotifications]);
+        requestDashVersionInfo(
+            config.dash_version,
+            config.dash_version_url
+        ).then(version => {
+            setNewDashVersion(version);
+        });
+    }, []);
 
     useEffect(() => {
         const hideUpgradeTooltip = e => {
@@ -161,8 +151,7 @@ export const VersionInfo = ({
             <span>v{config.dash_version}</span>
             {shouldShowUpgradeNotification(
                 config.dash_version,
-                newDashVersion,
-                showNotifications
+                newDashVersion
             ) ? (
                 <button
                     className='dash-debug-menu__upgrade-button'