From 6ee0a40f3e0de98ccb49b142d0cd806af9fcb9c0 Mon Sep 17 00:00:00 2001 From: Jordan Koschei Date: Thu, 25 Jul 2024 16:35:09 -0400 Subject: [PATCH 1/7] fix: fixed the column resizing --- .../src/DataTable/DataTable.tsx | 19 +++++++++----- .../src/labs/DataComponents/TableContent.tsx | 26 ++++++++++++++----- .../src/theme/components.tsx | 17 ++++++++++++ 3 files changed, 50 insertions(+), 12 deletions(-) diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx index ec80de53ee..f84698f952 100644 --- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx +++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx @@ -639,6 +639,16 @@ const DataTable = ({ [columnIds], ) as string[]; + const shouldDisplayRowActions = useMemo( + () => + (hasRowReordering === true && onReorderRows) || + rowActionButtons || + rowActionMenuItems + ? true + : false, + [hasRowReordering, onReorderRows, rowActionButtons, rowActionMenuItems], + ); + const dataTable = useMaterialReactTable({ columns: columns, data: data, @@ -706,12 +716,7 @@ const DataTable = ({ }), // Row actions - enableRowActions: - (hasRowReordering === true && onReorderRows) || - rowActionButtons || - rowActionMenuItems - ? true - : false, + enableRowActions: shouldDisplayRowActions, positionActionsColumn: "last" as MRT_TableOptions["positionActionsColumn"], renderRowActions: ({ row }) => renderRowActions({ row }), @@ -746,6 +751,8 @@ const DataTable = ({ // Refs muiTableProps: { ref: tableContentRef, + className: + !shouldDisplayRowActions && hasColumnResizing ? "remove-last-row" : "", }, muiTableContainerProps: { diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx index 67aa85ba10..d48b316b85 100644 --- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx +++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx @@ -266,6 +266,21 @@ const TableContent = ({ [innerWidthStyle, emptyState], ); + const shouldDisplayRowActions = useMemo( + () => + (hasRowReordering === true && onReorderRows) || + tableOptions.rowActionButtons || + tableOptions.rowActionMenuItems + ? true + : false, + [ + hasRowReordering, + onReorderRows, + tableOptions.rowActionButtons, + tableOptions.rowActionMenuItems, + ], + ); + const dataTable = useMaterialReactTable({ data: !isEmpty && !isNoResults ? data : [], columns, @@ -289,6 +304,10 @@ const TableContent = ({ >, muiTableProps: { ref: tableContentRef, + className: + !shouldDisplayRowActions && tableOptions.hasColumnResizing + ? "remove-last-row" + : "", }, muiTableContainerProps: { ref: tableInnerContainerRef, @@ -300,12 +319,7 @@ const TableContent = ({ defaultColumn: { Cell: defaultCell, }, - enableRowActions: - (hasRowReordering === true && onReorderRows) || - tableOptions.rowActionButtons || - tableOptions.rowActionMenuItems - ? true - : false, + enableRowActions: shouldDisplayRowActions, renderRowActions: ({ row }) => renderRowActions({ row }), enableRowOrdering: hasRowReordering && Boolean(onReorderRows), enableRowDragging: hasRowReordering && Boolean(onReorderRows), diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 96ab88abb2..31b432372d 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -2621,6 +2621,23 @@ export const components = ({ width: odysseyTokens.Spacing2, }, + // TEST OF RESIZING + [`.remove-last-row .${tableHeadClasses.root} &:last-of-type, .remove-last-row .${tableBodyClasses.root} &:last-of-type`]: + { + display: "none", + }, + + [`.remove-last-row .${tableHeadClasses.root} &:nth-last-of-type(2), .remove-last-row .${tableBodyClasses.root} &:nth-last-of-type(2)`]: + { + borderTopRightRadius: odysseyTokens.Spacing2, + borderBottomRightRadius: odysseyTokens.Spacing2, + flexGrow: 1, + + [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: { + display: "none", + }, + }, + [`&::after`]: { display: "none", }, From 66710eb4785017d7cb4a3ff78271f0ddada07b37 Mon Sep 17 00:00:00 2001 From: Jordan Koschei Date: Thu, 25 Jul 2024 16:42:03 -0400 Subject: [PATCH 2/7] fix: update active color of resize handle --- packages/odyssey-react-mui/src/DataTable/DataTable.tsx | 4 +++- .../src/labs/DataComponents/TableContent.tsx | 2 +- packages/odyssey-react-mui/src/theme/components.tsx | 9 +++++++-- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx index f84698f952..28afa1dd16 100644 --- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx +++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx @@ -752,7 +752,9 @@ const DataTable = ({ muiTableProps: { ref: tableContentRef, className: - !shouldDisplayRowActions && hasColumnResizing ? "remove-last-row" : "", + !shouldDisplayRowActions && hasColumnResizing + ? "ods-hide-spacer-column" + : "", }, muiTableContainerProps: { diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx index d48b316b85..0ca38c7cd5 100644 --- a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx +++ b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx @@ -306,7 +306,7 @@ const TableContent = ({ ref: tableContentRef, className: !shouldDisplayRowActions && tableOptions.hasColumnResizing - ? "remove-last-row" + ? "ods-hide-spacer-column" : "", }, muiTableContainerProps: { diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 31b432372d..03e650d152 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -2622,12 +2622,12 @@ export const components = ({ }, // TEST OF RESIZING - [`.remove-last-row .${tableHeadClasses.root} &:last-of-type, .remove-last-row .${tableBodyClasses.root} &:last-of-type`]: + [`.ods-hide-spacer-column .${tableHeadClasses.root} &:last-of-type, .ods-hide-spacer-column .${tableBodyClasses.root} &:last-of-type`]: { display: "none", }, - [`.remove-last-row .${tableHeadClasses.root} &:nth-last-of-type(2), .remove-last-row .${tableBodyClasses.root} &:nth-last-of-type(2)`]: + [`.ods-hide-spacer-column .${tableHeadClasses.root} &:nth-last-of-type(2), .ods-hide-spacer-column .${tableBodyClasses.root} &:nth-last-of-type(2)`]: { borderTopRightRadius: odysseyTokens.Spacing2, borderBottomRightRadius: odysseyTokens.Spacing2, @@ -2680,6 +2680,11 @@ export const components = ({ [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: { marginInlineEnd: `-${odysseyTokens.Spacing3}`, + + [`&:active .${dividerClasses.vertical}`]: { + borderColor: odysseyTokens.HueNeutral400, + opacity: 1, + }, }, [`& .Mui-TableHeadCell-Content-Wrapper`]: { From d2c2f5757a86142eeb7e4b670a7526f11bc0d90e Mon Sep 17 00:00:00 2001 From: Jordan Koschei Date: Tue, 6 Aug 2024 11:49:06 -0400 Subject: [PATCH 3/7] 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 f44066b128cdf02444eae61dbdb6ebe6da68f4e2 Mon Sep 17 00:00:00 2001 From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com> Date: Tue, 6 Aug 2024 16:26:26 -0400 Subject: [PATCH 4/7] 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 28afa1dd16..a38edf2460 100644 --- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx +++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx @@ -639,7 +639,7 @@ const DataTable = ({ [columnIds], ) as string[]; - const shouldDisplayRowActions = useMemo( + const hasVisibleActionRows = useMemo( () => (hasRowReordering === true && onReorderRows) || rowActionButtons || From cb48734bb0877178bf55f3bbd7229805442e8f9f Mon Sep 17 00:00:00 2001 From: Jordan Koschei Date: Tue, 6 Aug 2024 16:28:00 -0400 Subject: [PATCH 5/7] fix: remove unnecessary TEST comment --- packages/odyssey-react-mui/src/theme/components.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 673257c392..0e3660ef11 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -2616,7 +2616,6 @@ export const components = ({ width: odysseyTokens.Spacing2, }, - // TEST OF RESIZING [`.ods-hide-spacer-column .${tableHeadClasses.root} &:last-of-type, .ods-hide-spacer-column .${tableBodyClasses.root} &:last-of-type`]: { display: "none", From ce4e406b233025230a08ca0a8eebc857e9d1a6e8 Mon Sep 17 00:00:00 2001 From: Jordan Koschei Date: Tue, 6 Aug 2024 16:42:38 -0400 Subject: [PATCH 6/7] fix: update const name --- 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 a38edf2460..28afa1dd16 100644 --- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx +++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx @@ -639,7 +639,7 @@ const DataTable = ({ [columnIds], ) as string[]; - const hasVisibleActionRows = useMemo( + const shouldDisplayRowActions = useMemo( () => (hasRowReordering === true && onReorderRows) || rowActionButtons || From cd62305a90141f615609f9fd525359987294e870 Mon Sep 17 00:00:00 2001 From: Jordan Koschei Date: Wed, 7 Aug 2024 13:53:30 -0400 Subject: [PATCH 7/7] fix: address linter error --- packages/odyssey-react-mui/src/theme/components.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 02cd92165c..d0d1ef650b 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -2566,10 +2566,6 @@ export const components = ({ borderLeft: `none !important`, }, - ["&::after"]: { - background: "transparent !important", - }, - [`.${tableBodyClasses.root} &.${tableCellClasses.root}`]: { borderRight: `none !important`, },