Merge pull request #3072 from ONSdigital/EAR-2109-list-collector-addi…

…tional-pages

EAR 2109 list collector additional pages

eq-author-api/src/validation/customKeywords/validatePipingAnswerInTitle.js

@@ -10,6 +10,7 @@ const {
   getSectionByPageId,
   getListByAnswerId,
   getSupplementaryDataAsCollectionListbyFieldId,
+  getFolderByPageId,
 } = require("../../../schema/resolvers/utils");
 
 const pipedAnswerIdRegex =
@@ -77,14 +78,18 @@ module.exports = (ajv) =>
           );
         if (list) {
           let section = parentData;
+          const folder = getFolderByPageId({ questionnaire }, section.id);
+
           if (parentData.pageType) {
             section = getSectionByPageId({ questionnaire }, parentData.id);
           }
 
           if (!(dataPiped === "supplementary" && list.listName === "")) {
             if (
-              list.id !== section.repeatingSectionListId ||
-              !section.repeatingSection
+              (folder.listId !== undefined && list.id !== folder.listId) ||
+              (folder.listId === undefined &&
+                (list.id !== section.repeatingSectionListId ||
+                  !section.repeatingSection))
             ) {
               return hasError(PIPING_TITLE_DELETED);
             }

eq-author/src/App/QuestionnaireDesignPage/NavigationSidebar/AddMenu/AddMenu.js

@@ -124,7 +124,7 @@ const AddMenu = ({
   const extraButtons = [
     {
       handleClick: () => onAddQuestionPage(true),
-      disabled: !canAddQuestionPage || isListCollectorFolder, // TODO: List collector folder - remove `isListCollectorFolder` to allow adding question pages when completing the follow up question task
+      disabled: !canAddQuestionPage,
       dataTest: "btn-add-question-page-inside",
       icon: IconQuestion,
       text: "Question",
@@ -138,7 +138,7 @@ const AddMenu = ({
     },
     {
       handleClick: () => onStartImportingContent(true),
-      disabled: !canImportContent || isListCollectorFolder, // TODO: List collector folder - remove `isListCollectorFolder` to allow importing question pages when completing the follow up question task
+      disabled: !canImportContent,
       dataTest: "btn-import-content-inside",
       icon: IconImport,
       text: "Import content",

eq-author/src/App/QuestionnaireDesignPage/NavigationSidebar/Folder/index.js

@@ -5,6 +5,8 @@ import { useParams } from "react-router-dom";
 import styled from "styled-components";
 import { colors, focusStyle } from "constants/theme";
 
+import { QuestionPage } from "constants/page-types";
+
 import { buildFolderPath } from "utils/UrlUtils";
 
 import IconBasicFolder from "assets/icon-folder.svg?inline";
@@ -44,6 +46,7 @@ const Folder = ({
   questionnaireId,
   displayName,
   pages,
+  entity,
   validationErrorInfo,
   position,
   listId,
@@ -80,7 +83,13 @@ const Folder = ({
             <Droppable
               droppableId={folderId}
               type={`folder-content`}
-              isDropDisabled={listId != null} // TODO: List collector folder - update this to allow follow up questions when completing the follow up task
+              // Allows only question pages with no confirmation page to be dropped into list collector folders
+              isDropDisabled={
+                listId != null &&
+                (entity?.pageType !== QuestionPage ||
+                  (entity?.pageType === QuestionPage &&
+                    entity?.confirmation != null))
+              }
             >
               {(
                 { innerRef, placeholder, droppableProps },
@@ -117,6 +126,7 @@ Folder.propTypes = {
   pages: PropTypes.array.isRequired, // eslint-disable-line
   validationErrorInfo: PropTypes.object.isRequired, // eslint-disable-line
   position: PropTypes.number.isRequired,
+  entity: PropTypes.object, //eslint-disable-line
   listId: PropTypes.string,
 };
 

eq-author/src/App/QuestionnaireDesignPage/NavigationSidebar/NavigationHeader/index.js

@@ -24,9 +24,10 @@ import withCreateSection from "enhancers/withCreateSection";
 import withCreateQuestionConfirmation from "../../withCreateQuestionConfirmation";
 import withCreateIntroductionPage from "../../withCreateIntroductionPage";
 
-import { QuestionPage } from "constants/page-types";
-
-import isListCollectorPageType from "utils/isListCollectorPageType";
+import {
+  QuestionPage,
+  ListCollectorConfirmationPage,
+} from "constants/page-types";
 
 export const UnwrappedNavigationHeader = ({
   onCreateQuestionConfirmation,
@@ -54,6 +55,25 @@ export const UnwrappedNavigationHeader = ({
   const isListCollectorFolder =
     folder && folder.__typename === "ListCollectorFolder";
 
+  const targetIsListCollectorFolder = () => {
+    if (isFolder) {
+      if (folder?.listId && targetInsideFolder) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      if (
+        page?.folder?.listId &&
+        page?.pageType !== ListCollectorConfirmationPage
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  };
+
   switch (entityName) {
     case PAGE:
       section = getSectionByPageId(questionnaire, entityId);
@@ -69,9 +89,13 @@ export const UnwrappedNavigationHeader = ({
       break;
   }
 
-  const canAddQuestionAndCalculatedSummmaryPages =
+  const canAddQuestionPage =
+    [PAGE, FOLDER, SECTION].includes(entityName) &&
+    page?.pageType !== ListCollectorConfirmationPage;
+
+  const canAddCalculatedSummaryPage =
     [PAGE, FOLDER, SECTION].includes(entityName) &&
-    !isListCollectorPageType(page?.pageType); // TODO: List collector folder - update to allow adding follow up questions
+    page?.folder?.listId === undefined;
 
   const canAddFolder = [PAGE, FOLDER, SECTION].includes(entityName);
   const canAddListCollectorFolder =
@@ -82,7 +106,7 @@ export const UnwrappedNavigationHeader = ({
   );
 
   let canAddQuestionConfirmation = false;
-  if (entityName === PAGE) {
+  if (entityName === PAGE && page?.folder?.listId == null) {
     canAddQuestionConfirmation =
       page?.pageType === QuestionPage && !page?.confirmation;
   }
@@ -91,9 +115,7 @@ export const UnwrappedNavigationHeader = ({
     !questionnaire?.introduction &&
     [PAGE, FOLDER, SECTION].includes(entityName);
 
-  const canImportContent =
-    [PAGE, FOLDER, SECTION].includes(entityName) &&
-    !isListCollectorPageType(page?.pageType); // TODO: List collector folder - update to allow importing follow up questions
+  const canImportContent = [PAGE, FOLDER, SECTION].includes(entityName);
 
   const handleAddQuestionPage = (createInsideFolder) => {
     setOpenMenu(!openMenu);
@@ -152,8 +174,8 @@ export const UnwrappedNavigationHeader = ({
         onAddListCollectorFolder={handleAddListCollectorFolder}
         onAddIntroductionPage={handleAddIntroductionPage}
         onStartImportingContent={handleStartImportingContent}
-        canAddQuestionPage={canAddQuestionAndCalculatedSummmaryPages}
-        canAddCalculatedSummaryPage={canAddQuestionAndCalculatedSummmaryPages}
+        canAddQuestionPage={canAddQuestionPage}
+        canAddCalculatedSummaryPage={canAddCalculatedSummaryPage}
         canAddQuestionConfirmation={canAddQuestionConfirmation}
         canAddListCollectorFolder={canAddListCollectorFolder}
         canAddIntroductionPage={canAddIntroductionPage}
@@ -169,6 +191,7 @@ export const UnwrappedNavigationHeader = ({
           questionnaires={getQuestionnaires()}
           stopImporting={() => setImportingContent(false)}
           targetInsideFolder={targetInsideFolder}
+          targetIsListCollectorFolder={targetIsListCollectorFolder()}
         />
       )}
     </>

eq-author/src/App/QuestionnaireDesignPage/NavigationSidebar/Section/index.js

@@ -41,6 +41,8 @@ const Section = ({
   validationErrorInfo,
   open,
   position,
+  entity,
+  repeatingSection,
   comments,
 }) => {
   const { me } = useMe();
@@ -79,7 +81,11 @@ const Section = ({
               .find(Boolean)}
             unreadComment={hasUnreadComments(comments, me.id)}
           >
-            <Droppable droppableId={sectionId} type={`section-content`}>
+            <Droppable
+              droppableId={sectionId}
+              type={`section-content`}
+              isDropDisabled={entity?.listId != null && repeatingSection}
+            >
               {(
                 { innerRef, placeholder, droppableProps },
                 { isDraggingOver }
@@ -98,6 +104,7 @@ const Section = ({
                         pages={pages}
                         position={position}
                         listId={listId}
+                        entity={entity}
                         {...rest}
                       />
                     )
@@ -121,6 +128,8 @@ Section.propTypes = {
   validationErrorInfo: PropTypes.object.isRequired, // eslint-disable-line
   open: PropTypes.bool,
   position: PropTypes.number,
+  entity: PropTypes.object, //eslint-disable-line
+  repeatingSection: PropTypes.bool,
   comments: PropTypes.array, //eslint-disable-line
 };
 

eq-author/src/App/QuestionnaireDesignPage/NavigationSidebar/dragDropFunctions/onDragEnd.js

@@ -53,6 +53,26 @@ export default (
     const newPosition = destination.index;
 
     const sourceFolder = getFolderByPageId(questionnaire, pageBeingMoved.id);
+
+    /* 
+      Prevent dropping question page into list collector folder before add item page and after confirmation page 
+      (only allow question pages between add item and confirmation pages in list collector folder) 
+    */
+    if (destinationFolder.listId != null) {
+      if (destinationFolder.id === sourceFolder.id) {
+        if (
+          newPosition <= 1 ||
+          newPosition >= destinationFolder.pages.length - 1
+        ) {
+          return -1;
+        }
+      } else {
+        if (newPosition <= 1 || newPosition >= destinationFolder.pages.length) {
+          return -1;
+        }
+      }
+    }
+
     sourceFolder.pages.splice(sourceFolder.pages.indexOf(pageBeingMoved), 1);
     destinationFolder.pages.splice(newPosition, 0, pageBeingMoved);
 

eq-author/src/App/QuestionnaireDesignPage/NavigationSidebar/dragDropFunctions/onDragEnd.test.js

@@ -1,4 +1,7 @@
-import { buildQuestionnaire } from "tests/utils/createMockQuestionnaire";
+import {
+  buildQuestionnaire,
+  buildListCollectorFolders,
+} from "tests/utils/createMockQuestionnaire";
 import onDragEnd from "./onDragEnd";
 
 const buildDestination = (entity, index) => ({
@@ -98,5 +101,93 @@ describe("onDragEnd", () => {
       expect(mockMovePage).toHaveBeenCalledTimes(1);
       expect(mockMoveFolder).toHaveBeenCalledTimes(0);
     });
+
+    describe("Within list folder", () => {
+      it("should prevent moving page before add item page within same list folder", () => {
+        questionnaire.sections[0].folders[2] = buildListCollectorFolders()[0];
+        questionnaire.sections[0].folders[2].pages.splice(2, 0, {
+          id: "follow-up-page",
+          title: "Follow up page",
+        });
+        const pageToMove = questionnaire.sections[0].folders[2].pages[2];
+        const folder = questionnaire.sections[0].folders[2];
+
+        const result = onDragEnd(
+          questionnaire,
+          buildDestination(folder, 0),
+          buildSource(folder, 2),
+          pageToMove.id,
+          mockMovePage,
+          mockMoveFolder
+        );
+
+        expect(result).toBe(-1);
+        expect(mockMoveFolder).toHaveBeenCalledTimes(0);
+        expect(mockMovePage).toHaveBeenCalledTimes(0);
+      });
+
+      it("should prevent moving page after confirmation page within same list folder", () => {
+        questionnaire.sections[0].folders[2] = buildListCollectorFolders()[0];
+        questionnaire.sections[0].folders[2].pages.splice(2, 0, {
+          id: "follow-up-page",
+          title: "Follow up page",
+        });
+        const pageToMove = questionnaire.sections[0].folders[2].pages[2];
+        const folder = questionnaire.sections[0].folders[2];
+
+        const result = onDragEnd(
+          questionnaire,
+          buildDestination(folder, 3),
+          buildSource(folder, 2),
+          pageToMove.id,
+          mockMovePage,
+          mockMoveFolder
+        );
+
+        expect(result).toBe(-1);
+        expect(mockMoveFolder).toHaveBeenCalledTimes(0);
+        expect(mockMovePage).toHaveBeenCalledTimes(0);
+      });
+
+      it("should prevent moving page before add item page within a different list folder", () => {
+        questionnaire.sections[0].folders[2] = buildListCollectorFolders()[0];
+        const pageToMove = questionnaire.sections[0].folders[0].pages[0];
+        const sourceFolder = questionnaire.sections[0].folders[0];
+        const destinationFolder = questionnaire.sections[0].folders[2];
+
+        const result = onDragEnd(
+          questionnaire,
+          buildDestination(destinationFolder, 0),
+          buildSource(sourceFolder, 0),
+          pageToMove.id,
+          mockMovePage,
+          mockMoveFolder
+        );
+
+        expect(result).toBe(-1);
+        expect(mockMoveFolder).toHaveBeenCalledTimes(0);
+        expect(mockMovePage).toHaveBeenCalledTimes(0);
+      });
+
+      it("should prevent moving page after confirmation page within a different list folder", () => {
+        questionnaire.sections[0].folders[2] = buildListCollectorFolders()[0];
+        const pageToMove = questionnaire.sections[0].folders[0].pages[0];
+        const sourceFolder = questionnaire.sections[0].folders[0];
+        const destinationFolder = questionnaire.sections[0].folders[2];
+
+        const result = onDragEnd(
+          questionnaire,
+          buildDestination(destinationFolder, 3),
+          buildSource(sourceFolder, 0),
+          pageToMove.id,
+          mockMovePage,
+          mockMoveFolder
+        );
+
+        expect(result).toBe(-1);
+        expect(mockMoveFolder).toHaveBeenCalledTimes(0);
+        expect(mockMovePage).toHaveBeenCalledTimes(0);
+      });
+    });
   });
 });