[Spaces] UX improvements to spaces grid (#188261)

## Summary

This PR offers UX improvements to the Spaces Management listing page
which are part of epic:
elastic/kibana-team#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:**
<img width="1513" alt="image"
src="https://github.com/user-attachments/assets/2b6017f6-2395-464b-a176-3e8fbf51a2a4">

**After:**
<img width="1511" alt="image"
src="https://github.com/user-attachments/assets/b550a186-7b32-4c52-a3fb-bf285452a597">

### Release Note

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

### Checklist

Delete any items that are not applicable to this PR.

- [X] 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/packages/kbn-i18n/README.md)
- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [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
- [X] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [X] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [X] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [X] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: elena-shostak <165678770+elena-shostak@users.noreply.github.com>

x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.test.tsx

@@ -58,6 +58,11 @@ featuresStart.getFeatures.mockResolvedValue([
   }),
 ]);
 
+const spacesGridCommonProps = {
+  serverBasePath: '',
+  maxSpaces: 1000,
+};
+
 describe('SpacesGridPage', () => {
   const getUrlForApp = (appId: string) => appId;
   const history = scopedHistoryMock.create();
@@ -79,7 +84,7 @@ describe('SpacesGridPage', () => {
           catalogue: {},
           spaces: { manage: true },
         }}
-        maxSpaces={1000}
+        {...spacesGridCommonProps}
       />
     );
 
@@ -138,8 +143,8 @@ describe('SpacesGridPage', () => {
           catalogue: {},
           spaces: { manage: true },
         }}
-        maxSpaces={1000}
         solutionNavExperiment={Promise.resolve(true)}
+        {...spacesGridCommonProps}
       />
     );
 
@@ -156,6 +161,103 @@ describe('SpacesGridPage', () => {
     });
   });
 
+  it('renders a "current" badge for the current space', async () => {
+    spacesManager.getActiveSpace.mockResolvedValue(spaces[2]);
+    const current = await spacesManager.getActiveSpace();
+    expect(current.id).toBe('custom-2');
+
+    const wrapper = mountWithIntl(
+      <SpacesGridPage
+        spacesManager={spacesManager as unknown as SpacesManager}
+        getFeatures={featuresStart.getFeatures}
+        notifications={notificationServiceMock.createStartContract()}
+        getUrlForApp={getUrlForApp}
+        history={history}
+        capabilities={{
+          navLinks: {},
+          management: {},
+          catalogue: {},
+          spaces: { manage: true },
+        }}
+        solutionNavExperiment={Promise.resolve(true)}
+        {...spacesGridCommonProps}
+      />
+    );
+
+    // allow spacesManager to load spaces and lazy-load SpaceAvatar
+    await act(async () => {});
+    wrapper.update();
+
+    const activeRow = wrapper.find('[data-test-subj="spacesListTableRow-custom-2"]');
+    const nameCell = activeRow.find('[data-test-subj="spacesListTableRowNameCell"]');
+    const activeBadge = nameCell.find('EuiBadge');
+    expect(activeBadge.text()).toBe('current');
+  });
+
+  it('renders a non-clickable "switch" action for the current space', async () => {
+    spacesManager.getActiveSpace.mockResolvedValue(spaces[2]);
+    const current = await spacesManager.getActiveSpace();
+    expect(current.id).toBe('custom-2');
+
+    const wrapper = mountWithIntl(
+      <SpacesGridPage
+        spacesManager={spacesManager as unknown as SpacesManager}
+        getFeatures={featuresStart.getFeatures}
+        notifications={notificationServiceMock.createStartContract()}
+        getUrlForApp={getUrlForApp}
+        history={history}
+        capabilities={{
+          navLinks: {},
+          management: {},
+          catalogue: {},
+          spaces: { manage: true },
+        }}
+        solutionNavExperiment={Promise.resolve(true)}
+        {...spacesGridCommonProps}
+      />
+    );
+
+    // allow spacesManager to load spaces and lazy-load SpaceAvatar
+    await act(async () => {});
+    wrapper.update();
+
+    const activeRow = wrapper.find('[data-test-subj="spacesListTableRow-custom-2"]');
+    const switchAction = activeRow.find('EuiButtonIcon[data-test-subj="Custom 2-switchSpace"]');
+    expect(switchAction.prop('isDisabled')).toBe(true);
+  });
+
+  it('renders a clickable "switch" action for the non-current space', async () => {
+    spacesManager.getActiveSpace.mockResolvedValue(spaces[2]);
+    const current = await spacesManager.getActiveSpace();
+    expect(current.id).toBe('custom-2');
+
+    const wrapper = mountWithIntl(
+      <SpacesGridPage
+        spacesManager={spacesManager as unknown as SpacesManager}
+        getFeatures={featuresStart.getFeatures}
+        notifications={notificationServiceMock.createStartContract()}
+        getUrlForApp={getUrlForApp}
+        history={history}
+        capabilities={{
+          navLinks: {},
+          management: {},
+          catalogue: {},
+          spaces: { manage: true },
+        }}
+        solutionNavExperiment={Promise.resolve(true)}
+        {...spacesGridCommonProps}
+      />
+    );
+
+    // allow spacesManager to load spaces and lazy-load SpaceAvatar
+    await act(async () => {});
+    wrapper.update();
+
+    const nonActiveRow = wrapper.find('[data-test-subj="spacesListTableRow-default"]');
+    const switchAction = nonActiveRow.find('EuiButtonIcon[data-test-subj="Default-switchSpace"]');
+    expect(switchAction.prop('isDisabled')).toBe(false);
+  });
+
   it('renders a create spaces button', async () => {
     const httpStart = httpServiceMock.createStartContract();
     httpStart.get.mockResolvedValue([]);
@@ -173,7 +275,7 @@ describe('SpacesGridPage', () => {
           catalogue: {},
           spaces: { manage: true },
         }}
-        maxSpaces={1000}
+        {...spacesGridCommonProps}
       />
     );
 
@@ -203,6 +305,7 @@ describe('SpacesGridPage', () => {
           spaces: { manage: true },
         }}
         maxSpaces={1}
+        serverBasePath={spacesGridCommonProps.serverBasePath}
       />
     );
 
@@ -236,7 +339,7 @@ describe('SpacesGridPage', () => {
           catalogue: {},
           spaces: { manage: true },
         }}
-        maxSpaces={1000}
+        {...spacesGridCommonProps}
       />
     );
 
@@ -271,7 +374,7 @@ describe('SpacesGridPage', () => {
           catalogue: {},
           spaces: { manage: true },
         }}
-        maxSpaces={1000}
+        {...spacesGridCommonProps}
       />
     );