Merge pull request #2110 from thostetler/add-proxy-warning

Add proxy URL warning alert

src/config/shim.js

@@ -70,3 +70,17 @@
     })();
   }
 })();
+
+/**
+ * In the case of a proxied URL, we want to show a warning message
+ * Do that by checking for the presence of the canonical URL ([ui|dev|qa].adsabs.harvard.edu)
+ */
+(function checkIfProxied() {
+  const canonicalUrlPattern = /^(ui|qa|dev)\.adsabs\.harvard\.edu$/;
+
+  // if test fails, it is proxied url, set a class on body element
+  if (!canonicalUrlPattern.test(location.hostname)) {
+    const [bodyEl] = document.getElementsByTagName('body');
+    bodyEl.classList.add('is-proxied');
+  }
+})();

src/js/apps/discovery/main.js

@@ -21,8 +21,16 @@ define(['config/discovery.config', 'module'], function(config, module) {
     'js/components/application',
     'js/mixins/discovery_bootstrap',
     'js/mixins/api_access',
+    'js/components/api_feedback',
     'analytics',
-  ], function(Router, Application, DiscoveryBootstrap, ApiAccess, analytics) {
+  ], function(
+    Router,
+    Application,
+    DiscoveryBootstrap,
+    ApiAccess,
+    ApiFeedback,
+    analytics
+  ) {
     var updateProgress =
       typeof window.__setAppLoadingProgress === 'function'
         ? window.__setAppLoadingProgress
@@ -156,10 +164,24 @@ define(['config/discovery.config', 'module'], function(config, module) {
 
           // accessibility: skip to main content
           $('body').on('click', '#skip-to-main-content', function() {
-            $('#main-content').focus();
+            $('#main-content').trigger('focus');
             return false;
           });
 
+          // check for is-proxied class, and if present, send alert
+          if ($('body').hasClass('is-proxied')) {
+            const msg = `You are using a proxied version of ADS, we recommend you switch to the regular non-proxied URL: <a href="https://ui.adsabs.harvard.edu${location.pathname}" rel="noopener noreferrer">https://ui.adsabs.harvard.edu</a>`;
+
+            pubsub.publish(
+              pubsub.getCurrentPubSubKey(),
+              pubsub.ALERT,
+              new ApiFeedback({
+                type: 'danger',
+                msg,
+              })
+            );
+          }
+
           // app is loaded, send timing event
 
           if (window.__PAGE_LOAD_TIMESTAMP) {

src/js/widgets/alerts/templates/page_top_alert.html

@@ -6,7 +6,7 @@
   <div>
     <button type="button" class="close">
       <span aria-hidden="true"
-        ><i class="fa fa-2x fa-times" aria-hidden="true"></i></span
+        ><i class="fa fa-times" aria-hidden="true"></i></span
       ><span class="sr-only">Close</span>
     </button>
   </div>

src/js/widgets/resources/components/app.jsx.js

@@ -24,7 +24,7 @@ define(['underscore', 'react', 'prop-types'], function(_, React, PropTypes) {
           <div className="resources__content__title">{key}</div>
           <div className="resources__content__links">
             {_.map(groups, (g, idx) => (
-              <span>
+              <span key={g.type + idx}>
                 <a
                   href={g.url}
                   target="_blank"

src/styles/sass/ads-sass/any-page.scss

@@ -1,7 +1,11 @@
-
 //allow for semantic headings without changing the look of the button
 .btn {
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     color: #fff;
     font-weight: normal;
     font-size: 1em;
@@ -10,7 +14,6 @@
   }
 }
 
-
 .s-message-control-row {
   text-align: center;
 
@@ -21,66 +24,69 @@
 }
 
 @keyframes fade-in {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-div[data-widget="AlertsWidget"] {
-
+div[data-widget='AlertsWidget'] {
   .alert {
-    margin: 0 -15px 0 -15px;
+    // margin: 0 -15px 0 -15px;
     margin-bottom: 0 !important;
     border-radius: 0;
     font-size: 18px;
+    font-weight: 300;
     border: 0px solid transparent !important;
-    padding: 25px;
-    padding-left: 45px;
-    animation : fade-in 1s;
+    padding: 2rem;
+    animation: fade-in 1s;
     position: relative;
+    display: flex;
+    align-items: center;
   }
 
-  .alert>div {
-    display:inline-block;
+  .alert > div {
+    display: inline-block;
     vertical-align: top;
   }
 
-  .alert>div:first-of-type {
+  .alert > div:first-of-type {
     width: 80%;
   }
-  .alert>div:nth-of-type(2) {
+  .alert > div:nth-of-type(2) {
     width: 19%;
   }
-
 }
 
 .s-tabs-widget {
-
-  .nav-tabs>li>a {
+  .nav-tabs > li > a {
     padding: 5px 10px 10px 10px !important;
     color: $text-color;
   }
 
-  .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
+  .nav-tabs > li.active > a,
+  .nav-tabs > li.active > a:hover,
+  .nav-tabs > li.active > a:focus {
     h5 {
       color: $brand-primary-faded;
     }
     border: $border-light-default;
     border-bottom: none;
     cursor: default;
-
   }
 
   .tab-content {
     @extend .s-ads-card;
-    box-shadow :  0 3px 5px $default-box-shadow-color;
-    border-top : none;
+    box-shadow: 0 3px 5px $default-box-shadow-color;
+    border-top: none;
     position: relative;
     top: -10px;
     border-bottom-left-radius: $border-radius-base;
     border-bottom-right-radius: $border-radius-base;
     background-color: $body-bg;
   }
-
 }
 
 #backToTopBtn {