🪟 🎉 Free Connectors Program inline enrollment callout (#21315)

* 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
airbytehq · Jan 18, 2023 · 115144b · 115144b
1 parent f5f4de2
commit 115144b
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 2 deletions.
diff --git a/...ges/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.module.scss b/...ges/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/...rc/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx b/...rc/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
@@ -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
@@ -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>