Revert "[EuiTable] Expand item action name to allow a function (elast…

…ic#3739)"

This reverts commit 1bf8302.

CHANGELOG.md

@@ -5,7 +5,6 @@
 - Removed `src/test` and `@types/enzyme` references from `eui.d.ts` ([#3715](https://github.com/elastic/eui/pull/3715))
 - Added `index.d.ts` file to `lib/test`  and `es/test` ([#3715](https://github.com/elastic/eui/pull/3715))
 - Added `descriptionFlexItemProps` and `fieldFlexItemProps` props to `EuiDescribedFormGroup` ([#3717](https://github.com/elastic/eui/pull/3717))
-- Expanded `EuiBasicTable`'s default action's name configuration to accept a function that returns a React node ([#3739](https://github.com/elastic/eui/pull/3739))
 
 ## [`27.0.0`](https://github.com/elastic/eui/tree/v27.0.0)
 - Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638))

src-docs/src/views/tables/actions/actions.js

@@ -141,7 +141,7 @@ export const Table = () => {
             'data-test-subj': 'action-clone',
           },
           {
-            name: item => (item.id ? 'Delete' : 'Remove'),
+            name: 'Delete',
             description: 'Delete this user',
             icon: 'trash',
             color: 'danger',

src-docs/src/views/tables/basic/props_info.js

@@ -395,7 +395,7 @@ export const propsInfo = {
           description:
             'The display name of the action (will be the button caption)',
           required: true,
-          type: { name: 'PropTypes.node | (item) => PropTypes.node' },
+          type: { name: 'PropTypes.node' },
         },
         description: {
           description: 'Describes the action (will be the button title)',

src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap

@@ -60,23 +60,3 @@ exports[`DefaultItemAction render - icon 1`] = `
   </EuiScreenReaderOnly>
 </EuiToolTip>
 `;
-
-exports[`DefaultItemAction render - name 1`] = `
-<EuiToolTip
-  content="action 1"
-  delay="long"
-  position="top"
->
-  <EuiButtonEmpty
-    color="primary"
-    flush="right"
-    isDisabled={false}
-    onClick={[Function]}
-    size="s"
-  >
-    <span>
-      xyz
-    </span>
-  </EuiButtonEmpty>
-</EuiToolTip>
-`;

src/components/basic_table/action_types.ts

@@ -28,7 +28,7 @@ type ButtonColor = EuiButtonIconColor | EuiButtonEmptyColor;
 type EuiButtonIconColorFunction<T> = (item: T) => ButtonColor;
 
 interface DefaultItemActionBase<T> {
-  name: ReactNode | ((item: T) => ReactNode);
+  name: ReactNode;
   description: string;
   onClick?: (item: T) => void;
   href?: string;

src/components/basic_table/collapsed_item_actions.test.tsx

@@ -27,7 +27,7 @@ describe('CollapsedItemActions', () => {
     const props = {
       actions: [
         {
-          name: (item: { id: string }) => `default${item.id}`,
+          name: 'default1',
           description: 'default 1',
           onClick: () => {},
         },
@@ -38,7 +38,7 @@ describe('CollapsedItemActions', () => {
         },
       ],
       itemId: 'id',
-      item: { id: '1' },
+      item: { id: 'xyz' },
       actionEnabled: (_: Action<{ id: string }>) => true,
       onFocus: (_: FocusEvent) => {},
       onBlur: () => {},

src/components/basic_table/collapsed_item_actions.tsx

@@ -152,7 +152,6 @@ export class CollapsedItemActions<T> extends Component<
           if (buttonIcon) {
             icon = isString(buttonIcon) ? buttonIcon : buttonIcon(item);
           }
-          const buttonContent = typeof name === 'function' ? name(item) : name;
 
           controls.push(
             <EuiContextMenuItem
@@ -165,7 +164,7 @@ export class CollapsedItemActions<T> extends Component<
               onClick={() =>
                 this.onClickItem(onClick ? () => onClick(item) : undefined)
               }>
-              {buttonContent}
+              {name}
             </EuiContextMenuItem>
           );
         }

src/components/basic_table/default_item_action.test.tsx

@@ -72,24 +72,6 @@ describe('DefaultItemAction', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('render - name', () => {
-    const action: EmptyButtonAction<Item> = {
-      name: item => <span>{item.id}</span>,
-      description: 'action 1',
-      type: 'button',
-      onClick: () => {},
-    };
-    const props = {
-      action,
-      enabled: true,
-      item: { id: 'xyz' },
-    };
-
-    const component = shallow(<DefaultItemAction {...props} />);
-
-    expect(component).toMatchSnapshot();
-  });
-
   test('render - icon', () => {
     const action: IconButtonAction<Item> = {
       name: <span>action1</span>,

src/components/basic_table/default_item_action.tsx

@@ -68,8 +68,6 @@ export const DefaultItemAction = <T extends {}>({
   }
 
   let button;
-  const actionContent =
-    typeof action.name === 'function' ? action.name(item) : action.name;
   if (action.type === 'icon') {
     if (!icon) {
       throw new Error(`Cannot render item action [${
@@ -91,9 +89,9 @@ export const DefaultItemAction = <T extends {}>({
           target={action.target}
           data-test-subj={action['data-test-subj']}
         />
-        {/* actionContent (action.name) is a ReactNode and must be rendered to an element and referenced by ID for screen readers */}
+        {/* action.name is a ReactNode and must be rendered to an element and referenced by ID for screen readers */}
         <EuiScreenReaderOnly>
-          <span id={ariaLabelId}>{actionContent}</span>
+          <span id={ariaLabelId}>{action.name}</span>
         </EuiScreenReaderOnly>
       </>
     );
@@ -110,7 +108,7 @@ export const DefaultItemAction = <T extends {}>({
         target={action.target}
         data-test-subj={action['data-test-subj']}
         flush="right">
-        {actionContent}
+        {action.name}
       </EuiButtonEmpty>
     );
   }