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 <me@arpitmohan.com>

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) => {
               </div>
             ))}
             {headerGroups.length === 0 &&
-              renderEmptyRows(1, props.columns, props.width)}
+              renderEmptyRows(
+                1,
+                props.columns,
+                props.width,
+                subPage,
+                prepareRow,
+              )}
           </div>
-          <div {...getTableBodyProps()} className="tbody">
+          <div
+            {...getTableBodyProps()}
+            className={`tbody ${
+              props.pageSize > subPage.length ? "no-scroll" : ""
+            }`}
+          >
             {subPage.map((row, rowIndex) => {
               prepareRow(row);
               return (
@@ -168,8 +185,6 @@ export const Table = (props: TableProps) => {
                       <div
                         {...cell.getCellProps()}
                         className="td"
-                        data-rowindex={rowIndex}
-                        data-colindex={cellIndex}
                         key={cellIndex}
                       >
                         {cell.render("Cell")}
@@ -184,6 +199,8 @@ export const Table = (props: TableProps) => {
                 props.pageSize - subPage.length,
                 props.columns,
                 props.width,
+                subPage,
+                prepareRow,
               )}
           </div>
         </div>

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

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 (
+        <div {...row.getRowProps()} className="tr" key={index}>
+          {row.cells.map((cell: any, cellIndex: number) => {
+            return (
+              <div {...cell.getCellProps()} className="td" key={cellIndex} />
+            );
+          })}
+        </div>
+      );
+    });
+  }
   const tableColumns = columns.length
     ? columns
     : new Array(3).fill({ width: tableWidth / 3, isHidden: false });

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}

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<
         <PageSectionDivider />
         {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 (
-              <OrgSection className="t--org-section">
+              <OrgSection className="t--org-section" key={index}>
                 {!isPermitted(
                   organization.userPermissions,
                   PERMISSION_TYPE.MANAGE_ORGANIZATION,
@@ -260,7 +260,12 @@ class Applications extends Component<
                     </StyledDialog>
                     <FormDialogComponent
                       trigger={
-                        <Button text="Share" intent={"primary"} className="t--org-share-btn" filled />
+                        <Button
+                          text="Share"
+                          intent={"primary"}
+                          className="t--org-share-btn"
+                          filled
+                        />
                       }
                       Form={InviteUsersFormv2}
                       orgId={organization.id}

app/client/src/pages/common/PageNotFound.tsx

@@ -35,7 +35,8 @@ class PageNotFound extends React.PureComponent<RouterProps> {
           <div>
             <p className="bold-text">Page not found</p>
             <p>
-              Either this page doesn't exist, or you don't have access to <br />
+              Either this page doesn&apos;t exist, or you don&apos;t have access
+              to <br />
               this page.
             </p>
             <Button

app/client/src/pages/organization/InviteUsersFromv2.tsx

@@ -155,7 +155,7 @@ const InviteUsersForm = (props: any) => {
             type="email"
             label="Emails"
             intent="success"
-            data-cy= "t--invite-email-input"
+            data-cy="t--invite-email-input"
           />
           <SelectField
             name="role"
@@ -163,7 +163,7 @@ const InviteUsersForm = (props: any) => {
             options={props.roles}
             size="large"
             outline={false}
-            data-cy= "t--invite-role-input"
+            data-cy="t--invite-role-input"
           />
         </div>
         <StyledButton

app/client/src/widgets/TableWidget.tsx

@@ -3,7 +3,7 @@ import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "constants/WidgetConstants";
 import { EventType } from "constants/ActionConstants";
 import ReactTableComponent from "components/designSystems/appsmith/ReactTableComponent";
-
+import { TABLE_SIZES } from "components/designSystems/appsmith/Table";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import {
   WidgetPropertyValidationType,
@@ -78,7 +78,12 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       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);