Improve UX for API keys

[rolodato]

Is your feature request related to a problem? Please describe.

This is the UI to create a new API key:

There's a few minor annoyances with this UX:

1. When opening the creation modal, the Name field is required but not auto-focused. This does happen for more commonly used entities such as Projects, Features or Segments
2. When you click the "Copy" button after creating an API key, the "Copied" confirmation toast covers the button to close the original modal. This might require bigger changes to fix so I'm happy to accept this as it is
3. The modal showing the actual API key does not emphasise that the API key has actually been created. The title continues to show "New Admin API Key". The note text says "Please keep a note of your API key once it's created, we do not store it" - this could be interpreted to mean the API key was not actually created yet
4. The modal showing the actual API key can be closed without ever clicking the "Copy" or "reveal" buttons. It would be nice to avoid this footgun somehow

Describe the solution you'd like.

1. Auto-focus the Name field when creating an API key
2. Change toast messages so they do not overlap the X button in modals
3. Require confirmation to exit the modal when any data is added. It's easy to accidentally click outside of the modal and forever lose the API key you just created
4. Add a clearer confirmation when the API key is actually created. For example, change the modal's title to "API Key successfully created", "Save your new API key" or similar. Also improve the wording of "Please keep a note of your API key once it's created, we do not store it." to something like what GitHub shows. I also like that they show the newly-created token in the same list of tokens and not a separate modal, which highlights what you've just created in the context of your other tokens:

Describe alternatives you've considered

We can choose to keep the current modal after API key creation, or to remove it in favour of something like what GitHub does for access tokens.

Additional context

"Copied" toast message covering the button to close the modal: