🪟 🎉 Free Connectors Program inline enrollment callout

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;
+}

airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout.tsx

@@ -0,0 +1,41 @@
+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();
+
+  const onEnrollClick = () => {
+    showEnrollmentModal();
+  };
+
+  return (
+    <button onClick={onEnrollClick} 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>
+  );
+};

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 <enrollLink>enroll</enrollLink> in the Free Connector Program to use Alpha and Beta connectors for <freeText>free</freeText>."
 }

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 freeConnectorProgramEnabled = useExperiment("workspace.freeConnectorsProgram.visible", false);
+  const { data: freeConnectorProgramInfo } = useFreeConnectorProgramInfo();
+
+  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>

airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorServiceTypeControl/ConnectorDefinitionTypeControl.tsx

@@ -127,7 +127,9 @@ export const ConnectorDefinitionTypeControl: React.FC<ConnectorDefinitionTypeCon
 
   const workspace = useCurrentWorkspace();
   const orderOverwrite = useExperiment("connector.orderOverwrite", {});
+
   const connectorDefinitions = useAvailableConnectorDefinitions(availableConnectorDefinitions, workspace);
+
   const sortedDropDownData = useMemo(
     () => getSortedDropdownDataUsingExperiment(connectorDefinitions, orderOverwrite),
     [connectorDefinitions, orderOverwrite]