fix: wrap upgrade button and messaging with Google Optimize (#4503)

Author: TCL735

docker/Dockerfile.chronograf

@@ -27,6 +27,7 @@ ENV GLOBALSEARCH_API_KEY=
 ENV GLOBALSEARCH_APP_ID=
 # Google Experiments ENV vars
 ENV PAYG_CREDIT_EXPERIMENT_ID=
+ENV CREDIT_250_EXPERIMENT_ID=
 
 # This is the origin of the URL needed to access the running container (optional)
 # ENV PUBLIC=http://foobar

docker/Dockerfile.chronograf.prod

@@ -40,6 +40,8 @@ ARG GLOBALSEARCH_API_KEY
 ARG GLOBALSEARCH_APP_ID
 # Google Experiment ID for PAYG $250 Credit
 ARG PAYG_CREDIT_EXPERIMENT_ID
+# Google Experiment ID for Get $250 Credit
+ARG CREDIT_250_EXPERIMENT_ID
 
 COPY . /repo/ui
 WORKDIR /repo/ui

src/cloud/components/RateLimitAlertContent.tsx

@@ -12,6 +12,7 @@ import {
   ComponentColor,
 } from '@influxdata/clockface'
 import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 
 // Actions
 import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
@@ -22,6 +23,10 @@ import {event} from 'src/cloud/utils/reporting'
 
 // Utils
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
+
+// Constants
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
 
 interface Props {
   className?: string
@@ -43,38 +48,38 @@ interface UpgradeMessageProps {
 }
 
 const UpgradeMessage: FC<UpgradeMessageProps> = ({limitText, link, type}) => {
-  if (isFlagEnabled('credit250Experiment')) {
-    return (
-      <span className="upgrade-message">
-        You hit the{' '}
-        <a
-          href={link}
-          className="rate-alert--docs-link"
-          target="_blank"
-          rel="noreferrer"
-        >
-          {type === 'series cardinality' ? 'series cardinality' : 'query write'}
-        </a>{' '}
-        limit {limitText ?? ''} and your data stopped writing. Upgrade to get a
-        free $250 credit for the first 30 days.
-      </span>
-    )
-  }
-  return (
+  const original = (
     <span className="upgrade-message">
       Oh no! You hit the{' '}
-      <a
-        href={link}
-        className="rate-alert--docs-link"
-        target="_blank"
-        rel="noreferrer"
-      >
+      <SafeBlankLink href={link}>
         {type === 'series cardinality' ? 'series cardinality' : 'query write'}
-      </a>{' '}
+      </SafeBlankLink>{' '}
       limit {limitText ?? ''} and your data stopped writing. Don't lose
       important metrics.
     </span>
   )
+
+  if (isFlagEnabled('credit250Experiment')) {
+    return (
+      <GoogleOptimizeExperiment
+        experimentID={CREDIT_250_EXPERIMENT_ID}
+        original={original}
+        variants={[
+          <span className="upgrade-message" key="1">
+            You hit the{' '}
+            <SafeBlankLink href={link}>
+              {type === 'series cardinality'
+                ? 'series cardinality'
+                : 'query write'}
+            </SafeBlankLink>{' '}
+            limit {limitText ?? ''} and your data stopped writing. Upgrade to
+            get a free $250 credit for the first 30 days.
+          </span>,
+        ]}
+      />
+    )
+  }
+  return original
 }
 
 export const UpgradeContent: FC<UpgradeProps> = ({
@@ -127,14 +132,9 @@ const RateLimitAlertContent: FC<Props> = ({className, location}) => {
     <div className={`${rateLimitAlertContentClass} rate-alert--content__payg`}>
       <span>
         Data in has stopped because you've hit the{' '}
-        <a
-          href="https://docs.influxdata.com/influxdb/v2.0/write-data/best-practices/resolve-high-cardinality/"
-          className="rate-alert--docs-link"
-          target="_blank"
-          rel="noreferrer"
-        >
+        <SafeBlankLink href="https://docs.influxdata.com/influxdb/v2.0/write-data/best-practices/resolve-high-cardinality/">
           series cardinality
-        </a>{' '}
+        </SafeBlankLink>{' '}
         limit. Let's get it flowing again.
       </span>
       <FlexBox

src/shared/components/CloudUpgradeButton.tsx

@@ -16,7 +16,10 @@ import CloudOnly from 'src/shared/components/cloud/CloudOnly'
 // Utils
 import {shouldShowUpgradeButton} from 'src/me/selectors'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
 
+// Constants
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
 interface OwnProps {
   buttonText?: string
   className?: string
@@ -47,28 +50,43 @@ const CloudUpgradeButton: FC<OwnProps> = ({
     history.push('/checkout')
   }
 
-  const promoMessage =
-    isFlagEnabled('credit250Experiment') && showPromoMessage ? (
-      <span className="credit-250-experiment-upgrade-button--text">
-        Get $250 free credit
-      </span>
-    ) : null
+  const original = showUpgradeButton && (
+    <Button
+      className={cloudUpgradeButtonClass}
+      icon={IconFont.CrownSolid_New}
+      onClick={handleClick}
+      shape={ButtonShape.Default}
+      size={size}
+      testID="cloud-upgrade--button"
+      text={buttonText}
+    />
+  )
 
   return (
     <CloudOnly>
-      {showUpgradeButton && (
-        <span>
-          {promoMessage}
-          <Button
-            icon={IconFont.CrownSolid_New}
-            className={cloudUpgradeButtonClass}
-            size={size}
-            shape={ButtonShape.Default}
-            onClick={handleClick}
-            text={buttonText}
-            testID="cloud-upgrade--button"
-          />
-        </span>
+      {isFlagEnabled('credit250Experiment') && showPromoMessage ? (
+        <GoogleOptimizeExperiment
+          experimentID={CREDIT_250_EXPERIMENT_ID}
+          original={original}
+          variants={[
+            <span key="1">
+              <span className="credit-250-experiment-upgrade-button--text">
+                Get $250 free credit
+              </span>
+              <Button
+                className={cloudUpgradeButtonClass}
+                icon={IconFont.CrownSolid_New}
+                onClick={handleClick}
+                shape={ButtonShape.Default}
+                size={size}
+                testID="cloud-upgrade--button"
+                text={buttonText}
+              />
+            </span>,
+          ]}
+        />
+      ) : (
+        original
       )}
     </CloudOnly>
   )

src/shared/constants/index.ts

@@ -166,3 +166,4 @@ export const GLOBALSEARCH_API_KEY = formatConstant(
 export const PAYG_CREDIT_DAYS = 30
 export const PAYG_MAX_CREDIT = 250
 export const PAYG_CREDIT_EXPERIMENT_ID = process.env.PAYG_CREDIT_EXPERIMENT_ID
+export const CREDIT_250_EXPERIMENT_ID = process.env.CREDIT_250_EXPERIMENT_ID