Add basic caching and minor updates to UI

Author: marthacryan

dash/dash-renderer/src/components/error/menu/DebugMenu.css

@@ -24,6 +24,8 @@
     bottom: 100%;
     right: 0;
     gap: 8px;
+    max-height: calc(100vh - 75px);
+    justify-content: flex-end;
 }
 
 .dash-debug-menu__version-opt-out {
@@ -66,6 +68,8 @@
     align-items: center;
     border-radius: 4px;
     cursor: pointer;
+    line-height: 18px;
+    padding: 16px 12px;
 }
 
 .dash-debug-menu__version-opt-out__buttons-container {

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

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 
 import './VersionInfo.css';
 
+const HOUR_IN_MS = 3600000;
 const DAY_IN_MS = 86400000;
 
 function compareVersions(v1, v2) {
@@ -20,15 +21,34 @@ function compareVersions(v1, v2) {
 }
 
 async function requestDashVersionInfo(currentDashVersion, dashVersionUrl) {
-    return fetch(dashVersionUrl, {
-        method: 'POST',
-        body: JSON.stringify({
-            dash_version: currentDashVersion
-        }),
-        headers: {
-            'Content-Type': 'application/json'
-        }
-    }).then(response => response.json());
+    const cachedVersionInfo = localStorage.getItem('cachedNewDashVersion');
+    const lastFetched = localStorage.getItem('lastFetched');
+    if (
+        lastFetched &&
+        Date.now() - Number(lastFetched) < HOUR_IN_MS &&
+        cachedVersionInfo
+    ) {
+        return JSON.parse(cachedVersionInfo);
+    } else {
+        return fetch(dashVersionUrl, {
+            method: 'POST',
+            body: JSON.stringify({
+                dash_version: currentDashVersion
+            }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+            .then(response => response.json())
+            .then(body => {
+                localStorage.setItem(
+                    'cachedNewDashVersion',
+                    JSON.stringify(body.version)
+                );
+                localStorage.setItem('lastFetched', Date.now());
+                return body.version;
+            });
+    }
 }
 
 function shouldShowUpgradeNotification(
@@ -68,11 +88,9 @@ export const VersionInfo = ({
     showNotifications,
     setShowNotifications
 }) => {
-    const [upgradeInfo, setUpgradeInfo] = useState([]);
+    const [newDashVersion, setNewDashVersion] = useState(undefined);
     const [upgradeTooltipOpened, setUpgradeTooltipOpened] = useState(false);
 
-    const newDashVersion = upgradeInfo[0] ? upgradeInfo[0].version : undefined;
-
     const setDontShowAgain = () => {
         // Set local storage to record the last dismissed notification
         setUpgradeTooltipOpened(false);
@@ -96,8 +114,8 @@ export const VersionInfo = ({
             requestDashVersionInfo(
                 config.dash_version,
                 config.dash_version_url
-            ).then(body => {
-                setUpgradeInfo(body);
+            ).then(version => {
+                setNewDashVersion(version);
             });
         }
     }, [showNotifications]);