Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: [Table Widget] Remove unnecessary scrollbar when page size fits in available height (#32327)

Browse Source 
Fixes https://github.com/appsmithorg/appsmith/issues/17857

## Automation

/ok-to-test tags="@tag.Table"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8645383412>
> Commit: a0001d83d5826441c0e0dde59100b8eb5732974b
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8645383412&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->
This commit is contained in:
balajisoundar 2024-04-15 12:21:08 +05:30 committed by GitHub
parent 39fae54f67
commit d2fc0af659
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 269 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_GeneralProperty_spec.js
View File

@ -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);
});
},
);

32
app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts Normal file
View File

@ -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),
);
});
},
);

211
app/client/cypress/fixtures/Table/ScrollbarDSL.json Normal file
View File

@ -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"
}
]
}
}

13
app/client/src/widgets/TableWidgetV2/component/Table.tsx
View File

@ -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 &&

23
app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx
View File

@ -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 {

2
app/client/src/widgets/TableWidgetV2/component/cellComponents/Button.tsx
View File

@ -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 }) =>