feat: add messaging for the $250 credit experiment (#4430)

Author: TCL735

src/cloud/components/RateLimitAlert.tsx

@@ -24,6 +24,7 @@ import {
   extractRateLimitStatus,
 } from 'src/cloud/utils/limits'
 import {event} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Constants
 import {CLOUD} from 'src/shared/constants'
@@ -89,11 +90,16 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
         )
       }
     }
-  }, [showUpgrade, status])
+  }, [showUpgrade, status]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const rateLimitAlertClass = classnames('rate-alert', {
     [`${className}`]: className,
   })
 
+  const icon = isFlagEnabled('credit250Experiment')
+    ? IconFont.Stop
+    : IconFont.Cloud
+
   if (CLOUD && status === 'exceeded' && resources.includes('cardinality')) {
     return (
       <FlexBox
@@ -105,7 +111,7 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
         <BannerPanel
           size={ComponentSize.ExtraSmall}
           gradient={Gradients.PolarExpress}
-          icon={IconFont.Cloud}
+          icon={icon}
           hideMobileIcon={true}
           textColor={InfluxColors.Yeti}
         >

src/cloud/components/RateLimitAlertContent.tsx

@@ -20,6 +20,9 @@ import {shouldShowUpgradeButton} from 'src/me/selectors'
 // reporting
 import {event} from 'src/cloud/utils/reporting'
 
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
 interface Props {
   className?: string
   location?: string
@@ -33,17 +36,17 @@ interface UpgradeProps {
   location?: string
 }
 
-export const UpgradeContent: FC<UpgradeProps> = ({
-  type,
-  link,
-  className,
-  limitText,
-  location,
-}) => {
-  return (
-    <div className={`${className} rate-alert--content__free`}>
-      <span>
-        Oh no! You hit the{' '}
+interface UpgradeMessageProps {
+  limitText: string
+  link: string
+  type: string
+}
+
+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"
@@ -52,13 +55,42 @@ export const UpgradeContent: FC<UpgradeProps> = ({
         >
           {type === 'series cardinality' ? 'series cardinality' : 'query write'}
         </a>{' '}
-        limit {limitText ?? ''} and your data stopped writing. Don’t lose
-        important metrics.
+        limit {limitText ?? ''} and your data stopped writing. Upgrade to get a
+        free $250 credit for the first 30 days.
       </span>
+    )
+  }
+  return (
+    <span className="upgrade-message">
+      Oh no! 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. Don't lose
+      important metrics.
+    </span>
+  )
+}
+
+export const UpgradeContent: FC<UpgradeProps> = ({
+  type,
+  link,
+  className,
+  limitText,
+  location,
+}) => {
+  return (
+    <div className={`${className} rate-alert--content__free`}>
       <FlexBox
         justifyContent={JustifyContent.Center}
         className="rate-alert--button"
       >
+        <UpgradeMessage {...{limitText, link, type}} />
         <CloudUpgradeButton
           className="upgrade-payg--button__rate-alert"
           metric={() => event(`user.limits.${type}.upgrade`, {location})}

src/shared/components/cloud/CloudOnly.scss

@@ -18,6 +18,14 @@
   }
 }
 
+.flex-upgrade-content.rate-alert--content__free {
+  margin: $cf-marg-a;
+}
+
+.upgrade-message {
+  padding: $cf-marg-b;
+}
+
 .cf-page--title {
   flex-shrink: 0;
 }

src/shared/components/notifications/Notifications.tsx

@@ -52,7 +52,9 @@ const Notifications: FC = () => {
               style={{maxWidth: '600px', alignItems: 'center'}}
             >
               <span style={styles}>
-                <span className="notification--message">{message}</span>
+                {message && (
+                  <span className="notification--message">{message}</span>
+                )}
                 {buttonElement && buttonElement(handleDismiss)}
               </span>
             </Notification>

src/shared/copy/notifications/categories/limits.ts

@@ -4,6 +4,13 @@ import {
   defaultErrorNotification,
   defaultSuccessNotification,
 } from 'src/shared/copy/notifications'
+import {IconFont} from '@influxdata/clockface'
+
+// Constants
+import {CLOUD} from 'src/shared/constants'
+
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Limits
 export const readWriteCardinalityLimitReached = (
@@ -38,6 +45,10 @@ export const writeLimitReached = (
   duration?: number
 ) => ({
   ...defaultErrorNotification,
+  icon:
+    CLOUD && isFlagEnabled('credit250Experiment')
+      ? IconFont.Stop
+      : defaultErrorNotification.icon,
   message,
   duration: duration ?? TEN_SECONDS,
   type: 'writeLimitReached',