Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[8.x] [ResponseOps] [Rule Form] Move rule form steps to hook with progress tracking (#205944) #206346

Merged
merged 1 commit into from
Jan 10, 2025

Conversation

kibanamachine
Copy link
Contributor

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

…tracking (elastic#205944)

## Summary

Part of elastic#195211

In preparation for the horizontal rule form layout, move the generation
of the rule form steps into three hooks:

- `useCommonRuleFormSteps`: private hook that generates a series of
objects specifying the rule form steps, how to display them, and what
order to display them in
- `useRuleFormSteps`: hook that calls `useCommonRuleFormSteps` and
transforms them into data for the standard vertical `EuiSteps`, along
with progress tracking based on `onBlur` events
- `useRuleFormHorizontalSteps`: hook that calls hook that calls
`useCommonRuleFormSteps` and transforms them into data for
`EuiStepsHorizontal`, plus navigation functions. ***These will be used
in the smaller rule form flyout in a second PR***

Because `EuiStepsHorizontal` rely more heavily on the `EuiSteps`
`status` property, I took this opportunity to improve progress tracking
in the standard vertical steps. Most rule types will load the create
page with Step 1: Rule Definition already being in a `danger` state,
because an incomplete rule definition component immediately sends
errors, and the error API doesn't distinguish between invalid data or
incomplete data.

This PR wraps each step in a `reportOnBlur` higher-order component,
which will report the first time a step triggers an `onBlur` event.
Steps with errors will now report `incomplete` until they first trigger
an `onBlur`. The result:

1. The user loads the Create Rule page. Rule Definition is marked
`incomplete`
2. The user interacts with Rule Definition, but does not yet complete
the definition.
3. The user interacts with the Actions step, the Rule Details step, or
another part of the page. The Rule Definition is now marked `danger`.

This is inelegant compared to an error API that can actually distinguish
between an incomplete form and an invalid form, but it's an improvement
for now.

---------

Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit d8b0b6e)
@kibanamachine kibanamachine merged commit 399a186 into elastic:8.x Jan 10, 2025
11 checks passed
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
triggersActionsUi 847 848 +1

Async chunks

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

id before after diff
triggersActionsUi 1.7MB 1.7MB +1.2KB

cc @Zacqary

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants