Add UI notifier to indicate secret fields and to remember / reenter values #80657

mikecote · 2020-10-15T13:35:59Z

Resolves #78476

In this PR, I'm adding a message above encrypted fields to indicate to the user they must remember the values when creating a connector as well as explaining why the values are empty when editing the connector.

Screenshots

Create email connector

Edit email connector

Create IBM Resilient connector

Edit IBM Resilient connector

Create Jira connector

Edit Jira connector

Create PagerDuty connector

Edit PagerDuty connector

Create ServiceNow connector

Edit ServiceNow connector

Create Slack connector

Edit Slack connector

Create Webhook connector

Edit Webhook connector

Note for docs

This PR changes the connector create / edit flyouts so screenshots will need to be updated for most (minus server log, index action). The user docs could also have the same messaging about the encrypted values. Copy: #78476 (comment).

mikecote · 2020-10-15T13:50:53Z

@gchaps can you please review the screenshots in the descriptions? It contains the suggestions you've proposed here: #78476 (comment). Note that I did change the wording a bit for IBM resilient (API key ID and secret are encrypted), let me know what you think.

@mdefazio can you please review the screenshots in the description from a design perspective? Just to confirm it turned out the way you were hoping it would.

mdefazio · 2020-10-15T16:29:52Z

I don't think we need the green color on the text. I vote for the default EUI color text. It's the only sentence there so it's scannable enough IMO. Other than that, all looks good.

mikecote · 2020-10-15T16:49:58Z

Thanks @mdefazio! Just to confirm, you're referring to the create forms where the message is using color="secondary" and it should just use the default color instead?

elasticmachine · 2020-10-15T16:56:20Z

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

mdefazio · 2020-10-15T17:19:14Z

Yes. Sorry for the confusion.

gchaps · 2020-10-15T18:02:16Z

Here are my comments:

Create email connector

Configuring email accounts > Configure email accounts
Because this is a link, remove the ending period

Edit email connector

Configuring email accounts > Configure email accounts

Create IBM Resilient connector

A new incident isn't updated. Can the text be "Push data to an incident in Resilient". Is Push the right word?

Edit IBM Resilient connector

ID and secret are encrypted. (API key isn't needed because its in the heading.)

Create Jira connector

Subtitle requires ending period. (Push ....)
Push data to an issue in Jira (see comment above)
Username or email address (username typically comes first)
API token or password (sentence caps)

Edit Jira connector

Username or email address
API token or password (sentence caps)

Create PagerDuty connector

Configure a PagerDuty account (remove ending period)

Edit PagerDuty connector

Configure a PagerDuty account (remove ending period)

Create ServiceNow connector

Configure Personal Developer Instance for ServiceNow is a mouthful with lots of title caps. Can it be shortened to: Configure a Personal Developer Instance (no ending period)

Edit ServiceNow connector

Configure a Personal Developer Instance

Create Slack connector

Is the word "Example" needed in the placeholder text?
Create a Slack Webhook URL (uppercase W for Webhook)

Edit Slack connector

Same as above

Create Webhook connector

The placeholder text is hard to read. Is there a different format to use, maybe without brackets: https://site-url or https://site-url. If so, you would also need to change it in the other connector pages

Edit Webhook connector

Looks good

ymao1

LGTM pending suggested UX and wording updates!

Curious if there is a reason why some username and password fields are on a single row and some are on separate rows? Ex: Email connector vs ServiceNow connector?

mikecote · 2020-10-15T18:44:41Z

@gchaps @mdefazio Thank you both for the feedback. I went ahead and updated the screenshots with the latest changes.

@gchaps A few things I didn't change yet, see below:

A new incident isn't updated. Can the text be "Push data to an incident in Resilient". Is Push the right word?

Push data to an issue in Jira (see comment above)

How about something like Create an incident in IBM Resilient. and Create an incident in Jira.? It seems the descriptions in the docs contains this better version and the UI forgot to be updated.

Is the word "Example" needed in the placeholder text?

The placeholder text is hard to read. Is there a different format to use, maybe without brackets: https://site-url or https://site-url. If so, you would also need to change it in the other connector pages

I will echo this feedback to the team at our next design meeting and see what we can come up with. I'll be happy to circle back and change that in a follow up PR (since that text is already in use today).

mikecote · 2020-10-15T18:46:30Z

@ymao1 thanks for the review!

Curious if there is a reason why some username and password fields are on a single row and some are on separate rows? Ex: Email connector vs ServiceNow connector?

Good catch, no reason at all that I can think of. I'm guessing it's just an inconsistency but worth opening an issue to get it fixed.

gchaps · 2020-10-15T20:56:22Z

@mikecote Create an incident in IBM Resilient. and Create an incident in Jira. sound good to me.

Good idea to talk to design about the placeholder text.

pmuellr

Just a comment for now, after looking at the screen shots, full review in a bit.

I like it! :-)

