🪟 🧹 Implement ColumnSortButton component

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

@@ -4,7 +4,7 @@ import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { CellProps } from "react-table";
 
-import { Table } from "components/ui/Table";
+import { Table, SortableTableHeader } from "components/ui/Table";
 
 import { ConnectionScheduleType } from "core/request/AirbyteClient";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
@@ -15,9 +15,7 @@ import ConnectorCell from "./components/ConnectorCell";
 import FrequencyCell from "./components/FrequencyCell";
 import LastSyncCell from "./components/LastSyncCell";
 import NameCell from "./components/NameCell";
-import SortIcon from "./components/SortIcon";
 import StatusCell from "./components/StatusCell";
-import styles from "./ConnectionTable.module.scss";
 import { ITableDataItem, SortOrderEnum } from "./types";
 
 interface IProps {
@@ -76,10 +74,13 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
     () => [
       {
         Header: (
-          <button className={styles.tableHeaderButton} onClick={() => onSortClick("name")}>
+          <SortableTableHeader
+            onClick={() => onSortClick("name")}
+            isActive={sortBy === "name"}
+            isAscending={sortOrder === SortOrderEnum.ASC}
+          >
             <FormattedMessage id="tables.name" />
-            <SortIcon wasActive={sortBy === "name"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
-          </button>
+          </SortableTableHeader>
         ),
         headerHighlighted: true,
         accessor: "name",
@@ -90,14 +91,15 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
       },
       {
         Header: (
-          <button className={styles.tableHeaderButton} onClick={() => onSortClick("entityName")}>
-            {entity === "connection" ? (
-              <FormattedMessage id="tables.destinationConnectionToName" />
-            ) : (
-              <FormattedMessage id={`tables.${entity}ConnectionToName`} />
-            )}
-            <SortIcon wasActive={sortBy === "entityName"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
-          </button>
+          <SortableTableHeader
+            onClick={() => onSortClick("entityName")}
+            isActive={sortBy === "entityName"}
+            isAscending={sortOrder === SortOrderEnum.ASC}
+          >
+            <FormattedMessage
+              id={entity === "connection" ? "tables.destinationConnectionToName" : `tables.${entity}ConnectionToName`}
+            />
+          </SortableTableHeader>
         ),
         headerHighlighted: true,
         accessor: "entityName",
@@ -112,14 +114,13 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
       },
       {
         Header: (
-          <button className={styles.tableHeaderButton} onClick={() => onSortClick("connectorName")}>
-            {entity === "connection" ? (
-              <FormattedMessage id="tables.sourceConnectionToName" />
-            ) : (
-              <FormattedMessage id="tables.connector" />
-            )}
-            <SortIcon wasActive={sortBy === "connectorName"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
-          </button>
+          <SortableTableHeader
+            onClick={() => onSortClick("connectorName")}
+            isActive={sortBy === "connectorName"}
+            isAscending={sortOrder === SortOrderEnum.ASC}
+          >
+            <FormattedMessage id={entity === "connection" ? "tables.sourceConnectionToName" : "tables.connector"} />
+          </SortableTableHeader>
         ),
         accessor: "connectorName",
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
@@ -136,10 +137,13 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
       },
       {
         Header: (
-          <button className={styles.tableHeaderButton} onClick={() => onSortClick("lastSync")}>
+          <SortableTableHeader
+            onClick={() => onSortClick("lastSync")}
+            isActive={sortBy === "lastSync"}
+            isAscending={sortOrder === SortOrderEnum.ASC}
+          >
             <FormattedMessage id="tables.lastSync" />
-            <SortIcon wasActive={sortBy === "lastSync"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
-          </button>
+          </SortableTableHeader>
         ),
         accessor: "lastSync",
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (

airbyte-webapp/src/components/EntityTable/ImplementationTable.module.scss

@@ -3,14 +3,3 @@
     padding-left: 32px !important;
   }
 }
-
-.tableHeaderButton {
-  display: inline-flex;
-  font-size: inherit;
-  text-transform: inherit;
-  color: inherit;
-  background-color: inherit;
-  border: none;
-  font-weight: inherit;
-  cursor: pointer;
-}

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

@@ -4,7 +4,7 @@ import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { CellProps } from "react-table";
 
-import { Table } from "components/ui/Table";
+import { Table, SortableTableHeader } from "components/ui/Table";
 
 import { useQuery } from "hooks/useQuery";
 
@@ -13,7 +13,6 @@ import ConnectEntitiesCell from "./components/ConnectEntitiesCell";
 import ConnectorCell from "./components/ConnectorCell";
 import LastSyncCell from "./components/LastSyncCell";
 import NameCell from "./components/NameCell";
-import SortIcon from "./components/SortIcon";
 import styles from "./ImplementationTable.module.scss";
 import { EntityTableDataItem, SortOrderEnum } from "./types";
 
@@ -69,10 +68,13 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
     () => [
       {
         Header: (
-          <button className={styles.tableHeaderButton} onClick={() => onSortClick("entity")}>
+          <SortableTableHeader
+            onClick={() => onSortClick("entity")}
+            isActive={sortBy === "entity"}
+            isAscending={sortOrder === SortOrderEnum.ASC}
+          >
             <FormattedMessage id="tables.name" />
-            <SortIcon wasActive={sortBy === "entity"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
-          </button>
+          </SortableTableHeader>
         ),
         headerHighlighted: true,
         accessor: "entityName",
@@ -83,10 +85,13 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
       },
       {
         Header: (
-          <button className={styles.tableHeaderButton} onClick={() => onSortClick("connector")}>
+          <SortableTableHeader
+            onClick={() => onSortClick("connector")}
+            isActive={sortBy === "connector"}
+            isAscending={sortOrder === SortOrderEnum.ASC}
+          >
             <FormattedMessage id="tables.connector" />
-            <SortIcon wasActive={sortBy === "connector"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
-          </button>
+          </SortableTableHeader>
         ),
         accessor: "connectorName",
         Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
@@ -102,10 +107,13 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
       },
       {
         Header: (
-          <button className={styles.tableHeaderButton} onClick={() => onSortClick("lastSync")}>
+          <SortableTableHeader
+            onClick={() => onSortClick("lastSync")}
+            isActive={sortBy === "lastSync"}
+            isAscending={sortOrder === SortOrderEnum.ASC}
+          >
             <FormattedMessage id="tables.lastSync" />
-            <SortIcon wasActive={sortBy === "lastSync"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
-          </button>
+          </SortableTableHeader>
         ),
         accessor: "lastSync",
         Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (

airbyte-webapp/src/components/ui/Table/SortableTableHeader/SortableTableHeader.module.scss

@@ -0,0 +1,14 @@
+.sortButton {
+  background-color: inherit;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  font-weight: inherit;
+  text-transform: inherit;
+  white-space: nowrap;
+}
+
+.sortIcon {
+  margin-left: 10px;
+}

airbyte-webapp/src/components/ui/Table/SortableTableHeader/index.tsx

@@ -0,0 +1,23 @@
+import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { PropsWithChildren } from "react";
+
+import styles from "./SortableTableHeader.module.scss";
+
+interface SortableTableHeaderProps {
+  onClick: () => void;
+  isActive: boolean;
+  isAscending: boolean;
+}
+
+export const SortableTableHeader: React.FC<PropsWithChildren<SortableTableHeaderProps>> = ({
+  onClick,
+  isActive,
+  isAscending,
+  children,
+}) => (
+  <button className={styles.sortButton} onClick={onClick}>
+    {children}
+    <FontAwesomeIcon className={styles.sortIcon} icon={isAscending || !isActive ? faCaretUp : faCaretDown} />
+  </button>
+);

airbyte-webapp/src/components/ui/Table/index.ts

@@ -1 +1,2 @@
 export * from "./Table";
+export { SortableTableHeader } from "./SortableTableHeader";

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx

@@ -5,9 +5,8 @@ import { useNavigate } from "react-router-dom";
 import { CellProps } from "react-table";
 import styled from "styled-components";
 
-import SortIcon from "components/EntityTable/components/SortIcon";
 import { SortOrderEnum } from "components/EntityTable/types";
-import { Table } from "components/ui/Table";
+import { Table, SortableTableHeader } from "components/ui/Table";
 
 import { useQuery } from "hooks/useQuery";
 import { CreditConsumptionByConnector } from "packages/cloud/lib/domain/cloudWorkspaces/types";
@@ -16,7 +15,6 @@ import { useSourceDefinitionList } from "services/connector/SourceDefinitionServ
 
 import ConnectionCell from "./ConnectionCell";
 import UsageCell from "./UsageCell";
-import styles from "./UsagePerConnectionTable.module.scss";
 
 const Content = styled.div`
   padding: 0 60px 0 15px;
@@ -112,10 +110,13 @@ const UsagePerConnectionTable: React.FC<UsagePerConnectionTableProps> = ({ credi
     () => [
       {
         Header: (
-          <button className={styles.tableHeaderButton} onClick={() => onSortClick("connection")}>
+          <SortableTableHeader
+            onClick={() => onSortClick("connection")}
+            isActive={sortBy === "connection"}
+            isAscending={sortOrder === SortOrderEnum.ASC}
+          >
             <FormattedMessage id="credits.connection" />
-            <SortIcon wasActive={sortBy === "connection"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
-          </button>
+          </SortableTableHeader>
         ),
         customWidth: 30,
         accessor: "sourceDefinitionName",
@@ -130,10 +131,13 @@ const UsagePerConnectionTable: React.FC<UsagePerConnectionTableProps> = ({ credi
       },
       {
         Header: (
-          <button className={styles.tableHeaderButton} onClick={() => onSortClick("usage")}>
+          <SortableTableHeader
+            onClick={() => onSortClick("usage")}
+            isActive={sortBy === "usage"}
+            isAscending={sortOrder === SortOrderEnum.ASC}
+          >
             <FormattedMessage id="credits.usage" />
-            <SortIcon wasActive={sortBy === "usage"} lowToLarge={sortOrder === SortOrderEnum.ASC} />
-          </button>
+          </SortableTableHeader>
         ),
         accessor: "creditsConsumed",
         collapse: true,