Merge pull request #3083 from ONSdigital/ear-2155-cannot-add-content

EAR 2155 Cannot add content
ONSdigital · Nov 9, 2023 · e7834ff · e7834ff
2 parents 1a6bd14 + 43f42fb
commit e7834ff
Show file tree

Hide file tree

Showing 13 changed files with 409 additions and 147 deletions.
diff --git a/eq-author/src/App/folder/Routing.js b/eq-author/src/App/folder/Routing.js
@@ -10,6 +10,17 @@ import Panel from "components/Panel";
 
 import { useQuery } from "@apollo/react-hooks";
 
+import {
+  useCreatePageWithFolder,
+  useCreateFolder,
+  useCreateListCollectorFolder,
+} from "hooks/useCreateFolder";
+import {
+  useCreateQuestionPage,
+  useCreateCalculatedSummaryPage,
+} from "hooks/useCreateQuestionPage";
+import { useSetNavigationCallbacks } from "components/NavigationCallbacks";
+
 export const NO_ROUTING_TITLE = "Routing logic not available for folders";
 export const NO_ROUTING_PARAGRAPH =
   "The route will be based on the answer to the previous question.";
@@ -23,10 +34,50 @@ const Routing = ({ match }) => {
     },
   });
 
-  const page = data?.folder;
+  const folder = data?.folder;
+
+  const addPageWithFolder = useCreatePageWithFolder();
+  const onAddQuestionPage = useCreateQuestionPage();
+  const addFolder = useCreateFolder();
+  const addCalculatedSummaryPage = useCreateCalculatedSummaryPage();
+  const addListCollectorFolder = useCreateListCollectorFolder();
+
+  useSetNavigationCallbacks(
+    {
+      onAddQuestionPage: (createInsideFolder) =>
+        createInsideFolder
+          ? onAddQuestionPage({ folderId: folder.id, position: 0 })
+          : addPageWithFolder({
+              sectionId: folder.section.id,
+              position: folder.position + 1,
+            }),
+      onAddCalculatedSummaryPage: (createInsideFolder) =>
+        createInsideFolder
+          ? addCalculatedSummaryPage({
+              folderId: folder.id,
+              position: folder.pages.length + 1,
+            })
+          : addPageWithFolder({
+              sectionId: folder.section.id,
+              position: folder.position + 1,
+              isCalcSum: true,
+            }),
+      onAddFolder: () =>
+        addFolder({
+          sectionId: folder.section.id,
+          position: folder.position + 1,
+        }),
+      onAddListCollectorFolder: () =>
+        addListCollectorFolder({
+          sectionId: folder.section.id,
+          position: folder.position + 1,
+        }),
+    },
+    [folder]
+  );
 
   return (
-    <Logic page={page}>
+    <Logic page={folder}>
       <Panel>
         <NoRouting disabled>
           <Title>{NO_ROUTING_TITLE}</Title>

diff --git a/eq-author/src/App/folder/Routing.test.js b/eq-author/src/App/folder/Routing.test.js
@@ -16,6 +16,18 @@ jest.mock("components/EditorLayout/Tabs", () => ({
   default: () => null,
 }));
 
+jest.mock("hooks/useCreateFolder", () => ({
+  useCreateFolder: jest.fn(),
+  useCreatePageWithFolder: jest.fn(),
+  useCreateListCollectorFolder: jest.fn(),
+}));
+
+jest.mock("hooks/useCreateQuestionPage", () => ({
+  useCreateQuestionPage: jest.fn(),
+  useCreateCalculatedSummaryPage: jest.fn(),
+  useCreateListCollectorPage: jest.fn(),
+}));
+
 describe("Folder: routing page", () => {
   const user = {
     id: "1",

diff --git a/eq-author/src/App/folder/graphql/fragment.graphql b/eq-author/src/App/folder/graphql/fragment.graphql
@@ -5,6 +5,10 @@ query GetFolderPageInfo($input: QueryInput!) {
     id
     displayName
     title
+    position
+    section {
+      id
+    }
     validationErrorInfo {
       ...ValidationErrorInfo
     }

diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js
@@ -14,6 +14,7 @@ import CommentsPanel from "App/Comments";
 
 import { colors } from "constants/theme";
 import CalculatedSummaryPageEditor from "../Design/CalculatedSummaryPageEditor";
+import { useSetNavigationCallbacksForPage } from "components/NavigationCallbacks";
 
 const Container = styled.div`
   padding: 2em;
@@ -82,6 +83,12 @@ const SummaryTotalLabel = styled.div`
 `;
 
 const CalculatedSummaryPagePreview = ({ page }) => {
+  useSetNavigationCallbacksForPage({
+    page: page,
+    folder: page?.folder,
+    section: page?.section,
+  });
+
   return (
     <EditorLayout
       title={page.displayName}

diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js
@@ -28,6 +28,7 @@ describe("CalculatedSummaryPreview", () => {
       position: 1,
       title: "<p>Hello world</p>",
       totalTitle: "<p>Total be:</p>",
+      pageDescription: "Hello",
       alias: "Who am I?",
       type: "Number",
       answers: [],
@@ -105,13 +106,31 @@ describe("CalculatedSummaryPreview", () => {
 
   it("should render empty box when no total-title given", () => {
     page.totalTitle = "";
-    const wrapper = shallow(<CalculatedSummaryPreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <CalculatedSummaryPreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2/preview`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(wrapper.find(byTestAttr("no-total-title"))).toBeTruthy();
   });
 
   it("should render 'no answers selected' message", () => {
     page.summaryAnswers = [];
-    const wrapper = shallow(<CalculatedSummaryPreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <CalculatedSummaryPreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2/preview`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(wrapper.find(byTestAttr("no-answers-selected"))).toBeTruthy();
   });
 });
diff --git a/eq-author/src/App/page/Preview/QuestionPagePreview.js b/eq-author/src/App/page/Preview/QuestionPagePreview.js
@@ -18,6 +18,8 @@ import IconInfo from "./icon-info.svg?inline";
 import IconChevron from "./icon-chevron.svg";
 import Panel from "components/Panel";
 
+import { useSetNavigationCallbacksForPage } from "components/NavigationCallbacks";
+
 const Container = styled.div`
   padding: 2em;
   font-size: 1.1em;
@@ -105,6 +107,12 @@ const QuestionPagePreview = ({ page }) => {
     comments,
   } = page;
 
+  useSetNavigationCallbacksForPage({
+    page,
+    folder: page?.folder,
+    section: page?.section,
+  });
+
   return (
     <EditorLayout
       preview

diff --git a/eq-author/src/App/page/Preview/QuestionPagePreview.test.js b/eq-author/src/App/page/Preview/QuestionPagePreview.test.js
@@ -34,6 +34,7 @@ describe("QuestionPagePreview", () => {
       title: "<p>Hello world</p>",
       alias: "Who am I?",
       pageType: "QuestionPage",
+      pageDescription: "whoami",
       description: "<p>Description</p>",
       descriptionEnabled: true,
       guidance: "<p>Guidance</p>",
@@ -50,6 +51,7 @@ describe("QuestionPagePreview", () => {
       section: {
         id: "1",
         position: 0,
+        allowRepeatingSection: true,
         repeatingSection: true,
         repeatingSectionListId: null,
         questionnaire: {
@@ -111,75 +113,174 @@ describe("QuestionPagePreview", () => {
 
   it("should render warning when there are no answers", () => {
     page.answers = [];
-    const wrapper = shallow(<QuestionPagePreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(wrapper.find(byTestAttr("no-answers"))).toBeTruthy();
   });
 
   it("should not render description when disabled", () => {
     page.descriptionEnabled = false;
-    const wrapper2 = shallow(<QuestionPagePreview page={page} />);
+    const wrapper2 = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(wrapper2.exists(byTestAttr("description"))).toBeFalsy();
   });
 
   it("should render description missing message", () => {
     page.description = "";
-    const wrapper2 = shallow(<QuestionPagePreview page={page} />);
+    const wrapper2 = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(
       wrapper2.find(byTestAttr("description")).find(Error)
     ).toMatchSnapshot();
   });
 
   it("should not render guidance when disabled", () => {
     page.guidanceEnabled = false;
-    const wrapper = shallow(<QuestionPagePreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(wrapper.exists(byTestAttr("guidance"))).toBeFalsy();
   });
 
   it("should render guidance missing message", () => {
     page.guidance = "";
-    const wrapper2 = shallow(<QuestionPagePreview page={page} />);
+    const wrapper2 = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(wrapper2.find(byTestAttr("guidance")).find(Error)).toMatchSnapshot();
   });
 
   it("should not render definition when disabled", () => {
     page.definitionEnabled = false;
-    const wrapper = shallow(<QuestionPagePreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(wrapper.exists(byTestAttr("definition"))).toBeFalsy();
   });
 
   it("should render definition label missing message", () => {
     page.definitionLabel = "";
-    const wrapper = shallow(<QuestionPagePreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(
       wrapper.find(byTestAttr("definition")).find(DetailsTitle)
     ).toMatchSnapshot();
   });
 
   it("should render definition content missing message", () => {
     page.definitionContent = "";
-    const wrapper = shallow(<QuestionPagePreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(
       wrapper.find(byTestAttr("definition")).find(DetailsContent)
     ).toMatchSnapshot();
   });
 
   it("should not render additional information when disabled", () => {
     page.additionalInfoEnabled = false;
-    const wrapper = shallow(<QuestionPagePreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(wrapper.exists(byTestAttr("additional-info"))).toBeFalsy();
   });
 
   it("should render additional info label missing message", () => {
     page.additionalInfoLabel = "";
-    const wrapper = shallow(<QuestionPagePreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(
       wrapper.find(byTestAttr("additional-info")).find(DetailsTitle)
     ).toMatchSnapshot();
   });
 
   it("should render additional info content missing message", () => {
     page.additionalInfoContent = "";
-    const wrapper = shallow(<QuestionPagePreview page={page} />);
+    const wrapper = shallow(
+      <MeContext.Provider value={{ me }}>
+        <QuestionPagePreview page={page} />
+      </MeContext.Provider>,
+      {
+        route: `/q/${questionnaireId}/page/2`,
+        urlParamMatcher: "/q/:questionnaireId/page/:pageId",
+        mocks,
+      }
+    );
     expect(
       wrapper.find(byTestAttr("additional-info")).find(DetailsContent)
     ).toMatchSnapshot();