feature: paragraph ItemResponseType for phrase builder response options WEB (M2-7762)

[AlejandroCoronadoN]

• Added paragraphText phrasalTemplateCompatibleResponseTypes
• Assign item.reponseType with value paragraphText to the text-type rendering formatting on the ActionPlan. The entire paragraph should apper between fields of the ActionPlan.

📝 Description

As an Admin, I want to choose the paragraph item type as a response phrase field so that I can include its contents in my Action Plan. By adding paragraph option to the allowed types on validate_phrasal_templates, the backend can store Activities with PhrasalBuilder Items that contain Parragraph items as elements of the PhraseBuilder item.

🔗 Jira Ticket M2-7762

Changes include:

• The entire paragraph should apper between fields of the ActionPlan.

📸 Screenshots

🪤 Peer Testing

• Create an activity
• Create and item of type parragraph inside your activity
• In the same activity create a new item of type phrase builder
• Phrase builder should allow you to choose the newly created paragraph item inside the “Select Item (Response)” dropdown menu.
• Complete an activity from the web application and validate that the parragraph can be selected on the Phrase Builder section.
• Invite a user to the new applet/activity
• Logged as a user complete the new applet/activity
• On the last section of the Activity you will be able to see the new Action Plan with the paragraph inserted between the fields of the PhraseBuilder-ActionPlan-PhrasalTemplate

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-542.d15zn9do8xbzga.amplifyapp.com

[farmerpaul]

Hey @AlejandroCoronadoN, I found that one of the bullets in AC wasn't satisfied:

• An action plan configured with a phrase containing Paragraph Text item types will display the paragraph text, including line breaks / new lines

When I provided a paragraph of text with newlines in it, the newlines were removed in the Action Plan:

Paragraph input	Action Plan

[AlejandroCoronadoN]

Hello @farmerpaul . Here are more details about my solution:

1. I added the conditional logic for paragraph type on fieldPhrasalDataType === paragraph
2. I splited my text into multiple "words" using breaklines so each "word" that is an individual sentence will be rendered in a separate
3. I added the conditional rendering for fieldPhrasalDataType === 'paragraph' inside the Text component. Here I rendered all the individual sentences in a different span. That way we can se a breakline between each paragraph.

So this renders like this:

Following up with my comments on slack, I think there is another approach that involves rendering conditional on the fieldDisplayMode value. For this implementation I will need to:

1. Add a new fieldDisplayMode on the Admin application.
2. When creating the items I will need to insert the new displayMode for paragraphs
3. Using the NEW fieldDisplayMode I will render paragraphs differently. So the second condition where I use fieldPhrasalDataType === 'paragraph' will be replaced by fieldDisplayMode === 'paragraph'. Making the code cleaner.

[farmerpaul]

Hey @AlejandroCoronadoN, thanks for making that change, it's almost there! I just noticed a couple ways the code could be made a bit clearer/simpler, and also wanted to draw your attention to a detail about consecutive line breaks.

Also, thank you for introducing me to flatMap()! I can't believe I've never really encountered that before… 🙈🙈🙈

[farmerpaul]

Looks good, thank you for making those changes! Just made one very minor type suggestion, and identified a rogue eslint-disable line that I wasn't sure was intentional. Anyway, PR is ready for QA 🙂 🙌🏻