[IM] API & UI for filtering Integrations by category

[jfsiii]

API & UI for filtering Integrations by category

Filters for "All" (not filtered) & each category. Only one active filter at a time.

closes #46070

I'll add some comments inline but see the individual commits for more context.

Did separate UI & API commits and tried to keep related changes together to make it easier to follow.

[jfsiii]

@hbharding The active color used by EuiFacetButton doesn't work (too little contrast, IMO) with our background.

How should we style active filters? Set the background color to the same as the container? Or use something else? Any other styling (outline, etc)?

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[ruflin]

Tested manually, works as expected.

[hbharding]

@jfsiii good catch. I wasn't aware that the facet group used a background color for active. Lets use the same color as the container background here. euiColorLightestShade

[skh]

Works great for existing categories 👍

When calling the API path directly for a category that doesn't exist, a 500 Internal Server Error occurs. I would have expected either a 200 with an empty list, or a 404.

We could do this now, or open an issue for making all API calls more robust. @jfsiii what do you think?

[jfsiii]

@skh good catch. 404 is what first comes to mind. I'll add in another commit shortly or open an issue.

[ruflin]

@skh I assume this is for the internal API? For the registry API, I would also expect a 200 and an empty list: http://integrations-registry.app.elstc.co/search?category=foo The current response is null and not [], should this be fixed?

[skh]

@ruflin Yes, this is for the internal API. The null returned from the registry might be what's triggering the error now, but I think Kibana-side code should be robust enough to handle it.

I have no opinion at all whether the two APIs need to be in sync with regard to return codes and error handling -- it's cleaner when they are, but I'm not sure it's worth the effort, as long as both behave robust and in a sensible way. So, 200 with [] or 404, both sounds good to me.

[ruflin]

Followed up in the registry with elastic/package-registry#111

[jfsiii]

@ruflin Thanks. Approved elastic/package-registry#111

@skh This will flow through to the Manager's API, so no changes are required in the Manager code. Any other blockers to a 🚢 ?

[skh]

This will flow through to the Manager's API, so no changes are required in the Manager code. Any other blockers to a 🚢 ?

Not from my side, looks good! 👍

[jfsiii]

@hbharding Looking into this, I found that the container color is euiPageBackgroundColor / #fafbfd and the facet button is already using euiColorLightestShade / #f5f7fa for the :focus style.

Looking at the Figma designs, I see that the background color for the screen is euiColorLightestShade which means the current pages aren't to spec. Fixed in fc3dfc2

[jfsiii]

@hbharding Some fallout from the changing the color of the containers

The injected "Help us improve..." header background now doesn't match ours. Perhaps we can control this but it doesn't seem likely. Is this a sign that we should revert to using the prior color which, I believe is what other plugins use. Compare IM above with these other pages below:

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[hbharding]

Good catch @jfsiii ! I'm still learning EUI, and today you taught me something :). I'll fix the figma files to use the proper page bg color, #FAFBFD