From f44529cb58708295b66b7a77df3d1ab65ac92666 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 27 Mar 2024 14:47:48 -0700
Subject: [PATCH] Add EuiTableRow Storybook for quick QA/testing

+ add one mobile fix and one temporary !important workaround found from said QA
---
 src/components/table/table_row.stories.tsx | 98 ++++++++++++++++++++++
 src/components/table/table_row.styles.ts   |  3 +-
 src/components/table/table_row_cell.tsx    | 11 ++-
 3 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 src/components/table/table_row.stories.tsx

diff --git a/src/components/table/table_row.stories.tsx b/src/components/table/table_row.stories.tsx
new file mode 100644
index 00000000000..0310aaaa0f1
--- /dev/null
+++ b/src/components/table/table_row.stories.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { EuiButtonIcon } from '../button';
+import { EuiCheckbox } from '../form';
+import {
+  EuiTable,
+  EuiTableBody,
+  EuiTableRowCell,
+  EuiTableRowCellCheckbox,
+} from './index';
+
+import { EuiTableRow, EuiTableRowProps } from './table_row';
+
+const meta: Meta<EuiTableRowProps> = {
+  title: 'Tabular Content/EuiTable/EuiTableRow',
+  component: EuiTableRow,
+};
+
+export default meta;
+type Story = StoryObj<EuiTableRowProps>;
+
+export const Playground: Story = {
+  argTypes: {
+    // For quicker/easier testing
+    onClick: { control: 'boolean' },
+  },
+  args: {
+    // @ts-ignore - using a switch for easiser testing
+    onClick: false,
+    // Set default booleans for easier toggling/testing
+    hasActions: false,
+    isExpandable: false,
+    isExpandedRow: false,
+    isSelectable: false,
+    isSelected: false,
+  },
+  render: ({
+    onClick,
+    isSelectable,
+    hasActions,
+    isExpandable,
+    isExpandedRow,
+    ...args
+  }) => (
+    // Note: This is an approximate mock of what `EuiBasicTable` does for selection/actions/expansion
+    <EuiTable tableLayout="auto">
+      <EuiTableBody>
+        <EuiTableRow
+          onClick={!!onClick ? action('onClick') : undefined}
+          isSelectable={isSelectable}
+          hasActions={hasActions}
+          isExpandable={isExpandable}
+          {...args}
+        >
+          {isSelectable && (
+            <EuiTableRowCellCheckbox>
+              <EuiCheckbox
+                id="selectRow"
+                checked={args.isSelected}
+                onChange={() => {}}
+              />
+            </EuiTableRowCellCheckbox>
+          )}
+          <EuiTableRowCell>First name</EuiTableRowCell>
+          <EuiTableRowCell>Last name</EuiTableRowCell>
+          <EuiTableRowCell>Some other data</EuiTableRowCell>
+          {hasActions && (
+            <EuiTableRowCell width="1%" hasActions={true}>
+              <EuiButtonIcon iconType="copy" />
+            </EuiTableRowCell>
+          )}
+          {isExpandable && (
+            <EuiTableRowCell width="1%" isExpander={true}>
+              <EuiButtonIcon iconType="arrowDown" />
+            </EuiTableRowCell>
+          )}
+        </EuiTableRow>
+        {isExpandedRow && (
+          <EuiTableRow isExpandedRow={isExpandedRow}>
+            <EuiTableRowCell width="100%" colSpan={100}>
+              expanded content
+            </EuiTableRowCell>
+          </EuiTableRow>
+        )}
+      </EuiTableBody>
+    </EuiTable>
+  ),
+};
diff --git a/src/components/table/table_row.styles.ts b/src/components/table/table_row.styles.ts
index 88b7007f3e1..f8b3f48dbf0 100644
--- a/src/components/table/table_row.styles.ts
+++ b/src/components/table/table_row.styles.ts
@@ -124,7 +124,8 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
       rightColumnContent: `
         position: absolute;
         ${logicalCSS('right', 0)}
-        ${logicalCSS('min-width', 0)}
+        /* TODO: remove !important once euiTableRowCell is converted to Emotion */
+        ${logicalCSS('min-width', '0 !important')}
         ${logicalCSS('width', mobileColumns.actions.width)}
 
         .euiTableCellContent {
diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx
index 8a64a79f646..16b3987f57b 100644
--- a/src/components/table/table_row_cell.tsx
+++ b/src/components/table/table_row_cell.tsx
@@ -131,6 +131,8 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
   },
   ...rest
 }) => {
+  const isResponsive = useEuiTableIsResponsive();
+
   const cellClasses = classNames('euiTableRowCell', {
     'euiTableRowCell--hasActions': hasActions,
     'euiTableRowCell--isExpander': isExpander,
@@ -169,10 +171,11 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
     euiTableCellContent__hoverItem: showOnHover,
   });
 
-  const widthValue =
-    useEuiTableIsResponsive() && mobileOptions.width
-      ? mobileOptions.width
-      : width;
+  const widthValue = isResponsive
+    ? hasActions || isExpander
+      ? undefined // On mobile, actions are shifted to a right column via CSS
+      : mobileOptions.width
+    : width;
 
   const styleObj = resolveWidthAsStyle(style, widthValue);