Feature/draggable filters in table widget

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_spec.js

@@ -118,6 +118,8 @@ describe("Table Widget Functionality", function() {
         .contains("is exactly")
         .click();
       cy.get(publish.inputValue).type(tabValue);
+      cy.wait(500);
+      cy.get(publish.applyFiltersBtn).click();
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(500);
       cy.get(publish.canvas)
@@ -127,8 +129,8 @@ describe("Table Widget Functionality", function() {
         const tabValue = tabData;
         expect(tabValue).to.be.equal("Lindsay Ferguson");
       });
-      cy.get(publish.filterBtn).click();
       cy.get(publish.removeFilter).click();
+      cy.get("body").type("{esc}");
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(500);
       cy.readTabledataPublish("0", "3").then((tabData) => {
@@ -157,6 +159,8 @@ describe("Table Widget Functionality", function() {
         .contains("contains")
         .click();
       cy.get(publish.inputValue).type("Lindsay");
+      cy.wait(500);
+      cy.get(publish.applyFiltersBtn).click();
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(500);
       cy.get(publish.canvas)
@@ -166,8 +170,8 @@ describe("Table Widget Functionality", function() {
         const tabValue = tabData;
         expect(tabValue).to.be.equal("Lindsay Ferguson");
       });
-      cy.get(publish.filterBtn).click();
       cy.get(publish.removeFilter).click();
+      cy.get("body").type("{esc}");
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(500);
       cy.readTabledataPublish("0", "3").then((tabData) => {
@@ -196,6 +200,8 @@ describe("Table Widget Functionality", function() {
         .contains("starts with")
         .click();
       cy.get(publish.inputValue).type("Lindsay");
+      cy.wait(500);
+      cy.get(publish.applyFiltersBtn).click();
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(500);
       cy.get(publish.canvas)
@@ -205,8 +211,8 @@ describe("Table Widget Functionality", function() {
         const tabValue = tabData;
         expect(tabValue).to.be.equal("Lindsay Ferguson");
       });
-      cy.get(publish.filterBtn).click();
       cy.get(publish.removeFilter).click();
+      cy.get("body").type("{esc}");
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(500);
       cy.readTabledataPublish("0", "3").then((tabData) => {
@@ -235,6 +241,8 @@ describe("Table Widget Functionality", function() {
         .contains("ends with")
         .click();
       cy.get(publish.inputValue).type("Ferguson");
+      cy.wait(500);
+      cy.get(publish.applyFiltersBtn).click();
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(500);
       cy.get(publish.canvas)
@@ -244,8 +252,8 @@ describe("Table Widget Functionality", function() {
         const tabValue = tabData;
         expect(tabValue).to.be.equal("Lindsay Ferguson");
       });
-      cy.get(publish.filterBtn).click();
       cy.get(publish.removeFilter).click();
+      cy.get("body").type("{esc}");
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(500);
       cy.readTabledataPublish("0", "3").then((tabData) => {

app/client/cypress/locators/publishWidgetspage.json

@@ -25,6 +25,7 @@
   "searchInput": ".t--search-input",
   "downloadBtn": ".t--table-download-btn",
   "filterBtn": ".t--table-filter-toggle-btn",
+  "applyFiltersBtn": ".t--apply-filter-btn",
   "attributeDropdown": ".t--table-filter-columns-dropdown",
   "attributeValue": ".t--dropdown-option",
   "conditionDropdown": ".t--table-filter-conditions-dropdown",

app/client/src/actions/widgetActions.tsx

@@ -101,6 +101,15 @@ export const closePropertyPane = () => {
   };
 };
 
+export const closeTableFilterPane = () => {
+  return {
+    type: ReduxActionTypes.HIDE_TABLE_FILTER_PANE,
+    payload: {
+      force: false,
+    },
+  };
+};
+
 export const copyWidget = (isShortcut: boolean) => {
   return {
     type: ReduxActionTypes.COPY_SELECTED_WIDGET_INIT,

app/client/src/components/designSystems/appsmith/TableComponent/CascadeFields.tsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect, useCallback } from "react";
 import styled from "styled-components";
 import { Icon, InputGroup } from "@blueprintjs/core";
+import { debounce } from "lodash";
+import { AnyStyledComponent } from "styled-components";
+
 import CustomizedDropdown from "pages/common/CustomizedDropdown";
 import { Directions } from "utils/helpers";
 import { Colors } from "constants/Colors";
 import { ControlIcons } from "icons/ControlIcons";
-import { AnyStyledComponent } from "styled-components";
 import { Skin } from "constants/DefaultTheme";
 import AutoToolTipComponent from "components/designSystems/appsmith/TableComponent/AutoToolTipComponent";
 import DatePickerComponent from "components/designSystems/blueprint/DatePickerComponent2";
@@ -14,16 +16,13 @@ import {
   Condition,
   ColumnTypes,
   Operator,
-} from "components/designSystems/appsmith/TableComponent/Constants";
-import {
-  DropdownOption,
   ReactTableFilter,
-} from "components/designSystems/appsmith/TableComponent/TableFilters";
+} from "components/designSystems/appsmith/TableComponent/Constants";
+import { DropdownOption } from "components/designSystems/appsmith/TableComponent/TableFilters";
 import { RenderOptionWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
-import { debounce } from "lodash";
 
 const StyledRemoveIcon = styled(
-  ControlIcons.REMOVE_CONTROL as AnyStyledComponent,
+  ControlIcons.CLOSE_CIRCLE_CONTROL as AnyStyledComponent,
 )`
   padding: 0;
   position: relative;
@@ -34,8 +33,8 @@ const StyledRemoveIcon = styled(
 `;
 
 const LabelWrapper = styled.div`
-  width: 105px;
-  text-align: center;
+  width: 95px;
+  margin-left: 10px;
   color: ${Colors.BLUE_BAYOUX};
   font-size: 14px;
   font-weight: 500;
@@ -57,7 +56,7 @@ const StyledInputGroup = styled(InputGroup)`
   background: ${Colors.WHITE};
   border: 1px solid #d3dee3;
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: 2px;
   color: ${Colors.OXFORD_BLUE};
   height: 32px;
   width: 150px;
@@ -81,7 +80,7 @@ const DropdownTrigger = styled.div`
   background: ${Colors.WHITE};
   border: 1px solid #d3dee3;
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: 2px;
   font-size: 14px;
   padding: 5px 12px 7px;
   color: ${Colors.OXFORD_BLUE};
@@ -219,7 +218,7 @@ function RenderOptions(props: {
           <AutoToolTipComponentWrapper title={selectedValue}>
             {selectedValue}
           </AutoToolTipComponentWrapper>
-          <Icon color={Colors.SLATE_GRAY} icon="chevron-down" iconSize={16} />
+          <Icon color={Colors.SLATE_GRAY} icon="caret-down" iconSize={16} />
         </DropdownTrigger>
       ),
     },
@@ -512,7 +511,7 @@ function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
         className={`t--table-filter-remove-btn ${
           hasAnyFilters ? "" : "hide-icon"
         }`}
-        color={Colors.RIVER_BED}
+        color={Colors.GRAY}
         height={16}
         onClick={handleRemoveFilter}
         width={16}

app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx

@@ -13,7 +13,6 @@ import {
   TableHeaderWrapper,
   TableHeaderInnerWrapper,
 } from "./TableStyledWrappers";
-import { ReactTableFilter } from "components/designSystems/appsmith/TableComponent/TableFilters";
 import {
   TableHeaderCell,
   renderEmptyRows,
@@ -24,6 +23,7 @@ import TableHeader from "./TableHeader";
 import { Classes } from "@blueprintjs/core";
 import {
   ReactTableColumnProps,
+  ReactTableFilter,
   TABLE_SIZES,
   CompactMode,
   CompactModeTypes,
@@ -242,7 +242,6 @@ export function Table(props: TableProps) {
                 columns={tableHeadercolumns}
                 compactMode={props.compactMode}
                 currentPageIndex={currentPageIndex}
-                editMode={props.editMode}
                 filters={props.filters}
                 isVisibleCompactMode={props.isVisibleCompactMode}
                 isVisibleDownload={props.isVisibleDownload}
@@ -262,6 +261,7 @@ export function Table(props: TableProps) {
                 tableSizes={tableSizes}
                 updateCompactMode={props.updateCompactMode}
                 updatePageNo={props.updatePageNo}
+                widgetId={props.widgetId}
                 widgetName={props.widgetName}
               />
             </TableHeaderInnerWrapper>

app/client/src/components/designSystems/appsmith/TableComponent/TableFilterPane.tsx

@@ -0,0 +1,140 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { get } from "lodash";
+import * as log from "loglevel";
+import { AppState } from "reducers";
+import styled from "styled-components";
+
+import { Colors } from "constants/Colors";
+import {
+  ReactTableColumnProps,
+  ReactTableFilter,
+} from "components/designSystems/appsmith/TableComponent/Constants";
+import TableFilterPaneContent from "components/designSystems/appsmith/TableComponent/TableFilterPaneContent";
+import { ThemeMode, getCurrentThemeMode } from "selectors/themeSelectors";
+import { Layers } from "constants/Layers";
+import Popper from "pages/Editor/Popper";
+import { generateClassName } from "utils/generators";
+import { getTableFilterState } from "selectors/tableFilterSelectors";
+import { getWidgetMetaProps } from "sagas/selectors";
+import { ReduxActionTypes } from "constants/ReduxActionConstants";
+import { selectWidgetAction } from "actions/widgetSelectionActions";
+import { ReactComponent as DragHandleIcon } from "assets/icons/ads/app-icons/draghandler.svg";
+
+const DragBlock = styled.div`
+  height: 41px;
+  width: 83px;
+  background: ${Colors.ATHENS_GRAY_DARKER};
+  box-sizing: border-box;
+  font-size: 12px;
+  color: ${Colors.SLATE_GRAY};
+  letter-spacing: 0.04em;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  span {
+    padding-left: 8px;
+    color: ${Colors.GRAY};
+  }
+`;
+
+export interface TableFilterPaneProps {
+  widgetId: string;
+  columns: ReactTableColumnProps[];
+  filters?: ReactTableFilter[];
+  applyFilter: (filters: ReactTableFilter[]) => void;
+}
+
+interface PositionPropsInt {
+  top: number;
+  left: number;
+}
+
+type Props = ReturnType<typeof mapStateToProps> &
+  ReturnType<typeof mapDispatchToProps> &
+  TableFilterPaneProps;
+
+class TableFilterPane extends Component<Props> {
+  getPopperTheme() {
+    return ThemeMode.LIGHT;
+  }
+
+  handlePositionUpdate = (position: any) => {
+    this.props.setPanePoistion(
+      this.props.tableFilterPane.widgetId as string,
+      position,
+    );
+  };
+
+  render() {
+    if (
+      this.props.tableFilterPane.isVisible &&
+      this.props.tableFilterPane.widgetId === this.props.widgetId
+    ) {
+      log.debug("tablefilter pane rendered");
+      const className =
+        "t--table-filter-toggle-btn " +
+        generateClassName(this.props.tableFilterPane.widgetId);
+      const el = document.getElementsByClassName(className)[0];
+      return (
+        <Popper
+          disablePopperEvents={get(this.props, "metaProps.isMoved", false)}
+          isDraggable
+          isOpen
+          onPositionChange={this.handlePositionUpdate}
+          placement="top"
+          position={get(this.props, "metaProps.position") as PositionPropsInt}
+          renderDragBlock={
+            <DragBlock>
+              <DragHandleIcon />
+              <span>Move</span>
+            </DragBlock>
+          }
+          renderDragBlockPositions={{
+            left: "0px",
+          }}
+          targetNode={el}
+          themeMode={this.getPopperTheme()}
+          zIndex={Layers.tableFilterPane}
+        >
+          <TableFilterPaneContent {...this.props} />
+        </Popper>
+      );
+    } else {
+      return null;
+    }
+  }
+}
+
+const mapStateToProps = (state: AppState, ownProps: TableFilterPaneProps) => {
+  return {
+    tableFilterPane: getTableFilterState(state),
+    themeMode: getCurrentThemeMode(state),
+    metaProps: getWidgetMetaProps(state, ownProps.widgetId),
+  };
+};
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    setPanePoistion: (widgetId: string, position: any) => {
+      dispatch({
+        type: ReduxActionTypes.TABLE_PANE_MOVED,
+        payload: {
+          widgetId,
+          position,
+        },
+      });
+      dispatch(selectWidgetAction(widgetId));
+    },
+    hideFilterPane: (widgetId: string) => {
+      dispatch({
+        type: ReduxActionTypes.HIDE_TABLE_FILTER_PANE,
+        payload: { widgetId },
+      });
+      dispatch(selectWidgetAction(widgetId));
+    },
+  };
+};
+export default connect(mapStateToProps, mapDispatchToProps)(TableFilterPane);