Multiple dynamic fields - Create Dataset Form

[g-saracca]

What this PR does / why we need it:
Adds the ability to add multiple values to a field.

Which issue(s) this PR closes:

Closes #376

Special notes for your reviewer:

• New Select Multiple component integrated in the form to replace the multiple checkbox.
• FormGroupWithMultipleFields is no longer responsible for adding or removing elements, that is taken care of by the consumer logic (SPA).
• I need to remove Form Group required and withinMultipleFields props being cloned to all childrens inside because did not work correctly when we had nested elements to clone within the Forms Group (e.g. adding props to all elements unnecessarily).
• I removed withinMultipleFields props from form elements and with it the <FormElementLayout/>, so now the design system is not responsible for rendering the form group as a column or as a row.
  In some cases within the Create Dataset form when working on this issue I found some complications when working with so many dynamic fields.

I think it's pretty useful to just pass a prop to render the form group one way or another, but I think the use of react.cloneElement was being counter-intuitive in this case.
Perhaps we could see in a separate issue a way to accomplish the same thing but without the use of cloneElement.

Suggestions on how to test this:

Step 1: Run the Development Environment

1. Execute npm i.
2. Navigate with cd packages/design-system && npm run build.
3. Return with cd ../../.
4. Ensure you have a .env file similar to .env.example, with the variable VITE_DATAVERSE_BACKEND_URL=http://localhost:8000.
5. Navigate with cd dev-env.
6. Start the environment using ./run-env.sh unstable.
7. To verify the environment, visit http://localhost:8000 and check your local Dataverse installation.

Step 2: Test the Create Dataset Form

• Log in, click the create dataset button and the form fields should be displayed successfully.
• Add or remove a field by clicking the buttons to the right of it.
• Complete all required fields and save the form, everything should keep working as usual.
• Try closing the accordion and clicking the Save button without filling any field, the accordion with errors should open and scroll and focus to the first field with errors.

Is there a release notes update needed for this change?:

**Does this PR introduce a user interface change? If mockups are available, please link/include them here:
Yes.

Additional documentation:
No.

[coveralls]

coverage: 97.829% (+0.4%) from 97.426%
when pulling 0046b6a on feature/376-add-dynamic-field-types-to-create-dataset-form
into df24105 on develop.

[ekraffmiller]

This looks good and works very well!
A general comment I have is, could we MetadataBlockFormFields and the components within it to a shared folder? I think that code will end up being used in the Edit Dataset action, and also it seems like code that other UIs would want to reuse. Also creating stories and tests for these components I think would help with re-use. What do you think?

[g-saracca]

This looks good and works very well! A general comment I have is, could we MetadataBlockFormFields and the components within it to a shared folder? I think that code will end up being used in the Edit Dataset action, and also it seems like code that other UIs would want to reuse. Also creating stories and tests for these components I think would help with re-use. What do you think?

Hi @ekraffmiller I thought the same thing at the time, but I think it is not yet ready to be in a shared component, it will have to be more generic yet, but indeed that should be the direction we have to follow, maybe when the time comes to make the edit form we could simply make the necessary changes to make it fully functional for both create and edit and then put it in shared folder, what do you think?

[ekraffmiller]

This looks good and works very well! A general comment I have is, could we MetadataBlockFormFields and the components within it to a shared folder? I think that code will end up being used in the Edit Dataset action, and also it seems like code that other UIs would want to reuse. Also creating stories and tests for these components I think would help with re-use. What do you think?

Hi @ekraffmiller I thought the same thing at the time, but I think it is not yet ready to be in a shared component, it will have to be more generic yet, but indeed that should be the direction we have to follow, maybe when the time comes to make the edit form we could simply make the necessary changes to make it fully functional for both create and edit and then put it in shared folder, what do you think?

Ok, That makes sense! We will have a better idea how to refactor it when we do the edit page.

[ekraffmiller]

I noticed the e2e tests are failing, maybe we can merge the latest from develop when the race condition PR is merged, to make sure the tests are ok.

[g-saracca]

I noticed the e2e tests are failing, maybe we can merge the latest from develop when the race condition PR is merged, to make sure the tests are ok.

Yes, I think that will be the safest thing to do.

[g-saracca]

@ekraffmiller all e2e tests are passing, I only update the test for the create dataset form to select an option from the select multiple field.

[ekraffmiller]

Looks good. approved!

[GPortas]

Looks and works great!

qa_multiple_dynamic_fields.mov