From dbe90d3f88e3328ad37921cef21bcfb3146053e6 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 11 Jan 2023 16:10:09 -0500 Subject: [PATCH 01/29] genericize alert component --- .../src/components/ui/Alert/Alert.module.scss | 26 +++++++++++++++++++ .../src/components/ui/Alert/Alert.tsx | 16 ++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 airbyte-webapp/src/components/ui/Alert/Alert.module.scss create mode 100644 airbyte-webapp/src/components/ui/Alert/Alert.tsx diff --git a/airbyte-webapp/src/components/ui/Alert/Alert.module.scss b/airbyte-webapp/src/components/ui/Alert/Alert.module.scss new file mode 100644 index 0000000000000..b22b2bba65947 --- /dev/null +++ b/airbyte-webapp/src/components/ui/Alert/Alert.module.scss @@ -0,0 +1,26 @@ +@use "scss/colors"; +@use "scss/variables" as vars; + +.container { + padding: vars.$spacing-md vars.$spacing-lg; + border-radius: vars.$border-radius-lg; + white-space: break-spaces; + margin-top: vars.$spacing-lg; + + &.yellow { + background: colors.$yellow-100; + } + + &.blue { + background: colors.$blue-100; + } + + a { + color: colors.$dark-blue; + + &:hover, + &:focus { + color: colors.$blue-400; + } + } +} diff --git a/airbyte-webapp/src/components/ui/Alert/Alert.tsx b/airbyte-webapp/src/components/ui/Alert/Alert.tsx new file mode 100644 index 0000000000000..c0964bba879b9 --- /dev/null +++ b/airbyte-webapp/src/components/ui/Alert/Alert.tsx @@ -0,0 +1,16 @@ +import classNames from "classnames"; +import React, { PropsWithChildren } from "react"; + +import styles from "./Alert.module.scss"; + +interface AlertProps { + variant: "yellow" | "blue"; +} + +export const Alert: React.FC> = ({ variant, children }) => { + const containerStyles = classNames(styles.container, { + [styles.yellow]: variant === "yellow", + [styles.blue]: variant === "blue", + }); + return
{children}
; +}; From 4d7e002730f0f6fc9f702a75663b49839494d840 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 08:54:55 -0500 Subject: [PATCH 02/29] add className prop to alert --- airbyte-webapp/src/components/ui/Alert/Alert.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Alert/Alert.tsx b/airbyte-webapp/src/components/ui/Alert/Alert.tsx index c0964bba879b9..abf520f7b1745 100644 --- a/airbyte-webapp/src/components/ui/Alert/Alert.tsx +++ b/airbyte-webapp/src/components/ui/Alert/Alert.tsx @@ -5,10 +5,11 @@ import styles from "./Alert.module.scss"; interface AlertProps { variant: "yellow" | "blue"; + className?: string; } -export const Alert: React.FC> = ({ variant, children }) => { - const containerStyles = classNames(styles.container, { +export const Alert: React.FC> = ({ variant, children, className }) => { + const containerStyles = classNames(styles.container, className, { [styles.yellow]: variant === "yellow", [styles.blue]: variant === "blue", }); From 5de24d1105d13886f3ed187b8a599333a497e7c6 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 13:31:28 -0500 Subject: [PATCH 03/29] rename infobox "callout", swap in place for scss module --- airbyte-webapp/src/components/ui/Alert/Alert.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ui/Alert/Alert.tsx b/airbyte-webapp/src/components/ui/Alert/Alert.tsx index abf520f7b1745..bc32a583149c5 100644 --- a/airbyte-webapp/src/components/ui/Alert/Alert.tsx +++ b/airbyte-webapp/src/components/ui/Alert/Alert.tsx @@ -8,7 +8,7 @@ interface AlertProps { className?: string; } -export const Alert: React.FC> = ({ variant, children, className }) => { +export const Alert: React.FC> = ({ variant = "blue", children, className }) => { const containerStyles = classNames(styles.container, className, { [styles.yellow]: variant === "yellow", [styles.blue]: variant === "blue", From 9a5c61d05b591d1b0a477f08697c16964fa2def6 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 14:15:40 -0500 Subject: [PATCH 04/29] fix imports --- airbyte-webapp/.experiments.json | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 airbyte-webapp/.experiments.json diff --git a/airbyte-webapp/.experiments.json b/airbyte-webapp/.experiments.json new file mode 100644 index 0000000000000..20e9701e1adc8 --- /dev/null +++ b/airbyte-webapp/.experiments.json @@ -0,0 +1,4 @@ +{ + "authPage.signup.hideName": false, + "connector.orderOverwrite": { "connectorId": 5 } +} From 05fc5aae31fdb12c8baa0132d8821f928ef15099 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 14:34:15 -0500 Subject: [PATCH 05/29] use callout in place of alert --- .../src/components/ui/Alert/Alert.module.scss | 26 ------------------- .../src/components/ui/Alert/Alert.tsx | 17 ------------ .../components/ui/Callout/Callout.module.scss | 8 ++++-- .../LowCreditBalanceHint.tsx | 2 +- 4 files changed, 7 insertions(+), 46 deletions(-) delete mode 100644 airbyte-webapp/src/components/ui/Alert/Alert.module.scss delete mode 100644 airbyte-webapp/src/components/ui/Alert/Alert.tsx diff --git a/airbyte-webapp/src/components/ui/Alert/Alert.module.scss b/airbyte-webapp/src/components/ui/Alert/Alert.module.scss deleted file mode 100644 index b22b2bba65947..0000000000000 --- a/airbyte-webapp/src/components/ui/Alert/Alert.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use "scss/colors"; -@use "scss/variables" as vars; - -.container { - padding: vars.$spacing-md vars.$spacing-lg; - border-radius: vars.$border-radius-lg; - white-space: break-spaces; - margin-top: vars.$spacing-lg; - - &.yellow { - background: colors.$yellow-100; - } - - &.blue { - background: colors.$blue-100; - } - - a { - color: colors.$dark-blue; - - &:hover, - &:focus { - color: colors.$blue-400; - } - } -} diff --git a/airbyte-webapp/src/components/ui/Alert/Alert.tsx b/airbyte-webapp/src/components/ui/Alert/Alert.tsx deleted file mode 100644 index bc32a583149c5..0000000000000 --- a/airbyte-webapp/src/components/ui/Alert/Alert.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import classNames from "classnames"; -import React, { PropsWithChildren } from "react"; - -import styles from "./Alert.module.scss"; - -interface AlertProps { - variant: "yellow" | "blue"; - className?: string; -} - -export const Alert: React.FC> = ({ variant = "blue", children, className }) => { - const containerStyles = classNames(styles.container, className, { - [styles.yellow]: variant === "yellow", - [styles.blue]: variant === "blue", - }); - return
{children}
; -}; diff --git a/airbyte-webapp/src/components/ui/Callout/Callout.module.scss b/airbyte-webapp/src/components/ui/Callout/Callout.module.scss index 88b21fdaa8549..8ca7f0dfd1ec7 100644 --- a/airbyte-webapp/src/components/ui/Callout/Callout.module.scss +++ b/airbyte-webapp/src/components/ui/Callout/Callout.module.scss @@ -9,11 +9,15 @@ align-items: center; } -.default { +.compact { + padding: vars.$spacing-md vars.$spacing-lg; +} + +.yellow { background-color: colors.$yellow-100; } -.error { +.red { background-color: colors.$red-50; } diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx index 0710c9d646085..7d17d2d496bd6 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx @@ -23,7 +23,7 @@ export const LowCreditBalanceHint: React.FC> = } const status = cloudWorkspace.remainingCredits <= 0 ? "zeroBalance" : "lowBalance"; - const variant = status === "zeroBalance" ? "error" : "default"; + const variant = status === "zeroBalance" ? "red" : "yellow"; const Icons = { lowBalance: faCreditCard, From c76278c00536a067e70c612bcad43f14af25d5a0 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 15:02:17 -0500 Subject: [PATCH 06/29] add blue variant, remove icon prop --- airbyte-webapp/src/components/ui/Callout/Callout.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ui/Callout/Callout.module.scss b/airbyte-webapp/src/components/ui/Callout/Callout.module.scss index 8ca7f0dfd1ec7..20c84377535c7 100644 --- a/airbyte-webapp/src/components/ui/Callout/Callout.module.scss +++ b/airbyte-webapp/src/components/ui/Callout/Callout.module.scss @@ -10,7 +10,7 @@ } .compact { - padding: vars.$spacing-md vars.$spacing-lg; + padding: variables.$spacing-md variables.$spacing-lg; } .yellow { From 511fa476468a1b2d8016fb388e5928184ace8459 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 15:10:01 -0500 Subject: [PATCH 07/29] remove single use prop, use a classname instead --- airbyte-webapp/src/components/ui/Callout/Callout.module.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Callout/Callout.module.scss b/airbyte-webapp/src/components/ui/Callout/Callout.module.scss index 20c84377535c7..857ebe4a3e2bb 100644 --- a/airbyte-webapp/src/components/ui/Callout/Callout.module.scss +++ b/airbyte-webapp/src/components/ui/Callout/Callout.module.scss @@ -9,10 +9,6 @@ align-items: center; } -.compact { - padding: variables.$spacing-md variables.$spacing-lg; -} - .yellow { background-color: colors.$yellow-100; } From abed550dbec9c9d92b29cddf9286fa6c070d470e Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 08:23:21 -0500 Subject: [PATCH 08/29] WIP --- .../InlineEnrollmentAlert.tsx | 29 +++++++++++++++++++ .../src/packages/cloud/locales/en.json | 4 ++- 2 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentAlert.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentAlert.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentAlert.tsx new file mode 100644 index 0000000000000..cdb25edcf63be --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentAlert.tsx @@ -0,0 +1,29 @@ +import { FormattedMessage } from "react-intl"; + +import { Alert } from "components/ui/Alert/Alert"; +import { Text } from "components/ui/Text"; + +const EnrollLink = () => { + const onEnrollClick = () => { + return null; + }; + return ( + onEnrollClick()} + onKeyDown={(e) => e.keyCode === 13 && onEnrollClick} + tabIndex={0} + > + + + ); +}; +export const InlineEnrollmentAlert: React.FC = () => { + return ( + + + + + + ); +}; diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json index a4939e491007d..4512a4c40ae0b 100644 --- a/airbyte-webapp/src/packages/cloud/locales/en.json +++ b/airbyte-webapp/src/packages/cloud/locales/en.json @@ -178,5 +178,7 @@ "inviteUsersHint.message": "Need help from a teammate to set up the {connector}?", "inviteUsersHint.cta": "Invite users", - "sidebar.credits": "Credits" + "sidebar.credits": "Credits", + + "freeConnectorProgram.youCanEnroll": "You can enroll in the Free Connector Program to use Alpha and Beta connectors for free." } From ade40ffd612cf8257dc1a1ace82dfcbbf15c8855 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 16:10:33 -0500 Subject: [PATCH 09/29] WIP: i18n is mad --- .../InlineEnrollmentAlert.tsx | 29 ------------- .../InlineEnrollmentCallout.module.scss | 10 +++++ .../InlineEnrollmentCallout.tsx | 43 +++++++++++++++++++ .../src/packages/cloud/locales/en.json | 3 +- .../ConnectorDefinitionTypeControl.tsx | 6 ++- 5 files changed, 60 insertions(+), 31 deletions(-) delete mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentAlert.tsx create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentAlert.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentAlert.tsx deleted file mode 100644 index cdb25edcf63be..0000000000000 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentAlert.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FormattedMessage } from "react-intl"; - -import { Alert } from "components/ui/Alert/Alert"; -import { Text } from "components/ui/Text"; - -const EnrollLink = () => { - const onEnrollClick = () => { - return null; - }; - return ( - onEnrollClick()} - onKeyDown={(e) => e.keyCode === 13 && onEnrollClick} - tabIndex={0} - > - - - ); -}; -export const InlineEnrollmentAlert: React.FC = () => { - return ( - - - - - - ); -}; diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss new file mode 100644 index 0000000000000..63abd70325248 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss @@ -0,0 +1,10 @@ +@use "scss/variables"; +@use "scss/colors"; + +.container { + margin-top: variables.$spacing-lg; +} + +.freeText { + color: colors.$blue; +} diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx new file mode 100644 index 0000000000000..9a06ddd406bd7 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx @@ -0,0 +1,43 @@ +import React, { PropsWithChildren } from "react"; +import { FormattedMessage } from "react-intl"; + +import { Callout } from "components/ui/Callout"; +import { Text } from "components/ui/Text"; + +import styles from "./InlineEnrollmentCallout.module.scss"; + +const EnrollLink: React.FC> = ({ children }) => { + const onEnrollClick = () => { + return null; + }; + + return ( + onEnrollClick()} + onKeyDown={(e) => e.keyCode === 13 && onEnrollClick} + tabIndex={0} + > + {children} + + ); +}; +export const InlineEnrollmentCallout: React.FC = () => { + return ( + + + {content}, + freeText: (content: React.ReactNode) => ( + + {content} + + ), + }} + /> + + + ); +}; diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json index 4512a4c40ae0b..32705406ec075 100644 --- a/airbyte-webapp/src/packages/cloud/locales/en.json +++ b/airbyte-webapp/src/packages/cloud/locales/en.json @@ -180,5 +180,6 @@ "sidebar.credits": "Credits", - "freeConnectorProgram.youCanEnroll": "You can enroll in the Free Connector Program to use Alpha and Beta connectors for free." + "freeConnectorProgram.youCanEnroll": "You can enroll in the Free Connector Program to use Alpha and Beta connectors for free.", + "freeConnectorProgram.free": "free" } diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx index ffbc797bf8983..cbda5da96f239 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx @@ -24,6 +24,7 @@ import { useAvailableConnectorDefinitions } from "hooks/domain/connector/useAvai import { useExperiment } from "hooks/services/Experiment"; import { useModalService } from "hooks/services/Modal"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; +import { InlineEnrollmentCallout } from "packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout"; import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext"; import RequestConnectorModal from "views/Connector/RequestConnectorModal"; @@ -202,7 +203,10 @@ export const ConnectorDefinitionTypeControl: React.FC + <> + + + )} ); From 5ab16e99734318dc17f1252d9a2a4412a87340f9 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 18:14:10 -0500 Subject: [PATCH 10/29] add render logic --- .../FreeConnectorProgram/InlineEnrollmentCallout.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx index 9a06ddd406bd7..d3ac134dac8de 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx @@ -4,6 +4,8 @@ import { FormattedMessage } from "react-intl"; import { Callout } from "components/ui/Callout"; import { Text } from "components/ui/Text"; +import { useExperiment } from "hooks/services/Experiment"; + import styles from "./InlineEnrollmentCallout.module.scss"; const EnrollLink: React.FC> = ({ children }) => { @@ -23,6 +25,16 @@ const EnrollLink: React.FC> = ({ children }) => { ); }; export const InlineEnrollmentCallout: React.FC = () => { + const isFreeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); + + // todo: implement actual call once merged with issue #4006 + // for now, we'll just default to true + const enrolledInFreeConnectorProgram = false; + + if (!isFreeConnectorProgramEnabled || enrolledInFreeConnectorProgram) { + return null; + } + return ( From 61972593d03dbd25f582f7cb1ebebe8321056c39 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 18:28:02 -0500 Subject: [PATCH 11/29] make i18n happy --- .../InlineEnrollmentCallout.module.scss | 9 +++++++++ .../InlineEnrollmentCallout.tsx | 16 ++++++++-------- .../src/packages/cloud/locales/en.json | 3 +-- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss index 63abd70325248..afe74f0041f98 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss @@ -5,6 +5,15 @@ margin-top: variables.$spacing-lg; } +.enrollLink { + text-decoration: underline; + + &:hover, + &:active { + color: colors.$blue; + } +} + .freeText { color: colors.$blue; } diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx index d3ac134dac8de..515c84207dec7 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx @@ -4,11 +4,9 @@ import { FormattedMessage } from "react-intl"; import { Callout } from "components/ui/Callout"; import { Text } from "components/ui/Text"; -import { useExperiment } from "hooks/services/Experiment"; - import styles from "./InlineEnrollmentCallout.module.scss"; -const EnrollLink: React.FC> = ({ children }) => { +export const EnrollLink: React.FC> = ({ children }) => { const onEnrollClick = () => { return null; }; @@ -17,18 +15,20 @@ const EnrollLink: React.FC> = ({ children }) => { onEnrollClick()} - onKeyDown={(e) => e.keyCode === 13 && onEnrollClick} + onKeyDown={(e) => e.keyCode === 13 && onEnrollClick()} tabIndex={0} + className={styles.enrollLink} > {children} ); }; export const InlineEnrollmentCallout: React.FC = () => { - const isFreeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); - + // todo: turn this on so I can use the service instead of hardcoding! + // const isFreeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); + const isFreeConnectorProgramEnabled = true; // todo: implement actual call once merged with issue #4006 - // for now, we'll just default to true + // for now, we'll just default to false for enrolled const enrolledInFreeConnectorProgram = false; if (!isFreeConnectorProgramEnabled || enrolledInFreeConnectorProgram) { @@ -43,7 +43,7 @@ export const InlineEnrollmentCallout: React.FC = () => { values={{ enrollLink: (content: React.ReactNode) => {content}, freeText: (content: React.ReactNode) => ( - + {content} ), diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json index 32705406ec075..71ae5763db39d 100644 --- a/airbyte-webapp/src/packages/cloud/locales/en.json +++ b/airbyte-webapp/src/packages/cloud/locales/en.json @@ -180,6 +180,5 @@ "sidebar.credits": "Credits", - "freeConnectorProgram.youCanEnroll": "You can enroll in the Free Connector Program to use Alpha and Beta connectors for free.", - "freeConnectorProgram.free": "free" + "freeConnectorProgram.youCanEnroll": "You can enroll in the Free Connector Program to use Alpha and Beta connectors for free." } From 7f49e92a5fb6cdd693ce27c4e1a714159f62f05c Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 19:28:24 -0500 Subject: [PATCH 12/29] create a hook instead --- .../InlineEnrollmentCallout.module.scss | 1 + .../InlineEnrollmentCallout.tsx | 11 ------- .../useFreeConnectorProgram.tsx | 32 +++++++++++++++++++ .../ConnectionPage/ConnectionPageTitle.tsx | 12 ++++++- .../ConnectorDefinitionTypeControl.tsx | 1 + 5 files changed, 45 insertions(+), 12 deletions(-) create mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/useFreeConnectorProgram.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss index afe74f0041f98..09dde82a4ee5a 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss @@ -3,6 +3,7 @@ .container { margin-top: variables.$spacing-lg; + width: 100%; } .enrollLink { diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx index 515c84207dec7..9db0d2a97a1b3 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx @@ -24,17 +24,6 @@ export const EnrollLink: React.FC> = ({ children }) = ); }; export const InlineEnrollmentCallout: React.FC = () => { - // todo: turn this on so I can use the service instead of hardcoding! - // const isFreeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); - const isFreeConnectorProgramEnabled = true; - // todo: implement actual call once merged with issue #4006 - // for now, we'll just default to false for enrolled - const enrolledInFreeConnectorProgram = false; - - if (!isFreeConnectorProgramEnabled || enrolledInFreeConnectorProgram) { - return null; - } - return ( diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/useFreeConnectorProgram.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/useFreeConnectorProgram.tsx new file mode 100644 index 0000000000000..ac2a375815d7a --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/useFreeConnectorProgram.tsx @@ -0,0 +1,32 @@ +import { ReleaseStage, WebBackendConnectionRead } from "core/request/AirbyteClient"; +import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; +import { useSourceDefinitionList } from "services/connector/SourceDefinitionService"; + +export const useFreeConnectorProgram = () => { + // const isFreeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); + const isFreeConnectorProgramEnabled = true; + const { sourceDefinitions } = useSourceDefinitionList(); + const { destinationDefinitions } = useDestinationDefinitionList(); + + // todo: implement actual call once merged with issue #4006 + // for now, we'll just default to false for enrolled + const enrolledInFreeConnectorProgram = false; + + const showEnrollmentContent = !enrolledInFreeConnectorProgram && isFreeConnectorProgramEnabled; + + const connectionHasAlphaOrBetaConnector = (connection: WebBackendConnectionRead) => { + if (!isFreeConnectorProgramEnabled) { + return null; + } + + return ( + sourceDefinitions.find((source) => source.sourceDefinitionId === connection.source.sourceDefinitionId) + ?.releaseStage === (ReleaseStage.alpha || ReleaseStage.beta) || + destinationDefinitions.find( + (destination) => destination.destinationDefinitionId === connection.destination.destinationDefinitionId + )?.releaseStage === (ReleaseStage.alpha || ReleaseStage.beta) + ); + }; + + return { isFreeConnectorProgramEnabled, showEnrollmentContent, connectionHasAlphaOrBetaConnector }; +}; diff --git a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx index ac5f87afefe19..fd9a268695366 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx +++ b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx @@ -7,11 +7,14 @@ import { useNavigate, useParams } from "react-router-dom"; import { ConnectionInfoCard } from "components/connection/ConnectionInfoCard"; import { ConnectionName } from "components/connection/ConnectionName"; import { Callout } from "components/ui/Callout"; +import { FlexContainer } from "components/ui/Flex"; import { StepsMenu } from "components/ui/StepsMenu"; import { Text } from "components/ui/Text"; import { ConnectionStatus } from "core/request/AirbyteClient"; import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService"; +import { InlineEnrollmentCallout } from "packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout"; +import { useFreeConnectorProgram } from "packages/cloud/components/experiments/FreeConnectorProgram/useFreeConnectorProgram"; import { ConnectionRoutePaths } from "../types"; import styles from "./ConnectionPageTitle.module.scss"; @@ -23,6 +26,10 @@ export const ConnectionPageTitle: React.FC = () => { const { connection } = useConnectionEditService(); + const { showEnrollmentContent, connectionHasAlphaOrBetaConnector } = useFreeConnectorProgram(); + + const showFreeConnectorEnrollment = showEnrollmentContent && connectionHasAlphaOrBetaConnector(connection); + const steps = useMemo(() => { const steps = [ { @@ -72,7 +79,10 @@ export const ConnectionPageTitle: React.FC = () => {
- + + + {showFreeConnectorEnrollment && } +
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx index cbda5da96f239..792a6a4b20fba 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx @@ -129,6 +129,7 @@ export const ConnectorDefinitionTypeControl: React.FC getSortedDropdownDataUsingExperiment(connectorDefinitions, orderOverwrite), [connectorDefinitions, orderOverwrite] From b8ceaf5704feb303079848035679732777f5ca9a Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 19:42:03 -0500 Subject: [PATCH 13/29] make structure more like other experiments --- .../FreeConnectorProgram/{ => hooks}/useFreeConnectorProgram.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/{ => hooks}/useFreeConnectorProgram.tsx (100%) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/useFreeConnectorProgram.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx similarity index 100% rename from airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/useFreeConnectorProgram.tsx rename to airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx From d3536595e06b0c949e15a698aa52a94a78acaf48 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Thu, 12 Jan 2023 20:34:48 -0500 Subject: [PATCH 14/29] fix import order --- .../pages/connections/ConnectionPage/ConnectionPageTitle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx index fd9a268695366..10c1d8e2d4108 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx +++ b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx @@ -13,8 +13,8 @@ import { Text } from "components/ui/Text"; import { ConnectionStatus } from "core/request/AirbyteClient"; import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService"; +import { useFreeConnectorProgram } from "packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram"; import { InlineEnrollmentCallout } from "packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout"; -import { useFreeConnectorProgram } from "packages/cloud/components/experiments/FreeConnectorProgram/useFreeConnectorProgram"; import { ConnectionRoutePaths } from "../types"; import styles from "./ConnectionPageTitle.module.scss"; From 8973b8c43d7f9edd4b3cfbe32460e717a2cc07f4 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Fri, 13 Jan 2023 11:12:12 -0500 Subject: [PATCH 15/29] cleanup from rebase --- airbyte-webapp/src/components/ui/Callout/Callout.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Callout/Callout.module.scss b/airbyte-webapp/src/components/ui/Callout/Callout.module.scss index 857ebe4a3e2bb..88b21fdaa8549 100644 --- a/airbyte-webapp/src/components/ui/Callout/Callout.module.scss +++ b/airbyte-webapp/src/components/ui/Callout/Callout.module.scss @@ -9,11 +9,11 @@ align-items: center; } -.yellow { +.default { background-color: colors.$yellow-100; } -.red { +.error { background-color: colors.$red-50; } From 7424afb9468c38deea799c75bf9e939432d7e79a Mon Sep 17 00:00:00 2001 From: tealjulia Date: Fri, 13 Jan 2023 11:12:51 -0500 Subject: [PATCH 16/29] cleanup --- airbyte-webapp/.experiments.json | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 airbyte-webapp/.experiments.json diff --git a/airbyte-webapp/.experiments.json b/airbyte-webapp/.experiments.json deleted file mode 100644 index 20e9701e1adc8..0000000000000 --- a/airbyte-webapp/.experiments.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "authPage.signup.hideName": false, - "connector.orderOverwrite": { "connectorId": 5 } -} From b8e5f47d0ab04b95a9869754fc8928a0f6df42da Mon Sep 17 00:00:00 2001 From: tealjulia Date: Fri, 13 Jan 2023 11:14:15 -0500 Subject: [PATCH 17/29] one more cleanup bit --- .../components/LowCreditBalanceHint/LowCreditBalanceHint.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx index 7d17d2d496bd6..0710c9d646085 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx @@ -23,7 +23,7 @@ export const LowCreditBalanceHint: React.FC> = } const status = cloudWorkspace.remainingCredits <= 0 ? "zeroBalance" : "lowBalance"; - const variant = status === "zeroBalance" ? "red" : "yellow"; + const variant = status === "zeroBalance" ? "error" : "default"; const Icons = { lowBalance: faCreditCard, From 977ffc8100099c5d5c9142f340c38b04266a7060 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Fri, 13 Jan 2023 11:15:26 -0500 Subject: [PATCH 18/29] use new variant name --- .../FreeConnectorProgram/InlineEnrollmentCallout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx index 9db0d2a97a1b3..2a934a860ceaa 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx @@ -25,7 +25,7 @@ export const EnrollLink: React.FC> = ({ children }) = }; export const InlineEnrollmentCallout: React.FC = () => { return ( - + Date: Fri, 13 Jan 2023 11:19:25 -0500 Subject: [PATCH 19/29] pointer --- .../FreeConnectorProgram/InlineEnrollmentCallout.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss index 09dde82a4ee5a..18ad673c342e2 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss @@ -8,6 +8,7 @@ .enrollLink { text-decoration: underline; + cursor: pointer; &:hover, &:active { From 88aeb279fe868dc243a57a6dfec38e13264d737c Mon Sep 17 00:00:00 2001 From: tealjulia Date: Fri, 13 Jan 2023 11:21:38 -0500 Subject: [PATCH 20/29] use experiment hook --- .../FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx index ac2a375815d7a..0f55a0a8e9d93 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx @@ -1,14 +1,15 @@ import { ReleaseStage, WebBackendConnectionRead } from "core/request/AirbyteClient"; +import { useExperiment } from "hooks/services/Experiment"; import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; import { useSourceDefinitionList } from "services/connector/SourceDefinitionService"; export const useFreeConnectorProgram = () => { - // const isFreeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); - const isFreeConnectorProgramEnabled = true; + const isFreeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); + const { sourceDefinitions } = useSourceDefinitionList(); const { destinationDefinitions } = useDestinationDefinitionList(); - // todo: implement actual call once merged with issue #4006 + // todo: implement actual call once it is merged with issue #4006 // for now, we'll just default to false for enrolled const enrolledInFreeConnectorProgram = false; From d88be337ce9ba15151ac0010864fdd827f642a93 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 17 Jan 2023 10:06:41 -0500 Subject: [PATCH 21/29] use button instead of span for enroll link --- .../InlineEnrollmentCallout.module.scss | 8 +++++++- .../FreeConnectorProgram/InlineEnrollmentCallout.tsx | 10 ++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss index 18ad673c342e2..a33a050b980fb 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss @@ -9,10 +9,16 @@ .enrollLink { text-decoration: underline; cursor: pointer; + padding: 0; + color: colors.$dark-blue; + font-weight: 400; + border: none; + background-color: transparent; + font-size: inherit; &:hover, &:active { - color: colors.$blue; + color: colors.$blue !important; } } diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx index 2a934a860ceaa..6aa9464ac653e 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx @@ -12,15 +12,9 @@ export const EnrollLink: React.FC> = ({ children }) = }; return ( - onEnrollClick()} - onKeyDown={(e) => e.keyCode === 13 && onEnrollClick()} - tabIndex={0} - className={styles.enrollLink} - > + ); }; export const InlineEnrollmentCallout: React.FC = () => { From 0ceaaeb4b47a8fab2e0ebb96f67ca718d8a9d79e Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 17 Jan 2023 10:10:25 -0500 Subject: [PATCH 22/29] remove unneeded important --- .../FreeConnectorProgram/InlineEnrollmentCallout.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss index a33a050b980fb..7c6a67c51e322 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss @@ -18,7 +18,7 @@ &:hover, &:active { - color: colors.$blue !important; + color: colors.$blue; } } From 0a54d6d21a697a70d3b37e2acb4dcb72641e1e40 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 17 Jan 2023 10:11:32 -0500 Subject: [PATCH 23/29] remove even more css --- .../FreeConnectorProgram/InlineEnrollmentCallout.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss index 7c6a67c51e322..11767adbaf34a 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss @@ -11,7 +11,6 @@ cursor: pointer; padding: 0; color: colors.$dark-blue; - font-weight: 400; border: none; background-color: transparent; font-size: inherit; From b310fc928ed51b14f432705b6129633a12382ad2 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 17 Jan 2023 11:47:29 -0500 Subject: [PATCH 24/29] hook up enrollment modal --- .../FreeConnectorProgram/InlineEnrollmentCallout.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx index 6aa9464ac653e..1c818c4e0ad9d 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx @@ -4,11 +4,14 @@ import { FormattedMessage } from "react-intl"; import { Callout } from "components/ui/Callout"; import { Text } from "components/ui/Text"; +import { useShowEnrollmentModal } from "./EnrollmentModal"; import styles from "./InlineEnrollmentCallout.module.scss"; export const EnrollLink: React.FC> = ({ children }) => { + const { showEnrollmentModal } = useShowEnrollmentModal(); + const onEnrollClick = () => { - return null; + showEnrollmentModal(); }; return ( From 091cea496fcbdbd33e19129be2f6fe2cb75585a4 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 17 Jan 2023 15:19:48 -0500 Subject: [PATCH 25/29] don't show during connector setup (yet) --- .../ConnectorDefinitionTypeControl.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx index 792a6a4b20fba..dc2c9e6012437 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx @@ -24,7 +24,6 @@ import { useAvailableConnectorDefinitions } from "hooks/domain/connector/useAvai import { useExperiment } from "hooks/services/Experiment"; import { useModalService } from "hooks/services/Modal"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; -import { InlineEnrollmentCallout } from "packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout"; import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext"; import RequestConnectorModal from "views/Connector/RequestConnectorModal"; @@ -128,6 +127,7 @@ export const ConnectorDefinitionTypeControl: React.FC - - - + )} ); From f8ebe5e4194b4bb67054df6711c0b8d7599a4865 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 17 Jan 2023 16:06:15 -0500 Subject: [PATCH 26/29] implement api data --- .../hooks/useFreeConnectorProgram.tsx | 33 ------------------- .../ConnectionPage/ConnectionPageTitle.tsx | 10 +++--- 2 files changed, 6 insertions(+), 37 deletions(-) delete mode 100644 airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx deleted file mode 100644 index 0f55a0a8e9d93..0000000000000 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ReleaseStage, WebBackendConnectionRead } from "core/request/AirbyteClient"; -import { useExperiment } from "hooks/services/Experiment"; -import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; -import { useSourceDefinitionList } from "services/connector/SourceDefinitionService"; - -export const useFreeConnectorProgram = () => { - const isFreeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); - - const { sourceDefinitions } = useSourceDefinitionList(); - const { destinationDefinitions } = useDestinationDefinitionList(); - - // todo: implement actual call once it is merged with issue #4006 - // for now, we'll just default to false for enrolled - const enrolledInFreeConnectorProgram = false; - - const showEnrollmentContent = !enrolledInFreeConnectorProgram && isFreeConnectorProgramEnabled; - - const connectionHasAlphaOrBetaConnector = (connection: WebBackendConnectionRead) => { - if (!isFreeConnectorProgramEnabled) { - return null; - } - - return ( - sourceDefinitions.find((source) => source.sourceDefinitionId === connection.source.sourceDefinitionId) - ?.releaseStage === (ReleaseStage.alpha || ReleaseStage.beta) || - destinationDefinitions.find( - (destination) => destination.destinationDefinitionId === connection.destination.destinationDefinitionId - )?.releaseStage === (ReleaseStage.alpha || ReleaseStage.beta) - ); - }; - - return { isFreeConnectorProgramEnabled, showEnrollmentContent, connectionHasAlphaOrBetaConnector }; -}; diff --git a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx index 10c1d8e2d4108..cd6d0d6d057c2 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx +++ b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx @@ -13,7 +13,8 @@ import { Text } from "components/ui/Text"; import { ConnectionStatus } from "core/request/AirbyteClient"; import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService"; -import { useFreeConnectorProgram } from "packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram"; +import { useExperiment } from "hooks/services/Experiment"; +import { useFreeConnectorProgramInfo } from "packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram"; import { InlineEnrollmentCallout } from "packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout"; import { ConnectionRoutePaths } from "../types"; @@ -26,9 +27,10 @@ export const ConnectionPageTitle: React.FC = () => { const { connection } = useConnectionEditService(); - const { showEnrollmentContent, connectionHasAlphaOrBetaConnector } = useFreeConnectorProgram(); + const freeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); + const { data: freeConnectorProgramInfo } = useFreeConnectorProgramInfo(); - const showFreeConnectorEnrollment = showEnrollmentContent && connectionHasAlphaOrBetaConnector(connection); + const displayEnrollmentCallout = freeConnectorProgramEnabled && freeConnectorProgramInfo?.showEnrollmentUi; const steps = useMemo(() => { const steps = [ @@ -81,7 +83,7 @@ export const ConnectionPageTitle: React.FC = () => {
- {showFreeConnectorEnrollment && } + {displayEnrollmentCallout && }
From d24093403fe994e813759ee0cde4f18340bcbc59 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 18 Jan 2023 08:46:48 -0500 Subject: [PATCH 27/29] bold text, remove redundant function declaration, check experiment status in hook --- .../FreeConnectorProgram/InlineEnrollmentCallout.tsx | 6 +----- .../FreeConnectorProgram/hooks/useFreeConnectorProgram.ts | 4 +++- airbyte-webapp/src/packages/cloud/locales/en.json | 5 ++++- .../connections/ConnectionPage/ConnectionPageTitle.tsx | 4 +--- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx index 1c818c4e0ad9d..bde66bf2d6693 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx @@ -10,12 +10,8 @@ import styles from "./InlineEnrollmentCallout.module.scss"; export const EnrollLink: React.FC> = ({ children }) => { const { showEnrollmentModal } = useShowEnrollmentModal(); - const onEnrollClick = () => { - showEnrollmentModal(); - }; - return ( - ); diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts index 1d0e3933e37fe..984a69366763a 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts @@ -1,5 +1,6 @@ import { useQuery } from "react-query"; +import { useExperiment } from "hooks/services/Experiment"; import { useConfig } from "packages/cloud/services/config"; import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares"; import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService"; @@ -12,11 +13,12 @@ export const useFreeConnectorProgramInfo = () => { const config = { apiUrl: cloudApiUrl }; const middlewares = useDefaultRequestMiddlewares(); const requestOptions = { config, middlewares }; + const freeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); return useQuery(["freeConnectorProgramInfo", workspaceId], () => webBackendGetFreeConnectorProgramInfoForWorkspace({ workspaceId }, requestOptions).then( ({ hasEligibleConnector, hasPaymentAccountSaved }) => { - const showEnrollmentUi = !hasPaymentAccountSaved && hasEligibleConnector; + const showEnrollmentUi = !hasPaymentAccountSaved && hasEligibleConnector && freeConnectorProgramEnabled; // TODO hardcoding this value to allow testing while data source gets sorted out const needsEmailVerification = false; diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json index 71ae5763db39d..520078481b443 100644 --- a/airbyte-webapp/src/packages/cloud/locales/en.json +++ b/airbyte-webapp/src/packages/cloud/locales/en.json @@ -180,5 +180,8 @@ "sidebar.credits": "Credits", - "freeConnectorProgram.youCanEnroll": "You can enroll in the Free Connector Program to use Alpha and Beta connectors for free." + "freeConnectorProgram.youCanEnroll": "You can enroll in the Free Connector Program to use Alpha and Beta connectors for free.", + "freeConnectorProgram.title": "Free Connector Program", + "freeConnectorProgram.enrollNow": "Enroll now!", + "freeConnectorProgram.enroll.description": "Enroll in the Free Connector Program to use Alpha and Beta connectors for free." } diff --git a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx index cd6d0d6d057c2..294ec6d968ec5 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx +++ b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx @@ -13,7 +13,6 @@ import { Text } from "components/ui/Text"; import { ConnectionStatus } from "core/request/AirbyteClient"; import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService"; -import { useExperiment } from "hooks/services/Experiment"; import { useFreeConnectorProgramInfo } from "packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram"; import { InlineEnrollmentCallout } from "packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout"; @@ -27,10 +26,9 @@ export const ConnectionPageTitle: React.FC = () => { const { connection } = useConnectionEditService(); - const freeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); const { data: freeConnectorProgramInfo } = useFreeConnectorProgramInfo(); - const displayEnrollmentCallout = freeConnectorProgramEnabled && freeConnectorProgramInfo?.showEnrollmentUi; + const displayEnrollmentCallout = freeConnectorProgramInfo?.showEnrollmentUi; const steps = useMemo(() => { const steps = [ From 3ce050215b196181cae509ddc7c77803b265ad1c Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 18 Jan 2023 09:02:12 -0500 Subject: [PATCH 28/29] remove reference to experiment from hook for now --- .../FreeConnectorProgram/hooks/useFreeConnectorProgram.ts | 4 +--- .../pages/connections/ConnectionPage/ConnectionPageTitle.tsx | 4 +++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts index 984a69366763a..1d0e3933e37fe 100644 --- a/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts +++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts @@ -1,6 +1,5 @@ import { useQuery } from "react-query"; -import { useExperiment } from "hooks/services/Experiment"; import { useConfig } from "packages/cloud/services/config"; import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares"; import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService"; @@ -13,12 +12,11 @@ export const useFreeConnectorProgramInfo = () => { const config = { apiUrl: cloudApiUrl }; const middlewares = useDefaultRequestMiddlewares(); const requestOptions = { config, middlewares }; - const freeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); return useQuery(["freeConnectorProgramInfo", workspaceId], () => webBackendGetFreeConnectorProgramInfoForWorkspace({ workspaceId }, requestOptions).then( ({ hasEligibleConnector, hasPaymentAccountSaved }) => { - const showEnrollmentUi = !hasPaymentAccountSaved && hasEligibleConnector && freeConnectorProgramEnabled; + const showEnrollmentUi = !hasPaymentAccountSaved && hasEligibleConnector; // TODO hardcoding this value to allow testing while data source gets sorted out const needsEmailVerification = false; diff --git a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx index 294ec6d968ec5..8fca2f6816e32 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx +++ b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx @@ -13,6 +13,7 @@ import { Text } from "components/ui/Text"; import { ConnectionStatus } from "core/request/AirbyteClient"; import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService"; +import { useExperiment } from "hooks/services/Experiment"; import { useFreeConnectorProgramInfo } from "packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram"; import { InlineEnrollmentCallout } from "packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout"; @@ -27,8 +28,9 @@ export const ConnectionPageTitle: React.FC = () => { const { connection } = useConnectionEditService(); const { data: freeConnectorProgramInfo } = useFreeConnectorProgramInfo(); + const freeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false); - const displayEnrollmentCallout = freeConnectorProgramInfo?.showEnrollmentUi; + const displayEnrollmentCallout = freeConnectorProgramEnabled && freeConnectorProgramInfo?.showEnrollmentUi; const steps = useMemo(() => { const steps = [ From c5ae0be54988ea106bcdb348584866498c307092 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 18 Jan 2023 09:07:45 -0500 Subject: [PATCH 29/29] cleanup whitespace changes --- .../ConnectorDefinitionTypeControl.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx index dc2c9e6012437..ffbc797bf8983 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx @@ -127,9 +127,7 @@ export const ConnectorDefinitionTypeControl: React.FC getSortedDropdownDataUsingExperiment(connectorDefinitions, orderOverwrite), [connectorDefinitions, orderOverwrite]