[Spaces] UX improvements to spaces grid

[tsullivan]

Summary

This PR offers UX improvements to the Spaces Management listing page which are part of epic: https://github.com/elastic/kibana-team/issues/785

• Use a badge to denote the current space
• Update wording of the "features visible" column header
• Truncate Space description text
• Add an action to switch to the space identified by the table row.

In the Roles & Spaces UX Improvements project, our roll out plan is work in #184697 and to pull small mergeable changes a little at a time, to release the changes as separate PRs.

Screenshot

Before:

After:

Release Note

Added minor user experience improvements to Spaces Management in Stack Management.

Checklist

Delete any items that are not applicable to this PR.

• 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
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[elasticmachine]

Pinging @elastic/kibana-security (Team:Security)

[ryankeairns]

Really nice set of UX improvements ticked off with a tidy, focused PR. Love it!

[tsullivan]

Need to make a decision about the "Switch" action in the table list of Spaces.

[tsullivan]

@kevinsweet

You brought up a point about an overall goal to enforce more intentional navigation paths. In that regard, we maybe don't want to include a "Switch" action here to switch the user to another Space. We already have trained users to use the Space Selector: the drop-down in the top nav.

I would also mention one difference between how the Space Selector works:

• When the user changes their Space using the Space Selector, they are navigated to the "Space landing page" for that space
• When the user changes their Space using this action, the navigation would keep them in the Spaces Management page.

I'll put this PR in Draft mode for us to discuss. I'd like to avoid having to "undo" things as we roll out the project. :)

[ek-so]

I personally would vote for keeping the switch here too, because as Tim mentioned, it doesn't take the user away from their context or otherwise detract, given the way it's implemented here.

But also see your point Kevin. NOT having it here should not be a big problem either.

• One more thing to consider: if we remove this option, we're left with only 2 more: edit and delete. Hence, we can remove ellipses menu as well, and save some clicks (we were there before , I know, but just not to forget about it)

[tsullivan]

I'll reach out to the folks involved in this project, and we'll use this comment to vote and make a decision.

👍🏻 = keep the "Switch" action
👎🏻 = remove it

[petrklapka]

Upvoted to keep the switcher. IMO, while true this is a duplication of function, the user looking at the list of spaces is operating ON that list. Whether aware or not of the "active space" concept, their focus is on the list, not the breadcrumb bar. I'll draw a comparison to the Maximize button vs. double click on a title bar. Both accomplish the same thing. While dragging a window, the focus is on the title bar. Sure the user could drop it, navigate to the maximize button, and use that, but it's a cumbersome, disjointed experience.

Also, I believe this was discussed with Ryan during the design phase prior to engineering getting started and a decision was reached. That's why it appears in the design as it does. 🙂. Unless there is a dang good reason to change the design and jeopardize the MVP implementation, let's stick to the design.

[kevinsweet]

Hmm... I don't follow. What's the point of a user being able to switch spaces and still be in space settings? It's the same screen, same menu with all the same options and controls, but now i'm in a different space in the background?

It's odd to mix these usually separate things "administration" and "navigation."

[petrklapka]

I agree it is odd to mix them, but I think our case is a bit unusual. In our case the space is sort of a non hierarchical third dimension or "layer", and since the active space is different from all the others, it just... "feels" right to be able to control it from the list of spaces. Not having it there feels like something is missing and the normal space switcher combo feels too "far" from my focus. These are just my gut opinions, but it looks like the majority of folks have the same gut.

[tsullivan]

Thanks all, for the discussion. I believe it was worth it: got to voice concerns and listen. We have a result from the vote: the Switch action will stay.

[kevinsweet]

Nice to see this one moving fwd at pace. Bigger picture wise I'm totally on board, but in future situations, we definitely need to be able to answer the question, "what exactly is distinct purpose of a given UI element, from the user point of view?" Otherwise we're just adding ui clutter/complexity for no reason. But ack: that kind of consideration should happen earlier in the process prior to dev, for sure 👍 Onward and upward - excited for this one 🚀

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 2ba5bac

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
spaces	180.6KB	182.5KB	+1.9KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
spaces	27.5KB	27.6KB	+48.0B

History

• 💚 Build #221627 succeeded f89bc41
• 💔 Build #221260 failed 984fe8d

cc @tsullivan

[dmlemeshko]

x-pack/test/functional/page_objects/space_selector_page.ts changes LGTM

[elena-shostak]

Looks good!

Could we please add more tests for this enhanced UI? (current badge display, actions menu).

[tsullivan]

/ci

[kibanamachine]

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#6667

[✅] x-pack/test/functional/apps/spaces/config.ts: 42/42 tests passed.

see run history

[tsullivan]

new functional tests are passing in flaky test run: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/6667

[tsullivan]

I couldn't see a way to click the link in the context menu simply using the data-test-subj, since multiple elements existed with the same attribute (the link text and the button). So I needed to use a more specific selector that involves the EUI class name.

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 3f190bc

Failed CI Steps

• FTR Configs #88

Test Failures

• [job] [logs] FTR Configs #88 / Cloud Security Posture Test adding Cloud Security Posture Integrations CSPM GCP CIS_GCP Organization Post Installation Google Cloud Shell modal pops up after user clicks on Save button when adding integration, when there are no Project ID or Organization ID provided, it should use default value

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
spaces	182.5KB	184.5KB	+2.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
spaces	29.6KB	29.7KB	+48.0B

History

• 💚 Build #225217 succeeded 473c048
• 💛 Build #225175 was flaky 1d62cb0
• 💚 Build #224731 succeeded 36ecf51
• 💚 Build #223907 succeeded 1cc851c
• 💛 Build #223079 was flaky d803f65
• 💛 Build #222746 was flaky 960d5c7

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

cc @tsullivan @elena-shostak