Repeater pattern component #336

ethangardner · 2024-10-14T15:32:27Z

Added the repeater pattern with basic support for the available question types at the start of the sprint (short answer and radio group).

There is a bug in the form submission side where the thank you page flashes briefly, and then re-renders the form fields with the user input, so the summary table on the results page was turned off for now.

github-actions · 2024-10-14T15:34:54Z

Terraform plan for tts-10x-atj-dev

Plan: 0 to add, 2 to change, 0 to destroy.

Terraform used the selected providers to generate the following execution
plan. Resource actions are indicated with the following symbols:
!~  update in-place

Terraform will perform the following actions:

  # cloudfoundry_app.tts-10x-atj-dev-server-doj_tts-10x-atj-dev-server-doj-app_380DB029 will be updated in-place
!~  resource "cloudfoundry_app" "tts-10x-atj-dev-server-doj_tts-10x-atj-dev-server-doj-app_380DB029" {
!~      docker_image                    = "ghcr.io/gsa-tts/atj-platform/server-doj:afbde7f1d70c4920d82fa504c9f73bf879af14ed" -> "ghcr.io/gsa-tts/atj-platform/server-doj:ba304df413a515b2a0522f0504b10e2825f59d2e"
        id                              = "6246c063-6cf4-423d-812a-4bfdeb62bcae"
        name                            = "tts-10x-atj-dev-server-doj-app"
#        (17 unchanged attributes hidden)

#        (3 unchanged blocks hidden)
    }

  # cloudfoundry_app.tts-10x-atj-dev-server-kansas_tts-10x-atj-dev-server-kansas-app_337A9CF1 will be updated in-place
!~  resource "cloudfoundry_app" "tts-10x-atj-dev-server-kansas_tts-10x-atj-dev-server-kansas-app_337A9CF1" {
!~      docker_image                    = "ghcr.io/gsa-tts/atj-platform/server-kansas:afbde7f1d70c4920d82fa504c9f73bf879af14ed" -> "ghcr.io/gsa-tts/atj-platform/server-kansas:ba304df413a515b2a0522f0504b10e2825f59d2e"
        id                              = "f7c60971-bffd-4a6e-a0bb-af1191079918"
        name                            = "tts-10x-atj-dev-server-kansas-app"
#        (17 unchanged attributes hidden)

#        (3 unchanged blocks hidden)
    }

Plan: 0 to add, 2 to change, 0 to destroy.

📝 Plan generated in Post Terraform plan to PR comment #346

danielnaab · 2024-10-15T20:26:02Z

packages/design/src/Form/components/Repeater/index.tsx

+            <button
+              type="button"
+              className="usa-button usa-button--outline"
+              onClick={() => append({})}


Do you think it'd be possible to make these submit buttons, so we could support adding/removing fields when Javascript is disabled?

I'm not really sure how we'd do that server-side...

@danielnaab - I think that sounds doable. I can add a value to the button that would distinguish between the submit events that were triggered by the add/delete actions vs. the one the user would press if they mean to submit and finalize the form. There would need to be a check for this on the backend. What kind of data would you want for this check?

Somehow, it'd need to be checked for in the submitForm service - forms/src/services/submit-form.ts. This might be something better done after plugin/pattern refactoring. Could we create a ticket to loop back and progressively enhance this later?

ethangardner · 2024-10-17T19:04:44Z

Wrote some better tests for the repeater component to test the add/remove feature. Changed the button in that component to submit with a value so we can do the backend part to handle the JS disabled use case.

danielnaab

This is a great set-up that should serve us well! I have a couple comments on how the pattern wires the IDs and session data up.

danielnaab · 2024-10-18T14:01:06Z

packages/design/src/Form/components/Repeater/index.tsx

+            <button
+              type="button"
+              className="usa-button usa-button--outline"
+              onClick={() => append({})}


