Wrap system configuration elements in error boundary.

[dennisoelkers]

Description

Motivation and Context

Before this change, an individual core or plugin configuration element could raise an error and render the whole configurations page unusable.

This PR is adding an error boundary which is used to contain errors from each configuration element. If a single configuration element throws an error, a fallback component will be rendered instead, showing the actual error. In case of the plugin configuration elements, the config type (an fqcn) will be shown instead of the title. This gives at least an indication where the error is coming from. The rest of the page is still usable in case of an individual configuration element failing.

In addition, a general overhaul of the ConfigurationsPage was performed, migrating it to TypeScript and turning it into a functional component. Also, some quirks were removed, like polling the configuration prop to set the loaded state, which was replaced with a
promise handler.

How Has This Been Tested?

Screenshots (if appropriate):

Before:

After (Core configuration element failing):

After (Plugin configuration element failing):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.

[edmundoa]

I like the changes and I think make the component more comprehensible and resilient 👍 Besides a couple inline comments, I was wondering: the PR was inspired by an error in one of the configlets but I cannot reproduce it now. Did you manage to fix it or was it some temporary error?

[edmundoa]

Looks good to me. Thank you for the improvements!