Merge pull request #3090 from ONSdigital/Update-to-allow-prepop-repea…

…ting-section-in-first-section

Update to allow prepop repeating section in first section

eq-author-api/schema/resolvers/base.js

@@ -367,6 +367,24 @@ const Resolvers = {
       }
       return listNames;
     },
+    collectionListNames: (_, args, ctx) => {
+      const listNames = [];
+      if (ctx.questionnaire?.collectionLists?.lists?.length) {
+        listNames.push(...ctx.questionnaire.collectionLists.lists);
+      }
+      return listNames;
+    },
+    supplementaryDataListNames: (_, args, ctx) => {
+      const listNames = [];
+      if (ctx.questionnaire?.supplementaryData?.data) {
+        listNames.push(
+          ...ctx.questionnaire.supplementaryData.data.filter(
+            (list) => list.listName
+          )
+        );
+      }
+      return listNames;
+    },
   },
 
   Subscription: {
@@ -1785,11 +1803,24 @@ const Resolvers = {
           id === sectionId && !pageId && !folderId
       ),
     comments: ({ id }, args, ctx) => ctx.comments[id],
-    allowRepeatingSection: ({ id }, args, ctx) =>
-      !some(
-        getFoldersBySectionId(ctx, id),
-        (folder) => folder.listId !== undefined
-      ),
+    allowRepeatingSection: (section, args, ctx) => {
+      if (
+        some(
+          getFoldersBySectionId(ctx, section.id),
+          (folder) => folder.listId !== undefined
+        )
+      ) {
+        return false;
+      }
+      if (
+        findIndex(ctx.questionnaire.sections, { id: section.id }) === 0 &&
+        !ctx.questionnaire.supplementaryData &&
+        !section.repeatingSection
+      ) {
+        return false;
+      }
+      return true;
+    },
   },
 
   CollectionLists: {

eq-author-api/schema/typeDefs.js

@@ -917,6 +917,8 @@ type Query {
   supplementaryData: SupplementaryData
   publishHistory: [PublishHistoryEvent]
   listNames: [ListName]
+  collectionListNames: [ListName]
+  supplementaryDataListNames: [ListName]
 }
 
 input CommonFilters {

eq-author/README.md

@@ -112,4 +112,3 @@ theme colours and action names.
 `yarn storybook` Start the local server.
 
 `yarn build-storybook -o ../docs` deploy updates to static site (run from eq-author folder).
-

eq-author/src/App/section/Design/SectionEditor/RepeatingSection/index.js

@@ -3,7 +3,8 @@ import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import { Field, Label } from "components/Forms";
 import { useQuery } from "@apollo/react-hooks";
-import GET_LISTNAMES from "graphql/getListNames.graphql";
+import GET_COLLECTION_LISTNAMES from "graphql/getCollectionListNames.graphql";
+import GET_SUPPLEMETARY_LISTNAMES from "graphql/getSupplementaryListNames.graphql";
 import Icon from "assets/icon-select.svg";
 import Loading from "components/Loading";
 import { find, some } from "lodash";
@@ -95,17 +96,28 @@ const renderErrors = (errors, field) => {
 };
 
 const RepeatingSection = ({ section, handleUpdate }) => {
-  const { loading, data } = useQuery(GET_LISTNAMES, {
-    fetchPolicy: "cache-and-network",
-  });
+  const { loading: collectionLoading, data: collectionData } = useQuery(
+    GET_COLLECTION_LISTNAMES,
+    {
+      fetchPolicy: "cache-and-network",
+    }
+  );
+  const { loading: supplementaryLoading, data: supplementaryData } = useQuery(
+    GET_SUPPLEMETARY_LISTNAMES,
+    {
+      fetchPolicy: "cache-and-network",
+    }
+  );
 
-  if (loading) {
+  if (collectionLoading || supplementaryLoading) {
     return <Loading height="100%">Questionnaire lists loading…</Loading>;
   }
   let listNames = [];
-
-  if (data) {
-    listNames = data.listNames || [];
+  if (collectionData && section.position !== 0) {
+    listNames = collectionData.collectionListNames || [];
+  }
+  if (supplementaryData) {
+    listNames = [...listNames, ...supplementaryData.supplementaryDataListNames];
   }
 
   return (
@@ -117,10 +129,7 @@ const RepeatingSection = ({ section, handleUpdate }) => {
         used to ask the same questions for each item selected.
       </Caption>
       <InlineField
-        disabled={
-          !section.allowRepeatingSection ||
-          (section.position === 0 && !section.repeatingSection)
-        }
+        disabled={!section.allowRepeatingSection}
         data-test="repeating-section-toggle-field"
       >
         <Label htmlFor="repeating-section">Repeating section</Label>

eq-author/src/App/section/Design/SectionEditor/RepeatingSection/index.test.js

@@ -4,34 +4,36 @@ import { render } from "tests/utils/rtl";
 import RepeatingSection from ".";
 import { useQuery } from "@apollo/react-hooks";
 
+const listnames = [
+  {
+    id: "123",
+    listname: "people",
+    displayName: "people",
+  },
+];
+
 jest.mock("@apollo/react-hooks", () => ({
   ...jest.requireActual("@apollo/react-hooks"),
-  useQuery: jest.fn(),
-}));
-
-const collectionLists = {
-  id: "collection-list-1",
-  lists: [
-    {
-      id: "list-1",
-      listName: "List 1",
-      displayName: "List 1",
-      answers: [
+  useQuery: jest.fn(() => ({
+    loading: false,
+    error: false,
+    data: {
+      supplementaryDataListNames: [
         {
-          id: "list-answer-1",
-          type: "TextField",
-          label: "List answer 1",
+          id: "123",
+          listname: "people",
+          displayName: "people",
         },
       ],
     },
-  ],
-};
+  })),
+}));
 
-useQuery.mockImplementation(() => ({
+useQuery.mockImplementationOnce(() => ({
   loading: false,
   error: false,
   data: {
-    collectionLists,
+    collectionListNames: listnames,
   },
 }));
 
@@ -70,37 +72,6 @@ describe("RepeatingSection", () => {
     };
   });
 
-  describe("First section", () => {
-    it("should disable repeating section toggle switch on first section if repeatingSection is false", () => {
-      section.position = 0;
-
-      const { getByTestId } = renderRepeatingSection({
-        section,
-        handleUpdate: jest.fn(),
-      });
-      const repeatingToggleField = getByTestId(
-        "repeating-section-toggle-field"
-      );
-
-      expect(repeatingToggleField).toHaveAttribute("disabled", ""); // if disabled === "" then toggle switch is disabled
-    });
-
-    it("should not disable repeating section toggle switch on first section if repeatingSection is true", () => {
-      section.position = 0;
-      section.repeatingSection = true;
-
-      const { getByTestId } = renderRepeatingSection({
-        section,
-        handleUpdate: jest.fn(),
-      });
-      const repeatingToggleField = getByTestId(
-        "repeating-section-toggle-field"
-      );
-
-      expect(repeatingToggleField).not.toHaveAttribute("disabled"); // if disabled is undefined then toggle switch is not disabled
-    });
-  });
-
   it("should disable repeating section toggle switch if allowRepeatingSection is false", () => {
     section.allowRepeatingSection = false;
     const { getByTestId } = renderRepeatingSection({

eq-author/src/graphql/getCollectionListNames.graphql

@@ -0,0 +1,7 @@
+query GetCollectionListNames {
+  collectionListNames {
+    id,
+    listName,
+    displayName,
+  }
+}

eq-author/src/graphql/getSupplementaryListNames.graphql

@@ -0,0 +1,7 @@
+query GetSupplementaryDataListNames {
+  supplementaryDataListNames {
+    id,
+    listName,
+    displayName,
+  }
+}