[Actions] Connector with secrets should have a UI notifier for the user, that it is a secret field.

[YulNaumenko]

When user edit a connector that has secrets, it's not clear that the secrets aren't returned in the edit form. This could cause confusion for support when they send a screenshot of the form with some fields missing.
It would be very helpful UX to have some notifier that the field is secret. (cc @mdefazio , @gchaps )

[elasticmachine]

Pinging @elastic/kibana-alerting-services (Team:Alerting Services)

[gchaps]

@mdefazio Talked with @YulNaumenko. What's the best way to add text like this to the UI?

Fields are empty because values are encrypted.
Fill encrypted fields with a value.

[mdefazio]

My first thought is have it be the validation help text that appears below the input (similar to the error messages). Sounds like we want some other visual indicator though on those inputs? Something that makes it clear that values are hidden as opposed to never there.

[YulNaumenko]

@mdefazio the problem with the validation text is that it appears only after input field will loose the focus (event), but when you've just opened an Edit form you don't understand why this fields are empty. I like the text which @gchaps was proposed above, but I not sure how to better place it - maybe highlight the fields are with a splitter line and add this text above.

[mdefazio]

After our discussion, I think it makes sense to have the authentication portion of the connector form as a separate section. This gives us room to give more context around these specific fields.

If we add an 'Authentication' section (perhaps a better name?), then the description below that could prompt the user that in the future they will need to re-enter this. Then if they edit the connector (3rd screen), we change that to a callout so it's very visible. Perhaps we can tweak the description copy so we don't have to replace it, or maybe that's changed instead of using a callout, but I think this is getting clearer now.

@gchaps , I changed the text of the switch from what we had previously. I thought in this layout, the usage of 'Add' didn't feel right—but maybe you think it still works—I just wanted to try a different direction.

You'll see I sectioned off a few other parts of the form. I understand if this is done separately, but thought it help structure the form better.

[gchaps]

@mdefazio I like this direction. I think 'Authentication' is the right word. Here are some suggestions for text

Toggle
Require authentication for this server

Explanatory text for default view
For additional security, you're prompted to enter these credentials each time you change the connector.

Explanatory text for user edit form
For security reasons, please reenter your username and password.

[mdefazio]

Here are the mockups updated with the copy:

Default view:

Turn off authentication

Editing connector with authentication

[mikecote]

@mdefazio Looks good! I wanted to provide a list of other connectors that also have fields that aren't returned on edit. Let me know if the proposed design works for those as well. I can work with @gchaps on the copy for each.

NOTE: All the fields below (minus webhook) are required on edit. For some reason in webhook you can click the username field, blur out of focus and the save button is then enabled.

IBM Resilient

Jira

PagerDuty

ServiceNow

Slack

Webhook

[mdefazio]

After discussing further with Mike, I think it's clear that in some of these cases, not maintaining these values is not ideal UX. But for the time, let's add in a section heading and description text like we did with Email (perhaps it needs to be called something different for different connectors: 'Account information', etc).

The last edit that would be nice would be to move the links for 'Create Slack webhook URL' and 'Configure a PagerDuty account' and others to come after the heading + description text we are adding in (with an external link icon).

[gchaps]

Discussed text with @mikecote and came up with this text.

Edit flow

API key

API key and ID are encrypted. Please reenter values for these fields.

JIRA

Authentication

Authentication credentials are encrypted. Please reenter values for these fields.

PagerDuty

Add this between the label and the fields:

This key is encrypted. Please reenter a value for this field.

Email

Username and password are encrypted. Please reenter values for these fields.

ServiceNow

Username and password are encrypted. Please reenter values for these fields.

Slack

This URL is encrypted. Please reenter a value for this field.

Webhook

Authentication

Username and password are encrypted. Please reenter values for these fields.

Creation flow

Remember these values. You must reenter them each time you edit the connector.

Remember this value. You must reenter it each time you edit the connector.