Use modals in field creation and field edit flow

Problem/Motivation

The high level plan in #3346539: [Plan] Improve field creation experience proposes to move all of the field creation end editing related pages from separate pages to modal dialogs. In general, this approach is preferred for pages where the UI would take the user outside the previous context (i.e. different base route than the previous page resulting in no local tasks rendered for the page).

The current approach for selecting a field was created as a workaround to a non-modal based workflow in #3356894: Make field selection less overwhelming by introducing groups. Even at the time when this was implemented, we were aware of some challenges with the designs. However, we decided to not optimize for these since we had tested a modal based workflow earlier which didn't have these challenges. Some of these challenges were also reported in #3389200: Field selection breaks conventions and increases cognitive load.

Proposed resolution

This issue focuses on the add new field flow by having the field creation/editing process open in modals (field selection form, combined field settings form).

A working prototype that was used for validating this

Remaining tasks

1. Mark required fields (like Label) as required.
2. Make sure that Selection lists work. Currently, every submit button goes to the previous modal. (See Comment #17.)
3. Make sure error messages use the same terms as the field labels. (Example: "You need to select a field type." is the error message when the field labeled "Choose an option below" is empty.)
4. Make sure that keyboard shortcuts like Enter, ctrl-Enter, and Tab have the expected results.
5. Make sure that descriptions of field groups, field types, and options are announced by screen readers.
6. Change record for Drupal\Core\Ajax\OpenModalDialogWithUrl

Some of these are probably existing problems. (For example, #3.) Either way, they can be done in follow-up issues if they are not done as part of this issue.

User interface changes

User interface changes

Before

Start on the "Manage fields" page:

• Path: /admin/structure/types/manage/page/fields
• Route: entity.node.field_ui_fields
• Controller: \Drupal\field_ui\Controller\FieldConfigListController::listing

Follow the "Create a new field" link to the "Add field" page:

• Path: /admin/structure/types/manage/page/fields/add-field
• Route: field_ui.field_storage_config_add_node
• Form: \Drupal\field_ui\Form\FieldStorageAddForm

If you select a category, such as Number, then the options appear at the bottom of the page:

Submit the form to load the "[Field name] settings for [bundle]" page:

• Path: /admin/structure/types/manage/page/add-field/node/field_decimal (with destinations query parameters)
• Route: field_ui.field_add_node
• Controller: \Drupal\field_ui\Controller\FieldConfigAddController::fieldConfigAddConfigureForm

Submit this form to create the field storage and the field, and return to the "Manage fields" page.

API changes

Data model changes

Release notes snippet