ENCD-5432 Use WalkMe test snippet on nonproduction hosts

src/encoded/static/components/app.js

@@ -1239,7 +1239,7 @@ class App extends React.Component {
                     <link rel="canonical" href={canonical} />
                     <link href="https://fonts.googleapis.com/css2?family=Mada:wght@200;400;500;600;700&family=Oswald:wght@200;300;400;500&family=Quicksand:wght@300;400;600&display=swap" rel="stylesheet" />
                     <script async src="//www.google-analytics.com/analytics.js" />
-                    <script async src="https://cdn.walkme.com/users/8c7ff9322d01408798869806f9f5a132/walkme_8c7ff9322d01408798869806f9f5a132_https.js" />
+                    <script async src={`https://cdn.walkme.com/users/8c7ff9322d01408798869806f9f5a132/${globals.isProductionHost(this.props.href) ? '' : 'test/'}walkme_8c7ff9322d01408798869806f9f5a132_https.js`} />
                     {this.props.inline ? <script data-prop-name="inline" dangerouslySetInnerHTML={{ __html: this.props.inline }} /> : null}
                     {this.props.styles ? <link rel="stylesheet" href={this.props.styles} /> : null}
                     {newsHead(this.props, `${hrefUrl.protocol}//${hrefUrl.host}`)}

src/encoded/static/components/globals.js

@@ -1,5 +1,6 @@
 import _ from 'underscore';
 import ga from 'google-analytics';
+import url from 'url';
 import Registry from '../libs/registry';
 import DataColors from './datacolors';
 
@@ -154,7 +155,16 @@ export function zeroFill(n, digits) {
 export const statusToClassElement = status => status.toLowerCase().replace(/ /g, '-').replace(/\(|\)/g, '');
 
 
-export const productionHost = { 'www.encodeproject.org': 1, 'encodeproject.org': 1, 'www.encodedcc.org': 1 };
+/**
+ * Returns true if code runs on the production host, as opposed to test, demos, or local. This
+ * applies to both server and browser rendering.
+ * @param {string} currentUrl Normally from React context.location_href
+ *
+ * @return True if code runs on production host
+ */
+export const isProductionHost = currentUrl => (
+    ['www.encodeproject.org', 'encodeproject.org', 'www.encodedcc.org'].includes(url.parse(currentUrl).hostname)
+);
 
 export const encodeVersionMap = {
     ENCODE2: '2',

src/encoded/static/components/navigation.js

@@ -5,7 +5,7 @@ import url from 'url';
 import { Navbar, Nav, NavItem } from '../libs/ui/navbar';
 import { DropdownMenu, DropdownMenuSep } from '../libs/ui/dropdown-menu';
 import { CartStatus } from './cart';
-import { productionHost } from './globals';
+import { isProductionHost } from './globals';
 import Tooltip from '../libs/ui/tooltip';
 import { BrowserFeat } from './browserfeat';
 
@@ -46,7 +46,7 @@ export default class Navigation extends React.Component {
             /** ID of the currently dropped-down main navigation menu; '' if none */
             openDropdown: '',
             /** True if test warning banner visible; default depends on domain */
-            testWarning: !productionHost[url.parse(context.location_href).hostname],
+            testWarning: !isProductionHost(context.location_href),
         };
 
         // Bind this to non-React methods.