From d2fc0af659dd4bd6419048edb885b7930635285a Mon Sep 17 00:00:00 2001 From: balajisoundar Date: Mon, 15 Apr 2024 12:21:08 +0530 Subject: [PATCH] fix: [Table Widget] Remove unnecessary scrollbar when page size fits in available height (#32327) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes https://github.com/appsmithorg/appsmith/issues/17857 ## Automation /ok-to-test tags="@tag.Table" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: a0001d83d5826441c0e0dde59100b8eb5732974b > Cypress dashboard url: Click here! --- .../TableV2/TableV2_GeneralProperty_spec.js | 2 +- .../Widgets/TableV2/scrollbar_spec.ts | 32 +++ .../cypress/fixtures/Table/ScrollbarDSL.json | 211 ++++++++++++++++++ .../widgets/TableWidgetV2/component/Table.tsx | 13 +- .../component/TableStyledWrappers.tsx | 23 +- .../component/cellComponents/Button.tsx | 2 +- 6 files changed, 269 insertions(+), 14 deletions(-) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts create mode 100644 app/client/cypress/fixtures/Table/ScrollbarDSL.json diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_GeneralProperty_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_GeneralProperty_spec.js index aeaebdfd71..ea9ad97ea2 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_GeneralProperty_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_GeneralProperty_spec.js @@ -181,7 +181,7 @@ describe( cy.get("[data-value='SHORT']").click({ force: true }); cy.wait(2000); deployMode.DeployApp(); - cy.readTableV2dataValidateCSS("0", "1", "height", "29px", true); + cy.readTableV2dataValidateCSS("0", "1", "height", "30px", true); }); }, ); diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts new file mode 100644 index 0000000000..46ea5ab022 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts @@ -0,0 +1,32 @@ +import { + entityExplorer, + propPane, + agHelper, + draggableWidgets, + deployMode, + table, + locators, +} from "../../../../../support/Objects/ObjectsCore"; + +describe( + "Table widget v2: tableData change test", + { tags: ["@tag.Widget", "@tag.Table"] }, + function () { + before(() => { + agHelper.AddDsl("Table/ScrollbarDSL"); + }); + + it("1. Table body should not have the scrollbar", function () { + let tableHeight = 0; + + cy.get(".t--draggable-tablewidgetv2 .table").then(($table) => { + tableHeight = $table[0].clientHeight; + }); + + cy.get(".t--draggable-tablewidgetv2 .table .simplebar-content").then( + ($scrollBox) => + expect($scrollBox[0].clientHeight).to.be.equal(tableHeight), + ); + }); + }, +); diff --git a/app/client/cypress/fixtures/Table/ScrollbarDSL.json b/app/client/cypress/fixtures/Table/ScrollbarDSL.json new file mode 100644 index 0000000000..877596f3e6 --- /dev/null +++ b/app/client/cypress/fixtures/Table/ScrollbarDSL.json @@ -0,0 +1,211 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 4896, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 560, + "containerStyle": "none", + "snapRows": 124, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 89, + "minHeight": 1292, + "dynamicTriggerPathList": [], + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", + "borderColor": "#E0DEDE", + "onSort": "{{\n Select_public_users2.run();\n Total_record_public_users2.run()\n }}", + "isVisibleDownload": false, + "iconSVG": "/static/media/icon.e6911f8bb94dc6c4a102a74740c41763.svg", + "topRow": 0, + "isSortable": true, + "onPageChange": "{{\n Select_public_users2.run();\n Total_record_public_users2.run()\n }}", + "type": "TABLE_WIDGET_V2", + "inlineEditingSaveOption": "ROW_LEVEL", + "animateLoading": true, + "dynamicBindingPathList": [ + { + "key": "accentColor" + }, + { + "key": "borderRadius" + }, + { + "key": "boxShadow" + }, + { + "key": "totalRecordsCount" + }, + { + "key": "tableData" + }, + { + "key": "primaryColumns.i.computedValue" + }, + { + "key": "primaryColumns.i.buttonColor" + }, + { + "key": "primaryColumns.i.borderRadius" + }, + { + "key": "primaryColumns.i.boxShadow" + } + ], + "needsHeightForContent": true, + "leftColumn": 0, + "delimiter": ",", + "defaultSelectedRowIndex": 0, + "showInlineEditingOptionDropdown": true, + "flexVerticalAlignment": "start", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isVisibleFilters": true, + "isVisible": true, + "enableClientSideSearch": false, + "version": 2, + "totalRecordsCount": "{{Total_record_public_users2.data[0].count}}", + "tags": [ + "Suggested", + "Display" + ], + "isLoading": false, + "onSearchTextChanged": "{{\n Select_public_users2.run();\n Total_record_public_users2.run()\n }}", + "childStylesheet": { + "button": { + "buttonColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "none" + }, + "menuButton": { + "menuColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "none" + }, + "iconButton": { + "buttonColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "none" + }, + "editActions": { + "saveButtonColor": "{{appsmith.theme.colors.primaryColor}}", + "saveBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "discardButtonColor": "{{appsmith.theme.colors.primaryColor}}", + "discardBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" + } + }, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "columnUpdatedAt": 1712818407993, + "primaryColumnId": "id", + "defaultSelectedRowIndices": [ + 0 + ], + "needsErrorInfo": false, + "mobileBottomRow": 37, + "widgetName": "Table1", + "defaultPageSize": 0, + "columnOrder": [ + "i" + ], + "dynamicPropertyPathList": [ + { + "key": "tableData" + } + ], + "compactMode": "DEFAULT", + "displayName": "Table", + "bottomRow": 56, + "columnWidthMap": {}, + "parentRowSpace": 10, + "hideCard": false, + "onAddNewRowSave": "{{Insert_public_users2.run(() => {\n showAlert(\"Successfully created!\");\n Select_public_users2.run()\n }, () => {\n showAlert(\"Unable to create!\");\n })}}", + "mobileRightColumn": 49, + "parentColumnSpace": 11.890625, + "dynamicTriggerPathList": [ + { + "key": "onPageChange" + }, + { + "key": "onSearchTextChanged" + }, + { + "key": "onSort" + }, + { + "key": "onAddNewRowSave" + } + ], + "borderWidth": "1", + "primaryColumns": { + "i": { + "allowCellWrapping": false, + "allowSameOptionsInNewRow": true, + "index": 0, + "width": 150, + "originalId": "i", + "id": "i", + "alias": "i", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "button", + "textColor": "", + "textSize": "0.875rem", + "fontStyle": "", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellEditable": false, + "isEditable": false, + "isCellVisible": true, + "isDerived": false, + "label": "i", + "isSaveVisible": true, + "isDiscardVisible": true, + "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"i\"]))}}", + "sticky": "", + "validation": {}, + "currencyCode": "USD", + "decimals": 0, + "thousandSeparator": true, + "notation": "standard", + "cellBackground": "", + "buttonColor": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( (appsmith.theme.colors.primaryColor)))}}", + "borderRadius": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( (appsmith.theme.borderRadius.appBorderRadius)))}}", + "boxShadow": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( \"none\"))}}", + "customAlias": "" + } + }, + "key": "92p3ghvvmv", + "canFreezeColumn": true, + "isDeprecated": false, + "rightColumn": 62, + "textSize": "0.875rem", + "widgetId": "i7fb649v7j", + "allowAddNewRow": true, + "minWidth": 450, + "tableData": "{{new Array(50).fill(\"\").map((d, i) => ({i}))}}", + "label": "Data", + "searchKey": "", + "parentId": "0", + "serverSidePaginationEnabled": false, + "renderMode": "CANVAS", + "mobileTopRow": 9, + "horizontalAlignment": "LEFT", + "isVisibleSearch": true, + "responsiveBehavior": "fill", + "mobileLeftColumn": 15, + "isVisiblePagination": true, + "verticalAlignment": "CENTER" + } + ] +} +} \ No newline at end of file diff --git a/app/client/src/widgets/TableWidgetV2/component/Table.tsx b/app/client/src/widgets/TableWidgetV2/component/Table.tsx index 1dc3994eb0..5f8940543a 100644 --- a/app/client/src/widgets/TableWidgetV2/component/Table.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/Table.tsx @@ -298,13 +298,16 @@ export function Table(props: TableProps) { const scrollContainerStyles = useMemo(() => { return { height: isHeaderVisible - ? props.height - - tableSizes.TABLE_HEADER_HEIGHT - - TABLE_SCROLLBAR_HEIGHT - - SCROLL_BAR_OFFSET + ? props.height - tableSizes.TABLE_HEADER_HEIGHT - TABLE_SCROLLBAR_HEIGHT : props.height - TABLE_SCROLLBAR_HEIGHT - SCROLL_BAR_OFFSET, + width: props.width, }; - }, [isHeaderVisible, props.height, tableSizes.TABLE_HEADER_HEIGHT]); + }, [ + isHeaderVisible, + props.height, + tableSizes.TABLE_HEADER_HEIGHT, + props.width, + ]); const shouldUseVirtual = props.serverSidePaginationEnabled && diff --git a/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx b/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx index c66702b6bf..76cc4267ef 100644 --- a/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx @@ -92,7 +92,7 @@ export const TableWrapper = styled.div<{ height: 100%; display: block; position: relative; - width: 100%; + width: ${({ width }) => width}px; overflow: auto hidden; &.virtual { ${hideScrollbar}; @@ -137,12 +137,7 @@ export const TableWrapper = styled.div<{ .th, .td { margin: 0; - border-bottom: ${(props) => - props.variant === TableVariantTypes.DEFAULT || - props.variant === undefined || - props.variant === TableVariantTypes.VARIANT3 - ? "1px solid var(--wds-color-border-onaccent)" - : "none"}; + position: relative; border-right: ${(props) => props.variant === TableVariantTypes.DEFAULT || props.variant === undefined || @@ -173,6 +168,20 @@ export const TableWrapper = styled.div<{ cursor: isResizing; } } + + &:after { + content: ""; + position: absolute; + right: 0; + bottom: 0; + width: 100%; + border-bottom: ${(props) => + props.variant === TableVariantTypes.DEFAULT || + props.variant === undefined || + props.variant === TableVariantTypes.VARIANT3 + ? "1px solid var(--wds-color-border-onaccent)" + : "none"}; + } } .th { diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx index 8b8667ffb9..35ccc27e22 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx @@ -11,7 +11,7 @@ const StyledButton = styled(BaseButton)<{ min-width: 40px; min-height: ${({ compactMode }) => - compactMode === "SHORT" ? "24px" : "30px"}; + compactMode === "SHORT" ? "22px" : "27px"}; font-size: ${({ compactMode }) => compactMode === "SHORT" ? "12px" : "14px"}; line-height: ${({ compactMode }) =>