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

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap

@@ -71,7 +71,9 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
       <div
         className="my-3"
       >
-        <injectIntl(ShimmedIntlComponent) />
+        <injectIntl(ShimmedIntlComponent)
+          problemType="stringresponse"
+        />
       </div>
     </Body>
   </Advanced>
@@ -149,7 +151,9 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced
       <div
         className="my-3"
       >
-        <injectIntl(ShimmedIntlComponent) />
+        <injectIntl(ShimmedIntlComponent)
+          problemType="stringresponse"
+        />
       </div>
     </Body>
   </Advanced>

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx

@@ -79,7 +79,7 @@ export const SettingsWidget = ({
             <MatlabCard matLabApiKey={settings.matLabApiKey} updateSettings={updateSettings} />
           </div>
           <div className="my-3">
-            <SwitchToAdvancedEditorCard />
+            <SwitchToAdvancedEditorCard problemType={problemType} />
           </div>
         </Collapsible.Body>
       </Collapsible.Advanced>

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js

@@ -176,7 +176,7 @@ export const messages = {
   },
   SwitchButtonLabel: {
     id: 'authoring.problemeditor.settings.switchtoadvancededitor.label',
-    defaultMessage: 'Switch To Advanced Editor',
+    defaultMessage: 'Switch to advanced editor',
     description: 'button to switch to the advanced mode of the editor.',
   },
   ConfirmSwitchMessage: {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx

@@ -8,12 +8,16 @@ import { thunkActions } from '../../../../../../data/redux';
 import BaseModal from '../../../../../TextEditor/components/BaseModal';
 import Button from '../../../../../../sharedComponents/Button';
 import { confirmSwitchToAdvancedEditor } from '../hooks';
+import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
 
 export const SwitchToAdvancedEditorCard = ({
+  problemType,
   switchToAdvancedEditor,
 }) => {
   const [isConfirmOpen, setConfirmOpen] = React.useState(false);
 
+  if (problemType === ProblemTypeKeys.ADVANCED) { return null; }
+
   return (
     <Card className="border border-light-700 shadow-none">
       <BaseModal
@@ -45,6 +49,7 @@ export const SwitchToAdvancedEditorCard = ({
 
 SwitchToAdvancedEditorCard.propTypes = {
   switchToAdvancedEditor: PropTypes.func.isRequired,
+  problemType: PropTypes.string.isRequired,
 };
 
 export const mapStateToProps = () => ({

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.test.jsx

@@ -1,12 +1,24 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { SwitchToAdvancedEditorCard } from './SwitchToAdvancedEditorCard';
+import { SwitchToAdvancedEditorCard, mapDispatchToProps } from './SwitchToAdvancedEditorCard';
+import { thunkActions } from '../../../../../../data/redux';
 
 describe('SwitchToAdvancedEditorCard snapshot', () => {
   const mockSwitchToAdvancedEditor = jest.fn().mockName('switchToAdvancedEditor');
   test('snapshot: SwitchToAdvancedEditorCard', () => {
     expect(
-      shallow(<SwitchToAdvancedEditorCard switchToAdvancedEditor={mockSwitchToAdvancedEditor} />),
+      shallow(<SwitchToAdvancedEditorCard switchToAdvancedEditor={mockSwitchToAdvancedEditor} problemType="stringresponse" />),
     ).toMatchSnapshot();
   });
+  test('snapshot: SwitchToAdvancedEditorCard returns null', () => {
+    expect(
+      shallow(<SwitchToAdvancedEditorCard switchToAdvancedEditor={mockSwitchToAdvancedEditor} problemType="advanced" />),
+    ).toMatchSnapshot();
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('updateField from actions.problem.updateField', () => {
+      expect(mapDispatchToProps.switchToAdvancedEditor).toEqual(thunkActions.problem.switchToAdvancedEditor);
+    });
+  });
 });

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap

@@ -45,10 +45,12 @@ exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCar
     variant="link"
   >
     <FormattedMessage
-      defaultMessage="Switch To Advanced Editor"
+      defaultMessage="Switch to advanced editor"
       description="button to switch to the advanced mode of the editor."
       id="authoring.problemeditor.settings.switchtoadvancededitor.label"
     />
   </Button>
 </Card>
 `;
+
+exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCard returns null 1`] = `""`;

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">
+      {lang === 'xml' ? null : (
-        You are using the raw {lang} editor.
+        <Alert variant="danger">
-      </Alert>
+          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();
   });
 });