From 70c0fc6dcf9c9bc4ac354d8cc3dec86ee3d7ff8b Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Wed, 15 Feb 2023 16:37:55 -0500
Subject: [PATCH] fix: settings col width in advanced view (#233)

---
 .../__snapshots__/index.test.jsx.snap         |  4 ++--
 .../EditProblemView/SettingsWidget/index.jsx  |  2 +-
 .../SettingsWidget/messages.js                |  2 +-
 .../SwitchToAdvancedEditorCard.test.jsx.snap  |  2 +-
 .../__snapshots__/index.test.jsx.snap         |  7 ++++---
 .../components/EditProblemView/index.jsx      | 20 ++++++++++---------
 .../components/EditProblemView/index.scss     |  7 ++++++-
 .../__snapshots__/index.test.jsx.snap         | 12 +++++------
 .../sharedComponents/RawEditor/index.jsx      |  4 ++--
 .../sharedComponents/RawEditor/index.test.jsx |  1 +
 10 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
index 7bd06f8f0..03d847439 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
   className="settingsWidget ml-4"
 >
   <div
-    className="mb-3 settingsCardTopdiv"
+    className="mb-3"
   >
     <TypeCard
       problemType="stringresponse"
@@ -92,7 +92,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced
   className="settingsWidget ml-4"
 >
   <div
-    className="mb-3 settingsCardTopdiv"
+    className="mb-3"
   >
     <TypeCard
       problemType="stringresponse"
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
index 08fba6d6d..c42a15ce8 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
@@ -65,7 +65,7 @@ export const SettingsWidget = ({
 
   return (
     <div className="settingsWidget ml-4">
-      <div className="mb-3 settingsCardTopdiv">
+      <div className="mb-3">
         <TypeCard
           answers={answers}
           blockTitle={blockTitle}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js
index 8fa7dfaed..1a5bafb9e 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js
@@ -191,7 +191,7 @@ export const messages = {
   },
   ConfirmSwitchButtonLabel: {
     id: 'authoring.problemeditor.settings.switchtoadvancededitor.message',
-    defaultMessage: 'Switch To Advanced Editor',
+    defaultMessage: 'Switch to advanced editor',
     description: 'message to confirm that a user wants to use the advanced editor',
   },
   explanationInputLabel: {
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
index 745e27c47..dc1e81250 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
@@ -14,7 +14,7 @@ exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCar
         variant="default"
       >
         <FormattedMessage
-          defaultMessage="Switch To Advanced Editor"
+          defaultMessage="Switch to advanced editor"
           description="message to confirm that a user wants to use the advanced editor"
           id="authoring.problemeditor.settings.switchtoadvancededitor.message"
         />
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
index 8843f3e80..245bb0ad1 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
@@ -7,8 +7,9 @@ exports[`EditorProblemView component renders raw editor 1`] = `
   <div
     className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
   >
-    <span
-      className="flex-grow-1"
+    <Container
+      className="advancedEditorTopMargin p-0"
+      fluid={true}
     >
       <RawEditor
         content={null}
@@ -19,7 +20,7 @@ exports[`EditorProblemView component renders raw editor 1`] = `
         }
         lang="xml"
       />
-    </span>
+    </Container>
     <span
       className="editProblemView-settingsColumn"
     >
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
index 03b620a09..1c0be158c 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
@@ -2,6 +2,8 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { connect } from 'react-redux';
+import { Container } from '@edx/paragon';
+
 import AnswerWidget from './AnswerWidget';
 import SettingsWidget from './SettingsWidget';
 import QuestionWidget from './QuestionWidget';
@@ -25,16 +27,16 @@ export const EditProblemView = ({
   return (
     <EditorContainer getContent={getContent}>
       <div className="editProblemView d-flex flex-row flex-nowrap justify-content-end">
-        <span className="flex-grow-1">
-          {isAdvancedProblemType ? (
+        {isAdvancedProblemType ? (
+          <Container fluid className="advancedEditorTopMargin p-0">
             <RawEditor editorRef={editorRef} lang="xml" content={problemState.rawOLX} />
-          ) : (
-            <>
-              <QuestionWidget />
-              <AnswerWidget problemType={problemType} />
-            </>
-          )}
-        </span>
+          </Container>
+        ) : (
+          <span className="flex-grow-1">
+            <QuestionWidget />
+            <AnswerWidget problemType={problemType} />
+          </span>
+        )}
         <span className="editProblemView-settingsColumn">
           <SettingsWidget problemType={problemType} />
         </span>
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
index 500012974..693eadd2f 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
@@ -1,6 +1,11 @@
 .editProblemView {
   .editProblemView-settingsColumn {
-    flex-basis: 320px;
+    width: 320px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .advancedEditorTopMargin {
+    margin-top: 40px;
   }
 }
 
diff --git a/src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap
index f7b70ddf5..d4cb4692f 100644
--- a/src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RawEditor renders as expected with content equal to null 1`] = `
-<Fragment>
+<div>
   <Alert
     variant="danger"
   >
@@ -9,11 +9,11 @@ exports[`RawEditor renders as expected with content equal to null 1`] = `
     html
      editor.
   </Alert>
-</Fragment>
+</div>
 `;
 
 exports[`RawEditor renders as expected with default behavior 1`] = `
-<Fragment>
+<div>
   <Alert
     variant="danger"
   >
@@ -32,11 +32,11 @@ exports[`RawEditor renders as expected with default behavior 1`] = `
     lang="html"
     value="eDiTablE Text"
   />
-</Fragment>
+</div>
 `;
 
 exports[`RawEditor renders as expected with lang equal to xml 1`] = `
-<Fragment>
+<div>
   <injectIntl(ShimmedIntlComponent)
     innerRef={
       Object {
@@ -48,5 +48,5 @@ exports[`RawEditor renders as expected with lang equal to xml 1`] = `
     lang="xml"
     value="eDiTablE Text"
   />
-</Fragment>
+</div>
 `;
diff --git a/src/editors/sharedComponents/RawEditor/index.jsx b/src/editors/sharedComponents/RawEditor/index.jsx
index 2d1d3347a..e62cb36cb 100644
--- a/src/editors/sharedComponents/RawEditor/index.jsx
+++ b/src/editors/sharedComponents/RawEditor/index.jsx
@@ -18,7 +18,7 @@ export const RawEditor = ({
   const value = getValue(content);
 
   return (
-    <>
+    <div>
       {lang === 'xml' ? null : (
         <Alert variant="danger">
           You are using the raw {lang} editor.
@@ -32,7 +32,7 @@ export const RawEditor = ({
         />
       ) : null}
 
-    </>
+    </div>
   );
 };
 RawEditor.defaultProps = {
diff --git a/src/editors/sharedComponents/RawEditor/index.test.jsx b/src/editors/sharedComponents/RawEditor/index.test.jsx
index 86f0cc765..9db6b86af 100644
--- a/src/editors/sharedComponents/RawEditor/index.test.jsx
+++ b/src/editors/sharedComponents/RawEditor/index.test.jsx
@@ -30,6 +30,7 @@ describe('RawEditor', () => {
     },
     content: null,
     lang: 'html',
+    width: { width: '80%' },
   };
 
   test('renders as expected with default behavior', () => {