Feat(Challenges): no js preview (#16149)

* fix(files): Decouple files from challenges

* feat(server/react): Remove action logger

use redux remote devtools instead!

* feat(Challenges): Disable js on edit, enable on execute

* feat(Challenge/Preview): Show message when js is disabled

* refactor(frameEpic): Reduce code by using lodash

* feat(frameEpic): Disable js in preview by state

* feat(frameEpic): Colocate epic in Challenges/redux

* refactor(ExecuteChallengeEpic): CoLocated with Challenges

* refactor(executeChallengesEpic): Separate tests from main logic

* feat(Challenge/Preview): Update main on edit

* feat(frameEpuc): Replace frame on edit/execute

This allows for sandbox to work properly

* fix(Challenges/Utils): Require utisl

* revert(frameEpic): Hoist function to mount code in frame

* fix(frameEpic): Ensure new frame is given classname

* feat(executeChallenge): Update main on code unlocked

* fix(frameEpic): Filter out empty test message

* fix(Challenge/Preview): Remove unnessary quote in classname

* feat(codeStorageEpic): Separate localstorage from solutions loading

* fix(fetchUser): Merge user actions into one

prefer many effects from one action over one action to one effect

* fix(themes): Centralize theme utils and defs

* fix(entities.user): Fix user reducer namespacing

* feat(frame): Refactor frameEpic to util

* feat(Challenges.redux): Should not attempt to update main from storage

* fix(loadPreviousChallengeEpic): Refactor for RFR

* fix(Challenges.Modern): Show preview plane

common/app/routes/Challenges/utils/fetch-and-cache.js

@@ -0,0 +1,74 @@
+import { Observable } from 'rx';
+import { ajax$ } from '../../../../utils/ajax-stream';
+
+// value used to break browser ajax caching
+const cacheBreakerValue = Math.random();
+
+export function _fetchScript(
+  {
+    src,
+    cacheBreaker = false,
+    crossDomain = true
+  } = {},
+) {
+  if (!src) {
+    throw new Error('No source provided for script');
+  }
+  if (this.cache.has(src)) {
+    return this.cache.get(src);
+  }
+  const url = cacheBreaker ?
+    `${src}?cacheBreaker=${cacheBreakerValue}` :
+    src;
+  const script = ajax$({ url, crossDomain })
+    .doOnNext(res => {
+      if (res.status !== 200) {
+        throw new Error('Request errror: ' + res.status);
+      }
+    })
+    .map(({ response }) => response)
+    .map(script => `<script>${script}</script>`)
+    .shareReplay();
+
+  this.cache.set(src, script);
+  return script;
+}
+export const fetchScript = _fetchScript.bind({ cache: new Map() });
+
+export function _fetchLink(
+  {
+    link: href,
+    raw = false,
+    crossDomain = true
+  } = {},
+) {
+  if (!href) {
+    return Observable.throw(new Error('No source provided for link'));
+  }
+  if (this.cache.has(href)) {
+    return this.cache.get(href);
+  }
+  // css files with `url(...` may not work in style tags
+  // so we put them in raw links
+  if (raw) {
+    const link = Observable.just(`<link href=${href} rel='stylesheet' />`)
+      .shareReplay();
+    this.cache.set(href, link);
+    return link;
+  }
+  const link = ajax$({ url: href, crossDomain })
+    .doOnNext(res => {
+      if (res.status !== 200) {
+        throw new Error('Request error: ' + res.status);
+      }
+    })
+    .map(({ response }) => response)
+    .map(script => `<style>${script}</style>`)
+    .catch(() => Observable.just(''))
+    .shareReplay();
+
+  this.cache.set(href, link);
+  return link;
+}
+
+export const fetchLink = _fetchLink.bind({ cache: new Map() });