Merge pull request #3110 from ONSdigital/EAR-2352-piping-introduction…

…-page

EAR-2352 - Piping introduction page

cloudbuild.yaml

@@ -1,10 +1,10 @@
 steps:
-  - name: 'node:$_NODE_VERSION'
+  - name: "node:$_NODE_VERSION"
     id: yarn_install_and_build
     dir: eq-author
     entrypoint: /bin/bash
     args:
-      - '-c'
+      - "-c"
       - |
         if [ $_ENV = "staging" ]; then
           yarn install
@@ -21,8 +21,8 @@ steps:
     entrypoint: sh
     waitFor:
       - yarn_install_and_build
-    args: 
-      - '-c'
+    args:
+      - "-c"
       - |
         if [ $_ENV = "staging" ]; then
           docker build -t "eu.gcr.io/ons-eqbs-images/eq-author:$SHORT_SHA" .
@@ -38,9 +38,9 @@ steps:
     dir: eq-author-api
     entrypoint: sh
     waitFor:
-      - '-'
-    args: 
-      - '-c'
+      - "-"
+    args:
+      - "-c"
       - |
         if [ $_ENV = "staging" ]; then
           docker build -t "eu.gcr.io/ons-eqbs-images/eq-author-api:$SHORT_SHA" .
@@ -51,11 +51,11 @@ steps:
           echo "*************************************************************"
         fi
 
-  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk:alpine'
+  - name: "gcr.io/google.com/cloudsdktool/cloud-sdk:alpine"
     id: tag_author_release
     entrypoint: /bin/bash
     args:
-      - '-c'
+      - "-c"
       - |
         if [ $_ENV = "preprod" ]; then
           gcloud container images add-tag \
@@ -67,11 +67,11 @@ steps:
           echo "*************************************************************"
         fi
 
-  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk:alpine'
+  - name: "gcr.io/google.com/cloudsdktool/cloud-sdk:alpine"
     id: tag_author_api_release
     entrypoint: /bin/bash
     args:
-      - '-c'
+      - "-c"
       - |
         if [ $_ENV = "preprod" ]; then
           gcloud container images add-tag \
@@ -83,11 +83,11 @@ steps:
           echo "*************************************************************"
         fi
 
-  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk:alpine'
+  - name: "gcr.io/google.com/cloudsdktool/cloud-sdk:alpine"
     id: deploy_author_api
     entrypoint: sh
     args:
-      - '-c'
+      - "-c"
       - |
         if [ $_ENV = "staging" ]; then
           gcloud run deploy eq-author-api \
@@ -100,12 +100,12 @@ steps:
           --region europe-west2 \
           --platform managed
         fi
- 
-  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk:alpine'
+
+  - name: "gcr.io/google.com/cloudsdktool/cloud-sdk:alpine"
     id: deploy_author
     entrypoint: sh
     args:
-      - '-c'
+      - "-c"
       - |
         if [ $_ENV = "staging" ]; then
           gcloud run deploy eq-author \
@@ -118,4 +118,4 @@ steps:
           --region europe-west2 \
           --platform managed
         fi
-timeout: 1200s
+timeout: 1800s

eq-author/src/components/ContentPickerv3/SupplementaryDataPicker.test.js

