[ILM] Migrate Delete phase and name field to Form Lib

[jloleysens]

Summary

Migrated the delete phase to use the form lib. Continuation of: #80012 #81323 #81754

How to review

This PR removes a lot of duplicated code introduced int he PRs referenced above as well as all of the legacy deserialization and serialization logic.

The primary focus on migrating is for the delete phase and so most of the work is for the "wait_for_snapshot" field.

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

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[yuliacech]

I would move history prop to context for consistency or alternatively, pass isNewPolicy, existingPolicies and policyName as props too. I think they are only used in edit_policy.tsx.

[jloleysens]

I see your point, but would like to hold off on this change because it seems cleaner to me to have the EditPolicyContextProvider contain the values for the policy business logic. Most of those values are relevant to the "name" field of the policy and I would like to preserve the flexibility of being able to move that field into its own component if needed.

[yuliacech]

Hi @jloleysens , great job on converting the rest of edit policy to form lib! I tested the delete phase locally and all worked for me, with and without snapshot policies.
The code looks good, especially deleting all of that duplicated lines!
I would like to block on 'Fix errors' badge, which is now shown on all phases regardless of where the actual validation error is and even when the phase is inactive. I think that could be confusing for the user.
Remaining non-blocking comments are about code organization:

• Would you consider creating a form lib related folder in edit_policy? For me, the number of files in the root of edit_policy seems a bit on the larger side.
• Would you consider renaming edit_policy.container.tsx? I think the name is left over from when Redux was used and still has its specific meaning behind it. I would suggest edit_policy.tsx for 'container' file and edit_policy_form for the actual file where useForm is called.

[MichaelMarcialis]

LGTM

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

@yuliacech Thanks for the review!

which is now shown on all phases regardless of where the actual validation error is and even when the phase is inactive. I think that could be confusing for the user.

Great catch 🍻

I have done the following:

• since the "fix errors" badge was to improve visibility of where errors are after attempting to save a policy, I though it is best to remove this since errors are now reported as the user is editing that field.
• I moved form-related files into the a directory form in the edit_policy section
• w.r.t. edit_policy.container.tsx I'd like to hold off on this change because I know there are other plugins where this convention has been followed (like ingest pipelines) and I think we should decide with the team what the best approach here would be. IMO name.container still does a good job of communicating what the intent of that file is - there is no presentational logic, just setting up of context and preparing props for the presentation component which is common in the flux architecture in React.

[yuliacech]

Hi @jloleysens, thank you for addressing my feedback! Changes LGTM, re-tested locally, all worked.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 620db87

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
indexLifecycleManagement	112	110	-2

async chunks size

id	before	after	diff
indexLifecycleManagement	224.4KB	210.6KB	-13.8KB

page load bundle size

id	before	after	diff
indexLifecycleManagement	77.0KB	76.8KB	-188.0B

History

• 💔 Build #86706 failed df07ac5
• 💔 Build #86669 failed e27c4bd
• 💔 Build #86401 failed e27161b

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