Revert "fix: #6518 Implemented responsive table header controls (#10971)" (#12583)

This reverts commit 88ad2bcbd1. Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
2022-04-06 11:07:13 +05:30 · 2022-04-06 11:07:13 +05:30 · 787df868bb
commit 787df868bb
parent 981c618420
9 changed files with 35 additions and 283 deletions
--- a/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json
+++ b/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json
@ -235,7 +235,7 @@
                        "key": "primaryColumns.action.computedValue"
                    }
                ],
-                "leftColumn": 8,
+                "leftColumn": 18,
                "primaryColumns": {
                    "step": {
                        "index": 0,
@ -307,7 +307,7 @@
                "delimiter": ",",
                "key": "xpckfzcfqi",
                "derivedColumns": {},
-                "rightColumn": 58,
+                "rightColumn": 48,
                "textSize": "PARAGRAPH",
                "widgetId": "0qst46493x",
                "isVisibleFilters": true,
--- a/app/client/cypress/fixtures/tableResizeDsl.json
+++ b/app/client/cypress/fixtures/tableResizeDsl.json
@ -1,177 +0,0 @@
-{
-    "dsl": {
-        "widgetName": "MainContainer",
-        "backgroundColor": "none",
-        "rightColumn": 656,
-        "snapColumns": 64,
-        "detachFromLayout": true,
-        "widgetId": "0",
-        "topRow": 0,
-        "bottomRow": 2860,
-        "containerStyle": "none",
-        "snapRows": 128,
-        "parentRowSpace": 1,
-        "type": "CANVAS_WIDGET",
-        "canExtend": true,
-        "version": 46,
-        "minHeight": 1292,
-        "parentColumnSpace": 1,
-        "dynamicBindingPathList": [],
-        "leftColumn": 0,
-        "children": [
-            {
-                "widgetName": "Table1",
-                "columnOrder": [
-                    "id",
-                    "email",
-                    "userName",
-                    "productName",
-                    "orderAmount"
-                ],
-                "isVisibleDownload": true,
-                "topRow": 48,
-                "bottomRow": 71,
-                "parentRowSpace": 10,
-                "isSortable": true,
-                "type": "TABLE_WIDGET",
-                "parentColumnSpace": 74,
-                "dynamicTriggerPathList": [],
-                "leftColumn": 0,
-                "dynamicBindingPathList": [
-                    {
-                        "key": "tableData"
-                    },
-                    {
-                        "key": "primaryColumns.id.computedValue"
-                    },
-                    {
-                        "key": "primaryColumns.email.computedValue"
-                    },
-                    {
-                        "key": "primaryColumns.userName.computedValue"
-                    },
-                    {
-                        "key": "primaryColumns.productName.computedValue"
-                    },
-                    {
-                        "key": "primaryColumns.orderAmount.computedValue"
-                    }
-                ],
-                "primaryColumns": {
-                    "id": {
-                        "index": 0,
-                        "width": 150,
-                        "id": "id",
-                        "horizontalAlignment": "LEFT",
-                        "verticalAlignment": "CENTER",
-                        "columnType": "text",
-                        "textSize": "PARAGRAPH",
-                        "fontStyle": "REGULAR",
-                        "enableFilter": true,
-                        "enableSort": true,
-                        "isVisible": true,
-                        "isDisabled": false,
-                        "isCellVisible": true,
-                        "isDerived": false,
-                        "label": "id",
-                        "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}"
-                    },
-                    "email": {
-                        "index": 1,
-                        "width": 150,
-                        "id": "email",
-                        "horizontalAlignment": "LEFT",
-                        "verticalAlignment": "CENTER",
-                        "columnType": "text",
-                        "textSize": "PARAGRAPH",
-                        "fontStyle": "REGULAR",
-                        "enableFilter": true,
-                        "enableSort": true,
-                        "isVisible": true,
-                        "isDisabled": false,
-                        "isCellVisible": true,
-                        "isDerived": false,
-                        "label": "email",
-                        "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.email))}}"
-                    },
-                    "userName": {
-                        "index": 2,
-                        "width": 150,
-                        "id": "userName",
-                        "horizontalAlignment": "LEFT",
-                        "verticalAlignment": "CENTER",
-                        "columnType": "text",
-                        "textSize": "PARAGRAPH",
-                        "fontStyle": "REGULAR",
-                        "enableFilter": true,
-                        "enableSort": true,
-                        "isVisible": true,
-                        "isDisabled": false,
-                        "isCellVisible": true,
-                        "isDerived": false,
-                        "label": "userName",
-                        "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.userName))}}"
-                    },
-                    "productName": {
-                        "index": 3,
-                        "width": 150,
-                        "id": "productName",
-                        "horizontalAlignment": "LEFT",
-                        "verticalAlignment": "CENTER",
-                        "columnType": "text",
-                        "textSize": "PARAGRAPH",
-                        "fontStyle": "REGULAR",
-                        "enableFilter": true,
-                        "enableSort": true,
-                        "isVisible": true,
-                        "isDisabled": false,
-                        "isCellVisible": true,
-                        "isDerived": false,
-                        "label": "productName",
-                        "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.productName))}}"
-                    },
-                    "orderAmount": {
-                        "index": 4,
-                        "width": 150,
-                        "id": "orderAmount",
-                        "horizontalAlignment": "LEFT",
-                        "verticalAlignment": "CENTER",
-                        "columnType": "text",
-                        "textSize": "PARAGRAPH",
-                        "fontStyle": "REGULAR",
-                        "enableFilter": true,
-                        "enableSort": true,
-                        "isVisible": true,
-                        "isDisabled": false,
-                        "isCellVisible": true,
-                        "isDerived": false,
-                        "label": "orderAmount",
-                        "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.orderAmount))}}"
-                    }
-                },
-                "delimiter": ",",
-                "migrated": true,
-                "derivedColumns": {},
-                "rightColumn": 37,
-                "textSize": "PARAGRAPH",
-                "widgetId": "sb070qr2ir",
-                "isVisibleFilters": true,
-                "tableData": "{{\n[\n  {\n    \"id\": 2381224,\n    \"email\": \"michael.lawson@reqres.in\",\n    \"userName\": \"Michael Lawson\",\n    \"productName\": \"Chicken Sandwich\",\n    \"orderAmount\": 4.99\n  },\n  {\n    \"id\": 2736212,\n    \"email\": \"lindsay.ferguson@reqres.in\",\n    \"userName\": \"Lindsay Ferguson\",\n    \"productName\": \"Tuna Salad\",\n    \"orderAmount\": 9.99\n  },\n  {\n    \"id\": 6788734,\n    \"email\": \"tobias.funke@reqres.in\",\n    \"userName\": \"Tobias Funke\",\n    \"productName\": \"Beef steak\",\n    \"orderAmount\": 19.99\n  }\n]\n}}",
-                "isVisible": true,
-                "label": "Data",
-                "searchKey": "",
-                "fontStyle": "REGULAR",
-                "version": 3,
-                "parentId": "0",
-                "isLoading": false,
-                "horizontalAlignment": "LEFT",
-                "isVisibleSearch": true,
-                "isVisiblePagination": true,
-                "verticalAlignment": "CENTER",
-                "columnSizeMap": {
-                    "email": 261
-                }
-            }
-        ]
-    }
-}
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Resize_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Resize_spec.js
@ -1,29 +0,0 @@
-/* eslint-disable cypress/no-unnecessary-waiting */
-const widgetsPage = require("../../../../locators/Widgets.json");
-const commonlocators = require("../../../../locators/commonlocators.json");
-const publish = require("../../../../locators/publishWidgetspage.json");
-const dsl = require("../../../../fixtures/tableResizeDsl.json");
-
-describe("Table Widget Resize Functionality", function() {
-  before(() => {
-    cy.addDsl(dsl);
-  });
-
-  it("Table Widget check default header controls", function() {
-    cy.get(`${commonlocators.layoutControls} span[name='desktop']`).click();
-    cy.get(`${publish.tableWidget} ${publish.searchInput}`).should("exist");
-    cy.get(
-      `${publish.tableWidget} ${widgetsPage.tableFilterPaneToggle}`,
-    ).should("exist");
-    cy.get(`${publish.tableWidget} ${publish.downloadBtn}`).should("exist");
-  });
-
-  it("Table Widget check header controls after resize", function() {
-    cy.get(`${commonlocators.layoutControls} span[name='mobile']`).click();
-    cy.get(`${publish.tableWidget} ${publish.searchInput}`).should("not.exist");
-    cy.get(
-      `${publish.tableWidget} ${widgetsPage.tableFilterPaneToggle}`,
-    ).should("not.exist");
-    cy.get(`${publish.tableWidget} ${publish.downloadBtn}`).should("not.exist");
-  });
-});
--- a/app/client/src/widgets/TableWidget/component/Constants.ts
+++ b/app/client/src/widgets/TableWidget/component/Constants.ts
@ -284,9 +284,3 @@ export const ConditionFunctions: {
    return !moment(a).isBefore(moment(b), "d");
  },
 };
-
-export enum TableWidth {
-  Mobile = 576,
-  Small = 365,
-  Smaller = 288,
-}
--- a/app/client/src/widgets/TableWidget/component/Table.tsx
+++ b/app/client/src/widgets/TableWidget/component/Table.tsx
@ -27,7 +27,6 @@ import {
  TABLE_SIZES,
  CompactMode,
  CompactModeTypes,
-  TableWidth,
 } from "./Constants";
 import { Colors } from "constants/Colors";

@ -127,7 +126,6 @@ export function Table(props: TableProps) {
      }),
    [columnString],
  );
