[Streams] EditIlmPhasesFlyout and EditDslStepsFlyout UI fixes

[damian-polewski]

Closes #254188
Closes #254852

Summary

This PR fixes issues with EditIlmPhasesFlyout and EditDslStepsFlyout components listed below:

• (ILM/DSL) Remove overflow fade effect in tabs row,
• (ILM/DSL) When different tab is selected externally, scroll to the newly selected tab,
• (ILM/DSL) Update fixed_interval help text - Create edit ILM flow #253393 (comment),
• (ILM/DSL) Show help text when error is present - Create edit ILM flow #253393 (comment).
• (ILM/DSL) Update copy - [Downsampling] Update copies #254852,

How to test

View and test the component in Storybook:

yarn storybook streams_app

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
• Flaky Test Runner was used on any tests changed
• The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
• Review the backport guidelines and apply applicable backport:* labels.

[elasticmachine]

Pinging @elastic/kibana-management (Team:Kibana Management)

[SoniaSanzV]

Everything works really well, thank you for addressing this!

[CoenWarmer]

Hi, these are my findings:

1. Naming / content mismatch for format_size_units.ts

The file is called format_size_units but the contents of the file only deal with time conversions. The naming suggests it contains other unit conversions as well (i.e. byte/kb/mb). You might want to consider naming the file format_time_units.ts to help humans / LLMs find the file faster.

2. Don't use MS_IN_SECOND * MS_IN_SECOND as a unit

I would suggest not using MS_IN_SECOND * MS_IN_SECOND as a unit, but instead make it explicit:

const MS_IN_SECOND = 1000;
const SECONDS_IN_MINUTE = 60;
const MINUTES_IN_HOUR = 60;
const HOURS_IN_DAY = 24;
const MICROS_IN_MS = 1_000;
const NANOS_IN_MS = 1_000_000;

const getMsPerUnit = (unit: string): number | undefined => {
  switch (unit) {
    case 'nanos':
      return 1 / (NANOS_IN_MS);
    case 'micros':
      return 1 / MS_IN_SECOND;
     ...
};

3. Tests

splitSizeAndUnits, getTimeUnitLabel, and isZeroAge are all exported from the source file, but none appear in the test file. Since isZeroAge in particular has non-trivial logic (guards against non-finite numbers), it warrants coverage.

[flash1293]

Most changes are small, left a comment about one part

[damian-polewski]

Hey @CoenWarmer, regarding your feedback - I'm only changing the regex in format_size_units.ts and adjust tests to accept decimal values. I'm not sure if this is something we should be addressing in this PR.

[flash1293]

Looks better, while we are fixing small stuff around this flyout, another thing I noticed is that the form state is reset when the flyout switches from in-layout to overlay:

Not critical, but would be good to fix

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 85d0071
• Storybooks Preview

Failed CI Steps

• Scout: [ observability / synthetics ] plugin

Test Failures

• [job] [logs] Scout: [ observability / synthetics ] plugin / local-stateful-classic - DefaultStatusAlert - creates default alert, triggers on down status, and recovers

Metrics [docs]

Async chunks

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

id	before	after	diff
streamsApp	1.8MB	1.8MB	+1.4KB

History

• 💚 Build #402805 succeeded 97ff4d8
• 💚 Build #402425 succeeded 80cfa44
• 💚 Build #402018 succeeded 4642fef
• 💔 Build #401667 failed 02c3ad1
• 💔 Build #401345 failed bd79d60

cc @damian-polewski

[damian-polewski]

@flash1293 Good catch! This happens because EuiFlyout transition from push to overlay effectively remount parts of the flyout. hook_form_lib unregisters fields on unmount and when those fields mount again they read from the original defaultValue.

To solve this we could chose one of these solutions:

• Lift the draft state to the parent so the form state is always repopulated from the latest draft
• Store draft outside the flyout (context / local storage) and repopulate on mount
• Migrate this flyout to RHF since it doesn't remove values on unmount (as part of (Investigate moving from internal hook_form_lib to React Hook Form #253485))

I’d suggest we handle it in a separate issue (#256018) so we don’t block this PR further.

[flash1293]

Thanks, LGTM then