From 115144bd475ca87e7baa854e2d312fd35cedde6d Mon Sep 17 00:00:00 2001
From: Teal Larson <LARSON.TEAL@GMAIL.COM>
Date: Wed, 18 Jan 2023 12:45:05 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=8E=89=20Free=20Connectors?=
 =?UTF-8?q?=20Program=20inline=20enrollment=20callout=20(#21315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* genericize alert component

* add className prop to alert

* rename infobox "callout", swap in place for scss module

* fix imports

* use callout in place of alert

* add blue variant, remove icon prop

* remove single use prop, use a classname instead

* WIP

* WIP: i18n is mad

* add render logic

* make i18n happy

* create a hook instead

* make structure more like other experiments

* fix import order

* cleanup from rebase

* cleanup

* one more cleanup bit

* use new variant name

* pointer

* use experiment hook

* use button instead of span for enroll link

* remove unneeded important

* remove even more css

* hook up enrollment modal

* don't show during connector setup (yet)

* implement api data
---
 .../InlineEnrollmentCallout.module.scss       | 26 +++++++++++++
 .../InlineEnrollmentCallout.tsx               | 37 +++++++++++++++++++
 .../src/packages/cloud/locales/en.json        |  7 +++-
 .../ConnectionPage/ConnectionPageTitle.tsx    | 14 ++++++-
 4 files changed, 82 insertions(+), 2 deletions(-)
 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/InlineEnrollmentCallout.module.scss b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss
new file mode 100644
index 000000000000..11767adbaf34
--- /dev/null
+++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss
@@ -0,0 +1,26 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.container {
+  margin-top: variables.$spacing-lg;
+  width: 100%;
+}
+
+.enrollLink {
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+  color: colors.$dark-blue;
+  border: none;
+  background-color: transparent;
+  font-size: inherit;
+
+  &: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
new file mode 100644
index 000000000000..bde66bf2d669
--- /dev/null
+++ b/airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx
@@ -0,0 +1,37 @@
+import React, { PropsWithChildren } from "react";
+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<PropsWithChildren<unknown>> = ({ children }) => {
+  const { showEnrollmentModal } = useShowEnrollmentModal();
+
+  return (
+    <button onClick={showEnrollmentModal} className={styles.enrollLink}>
+      {children}
+    </button>
+  );
+};
+export const InlineEnrollmentCallout: React.FC = () => {
+  return (
+    <Callout variant="info" className={styles.container}>
+      <Text size="sm">
+        <FormattedMessage
+          id="freeConnectorProgram.youCanEnroll"
+          values={{
+            enrollLink: (content: React.ReactNode) => <EnrollLink>{content}</EnrollLink>,
+            freeText: (content: React.ReactNode) => (
+              <Text as="span" size="sm" bold className={styles.freeText}>
+                {content}
+              </Text>
+            ),
+          }}
+        />
+      </Text>
+    </Callout>
+  );
+};
diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
index a4939e491007..520078481b44 100644
--- a/airbyte-webapp/src/packages/cloud/locales/en.json
+++ b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -178,5 +178,10 @@
   "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 <enrollLink>enroll</enrollLink> in the <b>Free Connector Program</b> to use Alpha and Beta connectors for <freeText>free</freeText>.",
+  "freeConnectorProgram.title": "Free Connector Program",
+  "freeConnectorProgram.enrollNow": "Enroll now!",
+  "freeConnectorProgram.enroll.description": "Enroll in the <b>Free Connector Program</b> to use Alpha and Beta connectors for <b>free</b>."
 }
diff --git a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx
index ac5f87afefe1..8fca2f6816e3 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx
@@ -7,11 +7,15 @@ 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 { 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";
 import styles from "./ConnectionPageTitle.module.scss";
@@ -23,6 +27,11 @@ export const ConnectionPageTitle: React.FC = () => {
 
   const { connection } = useConnectionEditService();
 
+  const { data: freeConnectorProgramInfo } = useFreeConnectorProgramInfo();
+  const freeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false);
+
+  const displayEnrollmentCallout = freeConnectorProgramEnabled && freeConnectorProgramInfo?.showEnrollmentUi;
+
   const steps = useMemo(() => {
     const steps = [
       {
@@ -72,7 +81,10 @@ export const ConnectionPageTitle: React.FC = () => {
       </Text>
       <ConnectionName />
       <div className={styles.statusContainer}>
-        <ConnectionInfoCard />
+        <FlexContainer direction="column" gap="none">
+          <ConnectionInfoCard />
+          {displayEnrollmentCallout && <InlineEnrollmentCallout />}
+        </FlexContainer>
       </div>
       <StepsMenu lightMode data={steps} onSelect={onSelectStep} activeStep={currentStep} />
     </div>