feat: implemented multi step form #3436

neatbyte-vnobis · 2023-07-21T09:43:49Z

Changes

Implements issue "Add the ability to build multi-step forms".

How Has This Been Tested?

Manual

Documentation

None

neatbyte-ivelychko · 2023-07-21T09:44:55Z

Functionality is ready.
Fixed API Tests.

neatbyte-ivelychko · 2023-07-21T11:04:42Z

@SvenAlHamad @adrians5j

I have several questions regarding Form behaviour:
1 - How many fields we can store in one row, for now there are no limitations, we can add as many fields as we want in the row, but the design looks awful. If we have 3 fields in one row it looks okay (Image 1), but if we have more than 3 fields then the fields are bleeding out (Image 2). What should we do, should we introduce limitation (like max 3 fields in the row)?

(IMAGE 1)

(IMAGE 2)

2 - Let's say that we have created 4 form step, then we swithced to the preview tab, navigated to the last step and we decided to delete last step and the question is, what should we do with the preview, should we reset all fields values and reset preview step to the first step in the list, or should we just reset preview step to the first step? As an example below now we reset our preview to the first step, whenever we remove step.

2023-07-21.14.03.02.mov

neatbyte-ivelychko · 2023-07-24T08:36:28Z

@adrians5j what should we do about migration? Should I implement it? Or someone else gonna do that?

@SvenAlHamad & @adrians5j also I need your opinion on my comment above #3436 (comment)

adrians5j · 2023-07-25T10:50:26Z

Hey @neatbyte-ivelychko, thanks for the questions.

Regarding how many fields in a row...I can see the current limit is 4 fields per row, plus on a wider screen, it looks fine.

But, if it's not too much trouble, we can add this so we have a horizontal scrollbar on smaller screens:

For now I guess it's fine.

Regarding the form reset, having the form completely reset or resetting to step 1 is both fine at this point I guess.

adrians5j · 2023-07-25T10:51:16Z

Leave the migration to us BTW.

neatbyte-ivelychko · 2023-07-25T11:00:17Z

@adrians5j okay, got it.
I think that I will add scrollbar.

neatbyte-vnobis · 2023-07-26T08:45:17Z

Leave the migration to us BTW.

@adrians5j I have an idea - for forms import we can add support for OLD exports (without new step property).
It will allow users to import some older exports (or exports from older Webiny deploys).

It will be almost same code as an migration - just not for db records, but for import archive records

neatbyte-ivelychko · 2023-07-27T08:41:49Z

@adrians5j also what should we do with cypress tests, should we add more of them in this PR (I think that we need to add tests for steps and also fix already existing if they fail) or we will do that in another PR?

SvenAlHamad · 2023-07-31T13:11:50Z

I did a quick test on this one and have some feedback:

When we add a new step, a step should have some default title, for example it can be just "Step"
when you drag and drop the step fields, it works in an odd way, try creating two steps, and then move the first step below the second one, you'll see that it has a strange way of working

github-actions · 2023-08-02T11:38:16Z

Cypress E2E tests have been initiated (for more information, click here). ✨

neatbyte-ivelychko · 2023-08-02T11:38:23Z

/cypress

neatbyte-ivelychko · 2023-08-04T11:52:02Z

Also I did a quick research on how to handle drag-n-drop in Cypress
Here is the link -> https://stackoverflow.com/questions/55361499/how-to-implement-drag-and-drop-in-cypress-test

packages/app-form-builder/src/admin/components/FormEditor/Context/functions/getFieldPosition.ts

neatbyte-ivelychko · 2023-08-08T06:48:51Z

packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStep.tsx

