feat: revert group feedback expanded text field (#297)

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  ActionRow, Container, Form, Icon, IconButton, Row,
+  ActionRow, Form, Icon, IconButton, Row,
 } from '@edx/paragon';
 import { DeleteOutline } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 import messages from '../../messages';
-import ExpandableTextArea from '../../../../../../../sharedComponents/ExpandableTextArea';
 
 export const GroupFeedbackRow = ({
   value,
@@ -14,27 +13,25 @@ export const GroupFeedbackRow = ({
   handleFeedbackChange,
   handleDelete,
   answers,
-  id,
   // injected
   intl,
 }) => (
 
   <div className="mb-4">
     <ActionRow className="mb-2">
-      <Container fluid className="p-0">
-        <ExpandableTextArea
-          value={value.feedback}
-          onChange={handleFeedbackChange}
-          id={`groupFeedback-${id}`}
-        />
-      </Container>
-      <IconButton
-        src={DeleteOutline}
-        iconAs={Icon}
-        alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
-        onClick={handleDelete}
-        variant="primary"
+      <Form.Control
+        value={value.feedback}
+        onChange={handleFeedbackChange}
       />
+      <div className="d-flex flex-row flex-nowrap">
+        <IconButton
+          src={DeleteOutline}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
+          onClick={handleDelete}
+          variant="primary"
+        />
+      </div>
     </ActionRow>
     <Form.CheckboxSet
       onChange={handleAnswersSelectedChange}
@@ -72,7 +69,6 @@ GroupFeedbackRow.propTypes = {
     answers: PropTypes.arrayOf(PropTypes.string),
     feedback: PropTypes.string,
   }).isRequired,
-  id: PropTypes.string.isRequired,
   // injected
   intl: intlShape.isRequired,
 };

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

@@ -10,7 +10,6 @@ describe('GroupFeedbackRow', () => {
     handleAnswersSelectedChange: jest.fn().mockName('handleAnswersSelectedChange'),
     handleFeedbackChange: jest.fn().mockName('handleFeedbackChange'),
     handleDelete: jest.fn().mockName('handleDelete'),
-    id: '0',
     intl: { formatMessage },
   };
 

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

@@ -7,25 +7,20 @@ exports[`GroupFeedbackRow snapshot snapshot: renders hints row 1`] = `
   <ActionRow
     className="mb-2"
   >
-    <Container
-      className="p-0"
-      fluid={true}
-    >
-      <ExpandableTextArea
-        error={false}
-        errorMessage={null}
-        id="groupFeedback-0"
-        onChange={[MockFunction handleFeedbackChange]}
-        placeholder={null}
-        value="sOmE FeEDBACK"
-      />
-    </Container>
-    <IconButton
-      alt="Delete answer"
-      iconAs="Icon"
-      onClick={[MockFunction handleDelete]}
-      variant="primary"
+    <Form.Control
+      onChange={[MockFunction handleFeedbackChange]}
+      value="sOmE FeEDBACK"
     />
+    <div
+      className="d-flex flex-row flex-nowrap"
+    >
+      <IconButton
+        alt="Delete answer"
+        iconAs="Icon"
+        onClick={[MockFunction handleDelete]}
+        variant="primary"
+      />
+    </div>
   </ActionRow>
   <Component
     onChange={[MockFunction handleAnswersSelectedChange]}

src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js

@@ -157,12 +157,9 @@ class ReactStateOLXParser {
   addGroupFeedbackList() {
     const compoundhint = [];
     const { groupFeedbackList } = this.problemState;
-    const { groupFeedback } = this.editorObject;
     groupFeedbackList.forEach((element) => {
-      const feedbackString = groupFeedback?.[element.id];
-      const parsedFeedback = this.parser.parse(feedbackString);
       compoundhint.push({
-        ...parsedFeedback,
+        '#text': element.feedback,
         '@_value': element.answers.join(' '),
       });
     });

src/editors/containers/ProblemEditor/data/mockData/editorTestData.js

@@ -31,8 +31,8 @@ export const checkboxesWithFeedbackAndHints = {
     '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
   ],
   groupFeedback: {
-    0: '<p>You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</p>',
-    1: '<p>You can specify optional feedback for one, several, or all answer combinations.</p>',
+    0: 'You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.',
+    1: 'You can specify optional feedback for one, several, or all answer combinations.',
   },
 };
 

src/editors/containers/ProblemEditor/data/mockData/olxTestData.js

@@ -15,8 +15,8 @@ export const getCheckboxesOLXWithFeedbackAndHintsOLX = () => ({
         <choicehint selected="false"><p>You can specify optional feedback for selected answers, cleared answers, or both.</p></choicehint>
   </choice>
       <choice correct="true"><p>a correct answer</p></choice>
-      <compoundhint value="A B D"><p>You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</p></compoundhint>
-      <compoundhint value="A B C D"><p>You can specify optional feedback for one, several, or all answer combinations.</p></compoundhint>
+      <compoundhint value="A B D">You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</compoundhint>
+      <compoundhint value="A B C D">You can specify optional feedback for one, several, or all answer combinations.</compoundhint>
     </checkboxgroup>
     <solution>
         <div class="detailed-solution">
@@ -87,7 +87,7 @@ export const getCheckboxesOLXWithFeedbackAndHintsOLX = () => ({
           'B',
           'D',
         ],
-        feedback: '<p>You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</p>',
+        feedback: 'You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.',
       },
       {
         id: 1,
@@ -97,7 +97,7 @@ export const getCheckboxesOLXWithFeedbackAndHintsOLX = () => ({
           'C',
           'D',
         ],
-        feedback: '<p>You can specify optional feedback for one, several, or all answer combinations.</p>',
+        feedback: 'You can specify optional feedback for one, several, or all answer combinations.',
       },
     ],
   },
@@ -118,8 +118,8 @@ export const getCheckboxesOLXWithFeedbackAndHintsOLX = () => ({
         <choicehint selected="false"><p>You can specify optional feedback for selected answers, cleared answers, or both.</p></choicehint>
       </choice>
       <choice correct="true"><p>a correct answer</p></choice>
-      <compoundhint value="A B D"><p>You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</p></compoundhint>
-      <compoundhint value="A B C D"><p>You can specify optional feedback for one, several, or all answer combinations.</p></compoundhint>
+      <compoundhint value="A B D">You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</compoundhint>
+      <compoundhint value="A B C D">You can specify optional feedback for one, several, or all answer combinations.</compoundhint>
     </checkboxgroup>
       <solution>
       <div class="detailed-solution">

src/editors/data/services/cms/api.js

@@ -137,7 +137,6 @@ export const apiMethods = {
         metadata: { display_name: title },
       };
     } else if (blockType === 'problem') {
-      // console.log(type);
       response = {
         data: content.olx,
         category: blockType,

src/editors/data/services/cms/mockApi.js

@@ -294,3 +294,5 @@ export const fetchStudioView = ({ blockId, studioEndpointUrl }) => {
 export const checkTranscriptsForImport = () => mockPromise({});
 
 export const uploadTranscript = () => mockPromise({});
+
+export const fetchAdvancedSettings = () => mockPromise({});