Add table list view to space selector screen by ryankeairns · Pull Request #229046 · elastic/kibana

ryankeairns · 2025-07-23T03:08:17Z

Closes #113050

Summary

Adds table list view to the space selector screen for a more scalable design when a user has many spaces.

Notes

Card list remains and is default (when < 20 spaces)
If there are more then 20 spaces, the view defaults to table list
Adds solution badge to cards when available
Adds toggle to switch between card and table list view
Table defaults to 10 rows per page with 25, 50, and 100 options
Search works the same on both views

Screenshots

Card view (before)

Card view (after)

Table view (new)

Future considerations

Add filter for solution type
Add recents (last 5)
Make the table size a bit more dynamic (right now it fills the same section as the cards)

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.

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

See some risk examples
...

elena-shostak

Great job!

Verified changes on desktop and mobile, left a couple of questions/nits

elena-shostak · 2025-07-24T12:24:18Z

x-pack/platform/plugins/shared/spaces/public/space_selector/components/space_table.tsx

+    const needsTruncation = description.length > 100;
+    const displayDescription = needsTruncation ? description.substr(0, 100) + '…' : description;
+
+    return (
+      <EuiTextColor color="subdued">
+        <EuiText size="s" title={description}>
+          {displayDescription}
+        </EuiText>
+      </EuiTextColor>
+    );
+  };


Can we use EuiTextTruncate component? It also supports truncationPosition if we need to customize it further

Initial attempts to use EuiTextTruncate for consistent text truncation across both card and table views resulted in two critical problems. Here is a summary, as explained by AI:

DOM Nesting Violation: EuiTextTruncate creates block-level <div> elements, which caused invalid HTML structure when used within EuiCard descriptions (which render as <p> elements). This generated browser console warnings: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

Table Rendering Issues: EuiTextTruncate had compatibility problems within EuiBasicTable context, causing descriptions to not display properly in the table view.

x-pack/platform/plugins/shared/spaces/public/space_selector/components/space_table.tsx

x-pack/platform/plugins/shared/spaces/public/space_selector/space_selector.tsx

ryankeairns · 2025-07-24T15:16:17Z

Thanks @elena-shostak , I'll give these a go!

elena-shostak

LGTM

elasticmachine · 2025-07-28T16:03:23Z

💚 Build Succeeded

Buildkite Build
Commit: 6670f7d

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`spaces`	237	238	+1

Async chunks

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

id	before	after	diff
`spaces`	209.4KB	214.4KB	+5.0KB

History

💚 Build #323509 succeeded 6b495f4
💔 Build #323037 failed 009b424
💚 Build #322479 succeeded 8d49ee9

Closes elastic#113050 ## Summary Adds table list view to the space selector screen for a more scalable design when a user has many spaces. **Notes** - Card list remains and is default (when < 20 spaces) - If there are more then 20 spaces, the view defaults to table list - Adds solution badge to cards when available - Adds toggle to switch between card and table list view - Table defaults to 10 rows per page with 25, 50, and 100 options - Search works the same on both views ### Screenshots **Card view (before)** <img width="640" alt="CleanShot 2025-07-22 at 16 00 35@2x" src="https://github.com/user-attachments/assets/0b8ca767-10d0-4d5b-94d9-85b459c80f34" /> **Card view (after)** <img width="3576" height="2232" alt="CleanShot 2025-07-22 at 20 01 45@2x" src="https://github.com/user-attachments/assets/649aa537-8f4d-4bac-a9bf-60848b00bf47" /> **Table view (new)** <img width="3578" height="2050" alt="CleanShot 2025-07-22 at 20 02 31@2x" src="https://github.com/user-attachments/assets/78641f59-6e36-4440-a103-4f75e4854a93" /> **Future considerations** - Add filter for solution type - Add recents (last 5) - Make the table size a bit more dynamic (right now it fills the same section as the cards) ### 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](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) 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](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] 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](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) 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](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...

Add table list view to space selector screen

8d49ee9

ryankeairns added release_note:enhancement v9.2.0 labels Jul 23, 2025

ryankeairns marked this pull request as ready for review July 23, 2025 14:50

ryankeairns requested a review from a team as a code owner July 23, 2025 14:50

ryankeairns added the backport:prev-minor label Jul 23, 2025

elena-shostak self-requested a review July 24, 2025 12:33

elena-shostak requested changes Jul 24, 2025

View reviewed changes

Address feedback

009b424

ryankeairns requested a review from elena-shostak July 24, 2025 19:17

ryankeairns added 2 commits July 24, 2025 14:18

Merge branch 'main' into rk/113050-space-selector-page

0a0c132

Merge branch 'main' into rk/113050-space-selector-page

6b495f4

elena-shostak approved these changes Jul 28, 2025

View reviewed changes

Merge branch 'main' into rk/113050-space-selector-page

6670f7d

ryankeairns added backport:skip This PR does not require backporting and removed backport:prev-minor labels Jul 28, 2025

ryankeairns merged commit 82ee8cb into main Jul 28, 2025
15 checks passed

ryankeairns deleted the rk/113050-space-selector-page branch July 28, 2025 16:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add table list view to space selector screen#229046

Add table list view to space selector screen#229046
ryankeairns merged 5 commits intomainfrom
rk/113050-space-selector-page

ryankeairns commented Jul 23, 2025 •

edited

Loading

elena-shostak left a comment

elena-shostak Jul 24, 2025

ryankeairns Jul 24, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ryankeairns commented Jul 24, 2025

elena-shostak left a comment

elasticmachine commented Jul 28, 2025

Uh oh!

Labels

3 participants

Conversation

ryankeairns commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Checklist

Identify risks

elena-shostak left a comment

Choose a reason for hiding this comment

elena-shostak Jul 24, 2025

Choose a reason for hiding this comment

ryankeairns Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ryankeairns commented Jul 24, 2025

elena-shostak left a comment

Choose a reason for hiding this comment

elasticmachine commented Jul 28, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

Uh oh!

Labels

3 participants

ryankeairns commented Jul 23, 2025 •

edited

Loading