feat: added sorting for name, connector and lastsync field

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -57,7 +57,12 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeS
 
   const sortData = useCallback(
     (a, b) => {
-      const result = a[`${sortBy}Name`].toLowerCase().localeCompare(b[`${sortBy}Name`].toLowerCase());
+      let result;
+      if (sortBy === "lastSync") {
+        result = b[sortBy] - a[sortBy];
+      } else {
+        result = a[`${sortBy}Name`].toLowerCase().localeCompare(b[`${sortBy}Name`].toLowerCase());
+      }
 
       if (sortOrder === SortOrderEnum.DESC) {
         return -1 * result;
@@ -129,7 +134,16 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeS
         ),
       },
       {
-        Header: <FormattedMessage id="tables.lastSync" />,
+        Header: (
+          <>
+            <FormattedMessage id="tables.lastSync" />
+            <SortButton
+              wasActive={sortBy === "lastSync"}
+              lowToLarge={sortOrder === SortOrderEnum.ASC}
+              onClick={() => onSortClick("lastSync")}
+            />
+          </>
+        ),
         accessor: "lastSync",
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
           <LastSyncCell timeInSecond={cell.value} enabled={row.original.enabled} />

airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx

@@ -1,16 +1,20 @@
-import React from "react";
+import queryString from "query-string";
+import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
 import styled from "styled-components";
 
 import Table from "components/Table";
 
+import useRouter from "hooks/useRouter";
+
 import AllConnectionsStatusCell from "./components/AllConnectionsStatusCell";
 import ConnectEntitiesCell from "./components/ConnectEntitiesCell";
 import ConnectorCell from "./components/ConnectorCell";
 import LastSyncCell from "./components/LastSyncCell";
 import NameCell from "./components/NameCell";
-import { EntityTableDataItem } from "./types";
+import SortButton from "./components/SortButton";
+import { EntityTableDataItem, SortOrderEnum } from "./types";
 
 const Content = styled.div`
   margin: 0 32px 0 27px;
@@ -23,10 +27,59 @@ type IProps = {
 };
 
 const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
+  const { query, push } = useRouter();
+  const sortBy = query.sortBy || "entity";
+  const sortOrder = query.order || SortOrderEnum.ASC;
+
+  const onSortClick = useCallback(
+    (field: string) => {
+      const order =
+        sortBy !== field ? SortOrderEnum.ASC : sortOrder === SortOrderEnum.ASC ? SortOrderEnum.DESC : SortOrderEnum.ASC;
+      push({
+        search: queryString.stringify(
+          {
+            sortBy: field,
+            order: order,
+          },
+          { skipNull: true }
+        ),
+      });
+    },
+    [push, sortBy, sortOrder]
+  );
+
+  const sortData = useCallback(
+    (a, b) => {
+      let result;
+      if (sortBy === "lastSync") {
+        result = b[sortBy] - a[sortBy];
+      } else {
+        result = a[`${sortBy}Name`].toLowerCase().localeCompare(b[`${sortBy}Name`].toLowerCase());
+      }
+
+      if (sortOrder === SortOrderEnum.DESC) {
+        return -1 * result;
+      }
+
+      return result;
+    },
+    [sortBy, sortOrder]
+  );
+
+  const sortingData = React.useMemo(() => data.sort(sortData), [sortData, data]);
   const columns = React.useMemo(
     () => [
       {
-        Header: <FormattedMessage id="tables.name" />,
+        Header: (
+          <>
+            <FormattedMessage id="tables.name" />
+            <SortButton
+              wasActive={sortBy === "entity"}
+              lowToLarge={sortOrder === SortOrderEnum.ASC}
+              onClick={() => onSortClick("entity")}
+            />
+          </>
+        ),
         headerHighlighted: true,
         accessor: "entityName",
         customWidth: 40,
@@ -35,7 +88,16 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
         ),
       },
       {
-        Header: <FormattedMessage id="tables.connector" />,
+        Header: (
+          <>
+            <FormattedMessage id="tables.connector" />
+            <SortButton
+              wasActive={sortBy === "connector"}
+              lowToLarge={sortOrder === SortOrderEnum.ASC}
+              onClick={() => onSortClick("connector")}
+            />
+          </>
+        ),
         accessor: "connectorName",
         Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
           <ConnectorCell value={cell.value} enabled={row.original.enabled} img={row.original.connectorIcon} />
@@ -49,7 +111,16 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
         ),
       },
       {
-        Header: <FormattedMessage id="tables.lastSync" />,
+        Header: (
+          <>
+            <FormattedMessage id="tables.lastSync" />
+            <SortButton
+              wasActive={sortBy === "lastSync"}
+              lowToLarge={sortOrder === SortOrderEnum.ASC}
+              onClick={() => onSortClick("lastSync")}
+            />
+          </>
+        ),
         accessor: "lastSync",
         Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
           <LastSyncCell timeInSecond={cell.value} enabled={row.original.enabled} />
@@ -62,12 +133,12 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
         Cell: ({ cell }: CellProps<EntityTableDataItem>) => <AllConnectionsStatusCell connectEntities={cell.value} />,
       },
     ],
-    [entity]
+    [entity, onSortClick, sortBy, sortOrder]
   );
 
   return (
     <Content>
-      <Table columns={columns} data={data} onClickRow={onClickRow} erroredRows />
+      <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows />
     </Content>
   );
 };