[Design QA] Alert details flyout – highlighted fields and pin to top in table tab layout + copy fixes (dev + copywriter)

[0lha0liinyk]

The Design QA review of the Alert Details flyout uncovered issues with how highlighted fields are managed in the Overview tab, as well as how they are pinned in the Table tab.
Before we move forward with implementation changes, we’d appreciate all related copy review and approval from the Tech Writers team — see related ticket: #1132
The Figma file

Issues:

1. Button text does not match design – shows ‘+Add field’ ➡️ Expected copy: Edit (with settings gear icon)
   (The tooltip text is ok.)

2. No space between the button and highlighted fields box ➡️ Expected: Button style – Empty / Primary / Extra small, it should be aligned centrally with the “Highlighted fields” title, with a 12px space before the highlighted fields box

_
3. Unexpected behaviour of the tooltip – it scrolls with the page behind the flyout, and the focused state has inconsistent color ➡️ Expected: Both tooltip positioning and focus color should follow EUI standards
(The sequence of screenshots showing this behavior is attached)

4. The pin icon buttons are rectangular rather than square, and black instead of blue — unlike other icon buttons in EUI (e.g., those used in tables).
5. The settings gear button is also rectangular and not taken from the design system. In the designs, the default-style, primary-color, medium-size button is used instead.

_
The modal window:

6. There should be an icon, and on hover a tooltip (as provided in the design) should appear, explaining what custom highlighted fields are 

   ➡️ Expected: Add info icon with a tooltip matching the Figma design

7. The button text is different – shows ‘Save’
   ➡️ Expected: Save changes

8. Font styles and blue colors differ from the EUI design system – the title appears bold 

   ➡️ Expected: Typography and color styles should follow EUI standards (note: this may require a global change)

9. The success toast message is different from the one in the design

10. It wasn’t included in the original designs, but here’s a suggested error message: ‘Couldn’t update custom highlighted fields. Please try again.’

[0lha0liinyk]

Before we move forward with implementation, could you please confirm that all the texts align with Elastic’s content guidelines, @nastasha-solomon ? Really appreciate it!

[nastasha-solomon]

@0lha0liinyk my only question is about this error message:
Couldn’t update custom highlighted fields. Please try again.

When users encounter this error message, what (if any) concrete steps can users take to successfully customize their highlighted fields? We should provide that information to them to so they know what to do next.

cc: @christineweng in case you have some insight 🙏🏼

[christineweng]

Hi @0lha0liinyk, thanks for the review. Could you split this ticket into a doc ticket for docs team to review, and a dev ticket in https://github.com/elastic/kibana for devs to work on? you can assign @PhilippeOberti in the dev ticket as I'm transitioning to another team, another team member will likely work on these.

Some notes on the comments:

1. Text change to Add field was requested by PM - could you confirm with him if we are going back to Edit + gear icon?

4. The black color is to stay consistent with other action icons in alerts table and timeline. Could you confirm with PM before we commit the change?

5. This can go to the dev ticket, but I also recall there isn't much customization we can do to the search bar setting as a whole

7. Save is used throughout security, could you confirm with PM before committing to the change?

9 & 10 Regarding the toasts, because we are reusing the API from rule management team, there might be restrictions on the text. The success message we should be able to custimize.

@nastasha-solomon we are leveraging the update rule API, currently if the update fails, it will show Failed to add Rule