🪟 🧹 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 <168664+edmundito@users.noreply.github.com>

* 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 <octavia-squidington-iii@users.noreply.github.com>

* 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 <xpuska513@users.noreply.github.com>
Co-authored-by: Kyryl Skobylko <xpuska513@gmail.com>

* 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 <xpuska513@gmail.com>

* 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 <benmoriceau@users.noreply.github.com>

* 🎉 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 <oleksandr.bazarnov@globallogic.com>
Co-authored-by: Octavia Squidington III <octavia-squidington-iii@users.noreply.github.com>

* 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 <alexandre@airbyte.io>

* 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 <benmoriceau@users.noreply.github.com>
Co-authored-by: Kyryl Skobylko <xpuska513@gmail.com>

* 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 <octavia-squidington-iii@users.noreply.github.com>

* #17506 fix klaviyo & marketo expected_records (airbytehq#18101)

Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com>
Co-authored-by: terencecho <3916587+terencecho@users.noreply.github.com>
Co-authored-by: Ryan Fu <ryan.fu@airbyte.io>
Co-authored-by: Jimmy Ma <gosusnp@users.noreply.github.com>
Co-authored-by: Kyryl Skobylko <xpuska513@gmail.com>
Co-authored-by: Evan Tahler <evan@airbyte.io>
Co-authored-by: Alexandre Girard <alexandre@airbyte.io>
Co-authored-by: Yevhen Sukhomud <suhomud@gmail.com>
Co-authored-by: Octavia Squidington III <octavia-squidington-iii@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: xpuska513 <xpuska513@users.noreply.github.com>
Co-authored-by: Prasanth <72515998+sfc-gh-pkommini@users.noreply.github.com>
Co-authored-by: Benoit Moriceau <benoit@airbyte.io>
Co-authored-by: Amruta Ranade <11484018+Amruta-Ranade@users.noreply.github.com>
Co-authored-by: Octavia Squidington III <90398440+octavia-squidington-iii@users.noreply.github.com>
Co-authored-by: benmoriceau <benmoriceau@users.noreply.github.com>
Co-authored-by: Artem Inzhyyants <36314070+artem1205@users.noreply.github.com>
Co-authored-by: Oleksandr Bazarnov <oleksandr.bazarnov@globallogic.com>
Co-authored-by: Brian Lai <51336873+brianjlai@users.noreply.github.com>
Co-authored-by: Michael Siega <109092231+mfsiega-airbyte@users.noreply.github.com>
Co-authored-by: Alexander Marquardt <alexander.marquardt@gmail.com>
Co-authored-by: Denys Davydov <davydov.den18@gmail.com>

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,