Merge branch 'fix/rem-sync' into 'release'

Removed syncfusion completely.

See merge request theappsmith/internal-tools-client!795

app/client/package.json

@@ -18,7 +18,6 @@
     "@optimizely/optimizely-sdk": "^4.0.0",
     "@sentry/browser": "^5.6.3",
     "@sentry/webpack-plugin": "^1.10.0",
-    "@syncfusion/ej2-react-grids": "^17.4.40",
     "@tinymce/tinymce-react": "^3.5.0",
     "@types/chance": "^1.0.7",
     "@types/fontfaceobserver": "^0.0.6",
@@ -193,4 +192,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}

app/client/src/components/designSystems/syncfusion/TableComponent.tsx

@@ -1,349 +0,0 @@
-import {
-  ColumnDirective,
-  ColumnsDirective,
-  GridComponent,
-  ColumnModel,
-  Inject,
-  Resize,
-  Page,
-  SelectionSettingsModel,
-  Reorder,
-  ColumnMenu,
-  CommandColumn,
-  CommandModel,
-  CommandClickEventArgs,
-  ColumnMenuOpenEventArgs,
-  ColumnMenuItemModel,
-  PageSettingsModel,
-  Toolbar,
-  PdfExport,
-  ExcelExport,
-  Search,
-  RowDataBoundEventArgs,
-} from "@syncfusion/ej2-react-grids";
-import { getValue } from "@syncfusion/ej2-base";
-import { ClickEventArgs } from "@syncfusion/ej2-navigations";
-import React, { useRef, MutableRefObject, memo } from "react";
-import styled from "constants/DefaultTheme";
-import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
-import { Classes } from "@blueprintjs/core";
-import { TablePagination } from "../appsmith/TablePagination";
-import {
-  AUTOFIT_ALL_COLUMNS,
-  AUTOFIT_THIS_COLUMN,
-  AUTOFIT_COLUMN,
-} from "constants/messages";
-
-import "@syncfusion/ej2-base/styles/material.css";
-import "@syncfusion/ej2-buttons/styles/material.css";
-import "@syncfusion/ej2-calendars/styles/material.css";
-import "@syncfusion/ej2-dropdowns/styles/material.css";
-import "@syncfusion/ej2-inputs/styles/material.css";
-import "@syncfusion/ej2-navigations/styles/material.css";
-import "@syncfusion/ej2-popups/styles/material.css";
-import "@syncfusion/ej2-splitbuttons/styles/material.css";
-import "@syncfusion/ej2-react-grids/styles/material.css";
-
-export interface TableComponentProps {
-  data: object[];
-  columns: ColumnModel[];
-  onRowClick: (rowData: object, rowIndex: number) => void;
-  isLoading: boolean;
-  height: number;
-  contentHeight: number;
-  width: number;
-  columnActions?: ColumnAction[];
-  onCommandClick: (dynamicTrigger: string) => void;
-  disableDrag: (disable: boolean) => void;
-  nextPageClick: Function;
-  prevPageClick: Function;
-  pageNo: number;
-  serverSidePaginationEnabled: boolean;
-  updatePageNo: Function;
-  updateHiddenColumns: Function;
-  resetSelectedRowIndex: Function;
-  selectedRowIndex: number;
-  id: string;
-  exportCsv?: boolean;
-  exportExcel?: boolean;
-  exportPDF?: boolean;
-  pageSize: number;
-  rowHeight: number;
-}
-
-const StyledGridComponent = styled(GridComponent)`
-  &&& {
-    height: 100%;
-    .e-altrow {
-      background-color: #fafafa;
-    }
-    .e-active {
-      background: #cccccc;
-    }
-    .e-gridcontent {
-      height: calc(100% - 130px);
-      overflow: auto;
-    }
-    .e-gridpager {
-      position: absolute;
-      bottom: 0;
-    }
-  }
-`;
-
-const TableContainer = styled.div`
-  height: 100%;
-`;
-const settings: SelectionSettingsModel = {
-  type: "Multiple",
-  enableToggle: false,
-};
-
-type GridRef = MutableRefObject<GridComponent | null>;
-
-/* eslint-disable react/display-name */
-const TableComponent = memo(
-  (props: TableComponentProps) => {
-    const grid: GridRef = useRef(null);
-    function disableBubbling(e: any) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    const handleCreated = () => {
-      if (grid.current && grid.current.element) {
-        const header = grid.current.getHeaderContent();
-        header.addEventListener("mousedown", disableBubbling);
-        grid.current
-          .getPager()
-          .getElementsByClassName("e-pagercontainer")[0]
-          .addEventListener("click", (e: any) => {
-            const pageNo = e.srcElement.getAttribute("index");
-            if (pageNo !== null && props.pageNo !== pageNo) {
-              props.resetSelectedRowIndex();
-              if (!props.serverSidePaginationEnabled) {
-                props.updatePageNo(pageNo);
-              }
-            }
-          });
-      }
-    };
-
-    const handleDestroy = () => {
-      /* It is as concern whether this will still propagate to the
-      internal of syncfusion, resulting in a full cleanup of all 
-      eventhandlers, components, etc.
-      */
-      if (grid.current && grid.current.element) {
-        const headers = grid.current.element.getElementsByClassName(
-          "e-gridheader",
-        );
-        for (let i = 0; i < headers.length; i++) {
-          const header = headers[i];
-          header.removeEventListener("mousedown", disableBubbling);
-        }
-      }
-    };
-
-    function rowSelected() {
-      if (grid.current) {
-        /** Get the selected row indexes */
-        const selectedrowindex: number[] = grid.current.getSelectedRowIndexes();
-        /** Get the selected records. */
-        const selectedrecords: object[] = grid.current.getSelectedRecords();
-        if (selectedrecords.length !== 0) {
-          let index = selectedrowindex[0];
-          const pageSettings: PageSettingsModel = grid.current.pageSettings;
-          if (
-            pageSettings &&
-            pageSettings.currentPage !== undefined &&
-            pageSettings.pageSize !== undefined
-          ) {
-            index =
-              index + (pageSettings.currentPage - 1) * pageSettings.pageSize;
-          }
-          props.onRowClick(selectedrecords[0], index);
-        }
-      }
-    }
-
-    const commands: CommandModel[] = (props.columnActions || []).map(action => {
-      return {
-        buttonOption: { content: action.label },
-        data: action.dynamicTrigger,
-      };
-    });
-
-    function onCommandClick(args: CommandClickEventArgs | undefined) {
-      if (args) {
-        const _target = args.target;
-        if (props.columnActions && _target) {
-          props.columnActions
-            .filter(
-              action =>
-                action.label.toLowerCase() === _target.title.toLowerCase(),
-            )
-            .forEach(action => {
-              props.onCommandClick(action.dynamicTrigger);
-            });
-        }
-      }
-    }
-
-    function rowDataBound(args: RowDataBoundEventArgs) {
-      const color = getValue("_color", args.data);
-      if (args.row && color) {
-        (args.row as any).style.backgroundColor = color;
-      }
-    }
-
-    function columnMenuOpen(args: ColumnMenuOpenEventArgs) {
-      for (const item of args.items) {
-        if (item.text) {
-          if (item.text === AUTOFIT_ALL_COLUMNS) {
-            (item as ColumnMenuItemModel).hide = true;
-          }
-          if (item.text === AUTOFIT_THIS_COLUMN) {
-            (item as ColumnMenuItemModel).text = AUTOFIT_COLUMN;
-          }
-        }
-      }
-    }
-    function columnMenuClick() {
-      props.updateHiddenColumns(
-        grid.current
-          ?.getColumns()
-          .filter(column => !column.visible)
-          .map(col => col.field),
-      );
-    }
-
-    const handleToolbarClick = (args: ClickEventArgs) => {
-      if (grid.current && args.item.id === `${props.id}_excelexport`) {
-        grid.current.excelExport({ fileName: `${props.id}.xlsx` });
-      }
-      if (grid.current && args.item.id === `${props.id}_csvexport`) {
-        grid.current.csvExport({ fileName: `${props.id}.csv` });
-      }
-      if (grid.current && args.item.id === `${props.id}_pdfexport`) {
-        grid.current.pdfExport({ fileName: `${props.id}.pdf` });
-      }
-    };
-    const handleResizeStart = (args: any) => {
-      args.e.stopPropagation();
-    };
-
-    const toolbarOptions: string[] = [];
-    if (!!props.exportCsv) toolbarOptions.push("CsvExport");
-    if (!!props.exportExcel) toolbarOptions.push("ExcelExport");
-    if (!!props.exportPDF) toolbarOptions.push("PdfExport");
-
-    return (
-      <TableContainer className={props.isLoading ? Classes.SKELETON : ""}>
-        <StyledGridComponent
-          toolbarClick={handleToolbarClick}
-          created={handleCreated}
-          destroy={handleDestroy}
-          selectionSettings={settings}
-          dataSource={props.data}
-          id={props.id}
-          columnMenuClick={columnMenuClick}
-          dataBound={() => {
-            if (grid.current) {
-              grid.current.selectionModule.selectRow(props.selectedRowIndex);
-            }
-          }}
-          pageSettings={{
-            pageSize: props.pageSize,
-            currentPage: props.pageNo,
-            totalRecordsCount: props.data.length,
-          }}
-          // contentHeight={`calc(100%-${props.height - props.contentHeight}px)`}
-          contentHeight={props.contentHeight}
-          rowHeight={props.rowHeight}
-          rowSelected={rowSelected}
-          resizeStart={handleResizeStart}
-          ref={grid}
-          width={"100%"}
-          allowPaging={!props.serverSidePaginationEnabled}
-          allowReordering={true}
-          allowResizing={true}
-          showColumnMenu={true}
-          commandClick={onCommandClick}
-          columnMenuOpen={columnMenuOpen}
-          rowDataBound={rowDataBound}
-          toolbar={!!toolbarOptions.length && toolbarOptions}
-          allowPdfExport
-          allowExcelExport
-          // enableVirtualization
-        >
-          <Inject
-            services={[
-              Resize,
-              Page,
-              Reorder,
-              ColumnMenu,
-              CommandColumn,
-              Toolbar,
-              ExcelExport,
-              PdfExport,
-              Search,
-              // VirtualScroll,
-            ]}
-          />
-          <ColumnsDirective>
-            {props.columns.map(col => {
-              return (
-                <ColumnDirective
-                  key={col.field}
-                  field={col.field}
-                  width={200}
-                  visible={col.visible}
-                />
-              );
-            })}
-            {commands.length > 0 && (
-              <ColumnDirective headerText="Actions" commands={commands} />
-            )}
-          </ColumnsDirective>
-        </StyledGridComponent>
-        {props.serverSidePaginationEnabled && (
-          <TablePagination
-            pageNo={props.pageNo}
-            prevPageClick={props.prevPageClick}
-            nextPageClick={props.nextPageClick}
-          ></TablePagination>
-        )}
-      </TableContainer>
-    );
-  },
-  (prevProps, nextProps) => {
-    const dataNotEqual =
-      JSON.stringify(nextProps.data) !== JSON.stringify(prevProps.data);
-
-    if (
-      (dataNotEqual &&
-        nextProps.data.length !== 0 &&
-        prevProps.data.length !== 0) ||
-      (nextProps.data.length === 0 && prevProps.data.length > 0)
-    ) {
-      nextProps.updateHiddenColumns(undefined);
-    }
-
-    const propsNotEqual =
-      nextProps.isLoading !== prevProps.isLoading ||
-      dataNotEqual ||
-      nextProps.height !== prevProps.height ||
-      JSON.stringify(nextProps.columnActions) !==
-        JSON.stringify(prevProps.columnActions) ||
-      nextProps.serverSidePaginationEnabled !==
-        prevProps.serverSidePaginationEnabled ||
-      nextProps.pageNo !== prevProps.pageNo ||
-      nextProps.exportCsv !== prevProps.exportCsv ||
-      nextProps.exportExcel !== prevProps.exportExcel ||
-      nextProps.exportPDF !== prevProps.exportPDF;
-
-    return !propsNotEqual;
-  },
-);
-
-export default TableComponent;

