Merge branch 'master' into hogql-dateadd

PostHog · Jun 21, 2024 · f950329 · f950329
2 parents c4eca36 + 99767a5
commit f950329
Show file tree

Hide file tree

Showing 93 changed files with 2,114 additions and 615 deletions.
diff --git a/ee/api/billing.py b/ee/api/billing.py
@@ -93,6 +93,7 @@ class ActivateSerializer(serializers.Serializer):
             required=False
         )  # This is required but in order to support an error for the legacy 'plan' param we need to set required=False
         redirect_path = serializers.CharField(required=False)
+        intent_product = serializers.CharField(required=False)
 
         def validate(self, data):
             plan = data.get("plan")
@@ -137,6 +138,10 @@ def handle_activate(self, request: Request, *args: Any, **kwargs: Any) -> HttpRe
         products = serializer.validated_data.get("products")
         url = f"{url}&products={products}"
 
+        intent_product = serializer.validated_data.get("intent_product")
+        if intent_product:
+            url = f"{url}&intent_product={intent_product}"
+
         if license:
             billing_service_token = build_billing_token(license, organization)
             url = f"{url}&token={billing_service_token}"

diff --git a/.../__snapshots__/components-integrations-slack--slack-integration-added--dark.png b/.../__snapshots__/components-integrations-slack--slack-integration-added--dark.png
diff --git a/...__snapshots__/components-integrations-slack--slack-integration-added--light.png b/...__snapshots__/components-integrations-slack--slack-integration-added--light.png
diff --git a/...end/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png b/...end/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png
diff --git a/...nd/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png b/...nd/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png
diff --git a/...ts__/scenes-app-insights--funnel-left-to-right-breakdown-edit--dark--webkit.png b/...ts__/scenes-app-insights--funnel-left-to-right-breakdown-edit--dark--webkit.png
diff --git a/...s__/scenes-app-insights--funnel-left-to-right-breakdown-edit--light--webkit.png b/...s__/scenes-app-insights--funnel-left-to-right-breakdown-edit--light--webkit.png
diff --git a/...ts__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--dark--webkit.png b/...ts__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--dark--webkit.png
diff --git a/...s__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--light--webkit.png b/...s__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--light--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--light--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png
diff --git a/...tend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal--dark.png b/...tend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal--dark.png
diff --git a/...end/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal--light.png b/...end/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal--light.png
diff --git a/...s__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--dark.png b/...s__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--dark.png
diff --git a/...__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--light.png b/...__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--light.png
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--light.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--light.png
diff --git a/...tend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--dark.png b/...tend/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--dark.png
diff --git a/...end/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--light.png b/...end/__snapshots__/scenes-other-billing-v2--billing-v-2-with-discount--light.png
diff --git a/...nes-other-billing-v2--billing-v-2-with-limit-and-100-percent-discount--dark.png b/...nes-other-billing-v2--billing-v-2-with-limit-and-100-percent-discount--dark.png
diff --git a/...es-other-billing-v2--billing-v-2-with-limit-and-100-percent-discount--light.png b/...es-other-billing-v2--billing-v-2-with-limit-and-100-percent-discount--light.png
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-billing--dark.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-billing--dark.png
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-billing--light.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-billing--light.png
diff --git a/frontend/src/layout.html b/frontend/src/layout.html
@@ -7,7 +7,7 @@
     {% include "head.html" %}
 
     <script>
-        !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+        !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
         posthog.init({{ js_posthog_api_key | safe}}, { api_host: {{ js_posthog_host | safe}}, persistence: 'localStorage+cookie'})
     </script>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"

