Show an error message if the API is not found (#133)

mofojed · web-flow · commit 2a9239f8720e · 2021-07-30T10:10:54.000-04:00
- Check if window.dh exists when starting up, show an error message if it does not
diff --git a/packages/code-studio/public/index.html b/packages/code-studio/public/index.html
@@ -37,6 +37,28 @@
       src="%REACT_APP_CORE_API_URL%/%REACT_APP_CORE_API_NAME%"
       type="text/javascript"
     ></script>
+    <script>
+      (function () {
+        document.addEventListener('DOMContentLoaded', function() {
+          // If for some reason the API doesn't load, our app will not work. Write out a message to help the user.
+          if (!window.dh) {
+            document.getElementById('root').insertAdjacentHTML(
+              'afterbegin',
+              `<div class="modal  d-block">
+                <div class="modal-dialog modal-dialog-centered theme-bg-light">
+                  <div class="modal-content">
+                    <div class="modal-body">
+                      <h5 class="modal-title">Error: Unable to load API</h5>
+                      <p class="text-break">Ensure the server is running and you are able to reach %REACT_APP_CORE_API_URL%/%REACT_APP_CORE_API_NAME%, then refresh the page.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>`
+            );
+          }
+        });
+      })();
+    </script>
     <title>Deephaven</title>
   </head>
   <body>
diff --git a/packages/components/scss/new_variables.scss b/packages/components/scss/new_variables.scss
@@ -6,7 +6,7 @@ $spacer-3: map-get($spacers, 3);
 $spacer-4: map-get($spacers, 4);
 $spacer-5: map-get($spacers, 5);
 
-/* Marching Ants for golden layout dropzone and drag and drop */
+//Marching Ants for golden layout dropzone and drag and drop
 //top bottom, left right.
 //create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal
 //size them to ant-size and thickness
diff --git a/packages/iris-grid/src/AdvancedFilterCreatorSelectValueList.jsx b/packages/iris-grid/src/AdvancedFilterCreatorSelectValueList.jsx
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { CSSTransition } from 'react-transition-group';
-import dh from '@deephaven/jsapi-shim';
+import dh, { PropTypes as APIPropTypes } from '@deephaven/jsapi-shim';
 import { LoadingSpinner, SelectValueList } from '@deephaven/components';
 import Log from '@deephaven/log';
 import Formatter from './Formatter';
@@ -271,8 +271,7 @@ AdvancedFilterCreatorSelectValueList.propTypes = {
   invertSelection: PropTypes.bool,
   selectedValues: PropTypes.arrayOf(PropTypes.any),
   onChange: PropTypes.func,
-  filters: PropTypes.arrayOf(PropTypes.instanceOf(dh.FilterCondition))
-    .isRequired,
+  filters: PropTypes.arrayOf(APIPropTypes.FilterCondition).isRequired,
   formatter: PropTypes.instanceOf(Formatter).isRequired,
 };
 
