Merge branch 'master' into feat/add-ee-licensed-replay-transformer

PostHog · Nov 29, 2023 · 6877482 · 6877482
2 parents 895e6de + bda9166
commit 6877482
Show file tree

Hide file tree

Showing 30 changed files with 232 additions and 165 deletions.
diff --git a/.github/workflows/ci-e2e.yml b/.github/workflows/ci-e2e.yml
@@ -171,7 +171,7 @@ jobs:
               if: needs.changes.outputs.shouldTriggerCypress == 'true'
               uses: depot/pull-action@v1
               with:
-                  build-id: ${{ needs.container.outputs.build-id }} # TODO: Use unit-build-id when the Unit image works
+                  build-id: ${{ needs.container.outputs.unit-build-id }}
                   tags: ${{ needs.container.outputs.tag }}
 
             - name: Write .env # This step intentionally has no if, so that GH always considers the action as having run
@@ -196,6 +196,7 @@ jobs:
                   OBJECT_STORAGE_ACCESS_KEY_ID=object_storage_root_user
                   OBJECT_STORAGE_SECRET_ACCESS_KEY=object_storage_root_password
                   GITHUB_ACTION_RUN_URL="${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+                  CELERY_METRICS_PORT=8999
                   EOT
 
             - name: Start PostHog

diff --git a/frontend/__snapshots__/exporter-exporter--funnel-time-to-convert-insight.png b/frontend/__snapshots__/exporter-exporter--funnel-time-to-convert-insight.png
diff --git a/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png b/frontend/__snapshots__/posthog-3000-navigation--navigation-base.png
diff --git a/frontend/__snapshots__/scenes-app-apps--installed.png b/frontend/__snapshots__/scenes-app-apps--installed.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section.png
diff --git a/frontend/src/exporter/Exporter.scss b/frontend/src/exporter/Exporter.scss
@@ -1,5 +1,11 @@
 @import '../styles/mixins';
 
+body.ExporterBody {
+    &.posthog-3000 {
+        overflow: initial;
+    }
+}
+
 .Exporter {
     display: flex;
     flex-direction: column;

diff --git a/frontend/src/exporter/Exporter.tsx b/frontend/src/exporter/Exporter.tsx
@@ -3,6 +3,7 @@ import './Exporter.scss'
 
 import clsx from 'clsx'
 import { useValues } from 'kea'
+import { use3000Body } from 'lib/hooks/use3000Body'
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
 import { Link } from 'lib/lemon-ui/Link'
 import { useEffect } from 'react'
@@ -33,6 +34,8 @@ export function Exporter(props: ExportedData): JSX.Element {
         window.parent?.postMessage({ event: 'posthog:dimensions', name: window.name, height, width }, '*')
     }, [height, width])
 