diff --git a/frontend/src/lib/components/JSSnippet.tsx b/frontend/src/lib/components/JSSnippet.tsx
@@ -12,7 +12,7 @@ export function useJsSnippet(indent = 0): string {
 
     return [
         '<script>',
-        `    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);`,
+        `    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);`,
         `    posthog.init('${currentTeam?.api_token}',{api_host:'${apiHostOrigin()}', ${
             isPersonProfilesDisabled
                 ? ``

diff --git a/frontend/src/lib/components/PayGateMini/PayGateButton.tsx b/frontend/src/lib/components/PayGateMini/PayGateButton.tsx
@@ -1,4 +1,8 @@
 import { LemonButton } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic, FeatureFlagsSet } from 'lib/logic/featureFlagLogic'
+import { urls } from 'scenes/urls'
 
 import { BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType, BillingV2Type } from '~/types'
 
@@ -8,6 +12,7 @@ interface PayGateButtonProps {
     featureInfo: BillingV2FeatureType
     onCtaClick: () => void
     billing: BillingV2Type | null
+    isAddonProduct?: boolean
     scrollToProduct: boolean
 }
 
@@ -17,16 +22,27 @@ export const PayGateButton = ({
     featureInfo,
     onCtaClick,
     billing,
+    isAddonProduct,
     scrollToProduct = true,
 }: PayGateButtonProps): JSX.Element => {
+    const { featureFlags } = useValues(featureFlagLogic)
     return (
         <LemonButton
-            to={getCtaLink(gateVariant, productWithFeature, featureInfo, scrollToProduct)}
+            to={getCtaLink(
+                gateVariant,
+                productWithFeature,
+                featureInfo,
+                featureFlags,
+                billing?.subscription_level,
+                isAddonProduct,
+                scrollToProduct
+            )}
+            disableClientSideRouting={gateVariant === 'add-card' && !isAddonProduct}
             type="primary"
             center
             onClick={onCtaClick}
         >
-            {getCtaLabel(gateVariant, billing)}
+            {getCtaLabel(gateVariant, billing, featureFlags)}
         </LemonButton>
     )
 }
@@ -35,9 +51,21 @@ const getCtaLink = (
     gateVariant: 'add-card' | 'contact-sales' | 'move-to-cloud' | null,
     productWithFeature: BillingProductV2AddonType | BillingProductV2Type,
     featureInfo: BillingV2FeatureType,
+    featureFlags: FeatureFlagsSet,
+    subscriptionLevel?: BillingV2Type['subscription_level'],
+    isAddonProduct?: boolean,
     scrollToProduct: boolean = true
 ): string | undefined => {
-    if (gateVariant === 'add-card') {
+    if (
+        gateVariant === 'add-card' &&
+        !isAddonProduct &&
+        featureFlags[FEATURE_FLAGS.SUBSCRIBE_TO_ALL_PRODUCTS] === 'test' &&
+        subscriptionLevel === 'free'
+    ) {
+        return `/api/billing/activate?products=all_products:&redirect_path=${urls.organizationBilling()}&intent_product=${
+            productWithFeature.type
+        }`
+    } else if (gateVariant === 'add-card') {
         return `/organization/billing${scrollToProduct ? `?products=${productWithFeature.type}` : ''}`
     } else if (gateVariant === 'contact-sales') {
         return `mailto:[email protected]?subject=Inquiring about ${featureInfo.name}`
@@ -49,9 +77,16 @@ const getCtaLink = (
 
 const getCtaLabel = (
     gateVariant: 'add-card' | 'contact-sales' | 'move-to-cloud' | null,
-    billing: BillingV2Type | null
+    billing: BillingV2Type | null,
+    featureFlags: FeatureFlagsSet
 ): string => {
-    if (gateVariant === 'add-card') {
+    if (
+        gateVariant === 'add-card' &&
+        featureFlags[FEATURE_FLAGS.SUBSCRIBE_TO_ALL_PRODUCTS] === 'test' &&
+        billing?.subscription_level === 'free'
+    ) {
+        return 'Upgrade now'
+    } else if (gateVariant === 'add-card') {
         return billing?.has_active_subscription ? 'Upgrade now' : 'Subscribe now'
     } else if (gateVariant === 'contact-sales') {
         return 'Contact sales'

diff --git a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
@@ -2,13 +2,21 @@ import { IconInfo, IconOpenSidebar } from '@posthog/icons'
 import { LemonButton, Link, Tooltip } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic, FeatureFlagsSet } from 'lib/logic/featureFlagLogic'
 import posthog from 'posthog-js'
 import { useEffect } from 'react'
 import { billingLogic } from 'scenes/billing/billingLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { getProductIcon } from 'scenes/products/Products'
 
-import { AvailableFeature, BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType } from '~/types'
+import {
+    AvailableFeature,
+    BillingProductV2AddonType,
+    BillingProductV2Type,
+    BillingV2FeatureType,
+    BillingV2Type,
+} from '~/types'
 
 import { upgradeModalLogic } from '../UpgradeModal/upgradeModalLogic'
 import { PayGateButton } from './PayGateButton'
@@ -95,6 +103,7 @@ export function PayGateMini({
                 productWithFeature={productWithFeature}
                 isGrandfathered={isGrandfathered}
                 isAddonProduct={isAddonProduct}
+                billing={billing}
                 featureInfoOnNextPlan={featureInfoOnNextPlan}
                 handleCtaClick={handleCtaClick}
             >
@@ -106,6 +115,7 @@ export function PayGateMini({
                         onCtaClick={handleCtaClick}
                         billing={billing}
                         scrollToProduct={scrollToProduct}
+                        isAddonProduct={isAddonProduct}
                     />
                     {docsLink && isCloudOrDev && (
                         <LemonButton
@@ -135,6 +145,7 @@ interface PayGateContentProps {
     productWithFeature: BillingProductV2AddonType | BillingProductV2Type
     isGrandfathered?: boolean
     isAddonProduct?: boolean
+    billing: BillingV2Type | null
     featureInfoOnNextPlan?: BillingV2FeatureType
     children: React.ReactNode
     handleCtaClick: () => void
@@ -149,10 +160,12 @@ function PayGateContent({
     productWithFeature,
     isGrandfathered,
     isAddonProduct,
+    billing,
     featureInfoOnNextPlan,
     children,
     handleCtaClick,
 }: PayGateContentProps): JSX.Element {
+    const { featureFlags } = useValues(featureFlagLogic)
     return (
         <div
             className={clsx(
@@ -171,6 +184,8 @@ function PayGateContent({
                 gateVariant,
                 featureInfo,
                 productWithFeature,
+                billing,
+                featureFlags,
                 isAddonProduct,
                 handleCtaClick
             )}
@@ -187,6 +202,8 @@ const renderUsageLimitMessage = (
     gateVariant: 'add-card' | 'contact-sales' | 'move-to-cloud' | null,
     featureInfo: BillingV2FeatureType,
     productWithFeature: BillingProductV2AddonType | BillingProductV2Type,
+    billing: BillingV2Type | null,
+    featureFlags: FeatureFlagsSet,
     isAddonProduct?: boolean,
     handleCtaClick?: () => void
 ): JSX.Element => {
@@ -223,9 +240,13 @@ const renderUsageLimitMessage = (
                             .
                         </p>
                     </>
+                ) : featureFlags[FEATURE_FLAGS.SUBSCRIBE_TO_ALL_PRODUCTS] === 'test' &&
+                  billing?.subscription_level === 'free' &&
+                  !isAddonProduct ? (
+                    <p>Upgrade to create more {featureInfo.name}</p>
                 ) : (
                     <p>
-                        Please upgrade your <b>{productWithFeature.name}</b> plan to create more {featureInfo.name}
+                        Upgrade your <b>{productWithFeature.name}</b> plan to create more {featureInfo.name}
                     </p>
                 )}
             </div>
@@ -234,14 +255,16 @@ const renderUsageLimitMessage = (
     return (
         <>
             <p className="max-w-140">{featureInfo.description}</p>
-            <p>{renderGateVariantMessage(gateVariant, productWithFeature, isAddonProduct)}</p>
+            <p>{renderGateVariantMessage(gateVariant, productWithFeature, billing, featureFlags, isAddonProduct)}</p>
         </>
     )
 }
 
 const renderGateVariantMessage = (
     gateVariant: 'add-card' | 'contact-sales' | 'move-to-cloud' | null,
     productWithFeature: BillingProductV2AddonType | BillingProductV2Type,
+    billing: BillingV2Type | null,
+    featureFlags: FeatureFlagsSet,
     isAddonProduct?: boolean
 ): JSX.Element => {
     if (gateVariant === 'move-to-cloud') {
@@ -252,7 +275,13 @@ const renderGateVariantMessage = (
                 Subscribe to the <b>{productWithFeature?.name}</b> addon to use this feature.
             </>
         )
+    } else if (
+        featureFlags[FEATURE_FLAGS.SUBSCRIBE_TO_ALL_PRODUCTS] === 'test' &&
+        billing?.subscription_level === 'free'
+    ) {
+        return <>Upgrade to use this feature.</>
     }
+
     return (
         <>
             Upgrade your <b>{productWithFeature?.name}</b> plan to use this feature.

diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss
@@ -12,7 +12,7 @@
     .PropertyFilters__prefix {
         padding: 0 5px;
         font-size: 18px;
-        color: #c4c4c4;
+        color: var(--border-bold-3000);
         user-select: none;
     }
 

diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
@@ -133,7 +133,13 @@ export function OperatorValueSelect({
                 />
             </div>
             {!isOperatorFlag(currentOperator || PropertyOperator.Exact) && type && propkey && (
-                <div className="flex-1 min-w-[10rem]" data-attr="taxonomic-value-select">
+                <div
+                    className={
+                        // High flex-grow for proper sizing within TaxonomicPropertyFilter
+                        'shrink grow-[1000] min-w-[10rem]'
+                    }
+                    data-attr="taxonomic-value-select"
+                >
                     <PropertyValue
                         type={type}
                         key={propkey}