Merge branch 'main' into fix/add-rtl-support-to-editor

src/editors/Editor.jsx

@@ -31,9 +31,19 @@ export const Editor = ({
 
   const EditorComponent = supportedEditors[blockType];
   return (
-    <div className="d-flex flex-column">
+    <div
+      className="d-flex flex-column"
+      style={{
+        /* Positioned as a proper Paragon FullscreenModal should have been. */
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: '100%',
+      }}
+    >
       <div
-        className="pgn__modal-fullscreen"
+        className="pgn__modal-fullscreen h-100"
         role="dialog"
         aria-label={blockType}
       >

src/editors/__snapshots__/Editor.test.jsx.snap

@@ -3,10 +3,19 @@
 exports[`Editor render presents error message if no relevant editor found and ref ready 1`] = `
 <div
   className="d-flex flex-column"
+  style={
+    Object {
+      "height": "100%",
+      "left": 0,
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+    }
+  }
 >
   <div
     aria-label="fAkEBlock"
-    className="pgn__modal-fullscreen"
+    className="pgn__modal-fullscreen h-100"
     role="dialog"
   >
     <FormattedMessage
@@ -21,10 +30,19 @@ exports[`Editor render presents error message if no relevant editor found and re
 exports[`Editor render snapshot: renders correct editor given blockType (html -> TextEditor) 1`] = `
 <div
   className="d-flex flex-column"
+  style={
+    Object {
+      "height": "100%",
+      "left": 0,
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+    }
+  }
 >
   <div
     aria-label="html"
-    className="pgn__modal-fullscreen"
+    className="pgn__modal-fullscreen h-100"
     role="dialog"
   >
     <TextEditor

src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap

@@ -2,7 +2,12 @@
 
 exports[`EditorContainer component render snapshot: initialized. enable save and pass to header 1`] = `
 <div
-  className="position-relative zindex-0"
+  className="d-flex flex-column position-relative zindex-0"
+  style={
+    Object {
+      "minHeight": "100%",
+    }
+  }
 >
   <BaseModal
     bodyStyle={null}
@@ -53,7 +58,7 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
     </div>
   </ModalDialog.Header>
   <ModalDialog.Body
-    className="pb-6"
+    className="pb-0 mb-6"
   >
     <h1>
       My test content
@@ -78,7 +83,12 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
 
 exports[`EditorContainer component render snapshot: not initialized. disable save and pass to header 1`] = `
 <div
-  className="position-relative zindex-0"
+  className="d-flex flex-column position-relative zindex-0"
+  style={
+    Object {
+      "minHeight": "100%",
+    }
+  }
 >
   <BaseModal
     bodyStyle={null}
@@ -129,7 +139,7 @@ exports[`EditorContainer component render snapshot: not initialized. disable sav
     </div>
   </ModalDialog.Header>
   <ModalDialog.Body
-    className="pb-6"
+    className="pb-0 mb-6"
   />
   <injectIntl(ShimmedIntlComponent)
     disableSave={true}

src/editors/containers/EditorContainer/index.jsx

@@ -29,7 +29,8 @@ export const EditorContainer = ({
   const handleCancel = hooks.handleCancel({ onClose, returnFunction });
   return (
     <div
-      className="position-relative zindex-0"
+      className="d-flex flex-column position-relative zindex-0"
+      style={{ minHeight: '100%' }}
     >
       <BaseModal
         size="md"
@@ -64,7 +65,7 @@ export const EditorContainer = ({
           />
         </div>
       </ModalDialog.Header>
-      <ModalDialog.Body className="pb-6">
+      <ModalDialog.Body className="pb-0 mb-6">
         {isInitialized && children}
       </ModalDialog.Body>
       <EditorFooter

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

@@ -62,7 +62,9 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced
       <div
         className="my-3"
       >
-        <ResetCard />
+        <ResetCard
+          defaultValue={false}
+        />
       </div>
       <div
         className="my-3"
@@ -143,7 +145,9 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
       <div
         className="my-3"
       >
-        <ResetCard />
+        <ResetCard
+          defaultValue={false}
+        />
       </div>
       <div
         className="my-3"
@@ -224,7 +228,9 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced
       <div
         className="my-3"
       >
-        <ResetCard />
+        <ResetCard
+          defaultValue={false}
+        />
       </div>
       <div
         className="my-3"

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

@@ -113,12 +113,20 @@ export const SettingsWidget = ({
             />
           </div>
           <div className="my-3">
-            <ResetCard showResetButton={settings.showResetButton} updateSettings={updateSettings} />
+            <ResetCard
+              showResetButton={settings.showResetButton}
+              defaultValue={defaultSettings.showResetButton}
+              updateSettings={updateSettings}
+            />
           </div>
           {
             problemType === ProblemTypeKeys.ADVANCED && (
             <div className="my-3">
-              <Randomization randomization={settings.randomization} updateSettings={updateSettings} />
+              <Randomization
+                randomization={settings.randomization}
+                defaultValue={defaultSettings.rerandomize}
+                updateSettings={updateSettings}
+              />
             </div>
             )
           }
@@ -161,7 +169,8 @@ SettingsWidget.propTypes = {
   defaultSettings: PropTypes.shape({
     maxAttempts: PropTypes.number,
     showanswer: PropTypes.string,
-    showReseButton: PropTypes.bool,
+    showResetButton: PropTypes.bool,
+    rerandomize: PropTypes.string,
   }).isRequired,
   // eslint-disable-next-line
   settings: PropTypes.any.isRequired,

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

@@ -1,6 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RandomizationCard snapshot snapshot: renders randonmization setting card with randomization defined 1`] = `
+exports[`RandomizationCard snapshot snapshot: renders randomization setting card with default randomization 1`] = `
+<SettingsOption
+  className=""
+  extraSections={Array []}
+  hasExpandableTextArea={false}
+  none={true}
+  summary="sUmmary"
+  title="Randomization"
+>
+  <div
+    className="mb-3"
+  >
+    {randomization, select,
+      null {No Python based randomization is present in this problem.}
+      other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".}
+    }
+  </div>
+  <Form.Group>
+    <Form.Control
+      as="select"
+      onChange={[MockFunction randomizationCardHooks.handleChange]}
+      value="default_vAlUE"
+    >
+      <option
+        key="never"
+        value="never"
+      >
+        Never
+      </option>
+      <option
+        key="always"
+        value="always"
+      >
+        Always
+      </option>
+      <option
+        key="onreset"
+        value="onreset"
+      >
+        On Reset
+      </option>
+      <option
+        key="per_student"
+        value="per_student"
+      >
+        Per Student
+      </option>
+    </Form.Control>
+  </Form.Group>
+</SettingsOption>
+`;
+
+exports[`RandomizationCard snapshot snapshot: renders randomization setting card with randomization defined 1`] = `
 <SettingsOption
   className=""
   extraSections={Array []}
@@ -36,8 +88,8 @@ exports[`RandomizationCard snapshot snapshot: renders randonmization setting car
         Always
       </option>
       <option
-        key="on_reset"
-        value="on_reset"
+        key="onreset"
+        value="onreset"
       >
         On Reset
       </option>
@@ -52,7 +104,7 @@ exports[`RandomizationCard snapshot snapshot: renders randonmization setting car
 </SettingsOption>
 `;
 
-exports[`RandomizationCard snapshot snapshot: renders randonmization setting card with randomization null 1`] = `
+exports[`RandomizationCard snapshot snapshot: renders randomization setting card with randomization null 1`] = `
 <SettingsOption
   className=""
   extraSections={Array []}
@@ -88,8 +140,8 @@ exports[`RandomizationCard snapshot snapshot: renders randonmization setting car
         Always
       </option>
       <option
-        key="on_reset"
-        value="on_reset"
+        key="onreset"
+        value="onreset"
       >
         On Reset
       </option>

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

@@ -9,11 +9,16 @@ import { RandomizationTypesKeys, RandomizationTypes } from '../../../../../../..
 
 export const RandomizationCard = ({
   randomization,
+  defaultValue,
   updateSettings,
   // inject
   intl,
 }) => {
-  const { summary, handleChange } = useRandomizationSettingStatus({ randomization, updateSettings });
+  const curretRandomization = randomization || defaultValue;
+  const { summary, handleChange } = useRandomizationSettingStatus({
+    randomization: curretRandomization,
+    updateSettings,
+  });
   return (
     <SettingsOption
       title={intl.formatMessage(messages.randomizationSettingTitle)}
@@ -27,7 +32,7 @@ export const RandomizationCard = ({
       <Form.Group>
         <Form.Control
           as="select"
-          value={randomization}
+          value={curretRandomization}
           onChange={handleChange}
         >
           {
@@ -48,6 +53,7 @@ export const RandomizationCard = ({
 };
 
 RandomizationCard.propTypes = {
+  defaultValue: PropTypes.string.isRequired,
   randomization: PropTypes.string.isRequired,
   updateSettings: PropTypes.func.isRequired,
   intl: intlShape.isRequired,

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

@@ -11,6 +11,7 @@ jest.mock('./hooks', () => ({
 describe('RandomizationCard', () => {
   const props = {
     randomization: 'sOmE_vAlUE',
+    defaultValue: 'default_vAlUE',
     updateSettings: jest.fn().mockName('args.updateSettings'),
     intl: { formatMessage },
   };
@@ -32,11 +33,14 @@ describe('RandomizationCard', () => {
   });
 
   describe('snapshot', () => {
-    test('snapshot: renders randonmization setting card with randomization defined', () => {
+    test('snapshot: renders randomization setting card with randomization defined', () => {
       expect(shallow(<RandomizationCard {...props} />)).toMatchSnapshot();
     });
-    test('snapshot: renders randonmization setting card with randomization null', () => {
+    test('snapshot: renders randomization setting card with default randomization', () => {
       expect(shallow(<RandomizationCard {...props} randomization={null} />)).toMatchSnapshot();
     });
+    test('snapshot: renders randomization setting card with randomization null', () => {
+      expect(shallow(<RandomizationCard {...props} randomization={null} defaultValue={null} />)).toMatchSnapshot();
+    });
   });
 });

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

@@ -10,17 +10,19 @@ import { selectors } from '../../../../../../data/redux';
 
 export const ResetCard = ({
   showResetButton,
+  defaultValue,
   updateSettings,
   // inject
   intl,
 }) => {
   const isLibrary = useSelector(selectors.app.isLibrary);
   const { setResetTrue, setResetFalse } = resetCardHooks(updateSettings);
   const advancedSettingsLink = `${useSelector(selectors.app.studioEndpointUrl)}/settings/advanced/${useSelector(selectors.app.learningContextId)}#show_reset_button`;
+  const currentResetButton = showResetButton !== null ? showResetButton : defaultValue;
   return (
     <SettingsOption
       title={intl.formatMessage(messages.resetSettingsTitle)}
-      summary={showResetButton
+      summary={currentResetButton
         ? intl.formatMessage(messages.resetSettingsTrue) : intl.formatMessage(messages.resetSettingsFalse)}
       className="resetCard"
     >
@@ -37,10 +39,10 @@ export const ResetCard = ({
         </div>
       )}
       <ButtonGroup size="sm" className="resetSettingsButtons mb-2">
-        <Button variant={showResetButton ? 'outline-primary' : 'primary'} size="sm" onClick={setResetFalse}>
+        <Button variant={currentResetButton ? 'outline-primary' : 'primary'} size="sm" onClick={setResetFalse}>
           <FormattedMessage {...messages.resetSettingsFalse} />
         </Button>
-        <Button variant={showResetButton ? 'primary' : 'outline-primary'} size="sm" onClick={setResetTrue}>
+        <Button variant={currentResetButton ? 'primary' : 'outline-primary'} size="sm" onClick={setResetTrue}>
           <FormattedMessage {...messages.resetSettingsTrue} />
         </Button>
       </ButtonGroup>
@@ -50,6 +52,7 @@ export const ResetCard = ({
 
 ResetCard.propTypes = {
   showResetButton: PropTypes.bool.isRequired,
+  defaultValue: PropTypes.bool.isRequired,
   updateSettings: PropTypes.func.isRequired,
   // injected
   intl: intlShape.isRequired,