Somehow, it'd need to be checked for in the submitForm service - forms/src/services/submit-form.ts. This might be something better done after plugin/pattern refactoring. Could we create a ticket to loop back and progressively enhance this later?

packages/design/src/Form/components/Repeater/index.tsx

danielnaab · 2024-10-18T14:10:27Z

packages/forms/src/components.ts

@@ -10,6 +10,7 @@ import { type FormSession, nullSession, sessionIsComplete } from './session.js';
 export type TextInputProps = PatternProps<{
  type: 'input';
  inputId: string;
+  idSuffix?: string;


I'm a little uncomfortable passing this detail into the UI components. Is there a way we could have the repeater pattern append the suffix directly to the ID in its createPrompt function?

danielnaab · 2024-10-18T14:14:48Z

packages/forms/src/patterns/repeater/prompt.ts

+  const children = pattern.data.patterns.map((patternId: string) => {
+    const childPattern = getPattern(session.form, patternId);
+    return createPromptForPattern(config, session, childPattern, options);
+  });


If the idSuffix were appended to the child IDs here, would that remove the need for the cloneElement logic in the repeater component?

One more question. As I understand, the value of each child pattern is stored as a repeater attribute on the child pattern's session data. Is that right?

If so, I'm wondering if altering the structure of the child pattern's user data might be confusing down the road, and if it would be more clear to store user session data on the repeater pattern's session object. So essentially, the repeater's value might be something like:

[ {"patternIdA": "first row a", "patternIdB": "first row b"}, {"patternIdA": "second row a", "patternIdB": "second row b"}, {"patternIdA": "third row a", "patternIdB": "third row b"}, ]

github-actions · 2024-12-05T22:09:39Z

Terraform plan for tts-10x-atj-dev

Error: reading SSM Parameter (/tts-10x-atj-dev/cloudfoundry/password): couldn't find resource

Error: reading SSM Parameter (/tts-10x-atj-dev/cloudfoundry/password): couldn't find resource

  with data.aws_ssm_parameter.tts-10x-atj-dev-cloudfoundry-password,
  on cdk.tf.json line 21, in data.aws_ssm_parameter.tts-10x-atj-dev-cloudfoundry-password:
  21:       },


Error: reading SSM Parameter (/tts-10x-atj-dev/cloudfoundry/username): couldn't find resource

  with data.aws_ssm_parameter.tts-10x-atj-dev-cloudfoundry-username,
  on cdk.tf.json line 30, in data.aws_ssm_parameter.tts-10x-atj-dev-cloudfoundry-username:
  30:       },


Error: reading SSM Parameter (/tts-10x-atj-dev/server-doj/login.gov/private-key): couldn't find resource

  with data.aws_ssm_parameter.tts-10x-atj-dev_--tts-10x-atj-dev--server-doj--logingov--private-key_AB53082F,
  on cdk.tf.json line 39, in data.aws_ssm_parameter.tts-10x-atj-dev_--tts-10x-atj-dev--server-doj--logingov--private-key_AB53082F:
  39:       },


Error: reading SSM Parameter (/tts-10x-atj-dev/server-kansas/login.gov/private-key): couldn't find resource

  with data.aws_ssm_parameter.tts-10x-atj-dev_--tts-10x-atj-dev--server-kansas--logingov--private-key_510CC52A,
  on cdk.tf.json line 48, in data.aws_ssm_parameter.tts-10x-atj-dev_--tts-10x-atj-dev--server-kansas--logingov--private-key_510CC52A:
  48:       }

❌ Failed to generate plan in Post Terraform plan to PR comment #605

…ultiple input)

…r remove a set of questions

… prop for other field types

…for all input types. :

…er field

…-310

packages/server/src/main.db

packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx

…ckt-310

…component

…filesystem

packages/design/src/Form/components/Repeater/index.tsx

* ensure terraform is installed in apply workflow * revert testing workflow in prep for launch

…component

