[ResponseOps][Connectors] Pager duty connector UI

[adcoelho]

Fixes #170048

Summary

This PR adds support in the UI for the custom_details and links attributes in the Pagerduty connector.

Release Notes

PagerDuty connector now supports the links and custom_details attributes.

[elasticmachine]

Pinging @elastic/response-ops (Team:ResponseOps)

[cnasikas]

Nice work! I tested and I found that the URLs are not working. It seems that the text is set to the URL and vice-versa

Also when you press the "Add link" button the links show an error even if I do not interact with the fields. Errors are better to be shown after user interaction as they happen with the other fields of the form. Lastly, I think it is better to not disable the "Add link" button on errors. I found it a bit disruptive. Better to follow the same pattern with the summary.

[cnasikas]

I think we should avoid mutating directly the prop. The editAction will do it for you.

[adcoelho]

I think we should avoid mutating directly the prop.

Initially, I had something like

const newLinks = [...links]
newLinks[currentLinkIndex] = { ...links[currentLinkIndex], href: value };
editAction('links', newLinks, index)

but playing around with it made no difference in the rerenders 😬

[cnasikas]

What do you mean by no difference?

[adcoelho]

I thought changing the prop directly might affect the number of times the component was rerendered but in the end, they were the same. What exactly does it affect?

[cnasikas]

I can see some issues with mutating the props:

1. React is not aware of the change of state
2. We mutate an object that the parent component may use after using the child component
3. We mutate an object that the code in the component assumes is immutable

[cnasikas]

I forgot to add, is it possible to make the fields of the links take the full width of their share in the town (50%)?

[adcoelho]

I tested and I found that the URLs are not working. It seems that the text is set to the URL and vice-versa

Ah, I switched them by mistake when playing with the editAction calls 😬

Also when you press the "Add link" button the links show an error even if I do not interact with the fields. Errors are better to be shown after user interaction as they happen with the other fields of the form.

I kinda did this on purpose. Isn't clicking "Add Link" an interaction with the links portion of the form?

Lastly, I think it is better to not disable the "Add link" button on errors.

Will do 👍

[cnasikas]

I kinda did this on purpose. Isn't clicking "Add Link" an interaction with the links portion of the form?

Hmm not for me but I would delegate this to @mdefazio 🙂.

[adcoelho]

I kinda did this on purpose. Isn't clicking "Add Link" an interaction with the links portion of the form?

Hmm not for me but I would delegate this to @mdefazio 🙂.

Add link specifically calls the editAction callback to append a new item to the end of the list of links. This calls the validation that triggers the error.

But I can change it slightly to not highlight the input fields though.

From this

to this

[adcoelho]

@mdefazio

Regarding the comment

Also when you press the "Add link" button the links show an error even if I do not interact with the fields. Errors are better to be shown after user interaction as they happen with the other fields of the form.

I made a video to show the current behavior.

Screen.Recording.2023-11-24.at.15.48.40.mov

What do you think?

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: b2b820b

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
stackConnectors	236	237	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
stackConnectors	537.4KB	540.0KB	+2.6KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
stackConnectors	39.4KB	39.9KB	+584.0B

History

• 💚 Build #178834 succeeded e1704c5
• 💚 Build #178546 succeeded d9d6832
• 💚 Build #178061 succeeded 27a0070

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

cc @adcoelho

[cnasikas]

Tested and is working as expected 🚀