Merge pull request #3021 from ONSdigital/EAR-2148-Change-default-prev…

…iew-question Change default setting for Previewing Questions and add guidance
ONSdigital · Jul 25, 2023 · 69d85aa · 69d85aa
2 parents 3d55891 + f3b625e
commit 69d85aa
Show file tree

Hide file tree

Showing 12 changed files with 230 additions and 41 deletions.
diff --git a/eq-author-api/schema/resolvers/base.js b/eq-author-api/schema/resolvers/base.js
@@ -1030,7 +1030,7 @@ const Resolvers = {
       };
     }),
     createList: createMutation(async (root, _, ctx) => {
-      const list = createList();
+      const list = createList(ctx);
       if (!ctx.questionnaire.collectionLists) {
         ctx.questionnaire.collectionLists = {
           id: uuidv4(),

diff --git a/eq-author-api/schema/tests/lists.test.js b/eq-author-api/schema/tests/lists.test.js
@@ -38,6 +38,9 @@ describe("Lists", () => {
     const { lists } = await createList(ctx);
     expect(lists[0].listName).toBeNull();
     expect(ctx.questionnaire.collectionLists.lists.length).toEqual(1);
+    //TODO: previewQuestions
+    expect(ctx.questionnaire.introduction.previewQuestions).toBe(false);
+    expect(ctx.questionnaire.introduction.disallowPreviewQuestions).toBe(true);
   });
 
   it("Can update a list", async () => {
@@ -55,6 +58,9 @@ describe("Lists", () => {
     expect(ctx.questionnaire.collectionLists.lists.length).toEqual(1);
     await deleteList(ctx, input);
     expect(ctx.questionnaire.collectionLists.lists.length).toEqual(0);
+    //TODO: previewQuestions
+    expect(ctx.questionnaire.introduction.previewQuestions).toBe(false);
+    expect(ctx.questionnaire.introduction.disallowPreviewQuestions).toBe(false);
   });
 
   it("Can add an answer to a list", async () => {

diff --git a/eq-author-api/schema/typeDefs.js b/eq-author-api/schema/typeDefs.js
@@ -715,6 +715,7 @@ type QuestionnaireIntroduction {
   tertiaryTitle: String!
   tertiaryDescription: String!
   previewQuestions: Boolean
+  disallowPreviewQuestions: Boolean
   questionnaire: Questionnaire
   validationErrorInfo: ValidationErrorInfo
   comments: [Comment]

diff --git a/eq-author-api/src/businessLogic/createList.js b/eq-author-api/src/businessLogic/createList.js
@@ -1,9 +1,13 @@
 const { v4: uuidv4 } = require("uuid");
 
-const createList = () => ({
-  id: uuidv4(),
-  listName: null,
-  answers: [],
-});
+const createList = (ctx) => {
+  ctx.questionnaire.introduction.previewQuestions = false;
+  ctx.questionnaire.introduction.disallowPreviewQuestions = true;
+  return {
+    id: uuidv4(),
+    listName: null,
+    answers: [],
+  };
+};
 
 module.exports = createList;
diff --git a/eq-author-api/src/businessLogic/onListDeleted.js b/eq-author-api/src/businessLogic/onListDeleted.js
@@ -22,4 +22,11 @@ module.exports = (ctx, list) => {
       onAnswerDeleted(ctx, list, answer, pages);
     });
   }
+
+  if (
+    ctx.questionnaire.lists === undefined ||
+    ctx.questionnaire.lists.length === 0
+  ) {
+    ctx.questionnaire.introduction.disallowPreviewQuestions = false;
+  }
 };
diff --git a/eq-author-api/utils/createQuestionnaireIntroduction.js b/eq-author-api/utils/createQuestionnaireIntroduction.js
@@ -26,7 +26,8 @@ module.exports = (metadata) => {
       "<ul><li>Data should relate to all sites in England, Scotland, Wales and Northern Ireland unless otherwise stated. </li><li>You can provide info estimates if actual figures are not available.</li><li>We will treat your data securely and confidentially.</li></ul>",
     legalBasis: NOTICE_1,
     // TODO: previewQuestions
-    // previewQuestions: true,
+    previewQuestions: false,
+    disallowPreviewQuestions: false,
     secondaryTitle: "<p>Information you need</p>",
     secondaryDescription:
       "<p>You can select the dates of the period you are reporting for, if the given dates are not appropriate.</p>",

diff --git a/.../App/introduction/Design/IntroductionEditor/CollapsiblesEditor/CollapsibleEditor/index.js b/.../App/introduction/Design/IntroductionEditor/CollapsiblesEditor/CollapsibleEditor/index.js
@@ -28,6 +28,7 @@ const Detail = styled.div`
   position: relative;
 `;
 
+
 const DetailHeader = styled.div`
   position: absolute;
   top: 0.5em;

diff --git a/eq-author/src/App/introduction/Design/IntroductionEditor/__snapshots__/index.test.js.snap b/eq-author/src/App/introduction/Design/IntroductionEditor/__snapshots__/index.test.js.snap
@@ -44,6 +44,7 @@ exports[`IntroductionEditor should render 1`] = `
         withoutMargin={true}
       />
       <Panel
+        data-testid="introduction-content-info-panel"
         variant="warning"
         withList={false}
         withPanelMargin={true}
@@ -196,9 +197,68 @@ exports[`IntroductionEditor should render 1`] = `
       <IntroductionEditor__SectionTitle>
         Legal basis
       </IntroductionEditor__SectionTitle>
-      <InformationPanel>
+      <Panel
+        variant="info"
+        withLeftBorder={true}
+        withList={false}
+        withPanelMargin={true}
+      >
         The legal basis can be changed on the Settings page
-      </InformationPanel>
+      </Panel>
+    </IntroductionEditor__Padding>
+  </IntroductionEditor__Section>
+  <IntroductionEditor__Section
+    name="previewQuestions-section"
+  >
+    <IntroductionEditor__Padding>
+      <IntroductionEditor__InlineField
+        disabled={true}
+        style={
+          Object {
+            "marginBottom": "0",
+          }
+        }
+      >
+        <Label
+          bold={true}
+          labelFor="toggle-preview-questions"
+          style={
+            Object {
+              "color": "#7a7a7a",
+              "marginBottom": "0",
+            }
+          }
+        >
+          Include a link to a page for previewing the questions
+        </Label>
+        <ToggleSwitch
+          blockDisplay={false}
+          checked={true}
+          hideLabels={false}
+          id="toggle-preview-questions"
+          name="toggle-preview-questions"
+          onChange={[Function]}
+        />
+      </IntroductionEditor__InlineField>
+      <IntroductionEditor__SectionDescription
+        style={
+          Object {
+            "color": "#7a7a7a",
+            "marginBottom": "1em",
+          }
+        }
+      >
+        Each section is represented as a collapsible element, allowing users to show and hide its respective questions.
+      </IntroductionEditor__SectionDescription>
+      <Panel
+        data-testid="preview-questions-warn-panel"
+        name="preview-questions-warn-panel"
+        variant="warning"
+        withList={false}
+        withPanelMargin={true}
+      >
+        Adding a collection list will automatically turn off and disable this setting.
+      </Panel>
     </IntroductionEditor__Padding>
   </IntroductionEditor__Section>
   <IntroductionEditor__Section>

diff --git a/eq-author/src/App/introduction/Design/IntroductionEditor/index.js b/eq-author/src/App/introduction/Design/IntroductionEditor/index.js
@@ -12,7 +12,7 @@ import { buildSettingsPath } from "utils/UrlUtils";
 
 import RichTextEditor from "components/RichTextEditor";
 import ValidationError from "components/ValidationError";
-import { InformationPanel } from "components/Panel";
+
 import { Field, Input, Label } from "components/Forms";
 import ToggleSwitch from "components/buttons/ToggleSwitch";
 import Panel from "components-themed/panels";
@@ -64,6 +64,7 @@ const InlineField = styled(Field)`
   > * {
     margin-bottom: 0;
   }
+  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
 `;
 
 const HorizontalSeparator = styled.hr`
@@ -102,8 +103,8 @@ const IntroductionEditor = ({ introduction, history }) => {
     contactDetailsIncludeRuRef,
     additionalGuidancePanel,
     additionalGuidancePanelSwitch,
-    // TODO: previewQuestions
-    // previewQuestions,
+    previewQuestions,
+    disallowPreviewQuestions,
     secondaryTitle,
     secondaryDescription,
     tertiaryTitle,
@@ -130,8 +131,6 @@ const IntroductionEditor = ({ introduction, history }) => {
   };
 
   const params = useParams();
-
-  // TODO: previewQuestions
   return (
     <>
       <IntroductionHeader history={history} />
@@ -173,7 +172,10 @@ const IntroductionEditor = ({ introduction, history }) => {
             testSelector="txt-intro-title"
             withoutMargin
           />
-          <Panel variant="warning">
+          <Panel
+            data-testid="introduction-content-info-panel"
+            variant="warning"
+          >
             You can have this page display on the Hub via the&nbsp;
             <Link to={`${buildSettingsPath(params)}`}>Settings page</Link>
           </Panel>
@@ -345,15 +347,29 @@ const IntroductionEditor = ({ introduction, history }) => {
           />
 
           <SectionTitle>Legal basis</SectionTitle>
-          <InformationPanel>
+          <Panel withLeftBorder>
             The legal basis can be changed on the Settings page
-          </InformationPanel>
+          </Panel>
         </Padding>
       </Section>
-      {/* <Section>
+      {/* //TODO: previewQuestions */}
+      <Section name="previewQuestions-section">
         <Padding>
-          <InlineField open={previewQuestions} style={{ marginBottom: "0" }}>
-            <Label htmlFor="toggle-preview-questions">Preview questions</Label>
+          <InlineField
+            style={{ marginBottom: "0" }}
+            disabled={disallowPreviewQuestions}
+          >
+            <Label
+              labelFor="toggle-preview-questions"
+              style={{
+                color: disallowPreviewQuestions
+                  ? colors.mediumGrey
+                  : colors.text,
+                marginBottom: "0",
+              }}
+            >
+              Include a link to a page for previewing the questions
+            </Label>
             <ToggleSwitch
               id="toggle-preview-questions"
               name="toggle-preview-questions"
@@ -370,13 +386,32 @@ const IntroductionEditor = ({ introduction, history }) => {
               checked={previewQuestions}
             />
           </InlineField>
-          <SectionDescription>
-            This displays a link on the introduction page that takes respondents
-            to a preview of all the questions on one page in a collapsible
-            format.
+          <SectionDescription
+            style={{
+              color: disallowPreviewQuestions ? colors.mediumGrey : colors.text,
+              marginBottom: "1em",
+            }}
+          >
+            Each section is represented as a collapsible element, allowing users
+            to show and hide its respective questions.
           </SectionDescription>
+          {previewQuestions ? (
+            <Panel
+              data-testid="preview-questions-warn-panel"
+              name="preview-questions-warn-panel"
+              variant="warning"
+            >
+              Adding a collection list will automatically turn off and disable
+              this setting.
+            </Panel>
+          ) : disallowPreviewQuestions ? (
+            <Panel data-testid="preview-questions-info-panel" withLeftBorder>
+              A link for previewing the questions cannot be provided for
+              questionnaires that contain list collector question patterns.
+            </Panel>
+          ) : null}
         </Padding>
-      </Section> */}
+      </Section>
       <Section>
         <Padding>
           <SectionTitle style={{ marginBottom: "0" }}>