From aaafd215dabc63352a4ccfe5c1e958b52c14fe82 Mon Sep 17 00:00:00 2001
From: ValeraS <ValeraS@users.noreply.github.com>
Date: Thu, 13 Sep 2018 17:07:12 +0300
Subject: [PATCH] add styles and adjust the monacoEditorMock to show backend
 challenges

---
 packages/learn/src/__mocks__/monacoEditorMock.js | 16 +++++++++++++++-
 .../src/templates/Challenges/backend/Show.js     |  7 +++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/learn/src/__mocks__/monacoEditorMock.js b/packages/learn/src/__mocks__/monacoEditorMock.js
index 343cb133f1..8766737768 100644
--- a/packages/learn/src/__mocks__/monacoEditorMock.js
+++ b/packages/learn/src/__mocks__/monacoEditorMock.js
@@ -1,4 +1,18 @@
 /* eslint-disable */
 import React from 'react';
 
-export default () => React.createElement('div');
+export default (props) => {
+  const { width = '100%', height = '100%' } = props;
+  const fixedWidth = width.toString().indexOf('%') !== -1 ?
+    width : `${width}px`;
+  const fixedHeight = height.toString().indexOf('%') !== -1 ?
+    height : `${height}px`;
+  const style = {
+    width: fixedWidth,
+    height: fixedHeight
+  };  return (
+    <div
+      style={style}
+      className="react-monaco-editor-container" />
+  );
+}
diff --git a/packages/learn/src/templates/Challenges/backend/Show.js b/packages/learn/src/templates/Challenges/backend/Show.js
index a014c4047d..756e68dfc9 100644
--- a/packages/learn/src/templates/Challenges/backend/Show.js
+++ b/packages/learn/src/templates/Challenges/backend/Show.js
@@ -10,6 +10,7 @@ import ChallengeDescription from '../components/Challenge-Description';
 import TestSuite from '../components/Test-Suite';
 import Output from '../components/Output';
 import CompletionModal from '../components/CompletionModal';
+import HelpModal from '../components/HelpModal';
 import ProjectToolPanel from '../project/Tool-Panel';
 import {
   executeChallenge,
@@ -29,6 +30,11 @@ import {
 import Spacer from '../../../components/util/Spacer';
 import { createGuideUrl } from '../utils';
 
+import '../components/tool-panel.css';
+import '../components/preview.css';
+import '../components/test-suite.css';
+import '../classic/classic.css';
+
 // provided by redux form
 const reduxFormPropTypes = {
   fields: PropTypes.object,
@@ -157,6 +163,7 @@ export class BackEnd extends PureComponent {
           <Spacer />
         </Col>
         <CompletionModal />
+        <HelpModal />
       </Row>
     );
   }