feat: react challenges (#16099)

* chore(packages): Update redux utils

* feat(Panes): Invert control of panes map creation

* feat(Modern): Add view

* feat(Panes): Decouple panes from Challenges

* fix(Challenges): Decouple challenge views from panes map

* fix(Challenge/views): PanesMap => mapStateToPanesMap

This clarifies what these functions are doing

* fix(Challenges): Add view type

* fix(Panes): Remove unneeded panes container

* feat(Panes): Invert control of pane content render

This decouples the Panes from the content they render, allowing for
greater flexibility.

* feat(Modern): Add side panel

This is common between modern and classic

* feat(seed): Array to string file content

* fix(files): Modern files should be polyvinyls

* feat(Modern): Create editors per file

* fix(seed/React): Incorrect keyfile name

* feat(Modern): Highligh jsx correctly

This adds highlighting for jsx. Unfortunately, this disables linting for
non-javascript files as jshint will only work for those

* feat(rechallenge): Add jsx ext to babel transformer

* feat(seed): Normalize challenge files head/tail/content

* refactor(rechallenge/build): Rename function

* fix(code-storage): Pull in files from localStorage

* feat(Modern/React): Add Enzyme to test runner

This enables testing of React challenges

* feat(Modern): Add submission type

* refactor(Panes): Rename panes map update action

common/app/routes/Challenges/redux/index.js

@@ -57,6 +57,8 @@ export const types = createTypes([
   'unlockUntrustedCode',
   'closeChallengeModal',
   'updateSuccessMessage',
+  // |- modern
+  'modernEditorUpdated',
 
   // rechallenge
   'executeChallenge',
@@ -83,7 +85,8 @@ export const types = createTypes([
   'toggleMap',
   'togglePreview',
   'toggleSidePanel',
-  'toggleStep'
+  'toggleStep',
+  'toggleModernEditor'
 ], ns);
 
 // routes
@@ -93,6 +96,11 @@ export const onRouteCurrentChallenge =
 
 // classic
 export const classicEditorUpdated = createAction(types.classicEditorUpdated);
+// modern
+export const modernEditorUpdated = createAction(
+  types.modernEditorUpdated,
+  (key, content) => ({ key, content })
+);
 // challenges
 export const closeChallengeModal = createAction(types.closeChallengeModal);
 export const updateHint = createAction(types.updateHint);
@@ -204,6 +212,9 @@ export const challengeMetaSelector = createSelector(
   }
 );
 
+export const showPreviewSelector = state =>
+  !!challengeMetaSelector(state).showPreview;
+
 export default combineReducers(
   handleActions(
     () => ({