+                    console.log(source);
+                    return;
+                }
+                const fieldId = (pos.formStep.id !== formStep.id ? pos.formStep : formStep).layout[


Will add a comment that would explain what are we doing here

Good point.

adrians5j · 2023-08-09T11:38:05Z

Sorry to ask, this PR can be reviewed?

Re migrations, basically, since the form data structure will become different once this PR is merged, we'll need to write a migration script that upgrades all existing form entries in the DB, so that existing data conforms with the new code. But we'll handle that. That's why I added needs-migration label to this PR, so that when we reach the release phase, I can easily see what needs migration to be written from our side.

You did mention import/exports though, and that's a good point. If it's not like a week of work, it would certainly be good to be able to import forms created with older version of Webiny into the latest version. So yeah, feel free to check that one one and ping for any further questions.

Finally, just a note on Cy tests. We've decided we'll be taking over here, so, feel free to finish any WIP Cy tests, but no need to create new ones from now on.

neatbyte-ivelychko · 2023-08-09T12:38:41Z

@adrians5j Yeah, it is ready to be reviewed

adrians5j

Did the first review, managed to go over like ~60% of files.

Overall looking good, but yeah, there's always stuff to polish / improve.

Please check my comments and let me know if there will be any questions.

Once we deal with this first batch of feedback, I'll continue with the rest.

packages/api-form-builder-so-ddb-es/src/definitions/form.ts

packages/api-form-builder-so-ddb/src/definitions/form.ts

apps/theme/package.json

adrians5j · 2023-08-10T19:03:19Z

apps/theme/layouts/forms/DefaultFormLayout.tsx

    // All form fields - an array of rows where each row is an array that contain fields.
-    const fields = getFields();
+    // @ts-ignore


We'll want to check this ts-ignore here.

adrians5j · 2023-08-10T19:05:10Z

apps/theme/layouts/forms/DefaultFormLayout.tsx

-import { Form } from "@webiny/form";
+import React, { useState, useEffect } from "react";
+import { Form, FormAPI } from "@webiny/form";
+import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";


Basically, the form layout was imagined as an as lightweight as possible code. Meaning, we had SubmitButton in there, totally coded from scratch and not using @webiny/ui package.

We need to continue the same approach here.

adrians5j · 2023-08-10T19:09:17Z

apps/theme/layouts/forms/DefaultFormLayout.tsx

+        setCurrentStep(prevStep => (prevStep += 1));
+    };
+
+    const handlePrevStep = () => {


We need to handle step back / step fwd controls and state internally, within the app-form-builder package's component. The same thing we're doing for example with submit, pulled from FormLayoutComponent. So, let's add those controls above.

The idea is to have these FB layouts as straightforward as possible, and be able to provide as much of OOTB functionality as possible. With this approach, if the user wanted to create another layout, they'd need to c/p again the steps state management code.

packages/app-page-builder-elements/src/renderers/form/types.ts

packages/app-form-builder/src/types.ts

adrians5j · 2023-08-10T19:16:21Z

packages/app-form-builder/src/admin/components/FormEditor/Tabs/EditTab/FormStep/FormStep.tsx

+                    console.log(source);
+                    return;
+                }
+                const fieldId = (pos.formStep.id !== formStep.id ? pos.formStep : formStep).layout[


Good point.

packages/app-form-builder/src/admin/components/FormEditor/Context/functions/getFieldPosition.ts

neatbyte-ivelychko · 2023-08-11T13:35:49Z

@adrians5j I've implemented first part of suggested changes.

neatbyte-vnobis · 2023-08-11T14:13:42Z

/cypress

github-actions · 2023-08-11T14:13:54Z

Cypress E2E tests have been initiated (for more information, click here). ✨

adrians5j

Another iteration done. Thanks for the work you did here so far.

With code comments, here are a couple of comments related to UI / manual testing I did.

1.Styling of "Steps" In Editor

Should we adjust the styling here a bit @SvenAlHamad ? I'm thinking the same thing we have in our CMS? Check sshot.

I also like how this looks:

In our case, this could be the step name.

2. Step Name Modal Improvements

Please check sshot.

3. Add Step Button

Not sure how to improve here.. IDK, but it looks a bit weird. Maybe @SvenAlHamad has an idea how to improve this?

packages/app-page-builder-elements/src/renderers/form/FormRender.tsx

apps/theme/layouts/forms/DefaultFormLayout.tsx

adrians5j · 2023-08-11T19:08:48Z

apps/theme/layouts/forms/DefaultFormLayout.tsx

+    // Validate fields for current step with "form.validateInput" function,
+    // if current step is invalid then we should block posibility to move to the next step,
+    // but if step is valid then user can switch to the next step.
+    const validateCurrentStepFields = (form: FormAPI) => {


Let's also have this as an internal function users can immediately use.

But one thing though... When you call submit (the one passed by the Form component, L122), the rendered fields will be automatically validated. And then the Form component only calls your onSubmit callback if the validation is successful.

In other words, the validation of fields should probably be:

handled by the @webiny/app-form-builder's Form component internally.

should be internally handled by the submit callback / the @webiny/form package which triggers it automatically for us.

Hope I didn't miss anything here.

adrians5j · 2023-08-11T19:16:11Z

packages/app-form-builder/src/components/Form/FormRender.tsx

+    // we will simpy change currentStep to the first step.
+    useEffect(() => {
+        setCurrentStep(0);
+    }, [data.steps]);


To be more precise, we could also do data.steps.length here, right?

adrians5j · 2023-08-11T19:18:42Z

packages/app-form-builder/src/components/Form/FormRender.tsx

-    const getFields = (): FormRenderFbFormModelField[][] => {
-        const fieldLayout = cloneDeep(layout);
+    // We need to have "stepIndex" prop in order to get corresponding fields for the current step.
+    const getFields = (stepIndex: number): FormRenderFbFormModelField[][] => {


Let's have stepIndex = 0 here, just so if a user knows he's working with single-step forms, he can just call getFields() and that's it.

packages/app-form-builder/src/components/Form/FormRender.tsx

adrians5j · 2023-08-11T19:27:13Z

packages/api-form-builder/__tests__/forms.test.ts

-        await updateRevision({ revision: id, data: { fields } });
+        await updateRevision({
+            revision: id,
+            data: { fields, steps: [{ title: "", layout: [] }] }


Seeing this test here, not only it might be better to have a title here just saying "Test step" at lest, but also maybe have validation that ensures title is not an empty string. Can we try to see if this is easily doable and if so, can we do it?

adrians5j · 2023-08-11T19:31:16Z

packages/api-form-builder/__tests__/formSubmissionSecurity.test.ts

@@ -170,6 +187,12 @@ describe("Forms Submission Security Test", () => {
                            ...formA,
                            savedOn: expect.stringMatching(/^20/),
                            fields: expect.any(Array),
+                            steps: [
+                                {
+                                    title: null,


Confused a bit why we sometimes have "", and sometimes null here. Am I missing something here?

But in any case, if we add the "required" validator I mentioned in my prev comments, this should no longer be an issue.

neatbyte-ivelychko · 2023-08-15T09:28:13Z

@SvenAlHamad could you please take a look at these comments #3436 (review)

adrians5j · 2023-08-15T10:38:27Z

Tip: a couple of UI-related questions for you @SvenAlHamad above.

neatbyte-vnobis · 2023-08-22T08:16:36Z

@SvenAlHamad please take a look on the questions above

SvenAlHamad · 2023-08-23T12:20:57Z

With regards to the UI questions above on #1 and #2 I agree with Adrian's suggestions. As for #3, I would just switch places between the icon and the text, so the text is on the right and icon on the left. This is similar to the design we have for dynamic zone in HCMS, so I'm ok with keeping this style instead of adding a button.

neatbyte-ivelychko · 2023-09-25T08:09:15Z

@adrians5j I have pushed the latest requested changes

adrians5j

I was about to merge this, but while manually testing, I noticed we can no longer move form fields side by side, for example:

With the new code, I just get above/below drop zones, not the left/right:

We should check this out before merging.

neatbyte-ivelychko · 2023-09-26T08:24:20Z

@adrians5j Maybe you were moving row instead of field? Because we cannot drop rows in rows.
I just checked and I can move fields in fields.

Here is the demo:
https://github.com/webiny/webiny-js/assets/129154672/3fe35890-713f-49d1-9287-1595313dad32

…ss reset

… prop

neatbyte-ivelychko · 2023-09-26T13:30:31Z

@adrians5j so after merging latest next, api test for form builder are failing because of prerendering, should we fix them right now? Because before merging they were working

adrians5j · 2023-09-28T10:42:48Z

It's an issue that was introduced by the FB prerendering PR yes. We both missed failing API tests before merging.

I'll see now if I can take care of it quickly.

Co-authored-by: adrians5j <adrian@webiny.com> Co-authored-by: Adrian Smijulj <adrian1358@gmail.com>

neatbyte-vnobis force-pushed the neatbyte/multi-steps-form branch from ede2b2a to 128f4e3 Compare July 24, 2023 15:20

neatbyte-vnobis force-pushed the neatbyte/multi-steps-form branch from 41209f1 to 9e211d9 Compare August 4, 2023 11:42

neatbyte-ivelychko reviewed Aug 8, 2023

View reviewed changes

packages/app-form-builder/src/admin/components/FormEditor/Context/functions/getFieldPosition.ts Outdated Show resolved Hide resolved

neatbyte-ivelychko reviewed Aug 8, 2023

View reviewed changes

neatbyte-vnobis force-pushed the neatbyte/multi-steps-form branch from 9e211d9 to 3ab0461 Compare August 8, 2023 08:46

adrians5j added this to the 5.38.0 milestone Aug 9, 2023

adrians5j added the needs-migration label Aug 9, 2023

adrians5j requested changes Aug 10, 2023

View reviewed changes

adrians5j requested changes Aug 11, 2023

View reviewed changes

adrians5j requested changes Sep 26, 2023

View reviewed changes

neatbyte-vnobis and others added 18 commits September 26, 2023 16:04

feat: implemented multi step form

40e0742

feat: improved delete step function

1882a4c

fix: fixed issue with moving rows between steps and issue with build

25a3861

fix: fixed build failure

a0614de

fix: fixed export for form

e2c70cf

fix: updated packages

1f9d91b

fix: fixed tests and added overflow for rows

ca87ea3

fix: fixed steps reordering behaviour

a6acc6a

fix: fixed createForm test

ba06706

fix: implemented suggested changes

037eef4

fix: implemented second part of suggested changes

f3f6a0a

fix: removed extra validation function

07a1172

fix: added more types, moved default layout buttons, added form succe…

b94b0b4

…ss reset

fix: remove resetFormAfterSubmit and implement form reset via key…

7ef7e72

… prop

fix: rearrange if statement

d07247a

fix: reduce t/o

cd27960

fix: added form for edit step modal, imporved types

a89b4bd

fix: improved design for form steps

5eccf49

neatbyte-vnobis force-pushed the neatbyte/multi-steps-form branch from 306771a to 5eccf49 Compare September 26, 2023 13:04

fix: fixed api test

aa3bc64

Merge branch 'next' into neatbyte/multi-steps-form

0424020

adrians5j approved these changes Sep 29, 2023

View reviewed changes

adrians5j merged commit d512ba4 into next Sep 29, 2023
59 checks passed

brunozoric pushed a commit that referenced this pull request Oct 10, 2023

feat: introduce Multi-step Forms (#3436)

c540a93

Co-authored-by: adrians5j <adrian@webiny.com> Co-authored-by: Adrian Smijulj <adrian1358@gmail.com>

adrians5j deleted the neatbyte/multi-steps-form branch November 20, 2023 08:51

feat: implemented multi step form #3436

feat: implemented multi step form #3436

Conversation

neatbyte-vnobis commented Jul 21, 2023

Changes

How Has This Been Tested?

Documentation

neatbyte-ivelychko commented Jul 21, 2023 • edited Loading

neatbyte-ivelychko commented Jul 21, 2023 • edited by neatbyte-vnobis Loading

neatbyte-ivelychko commented Jul 24, 2023

adrians5j commented Jul 25, 2023

adrians5j commented Jul 25, 2023

neatbyte-ivelychko commented Jul 25, 2023 • edited Loading

neatbyte-vnobis commented Jul 26, 2023 • edited Loading

neatbyte-ivelychko commented Jul 27, 2023

SvenAlHamad commented Jul 31, 2023

github-actions bot commented Aug 2, 2023

neatbyte-ivelychko commented Aug 2, 2023

neatbyte-ivelychko commented Aug 4, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adrians5j commented Aug 9, 2023 • edited Loading

neatbyte-ivelychko commented Aug 9, 2023 • edited Loading

adrians5j left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

neatbyte-ivelychko commented Aug 11, 2023

neatbyte-vnobis commented Aug 11, 2023

github-actions bot commented Aug 11, 2023

adrians5j left a comment

Choose a reason for hiding this comment

1.Styling of "Steps" In Editor

2. Step Name Modal Improvements

3. Add Step Button

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

neatbyte-ivelychko commented Aug 15, 2023 • edited Loading

adrians5j commented Aug 15, 2023 • edited Loading

neatbyte-vnobis commented Aug 22, 2023

SvenAlHamad commented Aug 23, 2023

neatbyte-ivelychko commented Sep 25, 2023

adrians5j left a comment

Choose a reason for hiding this comment

neatbyte-ivelychko commented Sep 26, 2023 • edited Loading

neatbyte-ivelychko commented Sep 26, 2023

adrians5j commented Sep 28, 2023

neatbyte-ivelychko commented Jul 21, 2023 •

edited

Loading

neatbyte-ivelychko commented Jul 21, 2023 •

edited by neatbyte-vnobis

Loading

neatbyte-ivelychko commented Jul 25, 2023 •

edited

Loading

neatbyte-vnobis commented Jul 26, 2023 •

edited

Loading

adrians5j commented Aug 9, 2023 •

edited

Loading

neatbyte-ivelychko commented Aug 9, 2023 •

edited

Loading

neatbyte-ivelychko commented Aug 15, 2023 •

edited

Loading

adrians5j commented Aug 15, 2023 •

edited

Loading

neatbyte-ivelychko commented Sep 26, 2023 •

edited

Loading