Feature/option to create new form

[hannyle]

Description

Control buttons for Fill Form and Upload XML File are moved to the top
New button New form is added in Fill Form
Remove Hide button

Related issues

#135

Type of change

• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Changes Made

• Remove Hide button and CardHeader in WizardAddObjectCard.js
• Add CardHeader to WizardFillObjectDetailsForm.js, WizardUploadObjectXMLForm.js, WizardDraftObjectPicker.js
• Move control buttons from bottom to top in CardHeader
• Make CardHeader as sticky header
• Add button + New form and logic to start a new empty form
• Modify and update e2e test for creating a new form

Testing

• e2e Tests

[blankdots]

I think this needs to be rebased on #148 as it seems the changes there will affect it

[hannyle]

Rebased on #148

Since now every submissionType has different control buttons, and the Hide button has been removed, I think we should do the focus when we enter skip-link differently for each submissionType.
For e.g.

• focus on form input for Fill Form
• focus on Choose file button for Upload XML File,
• focus on first Continue button for Choose from drafts

But I understand it would be more complicated to do it like that, we can brainstorm for solutions.

[saulipurhonen]

From accessibility side of view there shouldn't be another scroll bar on object card.
I'd set overflow to visible for card, top margin to height of the app nav bar and remove the overflow: scroll from container.
@hannyle, do you think if there's any drawbacks if we remove the scroll from card container?

[saulipurhonen]

Another behavior change is form validation:
Previous Submit <objectType> button click would trigger validation and display validation errors as:

On this branch form validation is shown in snackbar error message.

I'd prefer the original way of presenting validation errors by form fields since this is more readable.

[hannyle]

From accessibility side of view there shouldn't be another scroll bar on object card.
I'd set overflow to visible for card, top margin to height of the app nav bar and remove the overflow: scroll from container.
@hannyle, do you think if there's any drawbacks if we remove the scroll from card container?

I agree that having one scroll inside another scroll doesn't look good.
What do you. mean by top` margin to height of the app `nav bar

[saulipurhonen]

What do you. mean by top` margin to height of the app `nav bar

If top margin of the card header is set to 0, it will stay behind the navigation bar when form is scrolled down.

[lilachic]

Seems that saving an empty form happens with auto save and Save as Draft button.

Does the skip-link work here, I can't see focus moving?

[hannyle]

Another behavior change is form validation:
Previous Submit <objectType> button click would trigger validation and display validation errors as:

On this branch form validation is shown in snackbar error message.

I'd prefer the original way of presenting validation errors by form fields since this is more readable.

I fixed this one.
From what I understood this happened because Submit button is outside of the form now.

[hannyle]

Seems that saving an empty form happens with auto save and Save as Draft button.

Does the skip-link work here, I can't see focus moving?

Seems that saving an empty form happens with auto save and Save as Draft button.

• Yes this is a bug, but not caused by this PR. Could you create an issue for this ? Thanks. OR I can create it later.

Does the skip-link work here, I can't see focus moving?

• This PR has not fixed for the skip-link yet. I have some suggestions on the above comment.

[blankdots]

I merged the #148 and seems that created conflicts 😞

[hannyle]

From accessibility side of view there shouldn't be another scroll bar on object card.
I'd set overflow to visible for card, top margin to height of the app nav bar and remove the overflow: scroll from container.
@hannyle, do you think if there's any drawbacks if we remove the scroll from card container?

What do you. mean by top` margin to height of the app `nav bar

If top margin of the card header is set to 0, it will stay behind the navigation bar when form is scrolled down.

In the current code, the top of CardHeader is 0. I tried to remove overflow: scroll, but what we want is to have a sticky bar for form's control buttons. Could you give me code example of your suggestion ?

I got it fixed. Thanks :)

[saulipurhonen]

Looks good to me!

[blankdots]

only small thing

adding a z-index: 1 here: https://github.com/CSCfi/metadata-submitter-frontend/blob/master/src/components/NewDraftWizard/WizardComponents/WizardFooter.js#L18 should fix that