[bugfix] Hide the expansion button if a cell has actions but is not e…

…xpandable
elastic · Feb 2, 2022 · 8d1d0aa · 8d1d0aa
1 parent c1f3ce8
commit 8d1d0aa
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 11 deletions.
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -637,6 +637,7 @@ export class EuiDataGridCell extends Component<
               rowIndex={rowIndex}
               colIndex={colIndex}
               column={column}
+              isExpandable={isExpandable}
               closePopover={closeCellPopover}
               onExpandClick={() => {
                 if (popoverIsOpen) {

diff --git a/src/components/datagrid/body/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -23,7 +23,9 @@ describe('EuiDataGridCellActions', () => {
   };
 
   it('renders an expand button', () => {
-    const component = shallow(<EuiDataGridCellActions {...requiredProps} />);
+    const component = shallow(
+      <EuiDataGridCellActions {...requiredProps} isExpandable={true} />
+    );
 
     expect(component).toMatchInlineSnapshot(`
       <div
@@ -54,10 +56,11 @@ describe('EuiDataGridCellActions', () => {
     `);
   });
 
-  it('renders column cell actions as `EuiButtonIcon`s', () => {
+  it('renders cell actions as `EuiButtonIcon`s', () => {
     const component = shallow(
       <EuiDataGridCellActions
         {...requiredProps}
+        isExpandable={false}
         column={{ id: 'someId', cellActions: [() => <button />] }}
       />
     );
@@ -75,13 +78,6 @@ describe('EuiDataGridCellActions', () => {
           key="0"
           rowIndex={0}
         />
-        <EuiI18n
-          default="Click or hit enter to interact with cell content"
-          key="expand"
-          token="euiDataGridCellActions.expandButtonTitle"
-        >
-          <Component />
-        </EuiI18n>
       </div>
     `);
 
@@ -95,6 +91,39 @@ describe('EuiDataGridCellActions', () => {
       />
     `);
   });
+
+  it('renders both cell actions and expand button', () => {
+    const component = shallow(
+      <EuiDataGridCellActions
+        {...requiredProps}
+        isExpandable={true}
+        column={{ id: 'someId', cellActions: [() => <button />] }}
+      />
+    );
+
+    expect(component).toMatchInlineSnapshot(`
+      <div
+        className="euiDataGridRowCell__expandActions"
+      >
+        <Component
+          Component={[Function]}
+          closePopover={[MockFunction]}
+          colIndex={0}
+          columnId="someId"
+          isExpanded={false}
+          key="0"
+          rowIndex={0}
+        />
+        <EuiI18n
+          default="Click or hit enter to interact with cell content"
+          key="expand"
+          token="euiDataGridCellActions.expandButtonTitle"
+        >
+          <Component />
+        </EuiI18n>
+      </div>
+    `);
+  });
 });
 
 describe('EuiDataGridCellPopoverActions', () => {

diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -20,19 +20,21 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiPopoverFooter } from '../../popover';
 
 export const EuiDataGridCellActions = ({
+  isExpandable,
   closePopover,
   onExpandClick,
   column,
   rowIndex,
   colIndex,
 }: {
+  isExpandable: boolean;
   closePopover: () => void;
   onExpandClick: () => void;
   column?: EuiDataGridColumn;
   rowIndex: number;
   colIndex: number;
 }) => {
-  const expandButton = (
+  const expandButton = isExpandable ? (
     <EuiI18n
       key={'expand'}
       token="euiDataGridCellActions.expandButtonTitle"
@@ -51,7 +53,8 @@ export const EuiDataGridCellActions = ({
         />
       )}
     </EuiI18n>
-  );
+  ) : null;
+
   const additionalButtons = useMemo(() => {
     const ButtonComponent = (props: EuiButtonIconProps) => (
       <EuiButtonIcon