feat: update styling in advanced problem editor (#216)

src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap

@@ -1,7 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RawEditor renders as expected with content equal to null 1`] = `
+<Fragment>
+  <Alert
+    variant="danger"
+  >
+    You are using the raw 
+    html
+     editor.
+  </Alert>
+</Fragment>
+`;
+
 exports[`RawEditor renders as expected with default behavior 1`] = `
-<div>
+<Fragment>
   <Alert
     variant="danger"
   >
@@ -20,5 +32,21 @@ exports[`RawEditor renders as expected with default behavior 1`] = `
     lang="html"
     value="eDiTablE Text"
   />
-</div>
+</Fragment>
+`;
+
+exports[`RawEditor renders as expected with lang equal to xml 1`] = `
+<Fragment>
+  <injectIntl(ShimmedIntlComponent)
+    innerRef={
+      Object {
+        "current": Object {
+          "value": "Ref Value",
+        },
+      }
+    }
+    lang="xml"
+    value="eDiTablE Text"
+  />
+</Fragment>
 `;

src/editors/sharedComponents/RawEditor/index.jsx

@@ -18,10 +18,12 @@ export const RawEditor = ({
   const value = getValue(content);
 
   return (
-    <div>
-      <Alert variant="danger">
-        You are using the raw {lang} editor.
-      </Alert>
+    <>
+      {lang === 'xml' ? null : (
+        <Alert variant="danger">
+          You are using the raw {lang} editor.
+        </Alert>
+      )}
       { value ? (
         <CodeEditor
           innerRef={editorRef}
@@ -30,7 +32,7 @@ export const RawEditor = ({
         />
       ) : null}
 
-    </div>
+    </>
   );
 };
 RawEditor.defaultProps = {

src/editors/sharedComponents/RawEditor/index.test.jsx

@@ -4,15 +4,41 @@ import { shallow } from 'enzyme';
 import { RawEditor } from '.';
 
 describe('RawEditor', () => {
-  const props = {
+  const defaultProps = {
     editorRef: {
       current: {
         value: 'Ref Value',
       },
     },
     content: { data: { data: 'eDiTablE Text' } },
+    lang: 'html',
   };
+  const xmlProps = {
+    editorRef: {
+      current: {
+        value: 'Ref Value',
+      },
+    },
+    content: { data: { data: 'eDiTablE Text' } },
+    lang: 'xml',
+  };
+  const noContentProps = {
+    editorRef: {
+      current: {
+        value: 'Ref Value',
+      },
+    },
+    content: null,
+    lang: 'html',
+  };
+
   test('renders as expected with default behavior', () => {
-    expect(shallow(<RawEditor {...props} />)).toMatchSnapshot();
+    expect(shallow(<RawEditor {...defaultProps} />)).toMatchSnapshot();
+  });
+  test('renders as expected with lang equal to xml', () => {
+    expect(shallow(<RawEditor {...xmlProps} />)).toMatchSnapshot();
+  });
+  test('renders as expected with content equal to null', () => {
+    expect(shallow(<RawEditor {...noContentProps} />)).toMatchSnapshot();
   });
 });