From b80dad1418eb9bfb0fd465828387d389d651be59 Mon Sep 17 00:00:00 2001
From: Drew Gross <drew.a.gross@gmail.com>
Date: Fri, 4 Mar 2016 00:19:20 -0800
Subject: [PATCH] Detect when an app is unreachable and show a useful error
 message

---
 dashboard/Apps/AppsIndex.react.js | 29 ++++++++++++++++++-----------
 dashboard/Dashboard.js            | 23 +++++++++++++++++++++++
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/dashboard/Apps/AppsIndex.react.js b/dashboard/Apps/AppsIndex.react.js
index 426352b3c3..9e20e99c5f 100644
--- a/dashboard/Apps/AppsIndex.react.js
+++ b/dashboard/Apps/AppsIndex.react.js
@@ -63,17 +63,24 @@ let Metric = (props) => {
 let AppCard = ({
   app,
   icon,
-}) => <li onClick={() => history.pushState(null, html`/apps/${app.slug}/browser`)}>
-  {icon ? <a className={styles.icon}><img src={icon} /></a> : null}
-  <CountsSection className={styles.glance} title='At a glance'>
-    <Metric number={dash(app.users, prettyNumber(app.users))} label='total users' />
-    <Metric number={dash(app.installations, prettyNumber(app.installations))} label='total installations' />
-  </CountsSection>
-  <div className={styles.details}>
-    <a className={styles.appname}>{app.name}</a>
-    <div className={styles.serverVersion}>Server version: <span className={styles.ago}>{app.serverInfo.parseServerVersion || 'unknown'}</span></div>
-  </div>
-</li>
+}) => {
+  let canBrowse = app.serverInfo.error ? null : () => history.pushState(null, html`/apps/${app.slug}/browser`);
+  let versionMessage = app.serverInfo.error ?
+    <div className={styles.serverVersion}>Server not reachable: <span className={styles.ago}>{app.serverInfo.error.toString()}</span></div>:
+    <div className={styles.serverVersion}>Server version: <span className={styles.ago}>{app.serverInfo.parseServerVersion || 'unknown'}</span></div>;
+
+  return <li onClick={canBrowse}>
+    {icon ? <a className={styles.icon}><img src={icon} /></a> : null}
+    <CountsSection className={styles.glance} title='At a glance'>
+      <Metric number={dash(app.users, prettyNumber(app.users))} label='total users' />
+      <Metric number={dash(app.installations, prettyNumber(app.installations))} label='total installations' />
+    </CountsSection>
+    <div className={styles.details}>
+      <a className={styles.appname}>{app.name}</a>
+      {versionMessage}
+    </div>
+  </li>
+}
 
 export default class AppsIndex extends React.Component {
   constructor() {
diff --git a/dashboard/Dashboard.js b/dashboard/Dashboard.js
index cbc14f4104..3868f0abc1 100644
--- a/dashboard/Dashboard.js
+++ b/dashboard/Dashboard.js
@@ -139,6 +139,29 @@ class Dashboard extends React.Component {
           ).then(serverInfo => {
             app.serverInfo = serverInfo;
             return app;
+          }, error => {
+            if (error.code === 100) {
+              app.serverInfo = {
+                error: 'unable to connect to server',
+                enabledFeatures: {},
+                parseServerVersion: "unknown"
+              }
+              return Parse.Promise.as(app);
+            } else if (error.code === 107) {
+              app.serverInfo = {
+                error: 'server version too low',
+                enabledFeatures: {},
+                parseServerVersion: "unknown"
+              }
+              return Parse.Promise.as(app);
+            } else {
+              app.serverInfo = {
+                error: 'unknown error',
+                enabledFeatures: {},
+                parseServerVersion: "unknown"
+              }
+              return Parse.Promise.as(app);
+            }
           });
         }
       });