github-actions · 2025-01-15T15:21:04Z

Terraform plan for tts-10x-forms-dev

Plan: 0 to add, 1 to change, 0 to destroy.

Terraform used the selected providers to generate the following execution
plan. Resource actions are indicated with the following symbols:
!~  update in-place

Terraform will perform the following actions:

  # cloudfoundry_app.tts-10x-forms-dev-server-doj_tts-10x-forms-dev-server-doj-app_22D74DC4 will be updated in-place
!~  resource "cloudfoundry_app" "tts-10x-forms-dev-server-doj_tts-10x-forms-dev-server-doj-app_22D74DC4" {
!~      docker_image                    = "ghcr.io/gsa-tts/forms/server-doj:7b27866b5e7b71194f3c00ea3e958dd9e42f0bca" -> "ghcr.io/gsa-tts/forms/server-doj:7873012fab862fe76f76b23efc258b7fa208141f"
        id                              = "29c93a0a-519c-454a-847e-cc603395c2da"
        name                            = "tts-10x-forms-dev-server-doj-app"
#        (17 unchanged attributes hidden)

#        (3 unchanged blocks hidden)
    }

Plan: 0 to add, 1 to change, 0 to destroy.

📝 Plan generated in Post Terraform plan to PR comment #622

…KT-310

danielnaab

Great work, let's merge!

For reference, we'll follow-up with some underlying refactors, including #442 and #441

ethangardner self-assigned this Oct 14, 2024

danielnaab reviewed Oct 15, 2024

View reviewed changes

ethangardner marked this pull request as ready for review October 17, 2024 19:01

danielnaab reviewed Oct 18, 2024

View reviewed changes

jimmoffet mentioned this pull request Nov 19, 2024

Multiple Entries component #310

Open

21 tasks

ethangardner force-pushed the feature/310-repeater-component branch from 6eeea85 to e959ed3 Compare December 5, 2024 22:06

kalasgarov force-pushed the feature/310-repeater-component branch 2 times, most recently from 8bb9283 to 14b55ad Compare January 6, 2025 23:40

kalasgarov self-assigned this Jan 6, 2025

kalasgarov force-pushed the feature/310-repeater-component branch 2 times, most recently from 3a86d84 to 435beaa Compare January 8, 2025 17:56

ethangardner added 16 commits January 10, 2025 10:49

copy fieldset pattern to use as the basis for the repeater pattern (m…

5326816

…ultiple input)

add a clone/delete item control for the repeater field to duplicate o…

332f48f

…r remove a set of questions

formatting

8e5513d

add presentational component for edit view

a9fcb81

prevent duplicate ids for input fields. Will need to map canonical id…

da6c2cd

… prop for other field types

use local storage for storing repeater options on the client

a54fb6f

add function to mutate ids for cloned elements. need to make it work …

1f72200

…for all input types. :

formatting

c3d39bb

render update radio group components id in repeater

74ef760

remove empty test language from user-facing component

b21a44f

update ids have an optional suffix to ensure unique ids in the repeat…

27ed9b9

…er field

sensible default for local storage

0cf02bd

add function to get id for pattern

cbce28d

update id modifier string

af4aaea

clean up pattern logic for dropdown

0e5ad3b

refactor to use react hook form useFieldsArray

25e77e9

kalasgarov and others added 4 commits January 10, 2025 10:51

feat: implement isFormBuilder flag tckt-310

2214109

feat: implement parse user input and submit actions for repeater tckt…

3bf244a

…-310

storybook: update stories for repeater and edit repeater form tckt-310

16072a2

refactor: clean up old files tckt-310

d2a2581

kalasgarov force-pushed the feature/310-repeater-component branch from 435beaa to d2a2581 Compare January 10, 2025 18:51

danielnaab reviewed Jan 10, 2025

View reviewed changes

packages/server/src/main.db Outdated Show resolved Hide resolved

