fix pivot table overflow (#47102)

* fix pivot tables overflow & edit styles

* Update Loki Snapshots

---------

Co-authored-by: Metabase Automation <github-automation@metabase.com>

frontend/src/metabase/visualizations/types/visualization.ts

@@ -67,8 +67,13 @@ export type OnChangeCardAndRunOpts = {
 
 export type OnChangeCardAndRun = (opts: OnChangeCardAndRunOpts) => void;
 
+export type ColumnSettings = OptionsType & {
+  "pivot_table.column_show_totals"?: boolean;
+  [key: string]: unknown;
+};
+
 export type ComputedVisualizationSettings = VisualizationSettings & {
-  column?: (col: RemappingHydratedDatasetColumn) => Record<string, unknown>;
+  column?: (col: RemappingHydratedDatasetColumn) => ColumnSettings;
 };
 
 export interface StaticVisualizationProps {
@@ -96,6 +101,7 @@ export interface VisualizationProps {
   showTitle: boolean;
   isDashboard: boolean;
   isEditing: boolean;
+  isNightMode: boolean;
   isSettings: boolean;
   showAllLegendItems?: boolean;
   hovered?: HoveredObject;

frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.stories.tsx

@@ -4,10 +4,11 @@ import {
   SdkVisualizationWrapper,
   VisualizationWrapper,
 } from "__support__/storybook";
+import { Box } from "metabase/ui";
 
 import { PivotTable } from "./PivotTable";
 import { PivotTableTestWrapper } from "./pivot-table-test-mocks";
-import { HORIZONTAL_SCROLL_43215 } from "./stories-data";
+import { PIVOT_3_ROWS_NO_COLUMNS } from "./stories-data";
 
 export default {
   title: "viz/PivotTable",
@@ -55,10 +56,27 @@ export const EmbeddingTheme: Story = () => {
 export const HorizontalScroll43215: Story = () => {
   return (
     <VisualizationWrapper>
-      <PivotTableTestWrapper
-        data={HORIZONTAL_SCROLL_43215.data}
-        initialSettings={HORIZONTAL_SCROLL_43215.initialSettings}
-      />
+      <Box h="400px" w="600px">
+        <PivotTableTestWrapper
+          data={PIVOT_3_ROWS_NO_COLUMNS.data}
+          initialSettings={PIVOT_3_ROWS_NO_COLUMNS.initialSettings}
+        />
+      </Box>
+    </VisualizationWrapper>
+  );
+};
+
+export const OuterHorizontalScroll: Story = () => {
+  return (
+    <VisualizationWrapper>
+      <Box h="400px" w="320px">
+        <PivotTableTestWrapper
+          data={PIVOT_3_ROWS_NO_COLUMNS.data}
+          initialSettings={PIVOT_3_ROWS_NO_COLUMNS.initialSettings}
+          containerWidth
+          containerHeight
+        />
+      </Box>
     </VisualizationWrapper>
   );
 };

frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx

@@ -146,11 +146,14 @@ export const PivotTableTopLeftCellsContainer = styled.div<PivotTableTopLeftCells
 interface PivotTableRootProps {
   isDashboard?: boolean;
   isNightMode?: boolean;
+  shouldOverflow?: boolean;
+  isEditing?: boolean;
 }
 
 export const PivotTableRoot = styled.div<PivotTableRootProps>`
   height: 100%;
-  overflow: auto;
+  overflow-y: hidden;
+  overflow-x: ${props => (props.shouldOverflow ? "auto" : "hidden")};
   font-size: ${({ theme }) => theme.other.pivotTable.cell.fontSize};
 
   ${props =>
@@ -159,6 +162,26 @@ export const PivotTableRoot = styled.div<PivotTableRootProps>`
           border-top: 1px solid var(--mb-color-border) (props);
         `
       : null}
+
+  ${props =>
+    props.isEditing
+      ? css`
+          & {
+            user-select: none;
+          }
+
+          &::-webkit-scrollbar,
+          & *::-webkit-scrollbar {
+            display: none;
+          }
+
+          &,
+          & * {
+            scrollbar-width: none; /* Firefox */
+            -ms-overflow-style: none; /* IE and Edge */
+          }
+        `
+      : null}
 `;
 
 export const PivotTableSettingLabel = styled.span`

frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx

@@ -24,7 +24,7 @@ import {
   getDefaultSize,
   getMinSize,
 } from "metabase/visualizations/shared/utils/sizes";
-import type { DatasetData, VisualizationSettings } from "metabase-types/api";
+import type { VisualizationProps } from "metabase/visualizations/types";
 import type { State } from "metabase-types/store";
 
 import {
@@ -60,24 +60,12 @@ import {
   topHeaderCellSizeAndPositionGetter,
 } from "./utils";
 
-const MIN_USABLE_BODY_WIDTH = 300;
+const MIN_USABLE_BODY_WIDTH = 240;
 
 const mapStateToProps = (state: State) => ({
   fontFamily: getSetting(state, "application-font"),
 });
 
-interface PivotTableProps {
-  data: DatasetData;
-  settings: VisualizationSettings;
-  width: number;
-  height: number;
-  onUpdateVisualizationSettings: (settings: VisualizationSettings) => void;
-  isNightMode: boolean;
-  isDashboard: boolean;
-  fontFamily?: string;
-  onVisualizationClick: (options: any) => void;
-}
-
 function _PivotTable({
   data,
   settings,
@@ -87,9 +75,11 @@ function _PivotTable({
   isNightMode,
   isDashboard,
   fontFamily,
+  isEditing,
   onVisualizationClick,
-}: PivotTableProps) {
+}: VisualizationProps) {
   const [viewPortWidth, setViewPortWidth] = useState(width);
+  const [shouldOverflow, setShouldOverflow] = useState(false);
   const [gridElement, setGridElement] = useState<HTMLElement | null>(null);
   const columnWidthSettings = settings["pivot_table.column_widths"];
 
@@ -145,7 +135,14 @@ function _PivotTable({
 
   function isColumnCollapsible(columnIndex: number) {
     const columns = data.cols.filter(col => !isPivotGroupColumn(col));
-    const { [COLUMN_SHOW_TOTALS]: showTotals } = settings.column(
+    if (typeof settings.column != "function") {
+      throw new Error(
+        `Invalid pivot table settings format, missing nested column settings: ${JSON.stringify(
+          settings,
+        )}`,
+      );
+    }
+    const { [COLUMN_SHOW_TOTALS]: showTotals } = settings.column!(
       columns[columnIndex],
     );
     return showTotals;
@@ -295,7 +292,9 @@ function _PivotTable({
     );
 
     const minUsableBodyWidth = Math.min(MIN_USABLE_BODY_WIDTH, fullBodyWidth);
-    if (availableBodyWidth < minUsableBodyWidth) {
+    const shouldOverflow = availableBodyWidth < minUsableBodyWidth;
+    setShouldOverflow(shouldOverflow);
+    if (shouldOverflow) {
       setViewPortWidth(leftHeaderWidth + minUsableBodyWidth);
     } else {
       setViewPortWidth(width);
@@ -336,7 +335,7 @@ function _PivotTable({
     if (!clicked) {
       return undefined;
     }
-    return (e: React.SyntheticEvent) =>
+    return (e: React.MouseEvent) =>
       onVisualizationClick({
         ...clicked,
         event: e.nativeEvent,
@@ -346,6 +345,8 @@ function _PivotTable({
 
   return (
     <PivotTableRoot
+      shouldOverflow={shouldOverflow}
+      isEditing={isEditing}
       isDashboard={isDashboard}
       isNightMode={isNightMode}
       data-testid="pivot-table"
@@ -486,7 +487,6 @@ function _PivotTable({
                       aria-label={PIVOT_TABLE_BODY_LABEL}
                       width={viewPortWidth - leftHeaderWidth}
                       height={bodyHeight}
-                      className={CS.textDark}
                       rowCount={rowCount}
                       columnCount={columnCount}
                       rowHeight={CELL_HEIGHT}
@@ -539,7 +539,7 @@ function _PivotTable({
 }
 
 const PivotTable = ExplicitSize<
-  PivotTableProps & {
+  VisualizationProps & {
     className?: string;
   }
 >({

frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTableCell.tsx

@@ -24,7 +24,7 @@ interface CellProps {
   isBorderedHeader?: boolean;
   isTransparent?: boolean;
   hasTopBorder?: boolean;
-  onClick?: ((e: React.SyntheticEvent) => void) | undefined;
+  onClick?: ((e: React.MouseEvent) => void) | undefined;
   onResize?: (newWidth: number) => void;
 }
 
@@ -40,7 +40,7 @@ interface CellProps {
   isBorderedHeader?: boolean;
   isTransparent?: boolean;
   hasTopBorder?: boolean;
-  onClick?: ((e: React.SyntheticEvent) => void) | undefined;
+  onClick?: ((e: React.MouseEvent) => void) | undefined;
   onResize?: (newWidth: number) => void;
   showTooltip?: boolean;
 }
@@ -114,7 +114,7 @@ export function Cell({
 
 type CellClickHandler = (
   clicked: PivotTableClicked,
-) => ((e: React.SyntheticEvent) => void) | undefined;
+) => ((e: React.MouseEvent) => void) | undefined;
 
 interface TopHeaderCellProps {
   item: HeaderItem;

frontend/src/metabase/visualizations/visualizations/PivotTable/pivot-table-test-mocks.tsx

 import { useState } from "react";
 
-import { Box } from "metabase/ui";
 import type { DatasetColumn, VisualizationSettings } from "metabase-types/api";
 
 import { PivotTable } from "./PivotTable";
@@ -85,18 +84,16 @@ export function PivotTableTestWrapper(props?: any) {
   );
 
   return (
-    <Box h="400px" w="600px">
-      <PivotTable
-        settings={vizSettings}
-        data={{ rows, cols }}
-        onVisualizationClick={() => {}}
-        onUpdateVisualizationSettings={newSettings =>
-          setVizSettings({ ...vizSettings, ...newSettings })
-        }
-        isNightMode={false}
-        isDashboard={false}
-        {...props}
-      />
-    </Box>
+    <PivotTable
+      settings={vizSettings}
+      data={{ rows, cols }}
+      onVisualizationClick={() => {}}
+      onUpdateVisualizationSettings={newSettings =>
+        setVizSettings({ ...vizSettings, ...newSettings })
+      }
+      isNightMode={false}
+      isDashboard={false}
+      {...props}
+    />
   );
 }

frontend/src/metabase/visualizations/visualizations/PivotTable/stories-data.ts

@@ -85,7 +85,7 @@ const pivotSettings = {
   column_settings: {},
 };
 
-export const HORIZONTAL_SCROLL_43215 = {
+export const PIVOT_3_ROWS_NO_COLUMNS = {
   data: {
     cols,
     rows,