🪟 🧹 Implement ColumnSortButton component (airbytehq#17798)

* Implement ColumnSortButton component * Updates component name; Moves component to ui/Table folder; Refactors formattedMessageId property into using render content as children directly; Removes minor SortIcon component * Update airbyte-webapp/src/App.tsx Co-authored-by: Edmundo Ruiz Ghanem <[email protected]> * Updates next properties: wasActive -> isActive, lowToLarge -> isAscending * Skip psql stop in acceptance test for gke (airbytehq#18023) * Checks for iterator hasNext element (airbytehq#18041) * Checks for iterator hasNext element * Fix linter with newline * Add Message Migration to Destination Connection Checks (airbytehq#17954) * Add Message Migration to Destination Connection Checks * Fix test setup * Update helm release workflow (airbytehq#18048) * Update workflow * Update trigger rules * fix: Update release workflow with abillity to add tags * Update workflow * Remove unused `airbyte-cli` (airbytehq#18009) * 🐛 [low-code] $options shouldn't overwrite values that are already defined (airbytehq#18060) * fix * Add missing test * remove prints * extract to method * rename * Add missing test * rename * bump * Update helm chart comments (airbytehq#18072) * Update helm charts (airbytehq#18073) * add test * fix chart.yaml * 16250 Destination Redis: Add SSH support (airbytehq#17951) * 16250 Destination Redis: Add SSH support * 16250 Resolve port issue * 11679 Bump version * auto-bump connector version Co-authored-by: Octavia Squidington III <[email protected]> * Bump helm chart version reference to 0.40.20 (airbytehq#18074) * Bump helm chart version reference to 0.40.20 * remove binary Co-authored-by: xpuska513 <[email protected]> Co-authored-by: Kyryl Skobylko <[email protected]> * Helm Chart: Create service annotations for airbyte-server (airbytehq#17932) * Support annotations for airbyte-server as well, update version and update docs. * Fix auto-indent. Co-authored-by: Kyryl Skobylko <[email protected]> * Bmoric/remove dep server worker (airbytehq#17894) * test [ci skip] * Autogenerated files * Add missing annotation * Remove unused json2Schema block from worker * Move tess * Missing deps and format * Fix test build * TMP * Add missing dependencies * PR comments * Tmp * [ci skip] Tmp * Fix acceptance test and add the seed dependency * Fix build * For diff * tmp * Build pass * make the worker to be on the platform only * fix setting.yaml * Fix pmd * Fix Cron * Add chart * Fix cron * Fix server build.gradle * Fix jar conflict * PR comments * Add cron micronaut environemnt * Updated connector catalog page (airbytehq#18076) * Move the port forward outside of the main docker-compose (airbytehq#17864) * Bump Airbyte version from 0.40.14 to 0.40.15 (airbytehq#17970) Co-authored-by: benmoriceau <[email protected]> * 🎉 Source Shopify: Add metafield streams (airbytehq#17962) * 🎉 Source Shopify: Add metafield streams * Source Shopify: fix unittest * Source Shopify: docs update * Source Shopify: fix backward compatibility test * Source Shopify: fix schemas * Source Shopify: fix state filter * Source Shopify: refactor & optimize * Source Shopify: fix test privileges * Source Shopify: fix stream filter * Source Shopify: fix streams * Source Shopify: update abnormal state * Source Shopify: fix abnormal state streams * Source Shopify: fix streams * updated methods, formated code * Source Shopify: typo fix * auto-bump connector version Co-authored-by: Oleksandr Bazarnov <[email protected]> Co-authored-by: Octavia Squidington III <[email protected]> * fix check for streams that do not use a stream slicer (airbytehq#18080) * fix check for streams that do not use a stream slicer * increment version and changelog before publish * tolerate database nulls in webhook operation configs (airbytehq#18084) * Implement webhook operation in the sync workflow (airbytehq#18022) Implements the webhook operation as part of the sync workflow. - Introduces the new activity implementation - Updates the various interfaces that pass input to get the relevant configs to the sync workflow - Hooks the new activity into the sync workflow - Passes the webhook configs along into the sync workflow job * Bump helm chart version reference to 0.40.22 (airbytehq#18077) * Added new "filters" python file, along with a "hash" filter. This can… (airbytehq#18000) * Added new "filters" python file, along with a "hash" filter. This can be extended to include other custom filters in the future. * Added additional comments * Moved usage of the hash_obj inside the conditional that confirms it exists * Moved the hash function call inside a condition to ensure that it exists * Fixed the application of the salt , so that it does not modify the hash unless it is actually passed in. * Added unit tests to validate new jinja hash functionality * Updated unit test to pass numeric value as a float instead of string * Removed unreferenced import to pytest * Updated version * format * format * format * format * format Co-authored-by: Alexandre Girard <[email protected]> * Bump helm chart version reference to 0.40.24 (airbytehq#18081) * Bump helm chart version reference to 0.40.24 * Update .gitignore Co-authored-by: benmoriceau <[email protected]> Co-authored-by: Kyryl Skobylko <[email protected]> * SATs: allow new records in a sequential read for full refresh test (airbytehq#17660) * SATs: allow new records in a sequential read for full refresh test * SATs: upd changelog * SATs: change the output when failing full refresh test * SATs: upd according to code review * Source facebook-marketing: remove `pixel` from custom conversions stream (airbytehq#18045) * airbytehq#744 source facebook-marketing: rm pixel from custom conversions stream * airbytehq#744 source fb marketing: upd changelog * airbytehq#744 source facebook-marketing - add custom_conversions to the test catalog * auto-bump connector version Co-authored-by: Octavia Squidington III <[email protected]> * #17506 fix klaviyo & marketo expected_records (airbytehq#18101) Co-authored-by: Edmundo Ruiz Ghanem <[email protected]> Co-authored-by: terencecho <[email protected]> Co-authored-by: Ryan Fu <[email protected]> Co-authored-by: Jimmy Ma <[email protected]> Co-authored-by: Kyryl Skobylko <[email protected]> Co-authored-by: Evan Tahler <[email protected]> Co-authored-by: Alexandre Girard <[email protected]> Co-authored-by: Yevhen Sukhomud <[email protected]> Co-authored-by: Octavia Squidington III <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: xpuska513 <[email protected]> Co-authored-by: Prasanth <[email protected]> Co-authored-by: Benoit Moriceau <[email protected]> Co-authored-by: Amruta Ranade <[email protected]> Co-authored-by: Octavia Squidington III <[email protected]> Co-authored-by: benmoriceau <[email protected]> Co-authored-by: Artem Inzhyyants <[email protected]> Co-authored-by: Oleksandr Bazarnov <[email protected]> Co-authored-by: Brian Lai <[email protected]> Co-authored-by: Michael Siega <[email protected]> Co-authored-by: Alexander Marquardt <[email protected]> Co-authored-by: Denys Davydov <[email protected]>
jhammarstedt · Oct 31, 2022 · e670c0f · e670c0f
1 parent 0435dbe
commit e670c0f
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 82 deletions.
diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx b/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>) => (

diff --git a/airbyte-webapp/src/components/EntityTable/ImplementationTable.module.scss b/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;
-}
diff --git a/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx b/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>) => (

diff --git a/airbyte-webapp/src/components/EntityTable/components/SortIcon.module.scss b/airbyte-webapp/src/components/EntityTable/components/SortIcon.module.scss
diff --git a/airbyte-webapp/src/components/EntityTable/components/SortIcon.tsx b/airbyte-webapp/src/components/EntityTable/components/SortIcon.tsx
diff --git a/airbyte-webapp/src/components/ui/Table/SortableTableHeader/SortableTableHeader.module.scss b/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;
+}
diff --git a/airbyte-webapp/src/components/ui/Table/SortableTableHeader/index.tsx b/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>
+);
diff --git a/airbyte-webapp/src/components/ui/Table/index.ts b/airbyte-webapp/src/components/ui/Table/index.ts
@@ -1 +1,2 @@
 export * from "./Table";
+export { SortableTableHeader } from "./SortableTableHeader";
diff --git a/...c/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss b/...c/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss
diff --git a/...ebapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx b/...ebapp/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,