Provides context to spaces grid action buttons (#27911)

## Summary Fixes #27744 cc @elastic/eui-design -- It appears that the [`DefaultItemAction`](https://elastic.github.io/eui/#/display/tables) can only accept hard-coded `name`/`description` values. While this isn't necessarily a bad thing, I'm wondering if the linked issue (#27744) will be a common enough occurrence within Kibana to make the DefaultItemAction less useful. What do you think about allowing functions for the `name` and `description` fields, so that they can get access to the row's record, and provide context as necessary?
elastic · Jan 3, 2019 · 36d0f4a · 36d0f4a
1 parent dcc01f7
commit 36d0f4a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 36 deletions.
diff --git a/.../spaces/public/views/management/spaces_grid/__snapshots__/spaces_grid_pages.test.tsx.snap b/.../spaces/public/views/management/spaces_grid/__snapshots__/spaces_grid_pages.test.tsx.snap
@@ -90,21 +90,11 @@ exports[`SpacesGridPage renders as expected 1`] = `
               Object {
                 "actions": Array [
                   Object {
-                    "color": "primary",
-                    "description": "Edit this space.",
-                    "icon": "pencil",
-                    "name": "Edit",
-                    "onClick": [Function],
-                    "type": "icon",
+                    "render": [Function],
                   },
                   Object {
                     "available": [Function],
-                    "color": "danger",
-                    "description": "Delete this space.",
-                    "icon": "trash",
-                    "name": "Delete",
-                    "onClick": [Function],
-                    "type": "icon",
+                    "render": [Function],
                   },
                 ],
                 "name": "Actions",

diff --git a/x-pack/plugins/spaces/public/views/management/spaces_grid/spaces_grid_page.tsx b/x-pack/plugins/spaces/public/views/management/spaces_grid/spaces_grid_page.tsx
@@ -8,6 +8,7 @@ import React, { Component, Fragment } from 'react';
 
 import {
   EuiButton,
+  EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   // @ts-ignore
@@ -306,33 +307,45 @@ class SpacesGridPageUI extends Component<Props, State> {
         }),
         actions: [
           {
-            name: intl.formatMessage({
-              id: 'xpack.spaces.management.spacesGridPage.editSpaceActionName',
-              defaultMessage: 'Edit',
-            }),
-            description: intl.formatMessage({
-              id: 'xpack.spaces.management.spacesGridPage.editSpaceActionDescription',
-              defaultMessage: 'Edit this space.',
-            }),
-            onClick: this.onEditSpaceClick,
-            type: 'icon',
-            icon: 'pencil',
-            color: 'primary',
+            render: (record: Space) => {
+              return (
+                <EuiButtonIcon
+                  aria-label={intl.formatMessage(
+                    {
+                      id: 'xpack.spaces.management.spacesGridPage.editSpaceActionName',
+                      defaultMessage: `Edit {spaceName}.`,
+                    },
+                    {
+                      spaceName: record.name,
+                    }
+                  )}
+                  color={'primary'}
+                  iconType={'pencil'}
+                  onClick={() => this.onEditSpaceClick(record)}
+                />
+              );
+            },
           },
           {
             available: (record: Space) => !isReservedSpace(record),
-            name: intl.formatMessage({
-              id: 'xpack.spaces.management.spacesGridPage.deleteActionName',
-              defaultMessage: 'Delete',
-            }),
-            description: intl.formatMessage({
-              id: 'xpack.spaces.management.spacesGridPage.deleteThisSpaceActionDescription',
-              defaultMessage: 'Delete this space.',
-            }),
-            onClick: this.onDeleteSpaceClick,
-            type: 'icon',
-            icon: 'trash',
-            color: 'danger',
+            render: (record: Space) => {
+              return (
+                <EuiButtonIcon
+                  aria-label={intl.formatMessage(
+                    {
+                      id: 'xpack.spaces.management.spacesGridPage.deleteActionName',
+                      defaultMessage: `Delete {spaceName}.`,
+                    },
+                    {
+                      spaceName: record.name,
+                    }
+                  )}
+                  color={'danger'}
+                  iconType={'trash'}
+                  onClick={() => this.onDeleteSpaceClick(record)}
+                />
+              );
+            },
           },
         ],
       },