This is the first time I noticed the hasAuth on the email connector, and happened to remember when that was added, that webhook has the same sort of thing - the user/password are optional. I thought we opened an issue to address that, but I'm not seeing one. It would presumably need the same sort of hasAuth switch. We could extend the messaging there for now, indicating somehow they are optional, but if you did enter one before, you will need to enter it again - or whatever. Or leave it as it is in this PR, I think all the webhook calls I've seen in practice so far do require a user/pass, and we can address later.

Do you happen to know if we do have an issue on the webhook hasAuth switch? I'm not seeing one ...

mikecote · 2020-10-16T15:19:14Z

@pmuellr

Do you happen to know if we do have an issue on the webhook hasAuth switch? I'm not seeing one ...

I don't recall seeing one and just did a search myself and turned out negative. I'm thinking of leaving it as is in this PR and opening an issue to add the hasAuth switch there as well. I always though those fields were required but turns out they're missing the (optional) label on the top. Adding the hasAuth switch will fix it!

mikecote · 2020-10-16T15:21:13Z

@gchaps thank you, I went ahead and applied the change and updated the screenshots.

mikecote · 2020-10-16T17:44:52Z

I'm thinking of leaving it as is in this PR and opening an issue to add the hasAuth switch there as well.

I have opened this issue to fix the Webhook connector to use the hasAuth switch: #80882.

pmuellr

LGTM

mikecote · 2020-10-21T15:42:07Z

@elasticmachine merge upstream

kibanamachine · 2020-10-21T17:21:47Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: fe23afb

Metrics [docs]

async chunks size

id	before	after	diff
`triggersActionsUi`	1.5MB	1.5MB	+12.1KB

page load bundle size

id	before	after	diff
`triggersActionsUi`	151.4KB	154.3KB	+2.9KB

History

💚 Build #82194 succeeded b7f6b76
💚 Build #82003 succeeded 2034d02
💔 Build #81994 failed c5eab31
💚 Build #81899 succeeded c6d2631
💔 Build #81872 failed cb269ab

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…alues (elastic#80657) * Initial work * Add messaging to Jira connector * Add messaging to PagerDuty connector * Add messaging to Email connector * Add messaging to ServiceNow connector * Add messaging to Webhook connector * Add unit tests * Fix jest test * Apply design feedback * Apply copy feedback * Fix failing test * Fix connector descriptions for jira and resilient Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…alues (#80657) (#81371) * Initial work * Add messaging to Jira connector * Add messaging to PagerDuty connector * Add messaging to Email connector * Add messaging to ServiceNow connector * Add messaging to Webhook connector * Add unit tests * Fix jest test * Apply design feedback * Apply copy feedback * Fix failing test * Fix connector descriptions for jira and resilient Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* master: (63 commits) [KP] Fix Headers timeout issue (elastic#81140) [ML] Functional tests - stabilize typing with checks service method (elastic#81338) tabify - support docs (elastic#80351) [Security Solution][Detections] Look-back time logic fix (elastic#81383) [Workplace Search] Add top-level tests for Groups (elastic#81215) [Fleet] Fix agent action observable for long polling (elastic#81376) [Maps] fix feature tooltip remains open when zoom level change hides layer (elastic#81373) skip flaky suite (elastic#78689) chore(NA): add spec-to-console and plugin-helpers as devOnly dependencies (elastic#81357) Ensure some data is returned (elastic#81375) Change dumb-init to tini (elastic#81126) [Reporting/Tech Debt] Convert PdfMaker class to TypeScript (elastic#81242) Use Storybook Controls instead of Knobs (elastic#80705) [junit] make sure that report paths are unique (elastic#81255) bump elastic/elasticsearch-js version to 7.10.0-rc1 (elastic#81288) run ssl tests on CI (elastic#81320) Fix alert defaults (elastic#81207) [ML] DF Analytics wizard: ensure user can set mml manually or select to use given estimate (elastic#81078) Add UI notifier to indicate secret fields and to remember / reenter values (elastic#80657) [Monitoring] Use async/await (elastic#81200) ...

mikecote added 7 commits October 15, 2020 08:16

Initial work

aaae7d8

Add messaging to Jira connector

eac97f5

Add messaging to PagerDuty connector

542e820

Add messaging to Email connector

e8d0328

Add messaging to ServiceNow connector

d0d70f2

Add messaging to Webhook connector

5ea01f4

Add unit tests

cb269ab

mikecote added release_note:enhancement Feature:Alerting v8.0.0 Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) v7.11.0 labels Oct 15, 2020

