Provides context to spaces grid action buttons (#27911) (#28009)

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 4, 2019 · 07b1d48 · 07b1d48
1 parent 5ed6101
commit 07b1d48
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 24 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
@@ -81,21 +81,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
@@ -251,21 +252,29 @@ export class SpacesGridPage extends Component<Props, State> {
         name: 'Actions',
         actions: [
           {
-            name: 'Edit',
-            description: 'Edit this space.',
-            onClick: this.onEditSpaceClick,
-            type: 'icon',
-            icon: 'pencil',
-            color: 'primary',
+            render: (record: Space) => {
+              return (
+                <EuiButtonIcon
+                  aria-label={`Edit ${record.name}.`}
+                  color={'primary'}
+                  iconType={'pencil'}
+                  onClick={() => this.onEditSpaceClick(record)}
+                />
+              );
+            },
           },
           {
             available: (record: Space) => !isReservedSpace(record),
-            name: 'Delete',
-            description: 'Delete this space.',
-            onClick: this.onDeleteSpaceClick,
-            type: 'icon',
-            icon: 'trash',
-            color: 'danger',
+            render: (record: Space) => {
+              return (
+                <EuiButtonIcon
+                  aria-label={`Delete ${record.name}.`}
+                  color={'danger'}
+                  iconType={'trash'}
+                  onClick={() => this.onDeleteSpaceClick(record)}
+                />
+              );
+            },
           },
         ],
       },