From c76ef9e3d75a67beef737870304d6e5d31188324 Mon Sep 17 00:00:00 2001
From: Paul Li <wmdev0808@gmail.com>
Date: Tue, 11 May 2021 03:32:58 -0400
Subject: [PATCH] FEATURE-2111 : Show/Hide Table Controls

-- Add the header options section for the visibility setting
-- Render conditionally the header part based on the setting
---
 .../appsmith/TableComponent/Table.tsx         | 94 +++++++++++--------
 .../appsmith/TableComponent/TableHeader.tsx   | 66 ++++++++-----
 .../appsmith/TableComponent/index.tsx         | 20 ++++
 .../mockResponses/WidgetConfigResponse.tsx    |  5 +
 .../TableWidget/TablePropertyPaneConfig.ts    | 51 ++++++++++
 app/client/src/widgets/TableWidget/index.tsx  |  5 +
 6 files changed, 179 insertions(+), 62 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
index cfc1b0bb85..9e4ae470c9 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
@@ -60,6 +60,11 @@ interface TableProps {
   applyFilter: (filters: ReactTableFilter[]) => void;
   compactMode?: CompactMode;
   updateCompactMode: (compactMode: CompactMode) => void;
+  isVisibleCompactMode?: boolean;
+  isVisibleDownload?: boolean;
+  isVisibleFilters?: boolean;
+  isVisiblePagination?: boolean;
+  isVisibleSearch?: boolean;
 }
 
 const defaultColumn = {
@@ -170,49 +175,60 @@ export function Table(props: TableProps) {
       triggerRowSelection={props.triggerRowSelection}
       width={props.width}
     >
-      <TableHeaderWrapper
-        backgroundColor={Colors.WHITE}
-        ref={tableHeaderWrapperRef}
-        serverSidePaginationEnabled={props.serverSidePaginationEnabled}
-        tableSizes={tableSizes}
-        width={props.width}
-      >
-        <Scrollbars
-          renderThumbHorizontal={ScrollbarHorizontalThumb}
-          renderThumbVertical={ScrollbarVerticalThumb}
-          style={{ width: props.width, height: 38 }}
+      {(props.isVisibleSearch ||
+        props.isVisibleFilters ||
+        props.isVisibleDownload ||
+        props.isVisibleCompactMode ||
+        props.isVisiblePagination) && (
+        <TableHeaderWrapper
+          backgroundColor={Colors.WHITE}
+          ref={tableHeaderWrapperRef}
+          serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+          tableSizes={tableSizes}
+          width={props.width}
         >
-          <TableHeaderInnerWrapper
-            backgroundColor={Colors.WHITE}
-            serverSidePaginationEnabled={props.serverSidePaginationEnabled}
-            tableSizes={tableSizes}
-            width={props.width}
+          <Scrollbars
+            renderThumbHorizontal={ScrollbarHorizontalThumb}
+            renderThumbVertical={ScrollbarVerticalThumb}
+            style={{ width: props.width, height: 38 }}
           >
-            <TableHeader
-              applyFilter={props.applyFilter}
-              columns={tableHeadercolumns}
-              compactMode={props.compactMode}
-              currentPageIndex={currentPageIndex}
-              editMode={props.editMode}
-              filters={props.filters}
-              nextPageClick={props.nextPageClick}
-              pageCount={pageCount}
-              pageNo={props.pageNo}
-              pageOptions={pageOptions}
-              prevPageClick={props.prevPageClick}
-              searchKey={props.searchKey}
-              searchTableData={props.searchTableData}
+            <TableHeaderInnerWrapper
+              backgroundColor={Colors.WHITE}
               serverSidePaginationEnabled={props.serverSidePaginationEnabled}
-              tableColumns={columns}
-              tableData={props.data}
               tableSizes={tableSizes}
-              updateCompactMode={props.updateCompactMode}
-              updatePageNo={props.updatePageNo}
-              widgetName={props.widgetName}
-            />
-          </TableHeaderInnerWrapper>
-        </Scrollbars>
-      </TableHeaderWrapper>
+              width={props.width}
+            >
+              <TableHeader
+                applyFilter={props.applyFilter}
+                columns={tableHeadercolumns}
+                compactMode={props.compactMode}
+                currentPageIndex={currentPageIndex}
+                editMode={props.editMode}
+                filters={props.filters}
+                isVisibleCompactMode={props.isVisibleCompactMode}
+                isVisibleDownload={props.isVisibleDownload}
+                isVisibleFilters={props.isVisibleFilters}
+                isVisiblePagination={props.isVisiblePagination}
+                isVisibleSearch={props.isVisibleSearch}
+                nextPageClick={props.nextPageClick}
+                pageCount={pageCount}
+                pageNo={props.pageNo}
+                pageOptions={pageOptions}
+                prevPageClick={props.prevPageClick}
+                searchKey={props.searchKey}
+                searchTableData={props.searchTableData}
+                serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+                tableColumns={columns}
+                tableData={props.data}
+                tableSizes={tableSizes}
+                updateCompactMode={props.updateCompactMode}
+                updatePageNo={props.updatePageNo}
+                widgetName={props.widgetName}
+              />
+            </TableHeaderInnerWrapper>
+          </Scrollbars>
+        </TableHeaderWrapper>
+      )}
       <div
         className={props.isLoading ? Classes.SKELETON : "tableWrap"}
         ref={tableWrapperRef}
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
index 0c7e5ffc34..01fb8b0188 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
@@ -110,34 +110,54 @@ interface TableHeaderProps {
   compactMode?: CompactMode;
   updateCompactMode: (compactMode: CompactMode) => void;
   tableSizes: TableSizes;
+  isVisibleCompactMode?: boolean;
+  isVisibleDownload?: boolean;
+  isVisibleFilters?: boolean;
+  isVisiblePagination?: boolean;
+  isVisibleSearch?: boolean;
 }
 
 function TableHeader(props: TableHeaderProps) {
   return (
     <>
-      <SearchComponent
-        onSearch={props.searchTableData}
-        placeholder="Search..."
-        value={props.searchKey}
-      />
-      <CommonFunctionsMenuWrapper tableSizes={props.tableSizes}>
-        <TableFilters
-          applyFilter={props.applyFilter}
-          columns={props.columns}
-          editMode={props.editMode}
-          filters={props.filters}
+      {props.isVisibleSearch && (
+        <SearchComponent
+          onSearch={props.searchTableData}
+          placeholder="Search..."
+          value={props.searchKey}
         />
-        <TableDataDownload
-          columns={props.tableColumns}
-          data={props.tableData}
-          widgetName={props.widgetName}
-        />
-        <TableCompactMode
-          compactMode={props.compactMode}
-          updateCompactMode={props.updateCompactMode}
-        />
-      </CommonFunctionsMenuWrapper>
-      {props.serverSidePaginationEnabled && (
+      )}
+      {(props.isVisibleFilters ||
+        props.isVisibleDownload ||
+        props.isVisibleCompactMode) && (
+        <CommonFunctionsMenuWrapper tableSizes={props.tableSizes}>
+          {props.isVisibleFilters && (
+            <TableFilters
+              applyFilter={props.applyFilter}
+              columns={props.columns}
+              editMode={props.editMode}
+              filters={props.filters}
+            />
+          )}
+
+          {props.isVisibleDownload && (
+            <TableDataDownload
+              columns={props.tableColumns}
+              data={props.tableData}
+              widgetName={props.widgetName}
+            />
+          )}
+
+          {props.isVisibleCompactMode && (
+            <TableCompactMode
+              compactMode={props.compactMode}
+              updateCompactMode={props.updateCompactMode}
+            />
+          )}
+        </CommonFunctionsMenuWrapper>
+      )}
+
+      {props.isVisiblePagination && props.serverSidePaginationEnabled && (
         <PaginationWrapper>
           <PaginationItemWrapper
             className="t--table-widget-prev-page"
@@ -162,7 +182,7 @@ function TableHeader(props: TableHeaderProps) {
           </PaginationItemWrapper>
         </PaginationWrapper>
       )}
-      {!props.serverSidePaginationEnabled && (
+      {props.isVisiblePagination && !props.serverSidePaginationEnabled && (
         <PaginationWrapper>
           <RowWrapper className="show-page-items">
             {props.tableData?.length} Records
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
index 2d7ebbda4c..5850f52bf0 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
@@ -66,6 +66,11 @@ interface ReactTableComponentProps {
   columns: ReactTableColumnProps[];
   compactMode?: CompactMode;
   updateCompactMode: (compactMode: CompactMode) => void;
+  isVisibleSearch?: boolean;
+  isVisibleFilters?: boolean;
+  isVisibleDownload?: boolean;
+  isVisibleCompactMode?: boolean;
+  isVisiblePagination?: boolean;
 }
 
 function ReactTableComponent(props: ReactTableComponentProps) {
@@ -81,6 +86,11 @@ function ReactTableComponent(props: ReactTableComponentProps) {
     handleResizeColumn,
     height,
     isLoading,
+    isVisibleCompactMode,
+    isVisibleDownload,
+    isVisibleFilters,
+    isVisiblePagination,
+    isVisibleSearch,
     nextPageClick,
     onRowClick,
     pageNo,
@@ -230,6 +240,11 @@ function ReactTableComponent(props: ReactTableComponentProps) {
       handleResizeColumn={handleResizeColumn}
       height={height}
       isLoading={isLoading}
+      isVisibleCompactMode={isVisibleCompactMode}
+      isVisibleDownload={isVisibleDownload}
+      isVisibleFilters={isVisibleFilters}
+      isVisiblePagination={isVisiblePagination}
+      isVisibleSearch={isVisibleSearch}
       nextPageClick={nextPageClick}
       pageNo={pageNo - 1}
       pageSize={pageSize || 1}
@@ -262,6 +277,11 @@ export default React.memo(ReactTableComponent, (prev, next) => {
     prev.handleResizeColumn === next.handleResizeColumn &&
     prev.height === next.height &&
     prev.isLoading === next.isLoading &&
+    prev.isVisibleCompactMode === next.isVisibleCompactMode &&
+    prev.isVisibleDownload === next.isVisibleDownload &&
+    prev.isVisibleFilters === next.isVisibleFilters &&
+    prev.isVisiblePagination === next.isVisiblePagination &&
+    prev.isVisibleSearch === next.isVisibleSearch &&
     prev.nextPageClick === next.nextPageClick &&
     prev.onRowClick === next.onRowClick &&
     prev.pageNo === next.pageNo &&
diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
index 521ce177cf..7028c1334d 100644
--- a/app/client/src/mockResponses/WidgetConfigResponse.tsx
+++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -263,6 +263,11 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
         step: 62,
         status: 75,
       },
+      isVisibleSearch: true,
+      isVisibleFilters: true,
+      isVisibleDownload: true,
+      isVisibleCompactMode: true,
+      isVisiblePagination: true,
       version: 1,
     },
     DROP_DOWN_WIDGET: {
diff --git a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts b/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
index 2273b8ed17..7a2cae150c 100644
--- a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
+++ b/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
@@ -679,6 +679,57 @@ export default [
       },
     ],
   },
+  {
+    sectionName: "Header options",
+    children: [
+      {
+        helpText: "Toggle visibility of the search box",
+        propertyName: "isVisibleSearch",
+        label: "Search",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+      {
+        helpText: "Toggle visibility of the filters",
+        propertyName: "isVisibleFilters",
+        label: "Filters",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+      {
+        helpText: "Toggle visibility of the data download",
+        propertyName: "isVisibleDownload",
+        label: "Download",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+      {
+        helpText: "Toggle visibility of the compact mode",
+        propertyName: "isVisibleCompactMode",
+        label: "Compact Mode",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
+      {
+        helpText: "Toggle visibility of the pagination",
+        propertyName: "isVisiblePagination",
+        label: "Pagination",
+        controlType: "SWITCH",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+        validation: VALIDATION_TYPES.BOOLEAN,
+      },
+    ],
+  },
   {
     sectionName: "Actions",
     children: [
diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index baa72efb0e..9996506cdb 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -632,6 +632,11 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           handleResizeColumn={this.handleResizeColumn}
           height={componentHeight}
           isLoading={this.props.isLoading}
+          isVisibleCompactMode={this.props.isVisibleCompactMode}
+          isVisibleDownload={this.props.isVisibleDownload}
+          isVisibleFilters={this.props.isVisibleFilters}
+          isVisiblePagination={this.props.isVisiblePagination}
+          isVisibleSearch={this.props.isVisibleSearch}
           multiRowSelection={this.props.multiRowSelection}
           nextPageClick={this.handleNextPageClick}
           onCommandClick={this.onCommandClick}