app/client/src/pages/Editor/QueryEditor/Form.tsx

@@ -28,7 +28,6 @@ import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
 import { Datasource } from "api/DatasourcesApi";
 import { QUERY_EDITOR_FORM_NAME } from "constants/forms";
 import { PLUGIN_PACKAGE_POSTGRES } from "constants/QueryEditorConstants";
-import "@syncfusion/ej2-react-grids/styles/material.css";
 import { Colors } from "constants/Colors";
 import JSONViewer from "./JSONViewer";
 import Table from "./Table";

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

@@ -17,7 +17,6 @@ import { OrgUser, Organization } from "constants/orgConstants";
 import { Menu, MenuItem, Popover, Position } from "@blueprintjs/core";
 import styled from "styled-components";
 import { FormIcons } from "icons/FormIcons";
-import "@syncfusion/ej2-react-grids/styles/material.css";
 import { RouteComponentProps } from "react-router";
 import Spinner from "components/editorComponents/Spinner";
 import FormDialogComponent from "components/editorComponents/form/FormDialogComponent";
@@ -102,6 +101,40 @@ export const OrgSettings = (props: PageProps) => {
     props.allUsers,
     props.allRole,
   ]);
+
+  const RoleNameCell = (cellProps: any) => {
+    const {
+      roleName,
+      roles,
+      username,
+      isCurrentUser,
+      isChangingRole,
+    } = cellProps.row.original;
+
+    if (isCurrentUser) {
+      return <div>{roleName}</div>;
+    }
+
+    return (
+      <Popover
+        content={
+          <Dropdown
+            activeItem={roleName}
+            userRoles={roles}
+            username={username}
+          />
+        }
+        position={Position.BOTTOM_LEFT}
+      >
+        <StyledDropDown>
+          {roleName}
+          <Icon icon="chevron-down" />
+          {isChangingRole ? <Spinner size={20} /> : undefined}
+        </StyledDropDown>
+      </Popover>
+    );
+  };
+
   const columns = React.useMemo(() => {
     return [
       {
@@ -115,38 +148,7 @@ export const OrgSettings = (props: PageProps) => {
       {
         Header: "Role",
         accessor: "roleName",
-        Cell: (cellProps: any) => {
-          const {
-            roleName,
-            roles,
-            username,
-            isCurrentUser,
-            isChangingRole,
-          } = cellProps.row.original;
-
-          if (isCurrentUser) {
-            return <div>{roleName}</div>;
-          }
-
-          return (
-            <Popover
-              content={
-                <Dropdown
-                  activeItem={roleName}
-                  userRoles={roles}
-                  username={username}
-                />
-              }
-              position={Position.BOTTOM_LEFT}
-            >
-              <StyledDropDown>
-                {roleName}
-                <Icon icon="chevron-down" />
-                {isChangingRole ? <Spinner size={20} /> : undefined}
-              </StyledDropDown>
-            </Popover>
-          );
-        },
+        Cell: RoleNameCell,
       },
       {
         Header: "Delete",

app/client/src/widgets/TableWidget.tsx

@@ -10,19 +10,11 @@ import {
   WidgetPropertyValidationType,
   BASE_WIDGET_VALIDATION,
 } from "utils/ValidationFactory";
-// import { ColumnModel } from "@syncfusion/ej2-grids";
-// import { ColumnDirTypecast } from "@syncfusion/ej2-react-grids";
 import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import Skeleton from "components/utils/Skeleton";
 import { Classes } from "@blueprintjs/core";
 
-// const TableComponent = React.lazy(() =>
-//   import(
-//     /* webpackPrefetch: true, webpackChunkName: "table" */ "components/designSystems/syncfusion/TableComponent"
-//   ),
-// );
-
 // const ROW_HEIGHT = 37;
 // const TABLE_HEADER_HEIGHT = 39;
 // const TABLE_FOOTER_HEIGHT = 48;