Reconcile server responses between section creation and code component creation and return user-friendly error messages

Overview

@jessebaker from #3520071: Show human readable error messages when creating component fails suggested making the error messages returned from the server more user friendly.

Code component creation

For example, when you try to create a code component with a name that already exists,

'js_component' entity with ID 'my_test' already exists. gets returned. But this could maybe be updated to something like A component with that name already exists, use a unique name.

For code component creation I think the above is the only error that will be shown to the user (to my knowledge) because #3520071: Show human readable error messages when creating component fails adds front-end validation for invalid names (special characters, starts with a number).

Section creation

Regarding sections, it looks like you are able to create sections with the same name. Don't know if this is expected behavior or a bug, but would like someone on the backend to confirm that. If it is a bug, then the error message for that should be user-friendly too.

You also get a 500 error where I would expect a 422 error when I try to create a section named !@#$. And I was able to create sections that contains special characters like ###Shoe icon section and %f where I would also have expected a 422 based on the code component behavior. (See screenshot)

Should sections also use the same regex that code components use for checking if something is a valid name for consistency? Or are sections under different rules than JS components?

Proposed resolution

- Update server responses to something more user friendly, less developer-oriented.
- Consider making errors consistent between JS components and Sections

User interface changes