@@ -0,0 +1,99 @@
+import React from "react";
+import { render, fireEvent } from "tests/utils/rtl";
+import {
+  ANSWER,
+  METADATA,
+  SUPPLEMENTARY_DATA,
+} from "../ContentPickerSelectv3/content-types";
+import Theme from "contexts/themeContext";
+
+import SupplementaryDataPicker from "./SupplementaryDataPicker";
+
+describe("Supplementary Data Picker", () => {
+  let props;
+  const setContentType = jest.fn();
+
+  beforeEach(() => {
+    props = {
+      data: [
+        {
+          surveyId: "221",
+          data: [
+            {
+              schemaFields: [
+                {
+                  identifier: "employer_paye",
+                  description:
+                    "The tax office employer reference. This will be between 1 and 10 characters, which can be letters and numbers.",
+                  type: "string",
+                  example: "AB456",
+                  selector: "reference",
+                  id: "c5f64732-3bb2-40ba-8b0d-fc3b7e22c834",
+                },
+              ],
+              id: "f0d7091a-44be-4c88-9d78-a807aa7509ec",
+              listName: "",
+            },
+            {
+              schemaFields: [
+                {
+                  identifier: "local-units",
+                  description: "Name of the local unit",
+                  type: "string",
+                  example: "STUBBS BUILDING PRODUCTS LTD",
+                  selector: "name",
+                  id: "673a30af-5197-4d2a-be0c-e5795a998491",
+                },
+                {
+                  identifier: "local-units",
+                  description: "The “trading as” name for the local unit",
+                  type: "string",
+                  example: "STUBBS PRODUCTS",
+                  selector: "trading_name",
+                  id: "af2ff1a6-fc5d-419f-9538-0d052a5e6728",
+                },
+              ],
+              id: "6e901afa-473a-4704-8bbd-de054569379c",
+              listName: "local-units",
+            },
+          ],
+          sdsDateCreated: "2023-12-15T11:21:34Z",
+          sdsGuid: "621c954b-5523-4eda-a3eb-f18bebd20b8d",
+          sdsVersion: "1",
+          id: "b6c84aee-ea11-41e6-8be8-5715b066d297",
+        },
+      ],
+      contentType: ANSWER,
+      contentTypes: [ANSWER, METADATA, SUPPLEMENTARY_DATA],
+      setContentType,
+      isSelected: jest.fn(),
+      onSelected: jest.fn(),
+      isSectionSelected: jest.fn(),
+    };
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderSupplementaryDataPicker = () =>
+    render(
+      <Theme>
+        <SupplementaryDataPicker {...props} />
+      </Theme>
+    );
+
+  it("should render the 'Answer from supplementary data' radio button", () => {
+    const { getByText } = renderSupplementaryDataPicker();
+    expect(getByText("Answer from supplementary data")).toBeTruthy();
+  });
+
+  it("should click the 'Answer from supplementary data' radio button", () => {
+    const { getByTestId } = renderSupplementaryDataPicker();
+    const supplementaryDataRadio = getByTestId(
+      "content-type-selector-supplementaryData"
+    );
+    fireEvent.click(supplementaryDataRadio);
+    expect(setContentType).toHaveBeenCalledWith(SUPPLEMENTARY_DATA);
+  });
+});

eq-author/src/components/RichTextEditor/PipingMenu.js

@@ -126,19 +126,13 @@ const PipingMenu = ({
 
   let allSupplementaryData = questionnaire?.supplementaryData?.data || [];
 
-  if (
-    allSupplementaryData &&
-    !(
-      pageType === "Introduction" &&
-      questionnaire?.sections[0]?.repeatingSection
-    )
-  ) {
+  if (allSupplementaryData && pageType !== "Introduction") {
     allSupplementaryData = allSupplementaryData.filter(
       (list) => list.listName === "" || list.id === listId
     );
   }
 
-  const supplementaryData = allSupplementaryData.flatMap((list) => {
+  let supplementaryData = allSupplementaryData.flatMap((list) => {
     return list.schemaFields.map((schemaField) => {
       return {
         listName: list.listName,
@@ -147,6 +141,10 @@ const PipingMenu = ({
     });
   });
 
+  supplementaryData = supplementaryData.filter(
+    (list) => list.listName === "" || list.type !== "array"
+  );
+
   const handlePickerContent = (contentType) => {
     switch (contentType) {
       case METADATA:

eq-author/src/components/RichTextEditor/PipingMenu.test.js

@@ -8,6 +8,7 @@ import PipingMenu, {
 import {
   ANSWER,
   METADATA,
+  SUPPLEMENTARY_DATA,
   VARIABLES,
 } from "components/ContentPickerSelectv3/content-types";
 
@@ -34,12 +35,60 @@ const mockMetadata = [
   },
 ];
 
+const mockSupplementaryData = {
+  surveyId: "221",
+  data: [
+    {
+      schemaFields: [
+        {
+          identifier: "employer_paye",
+          description:
+            "The tax office employer reference. This will be between 1 and 10 characters, which can be letters and numbers.",
+          type: "string",
+          example: "AB456",
+          selector: "reference",
+          id: "c5f64732-3bb2-40ba-8b0d-fc3b7e22c834",
+        },
+      ],
+      id: "f0d7091a-44be-4c88-9d78-a807aa7509ec",
+      listName: "",
+    },
+    {
+      schemaFields: [
+        {
+          identifier: "local-units",
+          description: "Name of the local unit",
+          type: "string",
+          example: "STUBBS BUILDING PRODUCTS LTD",
+          selector: "name",
+          id: "673a30af-5197-4d2a-be0c-e5795a998491",
+        },
+        {
+          identifier: "local-units",
+          description: "The “trading as” name for the local unit",
+          type: "string",
+          example: "STUBBS PRODUCTS",
+          selector: "trading_name",
+          id: "af2ff1a6-fc5d-419f-9538-0d052a5e6728",
+        },
+      ],
+      id: "6e901afa-473a-4704-8bbd-de054569379c",
+      listName: "local-units",
+    },
+  ],
+  sdsDateCreated: "2023-12-15T11:21:34Z",
+  sdsGuid: "621c954b-5523-4eda-a3eb-f18bebd20b8d",
+  sdsVersion: "1",
+  id: "b6c84aee-ea11-41e6-8be8-5715b066d297",
+};
+
 const mockQuestionnaire = buildQuestionnaire({
   sectionCount: 1,
   folderCount: 1,
   pageCount: 2,
 });
 mockQuestionnaire.metadata = mockMetadata;
+mockQuestionnaire.supplementaryData = mockSupplementaryData;
 mockQuestionnaire.sections[0].folders[0].pages[0].answers = [
   {
     id: "answer-1",
@@ -63,7 +112,7 @@ describe("PipingMenu", () => {
     return shallow(
       <PipingMenu
         onItemChosen={handleItemChosen}
-        allowableTypes={[ANSWER, METADATA, VARIABLES]}
+        allowableTypes={[ANSWER, METADATA, SUPPLEMENTARY_DATA, VARIABLES]}
         canFocus
         {...props}
       />
@@ -101,11 +150,12 @@ describe("PipingMenu", () => {
     expect(wrapper.find(PIPING_BUTTON_VALUE).prop("disabled")).toBe(true);
   });
 
-  it("should render as disabled when there is no answerData and metadataData", () => {
+  it("should render as disabled when there is no answerData, metadataData, and supplementaryData", () => {
     const wrapper = render({
       questionnaire: {
         ...mockQuestionnaire,
         metadata: [],
+        supplementaryData: [],
       },
       currentPageId: "1.1.1",
     });