chore: add db file to gitignore tchkt-310

1955cb7

danielnaab reviewed Jan 10, 2025

View reviewed changes

packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx Outdated Show resolved Hide resolved

danielnaab reviewed Jan 10, 2025

View reviewed changes

packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx Show resolved Hide resolved

feat: update phone component type to tel for better user experience t…

b32846a

…ckt-310

kalasgarov force-pushed the feature/310-repeater-component branch 2 times, most recently from b32846a to cc07eb7 Compare January 13, 2025 22:51

Merge remote-tracking branch 'origin/main' into feature/310-repeater-…

74c3300

…component

danielnaab force-pushed the feature/310-repeater-component branch from cc07eb7 to 74c3300 Compare January 14, 2025 15:32

danielnaab added 3 commits January 14, 2025 09:44

Fix child rendering in the repeater component

798b881

Don't emit output file on typecheck step, to avoid cluttering up the …

17e68c4

…filesystem

Use childComponents in PromptComponent to get the patternId

1ba0558

danielnaab reviewed Jan 14, 2025

View reviewed changes

packages/design/src/Form/components/Repeater/index.tsx Outdated Show resolved Hide resolved

ethangardner and others added 5 commits January 14, 2025 12:27

ensure terraform is installed in apply workflow (#439)

6746d7a

* ensure terraform is installed in apply workflow * revert testing workflow in prep for launch

chore: clean up ';' in FormContents TCKT-310

4f41bd2

chore: remove commented code block in repeater TCKT-310

4409672

chore: update pnpm lock yaml TCKT-310

f552dcb

Merge remote-tracking branch 'origin/main' into feature/310-repeater-…

d9ad8f3

…component

Khayal Alasgarov added 2 commits January 15, 2025 14:48

feat: add removeChildPattern to repaeter config and clean up types TC…

dbbfee7

…KT-310

storybook: add tests for repeater pattern TCKT-310

ae95dba

kalasgarov force-pushed the feature/310-repeater-component branch from f9ffd39 to ae95dba Compare January 15, 2025 23:09

danielnaab approved these changes Jan 16, 2025

View reviewed changes

kalasgarov merged commit 7c2e9c5 into main Jan 16, 2025
4 checks passed

kalasgarov deleted the feature/310-repeater-component branch January 16, 2025 18:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repeater pattern component #336

Repeater pattern component #336

ethangardner commented Oct 14, 2024

github-actions bot commented Oct 14, 2024 •

edited

Loading

danielnaab Oct 15, 2024

ethangardner Oct 16, 2024

danielnaab Oct 18, 2024

ethangardner commented Oct 17, 2024

danielnaab left a comment

danielnaab Oct 18, 2024

danielnaab Oct 18, 2024

danielnaab Oct 18, 2024

danielnaab Oct 18, 2024

github-actions bot commented Dec 5, 2024 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

danielnaab left a comment

Repeater pattern component #336

Repeater pattern component #336

Conversation

ethangardner commented Oct 14, 2024

github-actions bot commented Oct 14, 2024 • edited Loading

danielnaab Oct 15, 2024

Choose a reason for hiding this comment

ethangardner Oct 16, 2024

Choose a reason for hiding this comment

danielnaab Oct 18, 2024

Choose a reason for hiding this comment

ethangardner commented Oct 17, 2024

danielnaab left a comment

Choose a reason for hiding this comment

danielnaab Oct 18, 2024

Choose a reason for hiding this comment

danielnaab Oct 18, 2024

Choose a reason for hiding this comment

danielnaab Oct 18, 2024

Choose a reason for hiding this comment

danielnaab Oct 18, 2024

Choose a reason for hiding this comment

github-actions bot commented Dec 5, 2024 • edited Loading

github-actions bot commented Jan 15, 2025 • edited Loading

danielnaab left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 14, 2024 •

edited

Loading

github-actions bot commented Dec 5, 2024 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading