From 290bb8d57cbd50a971e3b448794ab3e250f87362 Mon Sep 17 00:00:00 2001 From: vicky-primathon <67091118+vicky-primathon@users.noreply.github.com> Date: Thu, 16 Jul 2020 16:09:07 +0530 Subject: [PATCH] Table UI breakages on scroll and empty cells fixed (#60) * Added Button component in Table widget for actions * Action button state loading added for Table widget * Action button font-weight made as normal * Table button loading state fixed. Table code refactored, rendering from props instead of state in ReactTableComponent * Table widget action button alignment fixed * Handled actions column changes * added proper keys to useMemo for react table widget * Code refactors and added dependency map with meta props and table data for computing columns * Table UI breakages on scroll and empty cells fixed * Handled empty rows in table widget * Fixed last row cut issue * Code review changes * Added table widget component heights as enum Co-authored-by: Arpit Mohan --- .../designSystems/appsmith/Table.tsx | 25 ++++++++++++++++--- .../appsmith/TableStyledWrappers.tsx | 14 ++++++++++- .../designSystems/appsmith/TableUtilities.tsx | 17 +++++++++++++ .../Applications/CreateApplicationForm.tsx | 2 +- app/client/src/pages/Applications/index.tsx | 15 +++++++---- app/client/src/pages/common/PageNotFound.tsx | 3 ++- .../pages/organization/InviteUsersFromv2.tsx | 4 +-- app/client/src/widgets/TableWidget.tsx | 9 +++++-- 8 files changed, 73 insertions(+), 16 deletions(-) diff --git a/app/client/src/components/designSystems/appsmith/Table.tsx b/app/client/src/components/designSystems/appsmith/Table.tsx index a206573220..37544cc2c4 100644 --- a/app/client/src/components/designSystems/appsmith/Table.tsx +++ b/app/client/src/components/designSystems/appsmith/Table.tsx @@ -15,6 +15,12 @@ import { TableHeaderCell, renderEmptyRows } from "./TableUtilities"; import TableHeader from "./TableHeader"; import { Classes } from "@blueprintjs/core"; +export enum TABLE_SIZES { + COLUMN_HEADER_HEIGHT = 52, + TABLE_HEADER_HEIGHT = 61, + ROW_HEIGHT = 52, +} + interface TableProps { width: number; height: number; @@ -145,9 +151,20 @@ export const Table = (props: TableProps) => { ))} {headerGroups.length === 0 && - renderEmptyRows(1, props.columns, props.width)} + renderEmptyRows( + 1, + props.columns, + props.width, + subPage, + prepareRow, + )} -
+
subPage.length ? "no-scroll" : "" + }`} + > {subPage.map((row, rowIndex) => { prepareRow(row); return ( @@ -168,8 +185,6 @@ export const Table = (props: TableProps) => {
{cell.render("Cell")} @@ -184,6 +199,8 @@ export const Table = (props: TableProps) => { props.pageSize - subPage.length, props.columns, props.width, + subPage, + prepareRow, )}
diff --git a/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx index 706cfc37bf..d5f68a22e2 100644 --- a/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx +++ b/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx @@ -1,5 +1,6 @@ import styled from "styled-components"; import { Colors } from "constants/Colors"; +import { TABLE_SIZES } from "components/designSystems/appsmith/Table"; export const TableWrapper = styled.div<{ width: number; height: number }>` width: ${props => props.width - 5}px; @@ -26,7 +27,18 @@ export const TableWrapper = styled.div<{ width: number; height: number }>` } .tbody { overflow: scroll; - height: ${props => props.height - 5 - 102}px; + /* + Here 5px is subtracted to compensate padding from widget resizers and + 113px to compensate table column header and table header heights + */ + height: ${props => + props.height - + 5 - + TABLE_SIZES.TABLE_HEADER_HEIGHT - + TABLE_SIZES.COLUMN_HEADER_HEIGHT}px; + &.no-scroll { + overflow: hidden; + } } .tr { :nth-child(even) { diff --git a/app/client/src/components/designSystems/appsmith/TableUtilities.tsx b/app/client/src/components/designSystems/appsmith/TableUtilities.tsx index c82ec4985e..aff1054514 100644 --- a/app/client/src/components/designSystems/appsmith/TableUtilities.tsx +++ b/app/client/src/components/designSystems/appsmith/TableUtilities.tsx @@ -480,8 +480,25 @@ export const renderEmptyRows = ( rowCount: number, columns: any, tableWidth: number, + page: any, + prepareRow: any, ) => { const rows: string[] = new Array(rowCount).fill(""); + if (page.length) { + const row = page[0]; + return rows.map((item: string, index: number) => { + prepareRow(row); + return ( +
+ {row.cells.map((cell: any, cellIndex: number) => { + return ( +
+ ); + })} +
+ ); + }); + } const tableColumns = columns.length ? columns : new Array(3).fill({ width: tableWidth / 3, isHidden: false }); diff --git a/app/client/src/pages/Applications/CreateApplicationForm.tsx b/app/client/src/pages/Applications/CreateApplicationForm.tsx index d8696bf1d6..031502f102 100644 --- a/app/client/src/pages/Applications/CreateApplicationForm.tsx +++ b/app/client/src/pages/Applications/CreateApplicationForm.tsx @@ -37,7 +37,7 @@ export const CreateApplicationForm = (props: Props) => { onSubmit={handleSubmit(createApplicationFormSubmitHandler)} divider submitOnEnter - data-cy = "t--create-app-submit" + data-cy="t--create-app-submit" submitText="Submit" size="small" submitting={submitting && !error} diff --git a/app/client/src/pages/Applications/index.tsx b/app/client/src/pages/Applications/index.tsx index db0e19ff38..8e280be7ef 100644 --- a/app/client/src/pages/Applications/index.tsx +++ b/app/client/src/pages/Applications/index.tsx @@ -57,8 +57,8 @@ const ApplicationCardsWrapper = styled.div` font-size: ${props => props.theme.fontSizes[4]}px; `; -const OrgSection = styled.div`` - +const OrgSection = styled.div``; + const OrgName = styled.div` display: flex; font-size: ${props => props.theme.fontSizes[3]}px; @@ -213,11 +213,11 @@ class Applications extends Component< {this.props.userOrgs && this.props.userOrgs.length !== 0 && - this.props.userOrgs.map((organizationObject: any) => { + this.props.userOrgs.map((organizationObject: any, index: number) => { const { organization, applications } = organizationObject; return ( - + {!isPermitted( organization.userPermissions, PERMISSION_TYPE.MANAGE_ORGANIZATION, @@ -260,7 +260,12 @@ class Applications extends Component< +
{ super.updateWidgetMetaProperty("pageNo", pageNo); } const { componentWidth, componentHeight } = this.getComponentDimensions(); - const pageSize = Math.floor((componentHeight - 104) / 52); + const pageSize = Math.floor( + (componentHeight - + TABLE_SIZES.TABLE_HEADER_HEIGHT - + TABLE_SIZES.COLUMN_HEADER_HEIGHT) / + TABLE_SIZES.ROW_HEIGHT, + ); if (pageSize !== this.props.pageSize) { super.updateWidgetMetaProperty("pageSize", pageSize);