fix: default display of Show Answer and Show reset option (#403)

Hardcoding values for showAnswer and showResetButton
in initialState leads to incorrect selection of additional
states specified in Advanced settings.

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,7 +113,11 @@ 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 && (
@@ -165,7 +169,7 @@ 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

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

@@ -10,6 +10,7 @@ import { selectors } from '../../../../../../data/redux';
 
 export const ResetCard = ({
   showResetButton,
+  defaultValue,
   updateSettings,
   // inject
   intl,
@@ -17,10 +18,11 @@ export const ResetCard = ({
   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,

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

@@ -26,6 +26,8 @@ export const ShowAnswerCard = ({
     showAttempts,
   } = useAnswerSettings(showAnswer, updateSettings);
 
+  const currentShowAnswer = showAnswer.on || defaultValue;
+
   const showAnswerSection = (
     <>
       <div className="pb-2">
@@ -43,7 +45,7 @@ export const ShowAnswerCard = ({
       <Form.Group className="pb-0 mb-0">
         <Form.Control
           as="select"
-          value={showAnswer.on}
+          value={currentShowAnswer}
           onChange={handleShowAnswerChange}
         >
           {Object.values(ShowAnswerTypesKeys).map((answerType) => {
@@ -79,7 +81,7 @@ export const ShowAnswerCard = ({
   return (
     <SettingsOption
       title={intl.formatMessage(messages.showAnswerSettingsTitle)}
-      summary={intl.formatMessage(ShowAnswerTypes[showAnswer.on])}
+      summary={intl.formatMessage(ShowAnswerTypes[currentShowAnswer])}
     >
       {showAnswerSection}
     </SettingsOption>

src/editors/data/redux/problem/reducers.js

@@ -2,7 +2,7 @@ import _ from 'lodash-es';
 import { createSlice } from '@reduxjs/toolkit';
 import { indexToLetterMap } from '../../../containers/ProblemEditor/data/OLXParser';
 import { StrictDict } from '../../../utils';
-import { ProblemTypeKeys, RichTextProblems, ShowAnswerTypesKeys } from '../../constants/problem';
+import { ProblemTypeKeys, RichTextProblems } from '../../constants/problem';
 import { ToleranceTypes } from '../../../containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/constants';
 
 const nextAlphaId = (lastId) => String.fromCharCode(lastId.charCodeAt(0) + 1);
@@ -28,10 +28,10 @@ const initialState = {
     hints: [],
     timeBetween: 0,
     showAnswer: {
-      on: ShowAnswerTypesKeys.FINISHED,
+      on: '',
       afterAttempts: 0,
     },
-    showResetButton: false,
+    showResetButton: null,
     solutionExplanation: '',
     tolerance: {
       value: null,