TimeSeries: Fix truncated label text in legend table mode (#115647)

* fix(legend-table): remove arbitrary 600px max width for full width cells

* test(legend-table): backfill test coverage for viz legend table

* test(legend-table): backfill test coverage for viz legend table item

* refactor(legend-table): use derived theme spacing, not hard-coded values

packages/grafana-ui/src/components/VizLegend/VizLegendTable.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+
+import { VizLegendTable } from './VizLegendTable';
+import { VizLegendItem } from './types';
+
+describe('VizLegendTable', () => {
+  const mockItems: VizLegendItem[] = [
+    { label: 'Series 1', color: 'red', yAxis: 1 },
+    { label: 'Series 2', color: 'blue', yAxis: 1 },
+    { label: 'Series 3', color: 'green', yAxis: 1 },
+  ];
+
+  it('renders without crashing', () => {
+    const { container } = render(<VizLegendTable items={mockItems} placement="bottom" />);
+    expect(container.querySelector('table')).toBeInTheDocument();
+  });
+
+  it('renders all items', () => {
+    render(<VizLegendTable items={mockItems} placement="bottom" />);
+    expect(screen.getByText('Series 1')).toBeInTheDocument();
+    expect(screen.getByText('Series 2')).toBeInTheDocument();
+    expect(screen.getByText('Series 3')).toBeInTheDocument();
+  });
+
+  it('renders table headers when items have display values', () => {
+    const itemsWithStats: VizLegendItem[] = [
+      {
+        label: 'Series 1',
+        color: 'red',
+        yAxis: 1,
+        getDisplayValues: () => [
+          { numeric: 100, text: '100', title: 'Max' },
+          { numeric: 50, text: '50', title: 'Min' },
+        ],
+      },
+    ];
+    render(<VizLegendTable items={itemsWithStats} placement="bottom" />);
+    expect(screen.getByText('Max')).toBeInTheDocument();
+    expect(screen.getByText('Min')).toBeInTheDocument();
+  });
+
+  it('renders sort icon when sorted', () => {
+    const { container } = render(
+      <VizLegendTable items={mockItems} placement="bottom" sortBy="Name" sortDesc={false} />
+    );
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('calls onToggleSort when header is clicked', () => {
+    const onToggleSort = jest.fn();
+    render(<VizLegendTable items={mockItems} placement="bottom" onToggleSort={onToggleSort} isSortable={true} />);
+    const header = screen.getByText('Name');
+    header.click();
+    expect(onToggleSort).toHaveBeenCalledWith('Name');
+  });
+
+  it('does not call onToggleSort when not sortable', () => {
+    const onToggleSort = jest.fn();
+    render(<VizLegendTable items={mockItems} placement="bottom" onToggleSort={onToggleSort} isSortable={false} />);
+    const header = screen.getByText('Name');
+    header.click();
+    expect(onToggleSort).not.toHaveBeenCalled();
+  });
+
+  it('renders with long labels', () => {
+    const itemsWithLongLabels: VizLegendItem[] = [
+      {
+        label: 'This is a very long series name that should be scrollable within its table cell',
+        color: 'red',
+        yAxis: 1,
+      },
+    ];
+    render(<VizLegendTable items={itemsWithLongLabels} placement="bottom" />);
+    expect(
+      screen.getByText('This is a very long series name that should be scrollable within its table cell')
+    ).toBeInTheDocument();
+  });
+});

packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx

@@ -119,7 +119,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
   table: css({
     width: '100%',
     'th:first-child': {
-      width: '100%',
       borderBottom: `1px solid ${theme.colors.border.weak}`,
     },
   }),

packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react';
+
+import { LegendTableItem } from './VizLegendTableItem';
+import { VizLegendItem } from './types';
+
+describe('LegendTableItem', () => {
+  const mockItem: VizLegendItem = {
+    label: 'Series 1',
+    color: 'red',
+    yAxis: 1,
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(
+      <table>
+        <tbody>
+          <LegendTableItem item={mockItem} />
+        </tbody>
+      </table>
+    );
+    expect(container.querySelector('tr')).toBeInTheDocument();
+  });
+
+  it('renders label text', () => {
+    render(
+      <table>
+        <tbody>
+          <LegendTableItem item={mockItem} />
+        </tbody>
+      </table>
+    );
+    expect(screen.getByText('Series 1')).toBeInTheDocument();
+  });
+
+  it('renders with long label text', () => {
+    const longLabelItem: VizLegendItem = {
+      ...mockItem,
+      label: 'This is a very long series name that should be scrollable in the table cell',
+    };
+    render(
+      <table>
+        <tbody>
+          <LegendTableItem item={longLabelItem} />
+        </tbody>
+      </table>
+    );
+    expect(
+      screen.getByText('This is a very long series name that should be scrollable in the table cell')
+    ).toBeInTheDocument();
+  });
+
+  it('renders stat values when provided', () => {
+    const itemWithStats: VizLegendItem = {
+      ...mockItem,
+      getDisplayValues: () => [
+        { numeric: 100, text: '100', title: 'Max' },
+        { numeric: 50, text: '50', title: 'Min' },
+      ],
+    };
+    render(
+      <table>
+        <tbody>
+          <LegendTableItem item={itemWithStats} />
+        </tbody>
+      </table>
+    );
+    expect(screen.getByText('100')).toBeInTheDocument();
+    expect(screen.getByText('50')).toBeInTheDocument();
+  });
+
+  it('renders right y-axis indicator when yAxis is 2', () => {
+    const rightAxisItem: VizLegendItem = {
+      ...mockItem,
+      yAxis: 2,
+    };
+    render(
+      <table>
+        <tbody>
+          <LegendTableItem item={rightAxisItem} />
+        </tbody>
+      </table>
+    );
+    expect(screen.getByText('(right y-axis)')).toBeInTheDocument();
+  });
+
+  it('calls onLabelClick when label is clicked', () => {
+    const onLabelClick = jest.fn();
+    render(
+      <table>
+        <tbody>
+          <LegendTableItem item={mockItem} onLabelClick={onLabelClick} />
+        </tbody>
+      </table>
+    );
+    const button = screen.getByRole('button');
+    button.click();
+    expect(onLabelClick).toHaveBeenCalledWith(mockItem, expect.any(Object));
+  });
+
+  it('does not call onClick when readonly', () => {
+    const onLabelClick = jest.fn();
+    render(
+      <table>
+        <tbody>
+          <LegendTableItem item={mockItem} onLabelClick={onLabelClick} readonly={true} />
+        </tbody>
+      </table>
+    );
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+  });
+});

packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx

@@ -69,7 +69,7 @@ export const LegendTableItem = ({
 
   return (
     <tr className={cx(styles.row, className)}>
-      <td>
+      <td className={styles.labelCell}>
         <span className={styles.itemWrapper}>
           <VizLegendSeriesIcon
             color={item.color}
@@ -77,24 +77,26 @@ export const LegendTableItem = ({
             readonly={readonly}
             lineStyle={item.lineStyle}
           />
-          <button
-            disabled={readonly}
-            type="button"
-            title={item.label}
-            onBlur={onMouseOut}
-            onFocus={onMouseOver}
-            onMouseOver={onMouseOver}
-            onMouseOut={onMouseOut}
-            onClick={!readonly ? onClick : undefined}
-            className={cx(styles.label, item.disabled && styles.labelDisabled)}
-          >
-            {item.label}{' '}
-            {item.yAxis === 2 && (
-              <span className={styles.yAxisLabel}>
-                <Trans i18nKey="grafana-ui.viz-legend.right-axis-indicator">(right y-axis)</Trans>
-              </span>
-            )}
-          </button>
+          <div className={styles.labelCellInner}>
+            <button
+              disabled={readonly}
+              type="button"
+              title={item.label}
+              onBlur={onMouseOut}
+              onFocus={onMouseOver}
+              onMouseOver={onMouseOver}
+              onMouseOut={onMouseOut}
+              onClick={!readonly ? onClick : undefined}
+              className={cx(styles.label, item.disabled && styles.labelDisabled)}
+            >
+              {item.label}{' '}
+              {item.yAxis === 2 && (
+                <span className={styles.yAxisLabel}>
+                  <Trans i18nKey="grafana-ui.viz-legend.right-axis-indicator">(right y-axis)</Trans>
+                </span>
+              )}
+            </button>
+          </div>
         </span>
       </td>
       {item.getDisplayValues &&
@@ -128,6 +130,27 @@ const getStyles = (theme: GrafanaTheme2) => {
         background: rowHoverBg,
       },
     }),
+    labelCell: css({
+      label: 'LegendLabelCell',
+      maxWidth: 0,
+      width: '100%',
+    }),
+    labelCellInner: css({
+      label: 'LegendLabelCellInner',
+      display: 'block',
+      flex: 1,
+      minWidth: 0,
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      paddingRight: theme.spacing(3),
+      scrollbarWidth: 'none',
+      msOverflowStyle: 'none',
+      maskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`,
+      WebkitMaskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`,
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
+    }),
     label: css({
       label: 'LegendLabel',
       whiteSpace: 'nowrap',
@@ -135,9 +158,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       border: 'none',
       fontSize: 'inherit',
       padding: 0,
-      maxWidth: '600px',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
       userSelect: 'text',
     }),
     labelDisabled: css({