From e670c0f507d5a13a3a11926ec19883ddf7309ce6 Mon Sep 17 00:00:00 2001 From: Yatsuk Bogdan Date: Wed, 19 Oct 2022 22:55:27 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=C2=A0=F0=9F=A7=B9=20Implement=20Co?= =?UTF-8?q?lumnSortButton=20component=20(#17798)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 (#18023) * Checks for iterator hasNext element (#18041) * Checks for iterator hasNext element * Fix linter with newline * Add Message Migration to Destination Connection Checks (#17954) * Add Message Migration to Destination Connection Checks * Fix test setup * Update helm release workflow (#18048) * Update workflow * Update trigger rules * fix: Update release workflow with abillity to add tags * Update workflow * Remove unused `airbyte-cli` (#18009) * πŸ› [low-code] $options shouldn't overwrite values that are already defined (#18060) * fix * Add missing test * remove prints * extract to method * rename * Add missing test * rename * bump * Update helm chart comments (#18072) * Update helm charts (#18073) * add test * fix chart.yaml * 16250 Destination Redis: Add SSH support (#17951) * 16250 Destination Redis: Add SSH support * 16250 Resolve port issue * 11679 Bump version * auto-bump connector version Co-authored-by: Octavia Squidington III * Bump helm chart version reference to 0.40.20 (#18074) * Bump helm chart version reference to 0.40.20 * remove binary Co-authored-by: xpuska513 Co-authored-by: Kyryl Skobylko * Helm Chart: Create service annotations for airbyte-server (#17932) * Support annotations for airbyte-server as well, update version and update docs. * Fix auto-indent. Co-authored-by: Kyryl Skobylko * Bmoric/remove dep server worker (#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 (#18076) * Move the port forward outside of the main docker-compose (#17864) * Bump Airbyte version from 0.40.14 to 0.40.15 (#17970) Co-authored-by: benmoriceau * πŸŽ‰ Source Shopify: Add metafield streams (#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 Co-authored-by: Octavia Squidington III * fix check for streams that do not use a stream slicer (#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 (#18084) * Implement webhook operation in the sync workflow (#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 (#18077) * Added new "filters" python file, along with a "hash" filter. This can… (#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 * Bump helm chart version reference to 0.40.24 (#18081) * Bump helm chart version reference to 0.40.24 * Update .gitignore Co-authored-by: benmoriceau Co-authored-by: Kyryl Skobylko * SATs: allow new records in a sequential read for full refresh test (#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 (#18045) * #744 source facebook-marketing: rm pixel from custom conversions stream * #744 source fb marketing: upd changelog * #744 source facebook-marketing - add custom_conversions to the test catalog * auto-bump connector version Co-authored-by: Octavia Squidington III * #17506 fix klaviyo & marketo expected_records (#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 Co-authored-by: Jimmy Ma Co-authored-by: Kyryl Skobylko Co-authored-by: Evan Tahler Co-authored-by: Alexandre Girard Co-authored-by: Yevhen Sukhomud Co-authored-by: Octavia Squidington III Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: xpuska513 Co-authored-by: Prasanth <72515998+sfc-gh-pkommini@users.noreply.github.com> Co-authored-by: Benoit Moriceau 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 Co-authored-by: Artem Inzhyyants <36314070+artem1205@users.noreply.github.com> Co-authored-by: Oleksandr Bazarnov 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 Co-authored-by: Denys Davydov --- .../EntityTable/ConnectionTable.tsx | 54 ++++++++++--------- .../ImplementationTable.module.scss | 11 ---- .../EntityTable/ImplementationTable.tsx | 30 +++++++---- .../components/SortIcon.module.scss | 3 -- .../EntityTable/components/SortIcon.tsx | 16 ------ .../SortableTableHeader.module.scss | 14 +++++ .../ui/Table/SortableTableHeader/index.tsx | 23 ++++++++ .../src/components/ui/Table/index.ts | 1 + .../UsagePerConnectionTable.module.scss | 7 --- .../components/UsagePerConnectionTable.tsx | 22 ++++---- 10 files changed, 99 insertions(+), 82 deletions(-) delete mode 100644 airbyte-webapp/src/components/EntityTable/components/SortIcon.module.scss delete mode 100644 airbyte-webapp/src/components/EntityTable/components/SortIcon.tsx create mode 100644 airbyte-webapp/src/components/ui/Table/SortableTableHeader/SortableTableHeader.module.scss create mode 100644 airbyte-webapp/src/components/ui/Table/SortableTableHeader/index.tsx delete mode 100644 airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx b/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx index c54343c3dbbc..baaaaccfaecb 100644 --- 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 = ({ data, entity, onClickRow, onSync }) () => [ { Header: ( - + ), headerHighlighted: true, accessor: "name", @@ -90,14 +91,15 @@ const ConnectionTable: React.FC = ({ data, entity, onClickRow, onSync }) }, { Header: ( - + onSortClick("entityName")} + isActive={sortBy === "entityName"} + isAscending={sortOrder === SortOrderEnum.ASC} + > + + ), headerHighlighted: true, accessor: "entityName", @@ -112,14 +114,13 @@ const ConnectionTable: React.FC = ({ data, entity, onClickRow, onSync }) }, { Header: ( - + onSortClick("connectorName")} + isActive={sortBy === "connectorName"} + isAscending={sortOrder === SortOrderEnum.ASC} + > + + ), accessor: "connectorName", Cell: ({ cell, row }: CellProps) => ( @@ -136,10 +137,13 @@ const ConnectionTable: React.FC = ({ data, entity, onClickRow, onSync }) }, { Header: ( - + ), accessor: "lastSync", Cell: ({ cell, row }: CellProps) => ( diff --git a/airbyte-webapp/src/components/EntityTable/ImplementationTable.module.scss b/airbyte-webapp/src/components/EntityTable/ImplementationTable.module.scss index 2e7adc15fd8e..798678056755 100644 --- 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 index 156e5d114dd5..6c06dee979a6 100644 --- 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 = ({ data, entity, onClickRow }) => () => [ { Header: ( - + ), headerHighlighted: true, accessor: "entityName", @@ -83,10 +85,13 @@ const ImplementationTable: React.FC = ({ data, entity, onClickRow }) => }, { Header: ( - + ), accessor: "connectorName", Cell: ({ cell, row }: CellProps) => ( @@ -102,10 +107,13 @@ const ImplementationTable: React.FC = ({ data, entity, onClickRow }) => }, { Header: ( - + ), accessor: "lastSync", Cell: ({ cell, row }: CellProps) => ( diff --git a/airbyte-webapp/src/components/EntityTable/components/SortIcon.module.scss b/airbyte-webapp/src/components/EntityTable/components/SortIcon.module.scss deleted file mode 100644 index 7e0dfe796b3a..000000000000 --- a/airbyte-webapp/src/components/EntityTable/components/SortIcon.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.sortIcon { - margin-left: 10px; -} diff --git a/airbyte-webapp/src/components/EntityTable/components/SortIcon.tsx b/airbyte-webapp/src/components/EntityTable/components/SortIcon.tsx deleted file mode 100644 index 4fa76b0023d8..000000000000 --- a/airbyte-webapp/src/components/EntityTable/components/SortIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import * as React from "react"; - -import styles from "./SortIcon.module.scss"; - -interface SortIconProps { - lowToLarge?: boolean; - wasActive?: boolean; -} - -const SortIcon: React.FC = ({ wasActive, lowToLarge }) => ( - -); - -export default SortIcon; diff --git a/airbyte-webapp/src/components/ui/Table/SortableTableHeader/SortableTableHeader.module.scss b/airbyte-webapp/src/components/ui/Table/SortableTableHeader/SortableTableHeader.module.scss new file mode 100644 index 000000000000..07a102f655e1 --- /dev/null +++ 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 new file mode 100644 index 000000000000..b83636615d25 --- /dev/null +++ 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> = ({ + onClick, + isActive, + isAscending, + children, +}) => ( + +); diff --git a/airbyte-webapp/src/components/ui/Table/index.ts b/airbyte-webapp/src/components/ui/Table/index.ts index e40efa4761d0..11dec96097b6 100644 --- 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/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss deleted file mode 100644 index 2e032aaea465..000000000000 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.tableHeaderButton { - user-select: none; - - &:hover { - cursor: pointer; - } -} diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx index e552120503c2..8765cc839d49 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx +++ b/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 = ({ credi () => [ { Header: ( - + ), customWidth: 30, accessor: "sourceDefinitionName", @@ -130,10 +131,13 @@ const UsagePerConnectionTable: React.FC = ({ credi }, { Header: ( - + ), accessor: "creditsConsumed", collapse: true,