feat: hide some settings fields when editing a library problem (#1601)

Hides some XBlock settings fields when editing library blocks. These hidden settings fields are relevant to course blocks, but not library blocks. This change impacts Library Authors, and Course Authors who use Library Blocks and/or Problem Banks.
openedx · Jan 27, 2025 · be600a9 · be600a9
1 parent de7affd
commit be600a9
Show file tree

Hide file tree

Showing 3 changed files with 248 additions and 25 deletions.
diff --git a/...ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap b/...ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
@@ -1,5 +1,188 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SettingsWidget isLibrary snapshot: renders Settings widget for Advanced Problem with correct widgets 1`] = `
+<div
+  className="settingsWidget ml-4"
+>
+  <div
+    className="mb-3"
+  >
+    <TypeCard
+      problemType="stringresponse"
+    />
+  </div>
+  <div
+    className="mt-3"
+  >
+    <HintsCard
+      images={{}}
+      isLibrary={true}
+      learningContextId="course+org+run"
+      problemType="stringresponse"
+    />
+  </div>
+  <Fragment />
+  <div>
+    <Advanced
+      open={false}
+    >
+      <Body
+        className="collapsible-body small"
+      >
+        <Button
+          className="my-3 px-0 text-info-500"
+          size="inline"
+          variant="link"
+        >
+          <FormattedMessage
+            defaultMessage="Show advanced settings"
+            description="Button text to show advanced settings"
+            id="authoring.problemeditor.settings.showAdvancedButton"
+          />
+        </Button>
+      </Body>
+    </Advanced>
+  </div>
+  <Advanced
+    open={true}
+  >
+    <Body
+      className="collapsible-body"
+    >
+      <div
+        className="my-3"
+      >
+        <SwitchToAdvancedEditorCard
+          problemType="stringresponse"
+        />
+      </div>
+    </Body>
+  </Advanced>
+</div>
+`;
+
+exports[`SettingsWidget isLibrary snapshot: renders Settings widget page 1`] = `
+<div
+  className="settingsWidget ml-4"
+>
+  <div
+    className="mb-3"
+  >
+    <TypeCard
+      problemType="stringresponse"
+    />
+  </div>
+  <div
+    className="mt-3"
+  >
+    <HintsCard
+      images={{}}
+      isLibrary={true}
+      learningContextId="course+org+run"
+      problemType="stringresponse"
+    />
+  </div>
+  <Fragment />
+  <div>
+    <Advanced
+      open={true}
+    >
+      <Body
+        className="collapsible-body small"
+      >
+        <Button
+          className="my-3 px-0 text-info-500"
+          size="inline"
+          variant="link"
+        >
+          <FormattedMessage
+            defaultMessage="Show advanced settings"
+            description="Button text to show advanced settings"
+            id="authoring.problemeditor.settings.showAdvancedButton"
+          />
+        </Button>
+      </Body>
+    </Advanced>
+  </div>
+  <Advanced
+    open={false}
+  >
+    <Body
+      className="collapsible-body"
+    >
+      <div
+        className="my-3"
+      >
+        <SwitchToAdvancedEditorCard
+          problemType="stringresponse"
+        />
+      </div>
+    </Body>
+  </Advanced>
+</div>
+`;
+
+exports[`SettingsWidget isLibrary snapshot: renders Settings widget page advanced settings visible 1`] = `
+<div
+  className="settingsWidget ml-4"
+>
+  <div
+    className="mb-3"
+  >
+    <TypeCard
+      problemType="stringresponse"
+    />
+  </div>
+  <div
+    className="mt-3"
+  >
+    <HintsCard
+      images={{}}
+      isLibrary={true}
+      learningContextId="course+org+run"
+      problemType="stringresponse"
+    />
+  </div>
+  <Fragment />
+  <div>
+    <Advanced
+      open={false}
+    >
+      <Body
+        className="collapsible-body small"
+      >
+        <Button
+          className="my-3 px-0 text-info-500"
+          size="inline"
+          variant="link"
+        >
+          <FormattedMessage
+            defaultMessage="Show advanced settings"
+            description="Button text to show advanced settings"
+            id="authoring.problemeditor.settings.showAdvancedButton"
+          />
+        </Button>
+      </Body>
+    </Advanced>
+  </div>
+  <Advanced
+    open={true}
+  >
+    <Body
+      className="collapsible-body"
+    >
+      <div
+        className="my-3"
+      >
+        <SwitchToAdvancedEditorCard
+          problemType="stringresponse"
+        />
+      </div>
+    </Body>
+  </Advanced>
+</div>
+`;
+
 exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced Problem with correct widgets 1`] = `
 <div
   className="settingsWidget ml-4"

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
@@ -80,13 +80,15 @@ const SettingsWidget = ({
             />
           </div>
           )}
-      <div className="my-3">
-        <ScoringCard
-          scoring={settings.scoring}
-          defaultValue={defaultSettings.maxAttempts}
-          updateSettings={updateSettings}
-        />
-      </div>
+      {!isLibrary && (
+        <div className="my-3">
+          <ScoringCard
+            scoring={settings.scoring}
+            defaultValue={defaultSettings.maxAttempts}
+            updateSettings={updateSettings}
+          />
+        </div>
+      )}
       <div className="mt-3">
         <HintsCard
           problemType={problemType}
@@ -114,23 +116,26 @@ const SettingsWidget = ({
           </Collapsible.Body>
         </Collapsible.Advanced>
       </div>
-
       <Collapsible.Advanced open={isAdvancedCardsVisible}>
         <Collapsible.Body className="collapsible-body">
-          <div className="my-3">
-            <ShowAnswerCard
-              showAnswer={settings.showAnswer}
-              defaultValue={defaultSettings.showanswer}
-              updateSettings={updateSettings}
-            />
-          </div>
-          <div className="my-3">
-            <ResetCard
-              showResetButton={settings.showResetButton}
-              defaultValue={defaultSettings.showResetButton}
-              updateSettings={updateSettings}
-            />
-          </div>
+          {!isLibrary && (
+            <div className="my-3">
+              <ShowAnswerCard
+                showAnswer={settings.showAnswer}
+                defaultValue={defaultSettings.showanswer}
+                updateSettings={updateSettings}
+              />
+            </div>
+          )}
+          {!isLibrary && (
+            <div className="my-3">
+              <ResetCard
+                showResetButton={settings.showResetButton}
+                defaultValue={defaultSettings.showResetButton}
+                updateSettings={updateSettings}
+              />
+            </div>
+          )}
           {
             problemType === ProblemTypeKeys.ADVANCED && (
             <div className="my-3">
@@ -142,9 +147,11 @@ const SettingsWidget = ({
             </div>
             )
           }
-          <div className="my-3">
-            <TimerCard timeBetween={settings.timeBetween} updateSettings={updateSettings} />
-          </div>
+          {!isLibrary && (
+            <div className="my-3">
+              <TimerCard timeBetween={settings.timeBetween} updateSettings={updateSettings} />
+            </div>
+          )}
           <div className="my-3">
             <SwitchToAdvancedEditorCard problemType={problemType} />
           </div>

diff --git a/...editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx b/...editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx
@@ -74,6 +74,39 @@ describe('SettingsWidget', () => {
     });
   });
 
+  describe('isLibrary', () => {
+    const libraryProps = {
+      ...props,
+      isLibrary: true,
+    };
+    test('snapshot: renders Settings widget page', () => {
+      const showAdvancedSettingsCardsProps = {
+        isAdvancedCardsVisible: false,
+        setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'),
+      };
+      showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps);
+      expect(shallow(<SettingsWidget {...libraryProps} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders Settings widget page advanced settings visible', () => {
+      const showAdvancedSettingsCardsProps = {
+        isAdvancedCardsVisible: true,
+        setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'),
+      };
+      showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps);
+      expect(shallow(<SettingsWidget {...libraryProps} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders Settings widget for Advanced Problem with correct widgets', () => {
+      const showAdvancedSettingsCardsProps = {
+        isAdvancedCardsVisible: true,
+        setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'),
+      };
+      showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps);
+      expect(shallow(
+        <SettingsWidget problemType={ProblemTypeKeys.ADVANCED} {...libraryProps} />,
+      ).snapshot).toMatchSnapshot();
+    });
+  });
+
   describe('mapDispatchToProps', () => {
     test('setBlockTitle from actions.app.setBlockTitle', () => {
       expect(mapDispatchToProps.setBlockTitle).toEqual(actions.app.setBlockTitle);