[Cases] Use templates when creating a case

[cnasikas]

Summary

This PR adds the ability for users to select a template when creating a case. When a user selects a template the cases form fields are populated with the values from the template. The solution picker in the flyout changed as:

Bug fixes

1. Changing the solution through the solution picket in the flyout would not respect the connector's configuration.
2. Bug where the lazy loading of connectors' icons was causing the flyout to open and close when you selected a solution picket. This bug appeared when the first bug was fixed.

Testing

1. Go to all solutions and create cases setting all fields (including all fields of all supported connectors) without using templates. Verify that everything is working as expected.
2. Go to all solutions, create different templates on each solution, and verify that when creating a case you can use templates and everything is working as expected.
3. Go to the alerts table of o11y and security and attach alerts to a new case. Verify that in the flyout the templates are working as expected.
4. Go to ML and try to attach an ML visualization to a new case. Verify that the solution picker is working as expected and it resets the form when changing solutions.

Fixes: #181871
Depends on: #185877

Checklist

Delete any items that are not applicable to this PR.

• Unit or functional tests were updated or added to match the most common scenarios
• Flaky Test Runner was used on any tests changed

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[cnasikas]

This is needed to avoid the following bug:

Screen.Recording.2024-06-11.at.3.59.54.PM.mov

The icon class can be a lazy-loaded component. React will fall back to the nearest Suspense causing the flyout on each render of the SVG icon to appear and disappear. By adding suspense here we isolate the loading inside the select option. With the fix:

Screen.Recording.2024-06-11.at.4.18.06.PM.mov

Thanks @umbopepato! Your investigation of the flaky tests made me figure it out!

[cnasikas]

@js-jankisalvi About:

1. The bug you found was fixed by @adcoelho in 2e0b9e8 (#185880).
2. This is happening because when you create the case it's being pushed to Jira. Then Jira throws an error. It seems unrelated to templates but it is a great point as users can configure templates with malformed data. Could you open an issue for that? We may need to filter out parent issues based on the issue type.
3. Good point! I agree but I could not find a way to do it with EuiSelect. Do you mind if we leave it for another PR as a fix?

@adcoelho I fixed the test with the infinitive loop here 172f0dd (#185880)

[js-jankisalvi]

Could you open an issue for that? We may need to filter out parent issues based on the issue type.

Created issue

3. Good point! I agree but I could not find a way to do it with EuiSelect. Do you mind if we leave it for another PR as a fix?

yes, sure 👍

[js-jankisalvi]

Owner bug is fixed 🎉
However custom fields validations have stopped working.
Here CF3 custom field is required and does not have default value:

[cnasikas]

@js-jankisalvi Thank! Fixed in f784b51 (#185880)

[js-jankisalvi]

Verified locally, works as expected 👍

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: f1deec3

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
cases	771	772	+1

Async chunks

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

id	before	after	diff
cases	497.4KB	497.7KB	+301.0B

Page load bundle

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

id	before	after	diff
cases	153.1KB	153.4KB	+286.0B

Unknown metric groups

ESLint disabled in files

id	before	after	diff
cases	16	17	+1

ESLint disabled line counts

id	before	after	diff
cases	61	62	+1

Total ESLint disabled count

id	before	after	diff
cases	77	79	+2

History

• 💛 Build #218372 was flaky 1e1d998
• 💔 Build #218253 failed 08e5da7
• 💔 Build #218143 failed 2d02d83
• 💔 Build #217939 failed 4a6d025
• 💔 Build #217862 failed face183

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

cc @cnasikas