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.
2025-01-28 02:17:09 +10:30
parent de7affd97f
commit be600a91f0
3 changed files with 248 additions and 25 deletions
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/snapshots/index.test.jsx.snap
+++ b/src/editors/containers/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"
--- 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>
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx
+++ b/src/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);