WIP [TNL-11898] feat: add multiple problem editor UI

src/editors/containers/EditorContainer/index.tsx

@@ -35,7 +35,7 @@ export const EditorModalWrapper: React.FC<WrapperProps & { onClose: () => void }
   if (fullScreen) {
     return (
       <div
-        className="editor-container d-flex flex-column position-relative zindex-0"
+        className="editor-container bg-light-300 d-flex flex-column position-relative zindex-0"
         style={{ minHeight: '100%' }}
       >
         {children}
@@ -50,7 +50,7 @@ export const EditorModalWrapper: React.FC<WrapperProps & { onClose: () => void }
 
 export const EditorModalBody: React.FC<WrapperProps> = ({ children }) => {
   const { fullScreen } = useEditorContext();
-  return <ModalDialog.Body className={fullScreen ? 'pb-6' : 'pb-0'}>{ children }</ModalDialog.Body>;
+  return <ModalDialog.Body className={`container-mw-xl mx-auto ${fullScreen ? 'pb-6' : 'pb-0'}`}>{ children }</ModalDialog.Body>;
 };
 
 export const FooterWrapper: React.FC<WrapperProps> = ({ children }) => {
@@ -178,7 +178,7 @@ const EditorContainer: React.FC<Props> = ({
             >
               {disableSave
                 ? <Spinner animation="border" className="mr-3" />
-                : <FormattedMessage {...messages.saveButtonLabel} />}
+                : <FormattedMessage {...messages.addCourseButtonLabel} />}
             </Button>
           </ActionRow>
         </ModalDialog.Footer>

src/editors/containers/EditorContainer/messages.ts

@@ -47,10 +47,10 @@ const messages = defineMessages({
     defaultMessage: 'Save changes and return to learning context',
     description: 'Screen reader label for save button',
   },
-  saveButtonLabel: {
-    id: 'authoring.editorfooter.savebutton.label',
-    defaultMessage: 'Save',
-    description: 'Label for Save button',
+  addCourseButtonLabel: {
+    id: 'authoring.editorfooter.addbutton.label',
+    defaultMessage: 'Add to course',
+    description: 'Label for Add to Course button',
   },
 });
 

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx

@@ -7,7 +7,7 @@ import {
   IconButton,
   Form,
 } from '@openedx/paragon';
-import { FeedbackOutline, DeleteOutline } from '@openedx/paragon/icons';
+import { ChatBubbleOutline, DeleteOutline } from '@openedx/paragon/icons';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { selectors } from '../../../../../data/redux';
@@ -105,7 +105,7 @@ const AnswerOption = ({
           disabled={problemType === ProblemTypeKeys.NUMERIC}
         />
       </div>
-      <div className="ml-1 flex-grow-1">
+      <div className="mx-2.5 flex-grow-1">
         {getInputArea()}
         <Collapsible.Body>
           <FeedbackBox
@@ -125,7 +125,7 @@ const AnswerOption = ({
       <div className="d-flex flex-row flex-nowrap">
         <Collapsible.Trigger aria-label="Toggle feedback" className="btn-icon btn-icon-primary btn-icon-md align-items-center">
           <Icon
-            src={FeedbackOutline}
+            src={ChatBubbleOutline}
             alt={intl.formatMessage(messages.feedbackToggleIconAltText)}
           />
         </Collapsible.Trigger>

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx

@@ -26,7 +26,7 @@ const AnswersContainer = ({
   useAnswerContainer({ answers, problemType, updateField });
 
   return (
-    <div className="answers-container border border-light-700 rounded py-4 pl-4 pr-3">
+    <div className="answers-container rounded">
       {answers.map((answer) => (
         <AnswerOption
           key={answer.id}
@@ -35,44 +35,54 @@ const AnswersContainer = ({
         />
       ))}
 
-      {problemType !== ProblemTypeKeys.NUMERIC ? (
-        <Button
-          variant="add"
-          onClick={addAnswer}
-        >
-          <FormattedMessage {...messages.addAnswerButtonText} />
-        </Button>
-
-      ) : (
-        <Dropdown>
-          <Dropdown.Toggle
-            id="Add-Answer-Or-Answer-Range"
-            variant="tertiary"
-            className="pl-0"
+      <div className="d-flex align-items-center mt-2.5">
+        {problemType !== ProblemTypeKeys.NUMERIC ? (
+          <Button
+            variant="add"
+            onClick={addAnswer}
           >
-            <Icon
-              src={Add}
-            />
             <FormattedMessage {...messages.addAnswerButtonText} />
-          </Dropdown.Toggle>
-          <Dropdown.Menu>
-            <Dropdown.Item
-              key="add-answer"
-              onClick={addAnswer}
-              className={`AddAnswerRange ${answers.length === 1 && answers[0].isAnswerRange ? 'disabled' : ''}`}
+          </Button>
+
+        ) : (
+          <Dropdown>
+            <Dropdown.Toggle
+              id="Add-Answer-Or-Answer-Range"
+              variant="tertiary"
+              className="pl-0"
             >
+              <Icon
+                src={Add}
+              />
               <FormattedMessage {...messages.addAnswerButtonText} />
-            </Dropdown.Item>
-            <Dropdown.Item
-              key="add-answer-range"
-              onClick={addAnswerRange}
-              className={`AddAnswerRange ${answers.length > 1 || (answers.length === 1 && answers[0].isAnswerRange) ? 'disabled' : ''}`}
-            >
-              <FormattedMessage {...messages.addAnswerRangeButtonText} />
-            </Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
-      )}
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item
+                key="add-answer"
+                onClick={addAnswer}
+                className={`AddAnswerRange ${answers.length === 1 && answers[0].isAnswerRange ? 'disabled' : ''}`}
+              >
+                <FormattedMessage {...messages.addAnswerButtonText} />
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="add-answer-range"
+                onClick={addAnswerRange}
+                className={`AddAnswerRange ${answers.length > 1 || (answers.length === 1 && answers[0].isAnswerRange) ? 'disabled' : ''}`}
+              >
+                <FormattedMessage {...messages.addAnswerRangeButtonText} />
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+
+        <Button
+          className="ml-3"
+          variant="add"
+          onClick={() => {}}
+        >
+          Add Explanation
+        </Button>
+      </div>
     </div>
   );
 };

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

@@ -15,14 +15,11 @@ const AnswerWidget = ({
 }) => {
   const problemStaticData = ProblemTypes[problemType];
   return (
-    <div>
-      <div className="mt-4 text-primary-500">
-        <div className="h4">
+    <div className="p-4 border-top border-light">
+      <div className="text-primary-500">
+        <div className="h4 mb-4">
           <FormattedMessage {...messages.answerWidgetTitle} />
         </div>
-        <div className="small">
-          {intl.formatMessage(messages.answerHelperText, { helperText: problemStaticData.description })}
-        </div>
       </div>
       <AnswersContainer problemType={problemType} />
     </div>

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

@@ -2,6 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  IconButton,
+  Icon,
+} from '@openedx/paragon';
+import { DeleteOutline } from '@openedx/paragon/icons';
 import { selectors } from '../../../../../data/redux';
 import messages from './messages';
 
@@ -26,12 +31,16 @@ const ExplanationWidget = ({
   const solutionContent = newContent || initialContent;
   if (!refReady) { return null; }
   return (
-    <div className="tinyMceWidget mt-4 text-primary-500">
-      <div className="h4 mb-3">
+    <div className="tinyMceWidget p-4 text-primary-500 border-top border-light">
+      <div className="d-flex align-items-center justify-content-between h4 mb-3">
         <FormattedMessage {...messages.solutionWidgetTitle} />
-      </div>
-      <div className="small mb-3">
-        <FormattedMessage {...messages.solutionDescriptionText} />
+        <IconButton
+          src={DeleteOutline}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.explanationDeleteIconAltText)}
+          onClick={() => {}}
+          variant="primary"
+        />
       </div>
       <TinyMceWidget
         id="solution"

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

@@ -17,6 +17,11 @@ const messages = defineMessages({
     defaultMessage: 'Enter your explanation',
     description: 'Placeholder text for tinyMCE editor',
   },
+  explanationDeleteIconAltText: {
+    id: 'authoring.problemEditor.explanationwidget.delete.icon.alt',
+    defaultMessage: 'Delete explanation',
+    description: 'Alt text for delete icon',
+  },
 });
 
 export default messages;

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

@@ -26,7 +26,7 @@ const QuestionWidget = ({
   const questionContent = newContent || initialContent;
   if (!refReady) { return null; }
   return (
-    <div className="tinyMceWidget">
+    <div className="tinyMceWidget p-4">
       <div className="h4 mb-3">
         <FormattedMessage {...messages.questionWidgetTitle} />
       </div>

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

@@ -17,13 +17,13 @@ const SettingsOption = ({
   const { isCardCollapsibleOpen, toggleCardCollapse } = showFullCard(hasExpandableTextArea);
 
   return (
-    <Card className={`${className} settingsOption border border-light-700 shadow-none`}>
-      <Card.Section className="settingsCardTitleSection" key={`settingsOption-${title}-header`}>
+    <Card className={`${className} settingsOption`}>
+      <Card.Section className="settingsCardTitleSection pb-3" key={`settingsOption-${title}-header`}>
         <Collapsible.Advanced
           open={isCardCollapsibleOpen}
           onToggle={toggleCardCollapse}
         >
-          <Collapsible.Trigger className="collapsible-trigger d-flex">
+          <Collapsible.Trigger className="collapsible-trigger d-flex align-items-center">
             <span className="flex-grow-1 text-primary-500 x-small">{title}</span>
             <Collapsible.Visible whenClosed>
               <Icon src={KeyboardArrowDown} />

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

@@ -3,13 +3,20 @@ import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
 import {
-  Button, Collapsible,
+  Button,
+  Collapsible,
+  IconButton,
+  Icon,
+  OverlayTrigger,
+  Tooltip,
 } from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 import { selectors, actions } from '../../../../../data/redux';
 import ScoringCard from './settingsComponents/ScoringCard';
 import ShowAnswerCard from './settingsComponents/ShowAnswerCard';
 import HintsCard from './settingsComponents/HintsCard';
 import ResetCard from './settingsComponents/ResetCard';
+import ShuffleCard from './settingsComponents/ShuffleCard';
 import TimerCard from './settingsComponents/TimerCard';
 import TypeCard from './settingsComponents/TypeCard';
 import ToleranceCard from './settingsComponents/Tolerance';
@@ -22,6 +29,29 @@ import './index.scss';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import Randomization from './settingsComponents/Randomization';
 
+const GlobalSettingsHeader = () => (
+  <div className="global-settings d-flex align-items-center text-primary-500 font-weight-500 small mt-3">
+    Global Settings
+    <OverlayTrigger
+      placement="top"
+      overlay={(
+        <Tooltip id="info">
+          Applied to all questions
+        </Tooltip>
+      )}
+    >
+      <IconButton
+        src={InfoOutline}
+        iconAs={Icon}
+        alt="InfoIcon"
+        variant="primary"
+        size="small"
+        className="flex-shrink-0 ml-2"
+      />
+    </OverlayTrigger>
+  </div>
+);
+
 // This widget should be connected, grab all settings from store, update them as needed.
 const SettingsWidget = ({
   problemType,
@@ -59,6 +89,7 @@ const SettingsWidget = ({
 
   return (
     <div className="settingsWidget ml-4">
+      <div className="font-weight-bold text-primary-500 mb-3">Question 3 settings</div>
       <div className="mb-3">
         <TypeCard
           answers={answers}
@@ -80,15 +111,6 @@ const SettingsWidget = ({
             />
           </div>
           )}
-      {!isLibrary && (
-        <div className="my-3">
-          <ScoringCard
-            scoring={settings.scoring}
-            defaultValue={defaultSettings.maxAttempts}
-            updateSettings={updateSettings}
-          />
-        </div>
-      )}
       <div className="mt-3">
         <HintsCard
           problemType={problemType}
@@ -101,6 +123,24 @@ const SettingsWidget = ({
           }}
         />
       </div>
+      <div className="mt-3">
+        <ShuffleCard
+          showShuffleButton
+          defaultValue
+          updateSettings={updateSettings}
+        />
+      </div>
+      <GlobalSettingsHeader />
+      {!isLibrary && (
+        <div className="my-3">
+          <ScoringCard
+            scoring={settings.scoring}
+            defaultValue={defaultSettings.maxAttempts}
+            updateSettings={updateSettings}
+          />
+        </div>
+      )}
+
       {feedbackCard()}
       <div>
         <Collapsible.Advanced open={!isAdvancedCardsVisible}>

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

@@ -10,12 +10,12 @@
     padding-bottom: 1.5rem;
 }
 
-.settingsWidget {
-    margin-top: 40px;
+.font-weight-500{
+    font-weight: 500;
+}
 
-    .pgn__form-text {
-        font-size: small;
-    }
+.pgn__form-text {
+    font-size: small;
 }
 
 .resetCard {