🪟 🎨 Display free tag on release stage pills for users enrolled in the…

… free connectors program (#21892)

* Add FeatureItem.FreeConnectorProgram

This is distinct from the LaunchDarkly-backed experiment we're
referencing within `cloud/components/experiments/FreeConnectorProgram`:
it's primary use is to prevent triggering cloud-only API calls in the
OSS build.

* Extract shareable FreeTag for various release stage pills

It does seem as though we should consolidate on a single release stage
pill implementation! That will have to wait for a follow-up, though.

* Fix typo (s/inheret/inherit/)

* Prefer useFeature to useFreeConnectorProgram in OSS components

* Use TestWrapper for more future-proof test renders

airbyte-webapp/src/components/EntityTable/components/ConnectorCell.tsx

@@ -12,7 +12,7 @@ interface IProps {
 const Content = styled.div<{ enabled?: boolean }>`
   display: flex;
   align-items: center;
-  color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inheret")};
+  color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inherit")};
   font-weight: 500;
 `;
 

airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.module.scss

@@ -16,16 +16,4 @@
   &--small {
     font-size: 8px;
   }
-
-  &--contains-tag {
-    padding-right: 2px;
-  }
-}
-
-.freeTag {
-  background-color: colors.$green-300;
-  color: colors.$white;
-  border-radius: variables.$border-radius-pill;
-  padding: 2px 5px;
-  margin-left: 2px;
 }

airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx

@@ -1,10 +1,12 @@
 import classNames from "classnames";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 
 import { GAIcon } from "components/icons/GAIcon";
 import { Tooltip } from "components/ui/Tooltip";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
+import { useFeature, FeatureItem } from "hooks/services/Feature";
+import { FreeTag } from "packages/cloud/components/experiments/FreeConnectorProgram";
 
 import styles from "./ReleaseStageBadge.module.scss";
 
@@ -15,16 +17,10 @@ interface ReleaseStageBadgeProps {
    * Whether to show a detailed message via a tooltip. If not specified, will be {@code true}.
    */
   tooltip?: boolean;
-  showFreeTag?: boolean;
 }
 
-export const ReleaseStageBadge: React.FC<ReleaseStageBadgeProps> = ({
-  stage,
-  small,
-  tooltip = true,
-  showFreeTag = false,
-}) => {
-  const { formatMessage } = useIntl();
+export const ReleaseStageBadge: React.FC<ReleaseStageBadgeProps> = ({ stage, small, tooltip = true }) => {
+  const fcpEnabled = useFeature(FeatureItem.FreeConnectorProgram);
 
   if (!stage) {
     return null;
@@ -37,13 +33,10 @@ export const ReleaseStageBadge: React.FC<ReleaseStageBadgeProps> = ({
       <div
         className={classNames(styles.pill, {
           [styles["pill--small"]]: small,
-          [styles["pill--contains-tag"]]: showFreeTag,
         })}
       >
         <FormattedMessage id={`connector.releaseStage.${stage}`} />
-        {showFreeTag && (
-          <span className={styles.freeTag}>{formatMessage({ id: "freeConnectorProgram.releaseStageBadge.free" })}</span>
-        )}
+        {fcpEnabled && <FreeTag releaseStage={stage} />}
       </div>
     );
 

airbyte-webapp/src/hooks/services/Feature/constants.ts

@@ -15,4 +15,5 @@ export const defaultCloudFeatures = [
   FeatureItem.AllowSync,
   FeatureItem.AllowChangeDataGeographies,
   FeatureItem.AllowDBTCloudIntegration,
+  FeatureItem.FreeConnectorProgram,
 ];

airbyte-webapp/src/hooks/services/Feature/types.tsx

@@ -13,6 +13,7 @@ export enum FeatureItem {
   AllowSync = "ALLOW_SYNC",
   AllowChangeDataGeographies = "ALLOW_CHANGE_DATA_GEOGRAPHIES",
   AllowSyncSubOneHourCronExpressions = "ALLOW_SYNC_SUB_ONE_HOUR_CRON_EXPRESSIONS",
+  FreeConnectorProgram = "FREE_CONNECTOR_PROGRAM",
 }
 
 export type FeatureSet = Partial<Record<FeatureItem, boolean>>;

airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/FreeTag.module.scss

@@ -0,0 +1,13 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.freeTag {
+  background-color: colors.$green-300;
+  color: colors.$white;
+  border-radius: variables.$border-radius-pill;
+  padding: 2px 5px;
+
+  // margin: 0 2px;
+  margin-left: 2px;
+  margin-right: -4px;
+}

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

@@ -0,0 +1,22 @@
+import { useIntl } from "react-intl";
+
+import { ReleaseStage } from "core/request/AirbyteClient";
+
+import styles from "./FreeTag.module.scss";
+import { useFreeConnectorProgram } from "./hooks/useFreeConnectorProgram";
+
+interface FreeTagProps {
+  releaseStage: ReleaseStage;
+}
+
+// A tag labeling a release stage pill as free. Defined here for easy reuse between the
+// two release stage pill implementations (which should likely be refactored!)
+export const FreeTag: React.FC<FreeTagProps> = ({ releaseStage }) => {
+  const { enrollmentStatusQuery } = useFreeConnectorProgram();
+  const { isEnrolled } = enrollmentStatusQuery.data || {};
+  const { formatMessage } = useIntl();
+
+  return isEnrolled && ["alpha", "beta"].includes(releaseStage) ? (
+    <span className={styles.freeTag}>{formatMessage({ id: "freeConnectorProgram.releaseStageBadge.free" })}</span>
+  ) : null;
+};

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

@@ -18,9 +18,14 @@ export const EnrollLink: React.FC<PropsWithChildren<unknown>> = ({ children }) =
   );
 };
 export const InlineEnrollmentCallout: React.FC = () => {
-  const { userDidEnroll } = useFreeConnectorProgram();
+  const { userDidEnroll, enrollmentStatusQuery } = useFreeConnectorProgram();
+  const { showEnrollmentUi } = enrollmentStatusQuery.data || {};
 
-  return userDidEnroll ? null : (
+  if (userDidEnroll || !showEnrollmentUi) {
+    return null;
+  }
+
+  return (
     <Callout variant="info" className={styles.container}>
       <Text size="sm">
         <FormattedMessage

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

@@ -14,9 +14,14 @@ import styles from "./LargeEnrollmentCallout.module.scss";
 
 export const LargeEnrollmentCallout: React.FC = () => {
   const { showEnrollmentModal } = useShowEnrollmentModal();
-  const { userDidEnroll } = useFreeConnectorProgram();
+  const { userDidEnroll, enrollmentStatusQuery } = useFreeConnectorProgram();
+  const { showEnrollmentUi } = enrollmentStatusQuery.data || {};
 
-  return userDidEnroll ? null : (
+  if (userDidEnroll || !showEnrollmentUi) {
+    return null;
+  }
+
+  return (
     <Callout variant="boldInfo" className={styles.container}>
       <FlexContainer direction="row" alignItems="center" className={styles.flexRow}>
         <FlexItem grow={false} alignSelf="center">

airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks/useFreeConnectorProgram";
+export * from "./FreeTag";

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx

@@ -8,7 +8,7 @@ import { Spinner } from "components/ui/Spinner";
 import { Text } from "components/ui/Text";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
-import { useFreeConnectorProgram } from "packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram";
+import { useFeature, FeatureItem } from "hooks/services/Feature";
 import { LargeEnrollmentCallout } from "packages/cloud/components/experiments/FreeConnectorProgram/LargeEnrollmentCallout";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 
@@ -20,8 +20,7 @@ import styles from "./CreditsPage.module.scss";
 const CreditsPage: React.FC = () => {
   const { emailVerified } = useAuthService();
   useTrackPage(PageTrackingCodes.CREDITS);
-  const { enrollmentStatusQuery } = useFreeConnectorProgram();
-  const { showEnrollmentUi } = enrollmentStatusQuery.data || {};
+  const fcpEnabled = useFeature(FeatureItem.FreeConnectorProgram);
 
   return (
     <MainPageWithScroll
@@ -31,7 +30,7 @@ const CreditsPage: React.FC = () => {
       <div className={styles.content}>
         {!emailVerified && <EmailVerificationHint className={styles.emailVerificationHint} />}
         <RemainingCredits selfServiceCheckoutEnabled={emailVerified} />
-        {showEnrollmentUi && <LargeEnrollmentCallout />}
+        {fcpEnabled && <LargeEnrollmentCallout />}
         <React.Suspense
           fallback={
             <div className={styles.creditUsageLoading}>

airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx

@@ -13,7 +13,7 @@ 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 { useFeature, FeatureItem } from "hooks/services/Feature";
 import { InlineEnrollmentCallout } from "packages/cloud/components/experiments/FreeConnectorProgram/InlineEnrollmentCallout";
 
 import styles from "./ConnectionPageTitle.module.scss";
@@ -26,9 +26,6 @@ export const ConnectionPageTitle: React.FC = () => {
 
   const { connection } = useConnectionEditService();
 
-  const { enrollmentStatusQuery } = useFreeConnectorProgram();
-  const { showEnrollmentUi } = enrollmentStatusQuery.data || {};
-
   const steps = useMemo(() => {
     const steps = [
       {
@@ -65,6 +62,8 @@ export const ConnectionPageTitle: React.FC = () => {
     [navigate]
   );
 
+  const fcpEnabled = useFeature(FeatureItem.FreeConnectorProgram);
+
   return (
     <div className={styles.container}>
       {connection.status === ConnectionStatus.deprecated && (
@@ -80,7 +79,7 @@ export const ConnectionPageTitle: React.FC = () => {
       <div className={styles.statusContainer}>
         <FlexContainer direction="column" gap="none">
           <ConnectionInfoCard />
-          {showEnrollmentUi && <InlineEnrollmentCallout />}
+          {fcpEnabled && <InlineEnrollmentCallout />}
         </FlexContainer>
       </div>
       <StepsMenu lightMode data={steps} onSelect={onSelectStep} activeStep={currentStep} />

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

@@ -22,8 +22,10 @@ import { ConnectorDefinition } from "core/domain/connector";
 import { ReleaseStage } from "core/request/AirbyteClient";
 import { useAvailableConnectorDefinitions } from "hooks/domain/connector/useAvailableConnectorDefinitions";
 import { useExperiment } from "hooks/services/Experiment";
+import { useFeature, FeatureItem } from "hooks/services/Feature";
 import { useModalService } from "hooks/services/Modal";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
+import { FreeTag } from "packages/cloud/components/experiments/FreeConnectorProgram";
 import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
 import RequestConnectorModal from "views/Connector/RequestConnectorModal";
 
@@ -51,6 +53,8 @@ const ConnectorList: React.FC<React.PropsWithChildren<MenuWithRequestButtonProps
 );
 
 const StageLabel: React.FC<{ releaseStage?: ReleaseStage }> = ({ releaseStage }) => {
+  const fcpEnabled = useFeature(FeatureItem.FreeConnectorProgram);
+
   if (!releaseStage) {
     return null;
   }
@@ -62,6 +66,7 @@ const StageLabel: React.FC<{ releaseStage?: ReleaseStage }> = ({ releaseStage })
   return (
     <div className={styles.stageLabel}>
       <FormattedMessage id={`connector.releaseStage.${releaseStage}`} defaultMessage={releaseStage} />
+      {fcpEnabled && <FreeTag releaseStage={releaseStage} />}
     </div>
   );
 };

airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/FrequentlyUsedConnectorsCard.test.tsx

@@ -1,16 +1,14 @@
 import { fireEvent, render, waitFor } from "@testing-library/react";
-import { IntlProvider } from "react-intl";
 import { mockDestinationsData } from "test-utils/mock-data/mockFrequentlyUsedDestinations";
-
-import en from "locales/en.json";
+import { TestWrapper } from "test-utils/testutils";
 
 import { FrequentlyUsedConnectorsCard, FrequentlyUsedConnectorsCardProps } from "./FrequentlyUsedConnectorsCard";
 
 const renderFrequentlyUsedConnectorsComponent = (props: FrequentlyUsedConnectorsCardProps) =>
   render(
-    <IntlProvider locale="en" messages={en}>
+    <TestWrapper>
       <FrequentlyUsedConnectorsCard {...props} />
-    </IntlProvider>
+    </TestWrapper>
   );
 
 describe("<mockFrequentlyUsedConnectors />", () => {