From b3f9f56a792c225a7583fda1dda2d88d0839e139 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Tue, 30 Jul 2024 08:44:24 -0400
Subject: [PATCH 1/4] feat: fix column growth issue

---
 .../src/DataTable/DataTable.tsx               | 134 ++++++++++--------
 .../src/labs/DataComponents/TableContent.tsx  |  49 ++++++-
 .../labs/DataComponents/tableConstants.tsx    |  19 ---
 .../src/theme/components.tsx                  |  39 ++++-
 .../DataComponents/DataComponents.stories.tsx |  64 +++++++++
 .../DataTable/DataTable.stories.tsx           |  64 +++++++++
 6 files changed, 284 insertions(+), 85 deletions(-)

diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
index ec80de53ee..83841b3742 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -61,6 +61,7 @@ import {
 import { useScrollIndication } from "./useScrollIndication";
 import styled from "@emotion/styled";
 import { EmptyState } from "../EmptyState";
+import { Button } from "../Button";
 import { Callout } from "../Callout";
 
 export type DataTableColumn<T extends DataTableRowData> = MRT_ColumnDef<T> & {
@@ -255,62 +256,6 @@ export type DataTableProps = {
   maxPages?: number;
 };
 
-const displayColumnDefOptions = {
-  "mrt-row-actions": {
-    header: "",
-    grow: true,
-    muiTableBodyCellProps: {
-      align: "right",
-      sx: {
-        overflow: "visible",
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-    muiTableHeadCellProps: {
-      align: "right",
-      sx: {
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-  },
-  "mrt-row-drag": {
-    header: "",
-    muiTableBodyCellProps: {
-      sx: {
-        minWidth: 0,
-        width: "auto",
-      },
-      className: "ods-drag-handle",
-    },
-    muiTableHeadCellProps: {
-      sx: {
-        minWidth: 0,
-        width: "auto",
-      },
-      children: (
-        // Add a spacer to simulate the width of the drag handle in the column.
-        // Without this, the head cells are offset from their body cell counterparts
-        <Box sx={{ marginInline: "-0.1rem" }}>
-          <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />
-        </Box>
-      ),
-    },
-  },
-  "mrt-row-select": {
-    muiTableHeadCellProps: {
-      padding: "checkbox",
-    },
-    muiTableBodyCellProps: {
-      padding: "checkbox",
-    },
-  },
-  "mrt-row-expand": {
-    header: "",
-  },
-};
-
 const ScrollableTableContainer = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
@@ -677,14 +622,87 @@ const DataTable = ({
       },
     },
     selectAllMode: "all",
-    displayColumnDefOptions:
-      displayColumnDefOptions as MRT_TableOptions<DataTableRowData>["displayColumnDefOptions"],
+    displayColumnDefOptions: {
+      "mrt-row-actions": {
+        header: "",
+        grow: true,
+        muiTableBodyCellProps: {
+          align: "right",
+          sx: {
+            overflow: "visible",
+            width: "unset",
+          },
+          className: "ods-actions-cell",
+        },
+        muiTableHeadCellProps: {
+          align: "right",
+          sx: {
+            width: "unset",
+          },
+          className: "ods-actions-cell",
+          children: (
+            <Box sx={{ display: "flex", visibility: "hidden" }}>
+              {rowActionButtons && rowActionButtons({ id: null })}
+              {((hasRowReordering === true && onReorderRows) ||
+                rowActionMenuItems) && (
+                <Box>
+                  <Button
+                    endIcon={<MoreIcon />}
+                    size="small"
+                    variant="floating"
+                    ariaLabel={t("table.moreactions.arialabel")}
+                    isDisabled
+                  />
+                </Box>
+              )}
+            </Box>
+          ),
+        },
+      },
+      "mrt-row-drag": {
+        header: "",
+        muiTableBodyCellProps: {
+          sx: {
+            minWidth: 0,
+            width: "auto",
+          },
+          className: "ods-drag-handle",
+        },
+        muiTableHeadCellProps: {
+          sx: {
+            minWidth: 0,
+            width: "auto",
+          },
+          children: (
+            // Add a spacer to simulate the width of the drag handle in the column.
+            // Without this, the head cells are offset from their body cell counterparts
+            <Box sx={{ marginInline: "-0.1rem" }}>
+              <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />
+            </Box>
+          ),
+        },
+      },
+      "mrt-row-select": {
+        muiTableHeadCellProps: {
+          padding: "checkbox",
+        },
+        muiTableBodyCellProps: {
+          padding: "checkbox",
+        },
+      },
+      "mrt-row-expand": {
+        header: "",
+      },
+    },
     muiTableBodyProps: () => ({
       className: rowDensityClassName,
     }),
     defaultColumn: {
       Cell: defaultCell,
     },
+    muiTableBodyCellProps: ({ column }) => ({
+      className: column.getIsResizing() ? "isResizing" : "",
+    }),
 
     // Reordering
     enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
index 67aa85ba10..e806251f17 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -40,6 +40,7 @@ import {
   DragIndicatorIcon,
 } from "../../icons.generated";
 import { Box } from "../../Box";
+import { Button } from "../../Button";
 import { TableProps, TableState, UniversalProps } from "./componentTypes";
 import { DataTableCell } from "./dataTypes";
 import {
@@ -284,9 +285,48 @@ const TableContent = ({
       ExpandMoreIcon: ChevronDownIcon,
     },
     ...dataTableImmutableSettings,
-    displayColumnDefOptions: displayColumnDefOptions satisfies Partial<
-      MRT_TableOptions<MRT_RowData>["displayColumnDefOptions"]
-    >,
+    displayColumnDefOptions: {
+      ...(displayColumnDefOptions satisfies Partial<
+        MRT_TableOptions<MRT_RowData>["displayColumnDefOptions"]
+      >),
+      "mrt-row-actions": {
+        header: "",
+        grow: true,
+        muiTableBodyCellProps: {
+          align: "right" as const,
+          sx: {
+            overflow: "visible",
+            width: "unset",
+          },
+          className: "ods-actions-cell",
+        },
+        muiTableHeadCellProps: {
+          align: "right" as const,
+          sx: {
+            width: "unset",
+          },
+          className: "ods-actions-cell",
+          children: (
+            <Box sx={{ display: "flex", visibility: "hidden" }}>
+              {tableOptions.rowActionButtons &&
+                tableOptions.rowActionButtons({ id: null })}
+              {((hasRowReordering === true && onReorderRows) ||
+                tableOptions.rowActionMenuItems) && (
+                <Box>
+                  <Button
+                    endIcon={<MoreIcon />}
+                    size="small"
+                    variant="floating"
+                    ariaLabel={t("table.moreactions.arialabel")}
+                    isDisabled
+                  />
+                </Box>
+              )}
+            </Box>
+          ),
+        },
+      },
+    },
     muiTableProps: {
       ref: tableContentRef,
     },
@@ -350,6 +390,9 @@ const TableContent = ({
         ? "isSorted"
         : "isUnsorted",
     }),
+    muiTableBodyCellProps: ({ column }) => ({
+      className: column.getIsResizing() ? "isResizing" : "",
+    }),
     enableSorting: tableOptions.hasSorting === true, // I don't know why this needs to be true, but it still works if undefined otherwise
     onSortingChange: (sortingUpdater) => {
       const newSortVal =
diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
index 1bc3058252..17277587ec 100644
--- a/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataComponents/tableConstants.tsx
@@ -44,25 +44,6 @@ export const dataTableImmutableSettings = {
 };
 
 export const displayColumnDefOptions = {
-  "mrt-row-actions": {
-    header: "",
-    grow: true,
-    muiTableBodyCellProps: {
-      align: "right" as const,
-      sx: {
-        overflow: "visible",
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-    muiTableHeadCellProps: {
-      align: "right" as const,
-      sx: {
-        width: "unset",
-      },
-      className: "ods-actions-cell",
-    },
-  },
   "mrt-row-drag": {
     header: "",
     muiTableBodyCellProps: {
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 96ab88abb2..0485fd380d 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -2561,15 +2561,33 @@ export const components = ({
           textAlign: "start",
           verticalAlign: "baseline",
           padding: `0 ${odysseyTokens.Spacing3} !important`,
+          overflow: "visible !important",
+          position: "relative",
           overflowWrap: "break-word",
 
           [`&.${tableCellClasses.root}`]: {
             borderTop: `none !important`,
-            borderRight: `none !important`,
             borderBottom: `none !important`,
             borderLeft: `none !important`,
           },
 
+          ["&::after"]: {
+            background: "transparent !important",
+          },
+
+          [`.${tableBodyClasses.root} &.${tableCellClasses.root}`]: {
+            borderRight: `none !important`,
+          },
+
+          [`&.${tableCellClasses.root}.isResizing::after`]: {
+            borderRightColor: odysseyTokens.BorderColorPrimaryControl,
+            borderRightStyle: odysseyTokens.BorderStyleMain,
+            borderRightWidth: 2,
+            content: '""',
+            position: "absolute",
+            right: 0,
+          },
+
           [`.MuiTable-root.narrow &:last-child`]: {
             width: "auto",
           },
@@ -2621,10 +2639,6 @@ export const components = ({
               width: odysseyTokens.Spacing2,
             },
 
-          [`&::after`]: {
-            display: "none",
-          },
-
           ...(ownerState.variant === "number" && {
             textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"',
@@ -2749,16 +2763,31 @@ export const components = ({
           [`.${tableBodyClasses.root} &`]: {
             // Target is 48px height
             paddingBlock: odysseyTokens.Spacing3,
+
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing3} !important`,
+              bottom: `-${odysseyTokens.Spacing3} !important`,
+            },
           },
 
           [`.${tableBodyClasses.root}.MuiTableBody-compact &`]: {
             // Target is 36px height
             paddingBlock: odysseyTokens.Spacing2,
+
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing2} !important`,
+              bottom: `-${odysseyTokens.Spacing2} !important`,
+            },
           },
 
           [`.${tableBodyClasses.root}.MuiTableBody-spacious &`]: {
             // Target is 56px height
             paddingBlock: odysseyTokens.Spacing4,
+
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing4} !important`,
+              bottom: `-${odysseyTokens.Spacing4} !important`,
+            },
           },
 
           "&.isDragTarget": {
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
index 10e8a033db..3851bfd007 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataComponents/DataComponents.stories.tsx
@@ -25,6 +25,8 @@ import {
   DataTable,
   DataStack,
   UpdateFiltersOrValues,
+  DataColumns,
+  DataTableRowSelectionState,
 } from "@okta/odyssey-react-mui/labs";
 import { PauseIcon, RefreshIcon } from "@okta/odyssey-react-mui/icons";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -919,3 +921,65 @@ export const CustomFilterWithDefaultVariant: StoryObj<DataViewMetaProps> = {
     );
   },
 };
+
+export const ColumnGrowDemo: StoryObj<DataViewMetaProps> = {
+  render: function C() {
+    const columns = useMemo(
+      (): DataColumns => [
+        {
+          accessorKey: "name",
+          header: "Name",
+          grow: true,
+        },
+        {
+          accessorKey: "apps",
+          header: "Apps",
+        },
+        {
+          accessorKey: "users",
+          header: "Users assigned",
+        },
+      ],
+      [],
+    );
+
+    const getData = useCallback(
+      () => [
+        {
+          name: "Core engineering access",
+          apps: 5,
+          users: 10,
+        },
+        {
+          name: "Core sales access",
+          apps: 8,
+          users: 28,
+        },
+        {
+          name: "Super user access",
+          apps: 3,
+          users: 1,
+        },
+      ],
+      [],
+    );
+
+    const actionMenuItems = (selectedRows: DataTableRowSelectionState) => (
+      <>
+        <MenuItem onClick={() => console.log(selectedRows)}>Action 1</MenuItem>
+        <MenuItem onClick={() => console.log(selectedRows)}>Action 2</MenuItem>
+      </>
+    );
+
+    return (
+      <DataTable
+        hasSearch
+        hasColumnResizing
+        hasSorting
+        columns={columns}
+        getData={getData}
+        rowActionMenuItems={actionMenuItems}
+      />
+    );
+  },
+};
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/DataTable.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/DataTable.stories.tsx
index ddfc0bdd12..ad04db9f02 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/DataTable.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/DataTable/DataTable.stories.tsx
@@ -27,6 +27,8 @@ import {
   DataTableRowSelectionState,
   MenuItem,
   densityValues,
+  DataTableColumn,
+  DataTableRowData,
 } from "@okta/odyssey-react-mui";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import {
@@ -1010,3 +1012,65 @@ export const Truncation: StoryObj<DataTableProps> = {
     return <DataTable columns={columns} getData={getData} hasColumnResizing />;
   },
 };
+
+export const ColumnGrowDemo: StoryObj<DataTableProps> = {
+  render: function C() {
+    const columns = useMemo(
+      (): DataTableColumn<DataTableRowData>[] => [
+        {
+          accessorKey: "name",
+          header: "Name",
+          grow: true,
+        },
+        {
+          accessorKey: "apps",
+          header: "Apps",
+        },
+        {
+          accessorKey: "users",
+          header: "Users assigned",
+        },
+      ],
+      [],
+    );
+
+    const getData = useCallback(
+      () => [
+        {
+          name: "Core engineering access",
+          apps: 5,
+          users: 10,
+        },
+        {
+          name: "Core sales access",
+          apps: 8,
+          users: 28,
+        },
+        {
+          name: "Super user access",
+          apps: 3,
+          users: 1,
+        },
+      ],
+      [],
+    );
+
+    const actionMenuItems = (selectedRows: DataTableRowSelectionState) => (
+      <>
+        <MenuItem onClick={() => console.log(selectedRows)}>Action 1</MenuItem>
+        <MenuItem onClick={() => console.log(selectedRows)}>Action 2</MenuItem>
+      </>
+    );
+
+    return (
+      <DataTable
+        hasSearch
+        hasColumnResizing
+        hasSorting
+        columns={columns}
+        getData={getData}
+        rowActionMenuItems={actionMenuItems}
+      />
+    );
+  },
+};

From f78419f5dfd7bb6445f3e0ba8246fbb0e7000018 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Tue, 6 Aug 2024 11:11:49 -0400
Subject: [PATCH 2/4] fix: add waitBeforeCapture to applitools

---
 packages/odyssey-storybook/applitools.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/odyssey-storybook/applitools.config.js b/packages/odyssey-storybook/applitools.config.js
index 7210a87c89..8270c58dd3 100644
--- a/packages/odyssey-storybook/applitools.config.js
+++ b/packages/odyssey-storybook/applitools.config.js
@@ -39,6 +39,7 @@ const applitoolsConfig = {
   runInDocker: true,
   serverUrl: "https://oktaeyes.applitools.com",
   testConcurrency: 20,
+  waitBeforeCapture: 1000,
 };
 
 module.exports = applitoolsConfig;

From a1331a54eee5f6c0a24fb5be8acae33b5f959014 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:25:36 -0400
Subject: [PATCH 3/4] Update
 packages/odyssey-react-mui/src/DataTable/DataTable.tsx

Co-authored-by: Kevin Ghadyani <97464104+KevinGhadyani-Okta@users.noreply.github.com>
---
 packages/odyssey-react-mui/src/DataTable/DataTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
index 83841b3742..4f8511491d 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -643,7 +643,7 @@ const DataTable = ({
           children: (
             <Box sx={{ display: "flex", visibility: "hidden" }}>
               {rowActionButtons && rowActionButtons({ id: null })}
-              {((hasRowReordering === true && onReorderRows) ||
+              {((hasRowReordering && onReorderRows) ||
                 rowActionMenuItems) && (
                 <Box>
                   <Button

From 3e85d68bafe8a25a77d8c2440b9a5449168aa895 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Tue, 6 Aug 2024 16:56:20 -0400
Subject: [PATCH 4/4] refactor: run prettier

---
 packages/odyssey-react-mui/src/DataTable/DataTable.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
index 4f8511491d..36172e33d4 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -643,8 +643,7 @@ const DataTable = ({
           children: (
             <Box sx={{ display: "flex", visibility: "hidden" }}>
               {rowActionButtons && rowActionButtons({ id: null })}
-              {((hasRowReordering && onReorderRows) ||
-                rowActionMenuItems) && (
+              {((hasRowReordering && onReorderRows) || rowActionMenuItems) && (
                 <Box>
                   <Button
                     endIcon={<MoreIcon />}