fix: Update Syncfusion table to react table on Org Settings

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

@@ -1,11 +1,7 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { Icon } from "@blueprintjs/core";
-import {
+import { TableWrapper } from "components/designSystems/appsmith/TableStyledWrappers";
-  GridComponent,
-  ColumnsDirective,
-  ColumnDirective,
-} from "@syncfusion/ej2-react-grids";
 import { AppState } from "reducers";
 import {
   getAllUsers,
@@ -27,6 +23,7 @@ import Spinner from "components/editorComponents/Spinner";
 import FormDialogComponent from "components/editorComponents/form/FormDialogComponent";
 import { getCurrentUser } from "selectors/usersSelectors";
 import { User } from "constants/userConstants";
+import { useTable, useFlexLayout } from "react-table";
 type OrgProps = {
   allOrgs: Organization[];
   changeOrgName: (value: string) => void;
@@ -57,27 +54,25 @@ type DropdownProps = {
   username: string;
 };
 
-const StyledGridComponent = styled(GridComponent)`
+const StyledDropDown = styled.div`
-  &&& {
+  cursor: pointer;
-    .e-altrow {
+`;
-      background-color: #fafafa;
+
-    }
+const StyledTableWrapped = styled(TableWrapper)`
-    .e-active {
+  width: 100%;
-      background: #cccccc;
+  height: auto;
-    }
+  font-size: 14px;
-    .e-gridcontent {
+  .table {
+    .tbody {
+      overflow: auto;
+      height: auto;
       max-height: calc(
         100vh - (100vh / 3) - ${props => props.theme.headerHeight}
       );
-      overflow: auto;
     }
   }
 `;
 
-const StyledDropDown = styled.div`
-  cursor: pointer;
-`;
-
 const StyledMenu = styled(Menu)`
   &&&&.bp3-menu {
     max-width: 250px;
@@ -103,8 +98,102 @@ export const OrgSettings = (props: PageProps) => {
     roles: props.allRole,
     isCurrentUser: user.username === props.currentUser?.username,
   }));
+  const data = React.useMemo(() => userTableData, [
+    props.allUsers,
+    props.allRole,
+  ]);
+  const columns = React.useMemo(() => {
+    return [
+      {
+        Header: "Email",
+        accessor: "username",
+      },
+      {
+        Header: "Name",
+        accessor: "name",
+      },
+      {
+        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>
+          );
+        },
+      },
+      {
+        Header: "Delete",
+        accessor: "delete",
+        Cell: (cellProps: any) => {
+          const {
+            username,
+            isCurrentUser,
+            isDeleting,
+          } = cellProps.row.original;
+
+          return (
+            !isCurrentUser &&
+            (isDeleting ? (
+              <Spinner size={20} />
+            ) : (
+              <FormIcons.DELETE_ICON
+                height={20}
+                width={20}
+                color={"grey"}
+                background={"grey"}
+                onClick={() => deleteOrgUser(orgId, username)}
+                style={{ alignSelf: "center", cursor: "pointer" }}
+              />
+            ))
+          );
+        },
+      },
+    ];
+  }, [props.allUsers, props.allRole]);
+
   const currentOrg = allOrgs.find(org => org.organization.id === orgId);
   const currentOrgName = currentOrg?.organization.name ?? "";
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      manualPagination: true,
+    },
+    useFlexLayout,
+  );
 
   useEffect(() => {
     fetchUser(orgId);
@@ -166,67 +255,61 @@ export const OrgSettings = (props: PageProps) => {
       {props.isFetchAllUsers && props.isFetchAllRoles ? (
         <Spinner size={30} />
       ) : (
-        <StyledGridComponent dataSource={userTableData}>
+        <StyledTableWrapped width={200} height={200}>
-          <ColumnsDirective>
+          <div className="tableWrap">
-            <ColumnDirective
+            <div {...getTableProps()} className="table">
-              key="username"
+              {headerGroups.map((headerGroup: any, index: number) => (
-              field="username"
+                <div
-              headerText="Email"
+                  key={index}
-            />
+                  {...headerGroup.getHeaderGroupProps()}
-            <ColumnDirective key="name" field="name" headerText="Name" />
+                  className="tr"
-            <ColumnDirective
+                >
-              key="rolename"
+                  {headerGroup.headers.map(
-              field="rolename"
+                    (column: any, columnIndex: number) => (
-              headerText="Role"
+                      <div
-              width={350}
+                        key={columnIndex}
-              template={(props: any) => {
+                        {...column.getHeaderProps()}
-                return props.isCurrentUser ? (
+                        className="th header-reorder"
-                  <div>{props.roleName}</div>
+                      >
-                ) : (
+                        <div
-                  <Popover
+                          className={
-                    content={
+                            !column.isHidden
-                      <Dropdown
+                              ? "draggable-header"
-                        activeItem={props.roleName}
+                              : "hidden-header"
-                        userRoles={props.roles}
+                          }
-                        username={props.username}
+                        >
-                      />
+                          {column.render("Header")}
-                    }
+                        </div>
-                    position={Position.BOTTOM_LEFT}
+                      </div>
-                  >
+                    ),
-                    <StyledDropDown>
+                  )}
-                      {props.roleName}
+                </div>
-                      <Icon icon="chevron-down" />
+              ))}
-                      {props.isChangingRole ? <Spinner size={20} /> : undefined}
+              <div {...getTableBodyProps()} className="tbody">
-                    </StyledDropDown>
+                {rows.map((row: any, index: number) => {
-                  </Popover>
+                  prepareRow(row);
-                );
+                  return (
-              }}
+                    <div key={index} {...row.getRowProps()} className={"tr"}>
-            />
+                      {row.cells.map((cell: any, cellIndex: number) => {
-            <ColumnDirective
+                        return (
-              key="delete"
+                          <div
-              field="delete"
+                            key={cellIndex}
-              headerText="Delete"
+                            {...cell.getCellProps()}
-              width={100}
+                            className="td"
-              template={(props: any) => {
+                            data-rowindex={index}
-                return (
+                            data-colindex={cellIndex}
-                  !props.isCurrentUser &&
+                          >
-                  (props.isDeleting ? (
+                            {cell.render("Cell")}
-                    <Spinner size={20} />
+                          </div>
-                  ) : (
+                        );
-                    <FormIcons.DELETE_ICON
+                      })}
-                      height={20}
+                    </div>
-                      width={20}
+                  );
-                      color={"grey"}
+                })}
-                      background={"grey"}
+              </div>
-                      onClick={() => deleteOrgUser(orgId, props.username)}
+            </div>
-                      style={{ alignSelf: "center", cursor: "pointer" }}
+          </div>
-                    />
+        </StyledTableWrapped>
-                  ))
-                );
-              }}
-            />
-          </ColumnsDirective>
-        </StyledGridComponent>
       )}
     </React.Fragment>
   );