mikecote self-assigned this Oct 15, 2020

Fix jest test

c6d2631

mikecote marked this pull request as ready for review October 15, 2020 16:56

mikecote requested a review from a team as a code owner October 15, 2020 16:56

mikecote added 2 commits October 15, 2020 14:08

Apply design feedback

7fef799

Apply copy feedback

c5eab31

ymao1 approved these changes Oct 15, 2020

View reviewed changes

Fix failing test

2034d02

pmuellr reviewed Oct 15, 2020

View reviewed changes

Fix connector descriptions for jira and resilient

b7f6b76

pmuellr approved these changes Oct 21, 2020

View reviewed changes

Merge branch 'master' into actions/encryption-warnings

fe23afb

mikecote merged commit 9aa9290 into elastic:master Oct 21, 2020

mikecote mentioned this pull request Oct 21, 2020

[7.x] Add UI notifier to indicate secret fields and to remember / reenter values (#80657) #81371

Merged

mikecote mentioned this pull request Oct 28, 2020

Inconsistent and hard to read placeholders used in connector forms #81943

Closed

mikecote added the needs_docs label Nov 9, 2020

mikecote mentioned this pull request Feb 23, 2021

Catch-up release documentation #92411

Merged

mikecote removed the needs_docs label Feb 24, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add UI notifier to indicate secret fields and to remember / reenter values #80657

Add UI notifier to indicate secret fields and to remember / reenter values #80657

mikecote commented Oct 15, 2020 •

edited

Loading

mikecote commented Oct 15, 2020

mdefazio commented Oct 15, 2020

mikecote commented Oct 15, 2020

elasticmachine commented Oct 15, 2020

mdefazio commented Oct 15, 2020 via email •

edited

Loading

gchaps commented Oct 15, 2020 •

edited

Loading

ymao1 left a comment

mikecote commented Oct 15, 2020

mikecote commented Oct 15, 2020

gchaps commented Oct 15, 2020

pmuellr left a comment

mikecote commented Oct 16, 2020

mikecote commented Oct 16, 2020

mikecote commented Oct 16, 2020

pmuellr left a comment

mikecote commented Oct 21, 2020

kibanamachine commented Oct 21, 2020

Add UI notifier to indicate secret fields and to remember / reenter values #80657

Add UI notifier to indicate secret fields and to remember / reenter values #80657

Conversation

mikecote commented Oct 15, 2020 • edited Loading

Screenshots

Note for docs

mikecote commented Oct 15, 2020

mdefazio commented Oct 15, 2020

mikecote commented Oct 15, 2020

elasticmachine commented Oct 15, 2020

mdefazio commented Oct 15, 2020 via email • edited Loading

gchaps commented Oct 15, 2020 • edited Loading

ymao1 left a comment

Choose a reason for hiding this comment

mikecote commented Oct 15, 2020

mikecote commented Oct 15, 2020

gchaps commented Oct 15, 2020

pmuellr left a comment

Choose a reason for hiding this comment

mikecote commented Oct 16, 2020

mikecote commented Oct 16, 2020

mikecote commented Oct 16, 2020

pmuellr left a comment

Choose a reason for hiding this comment

mikecote commented Oct 21, 2020

kibanamachine commented Oct 21, 2020

💚 Build Succeeded

Metrics [docs]

async chunks size

page load bundle size

History

mikecote commented Oct 15, 2020 •

edited

Loading

mdefazio commented Oct 15, 2020 via email •

edited

Loading

gchaps commented Oct 15, 2020 •

edited

Loading