+    use3000Body()
+
     return (
         <div
             className={clsx('Exporter', {

diff --git a/frontend/src/exporter/index.html b/frontend/src/exporter/index.html
@@ -1,38 +1,39 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-  <head>
-    <meta name="robots" content="noindex">
-    <script>
-      window.POSTHOG_EXPORTED_DATA = {{exported_data|safe}}
-      if (window.POSTHOG_EXPORTED_DATA.type) {
-        var root = document.documentElement
-        root.className += ' export-type-' + window.POSTHOG_EXPORTED_DATA.type
-      }
-    </script>
-    {% include "head.html" %}
-      {% if add_og_tags %}
-          <meta property="og:title" content="{{ asset_title }}">
-          <meta property="og:type" content="website">
-          <meta property="og:description" content="{{ asset_description }}">
-          <meta property="og:url" content="{{ request.build_absolute_uri }}">
-          <meta property="og:image" content="{{ asset_opengraph_image_url }}">
-          <meta property="og:image:alt" content="A screenshot of the PostHog asset">
-          <meta name="twitter:card" content="summary_large_image">
-      {% endif %}
-  </head>
-  <body>
-    <script>
-        if (typeof Object.entries === 'undefined') {
-            var div = document.createElement("div");
-            div.style.color='#fef6f6'; div.style.background='#920c0c'; div.style.padding='5px 10px';
-            div.innerHTML = "You are using a really old browser. Please upgrade to fully enjoy PostHog!"
-            document.body.prepend(div);
-        }
-        if (!window.process) {
-            // see https://github.com/remarkjs/react-markdown/issues/339
-            window.process = { cwd: () => '' };
-        }
-    </script>
-    <div id="root"></div>
-  </body>
+    <head>
+        <meta name="robots" content="noindex" />
+        <script>
+            window.POSTHOG_EXPORTED_DATA = {{exported_data|safe}}
+            if (window.POSTHOG_EXPORTED_DATA.type) {
+              var root = document.documentElement
+              root.className += ' export-type-' + window.POSTHOG_EXPORTED_DATA.type
+            }
+        </script>
+        {% include "head.html" %} {% if add_og_tags %}
+        <meta property="og:title" content="{{ asset_title }}" />
+        <meta property="og:type" content="website" />
+        <meta property="og:description" content="{{ asset_description }}" />
+        <meta property="og:url" content="{{ request.build_absolute_uri }}" />
+        <meta property="og:image" content="{{ asset_opengraph_image_url }}" />
+        <meta property="og:image:alt" content="A screenshot of the PostHog asset" />
+        <meta name="twitter:card" content="summary_large_image" />
+        {% endif %}
+    </head>
+    <body class="ExporterBody">
+        <script>
+            if (typeof Object.entries === 'undefined') {
+                var div = document.createElement('div')
+                div.style.color = '#fef6f6'
+                div.style.background = '#920c0c'
+                div.style.padding = '5px 10px'
+                div.innerHTML = 'You are using a really old browser. Please upgrade to fully enjoy PostHog!'
+                document.body.prepend(div)
+            }
+            if (!window.process) {
+                // see https://github.com/remarkjs/react-markdown/issues/339
+                window.process = { cwd: () => '' }
+            }
+        </script>
+        <div id="root"></div>
+    </body>
 </html>
diff --git a/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx b/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx
@@ -4,20 +4,25 @@ import { useActions, useAsyncActions, useValues } from 'kea'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner'
 import { useLayoutEffect, useState } from 'react'
 
+import { sidePanelStateLogic } from '../navigation-3000/sidepanel/sidePanelStateLogic'
 import { EnrichedEarlyAccessFeature, featurePreviewsLogic } from './featurePreviewsLogic'
 
 export function FeaturePreviewsModal({
     inline,
 }: {
     /** @deprecated This is only for Storybook. */
     inline?: boolean
-}): JSX.Element {
-    const { featurePreviewsModalVisible, earlyAccessFeatures, rawEarlyAccessFeaturesLoading } =
-        useValues(featurePreviewsLogic)
+}): JSX.Element | null {
+    const { featurePreviewsModalVisible } = useValues(featurePreviewsLogic)
     const { hideFeaturePreviewsModal, loadEarlyAccessFeatures } = useActions(featurePreviewsLogic)
+    const { sidePanelAvailable } = useValues(sidePanelStateLogic)
 
     useLayoutEffect(() => loadEarlyAccessFeatures(), [])
 
+    if (sidePanelAvailable) {
+        return null
+    }
+
     return (
         <LemonModal
             isOpen={inline || featurePreviewsModalVisible}
@@ -27,37 +32,48 @@ export function FeaturePreviewsModal({
             width={528}
             inline={inline}
         >
-            <div
-                className={clsx(
-                    'flex flex-col relative min-h-24',
-                    earlyAccessFeatures.length === 0 && 'items-center justify-center'
-                )}
-            >
-                {earlyAccessFeatures.map((feature, i) => {
-                    if (!feature.flagKey) {
-                        return false
-                    }
-                    return (
-                        <div key={feature.flagKey}>
-                            {i > 0 && <LemonDivider className="my-4" />}
-                            <FeaturePreview key={feature.flagKey} feature={feature} />
-                        </div>
-                    )
-                })}
-                {rawEarlyAccessFeaturesLoading ? (
-                    <SpinnerOverlay />
-                ) : earlyAccessFeatures.length === 0 ? (
-                    <i className="text-center">
-                        No feature previews currently available.
-                        <br />
-                        Check back later!
-                    </i>
-                ) : null}
-            </div>
+            <FeaturePreviews />
         </LemonModal>
     )
 }
 
+export function FeaturePreviews(): JSX.Element {
+    const { earlyAccessFeatures, rawEarlyAccessFeaturesLoading } = useValues(featurePreviewsLogic)
+    const { loadEarlyAccessFeatures } = useActions(featurePreviewsLogic)
+
+    useLayoutEffect(() => loadEarlyAccessFeatures(), [])
+
+    return (
+        <div
+            className={clsx(
+                'flex flex-col relative min-h-24',
+                earlyAccessFeatures.length === 0 && 'items-center justify-center'
+            )}
+        >
+            {earlyAccessFeatures.map((feature, i) => {
+                if (!feature.flagKey) {
+                    return false
+                }
+                return (
+                    <div key={feature.flagKey}>
+                        {i > 0 && <LemonDivider className="my-4" />}
+                        <FeaturePreview key={feature.flagKey} feature={feature} />
+                    </div>
+                )
+            })}
+            {rawEarlyAccessFeaturesLoading ? (
+                <SpinnerOverlay />
+            ) : earlyAccessFeatures.length === 0 ? (
+                <i className="text-center">
+                    No feature previews currently available.
+                    <br />
+                    Check back later!
+                </i>
+            ) : null}
+        </div>
+    )
+}
+
 function FeaturePreview({ feature }: { feature: EnrichedEarlyAccessFeature }): JSX.Element {
     const { activeFeedbackFlagKey, activeFeedbackFlagKeyLoading } = useValues(featurePreviewsLogic)
     const { beginEarlyAccessFeatureFeedback, cancelEarlyAccessFeatureFeedback, updateEarlyAccessFeatureEnrollment } =
@@ -80,18 +96,9 @@ function FeaturePreview({ feature }: { feature: EnrichedEarlyAccessFeature }): J
             </div>
             <p className="my-2">{description || <i>No description.</i>}</p>
             <div>
-                <Link
-                    onClick={() => {
-                        if (!isFeedbackActive) {
-                            beginEarlyAccessFeatureFeedback(flagKey)
-                        } else {
-                            cancelEarlyAccessFeatureFeedback()
-                            setFeedback('')
-                        }
-                    }}
-                >
-                    {!isFeedbackActive ? 'Give' : 'Cancel'} feedback
-                </Link>
+                {!isFeedbackActive ? (
+                    <Link onClick={() => beginEarlyAccessFeatureFeedback(flagKey)}>Give feedback</Link>
+                ) : null}
                 {documentationUrl && (
                     <>
                         {' • '}
@@ -119,19 +126,31 @@ function FeaturePreview({ feature }: { feature: EnrichedEarlyAccessFeature }): J
                             }
                         }}
                     />
-                    <LemonButton
-                        type="primary"
-                        onClick={() => {
-                            void submitEarlyAccessFeatureFeedback(feedback).then(() => {
+                    <div className="flex items-center gap-2">
+                        <LemonButton
+                            type="secondary"
+                            onClick={() => {
+                                cancelEarlyAccessFeatureFeedback()
                                 setFeedback('')
-                            })
-                        }}
-                        loading={activeFeedbackFlagKeyLoading}
-                        fullWidth
-                        center
-                    >
-                        Submit feedback
-                    </LemonButton>
+                            }}
+                        >
+                            Cancel
+                        </LemonButton>
+
+                        <LemonButton
+                            type="primary"
+                            onClick={() => {
+                                void submitEarlyAccessFeatureFeedback(feedback).then(() => {
+                                    setFeedback('')
+                                })
+                            }}
+                            loading={activeFeedbackFlagKeyLoading}
+                            className="flex-1"
+                            center
+                        >
+                            Submit feedback
+                        </LemonButton>
+                    </div>
                 </div>
             )}
         </div>

diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { IconAsterisk, IconDay, IconGear, IconNight, IconSearch } from '@posthog/icons'
+import { IconAsterisk, IconDay, IconGear, IconNight, IconSearch, IconToolbar } from '@posthog/icons'
 import { LemonBadge } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
@@ -93,6 +93,12 @@ export function Navbar(): JSX.Element {
                                 onClick={toggleSearchBar}
                                 keyboardShortcut={{ command: true, k: true }}
                             />
+                            <NavbarButton
+                                icon={<IconToolbar />}
+                                identifier={Scene.ToolbarLaunch}
+                                title="Toolbar"
+                                to={urls.toolbarLaunch()}
+                            />
                             <NavbarButton
                                 icon={<ThemeIcon />}
                                 identifier="theme-button"
@@ -113,7 +119,7 @@ export function Navbar(): JSX.Element {
                             <NavbarButton
                                 icon={<IconGear />}
                                 identifier={Scene.Settings}
-                                title="Project settings"
+                                title="Settings"
                                 to={urls.settings('project')}
                             />