-  const isMobileScreenTableWidth = props.width <= TableWidth["Mobile"];
  const pageCount =
    props.serverSidePaginationEnabled && props.totalRecordsCount
      ? Math.ceil(props.totalRecordsCount / props.pageSize)
@ -252,7 +250,6 @@ export function Table(props: TableProps) {
                currentPageIndex={currentPageIndex}
                delimiter={props.delimiter}
                filters={props.filters}
-                isMobileScreenTableWidth={isMobileScreenTableWidth}
                isVisibleDownload={props.isVisibleDownload}
                isVisibleFilters={props.isVisibleFilters}
                isVisiblePagination={props.isVisiblePagination}
@ -272,7 +269,6 @@ export function Table(props: TableProps) {
                updatePageNo={props.updatePageNo}
                widgetId={props.widgetId}
                widgetName={props.widgetName}
-                width={props.width}
              />
            </TableHeaderInnerWrapper>
          </Scrollbars>
--- a/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx
+++ b/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx
@ -54,7 +54,6 @@ interface TableDataDownloadProps {
  columns: ReactTableColumnProps[];
  widgetName: string;
  delimiter: string;
-  isMobileScreenTableWidth: boolean;
 }

 type FileDownloadType = "CSV" | "EXCEL";
@ -114,7 +113,6 @@ const downloadDataAsCSV = (props: {

 function TableDataDownload(props: TableDataDownloadProps) {
  const [selected, selectMenu] = React.useState(false);
-
  const downloadFile = (type: string) => {
    if (type === "CSV") {
      downloadTableDataAsCsv();
@ -204,7 +202,7 @@ function TableDataDownload(props: TableDataDownloadProps) {
        className="t--table-download-btn"
        selectMenu={selectMenu}
        selected={selected}
-        title={props.isMobileScreenTableWidth ? "" : "Download"}
+        title="Download"
      >
        <DownloadIcon />
      </TableAction>
--- a/app/client/src/widgets/TableWidget/component/TableFilters.tsx
+++ b/app/client/src/widgets/TableWidget/component/TableFilters.tsx
@ -47,7 +47,6 @@ interface TableFilterProps {
  filters?: ReactTableFilter[];
  applyFilter: (filters: ReactTableFilter[]) => void;
  widgetId: string;
-  isMobileScreenTableWidth: boolean;
 }

 function TableFilters(props: TableFilterProps) {
@ -112,12 +111,6 @@ function TableFilters(props: TableFilterProps) {
    tableFilterPaneState.isVisible &&
    tableFilterPaneState.widgetId === props.widgetId;

-  const tableActionTitle = `${props.isMobileScreenTableWidth ? "" : "Filters"}${
-    hasAnyFilters && !props.isMobileScreenTableWidth
-      ? ` (${filters.length})`
-      : ""
-  }`;
-
  return (
    <>
      <TableAction
@ -129,7 +122,7 @@ function TableFilters(props: TableFilterProps) {
        }
        selectMenu={toggleFilterPane}
        selected={isTableFilterPaneVisible}
-        title={tableActionTitle}
+        title={`Filters${hasAnyFilters ? ` (${filters.length})` : ""}`}
        titleColor={hasAnyFilters ? Colors.CODE_GRAY : Colors.GRAY}
      >
        <FilterIcon />
--- a/app/client/src/widgets/TableWidget/component/TableHeader.tsx
+++ b/app/client/src/widgets/TableWidget/component/TableHeader.tsx
@ -13,7 +13,6 @@ import {
  ReactTableColumnProps,
  TableSizes,
  ReactTableFilter,
-  TableWidth,
 } from "./Constants";
 import TableDataDownload from "./TableDataDownload";
 import { Colors } from "constants/Colors";
@ -43,12 +42,9 @@ const PageNumberInputWrapper = styled(NumericInput)`
  margin: 0 8px;
 `;

-const SearchComponentWrapper = styled.div<{
-  isMobileScreenTableWidth: boolean;
-}>`
+const SearchComponentWrapper = styled.div`
  margin: 3px 10px;
-  flex: ${(props) =>
-    props.isMobileScreenTableWidth ? "0 0 120px" : "0 0 200px"};
+  flex: 0 0 200px;
 `;

 function PageNumberInput(props: {
@ -130,19 +126,14 @@ interface TableHeaderProps {
  isVisibleFilters?: boolean;
  isVisiblePagination?: boolean;
  isVisibleSearch?: boolean;
-  isMobileScreenTableWidth: boolean;
  delimiter: string;
-  width: number;
 }

 function TableHeader(props: TableHeaderProps) {
-  const isSmallerTableWidth = props.width <= TableWidth["Smaller"];
  return (
    <>
-      {props.isVisibleSearch && !isSmallerTableWidth && (
-        <SearchComponentWrapper
-          isMobileScreenTableWidth={props.isMobileScreenTableWidth}
-        >
+      {props.isVisibleSearch && (
+        <SearchComponentWrapper>
          <SearchComponent
            onSearch={props.searchTableData}
            placeholder="Search..."
@ -150,36 +141,30 @@ function TableHeader(props: TableHeaderProps) {
          />
        </SearchComponentWrapper>
      )}
-      {(props.isVisibleFilters || props.isVisibleDownload) &&
-        props.width > TableWidth["Small"] && (
-          <CommonFunctionsMenuWrapper tableSizes={props.tableSizes}>
-            {props.isVisibleFilters && (
-              <TableFilters
-                applyFilter={props.applyFilter}
-                columns={props.columns}
-                filters={props.filters}
-                isMobileScreenTableWidth={props.isMobileScreenTableWidth}
-                widgetId={props.widgetId}
-              />
-            )}
+      {(props.isVisibleFilters || props.isVisibleDownload) && (
+        <CommonFunctionsMenuWrapper tableSizes={props.tableSizes}>
+          {props.isVisibleFilters && (
+            <TableFilters
+              applyFilter={props.applyFilter}
+              columns={props.columns}
+              filters={props.filters}
+              widgetId={props.widgetId}
+            />
+          )}

-            {props.isVisibleDownload && (
-              <TableDataDownload
-                columns={props.tableColumns}
-                data={props.tableData}
-                delimiter={props.delimiter}
-                isMobileScreenTableWidth={props.isMobileScreenTableWidth}
-                widgetName={props.widgetName}
-              />
-            )}
-          </CommonFunctionsMenuWrapper>
-        )}
+          {props.isVisibleDownload && (
+            <TableDataDownload
+              columns={props.tableColumns}
+              data={props.tableData}
+              delimiter={props.delimiter}
+              widgetName={props.widgetName}
+            />
+          )}
+        </CommonFunctionsMenuWrapper>
+      )}

      {props.isVisiblePagination && props.serverSidePaginationEnabled && (
-        <PaginationWrapper
-          isMobileScreenTableWidth={props.isMobileScreenTableWidth}
-          isSmallerTableWidth={isSmallerTableWidth}
-        >
+        <PaginationWrapper>
          <PaginationItemWrapper
            className="t--table-widget-prev-page"
            disabled={props.pageNo === 0}
@ -206,10 +191,7 @@ function TableHeader(props: TableHeaderProps) {
        </PaginationWrapper>
      )}
      {props.isVisiblePagination && !props.serverSidePaginationEnabled && (
-        <PaginationWrapper
-          isMobileScreenTableWidth={props.isMobileScreenTableWidth}
-          isSmallerTableWidth={isSmallerTableWidth}
-        >
+        <PaginationWrapper>
          <RowWrapper className="show-page-items">
            {props.tableData?.length} Records
          </RowWrapper>
@ -225,14 +207,14 @@ function TableHeader(props: TableHeaderProps) {
            <Icon color={Colors.GRAY} icon="chevron-left" iconSize={16} />
          </PaginationItemWrapper>
          <RowWrapper>
-            {!props.isMobileScreenTableWidth && "Page "}
+            Page{" "}
            <PageNumberInput
              disabled={props.pageCount === 1}
              pageCount={props.pageCount}
              pageNo={props.pageNo + 1}
              updatePageNo={props.updatePageNo}
-            />
-            {!props.isMobileScreenTableWidth && `of ${props.pageCount}`}
+            />{" "}
+            of {props.pageCount}
          </RowWrapper>
          <PaginationItemWrapper
            className="t--table-widget-next-page"
--- a/app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx
+++ b/app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx
@ -212,19 +212,14 @@ export const IconOptionWrapper = styled.div`
  cursor: pointer;
 `;

-export const PaginationWrapper = styled.div<{
-  isMobileScreenTableWidth: boolean;
-  isSmallerTableWidth: boolean;
-}>`
+export const PaginationWrapper = styled.div`
  box-sizing: border-box;
  display: flex;
  width: 100%;
-  justify-content: ${(props) =>
-    props.isSmallerTableWidth ? "center" : "flex-end"};
+  justify-content: flex-end;
  align-items: center;
  padding: 8px 20px;
  color: ${Colors.GRAY};
-  ${(props) => (props.isMobileScreenTableWidth ? "padding: 8px;" : "")};
 `;

 export const PaginationItemWrapper = styled.div<{