feat: warn when heatmaps disabled (#22860)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx

@@ -1,4 +1,4 @@
-import { IconCollapse } from '@posthog/icons'
+import { IconCollapse, IconGear } from '@posthog/icons'
 import { LemonBanner, LemonButton, LemonInputSelect, LemonSkeleton, Spinner, Tooltip } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
 import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUrlList'
@@ -10,6 +10,9 @@ import { DetectiveHog } from 'lib/components/hedgehogs'
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
 import { IconChevronRight, IconOpenInNew } from 'lib/lemon-ui/icons'
 import React, { useEffect, useRef } from 'react'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { sidePanelSettingsLogic } from '~/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic'
 
 import { heatmapsBrowserLogic } from './heatmapsBrowserLogic'
 
@@ -260,6 +263,28 @@ function EmbeddedHeatmapBrowser({
     ) : null
 }
 
+function Warnings(): JSX.Element | null {
+    const { currentTeam } = useValues(teamLogic)
+    const heatmapsEnabled = currentTeam?.heatmaps_opt_in
+
+    const { openSettingsPanel } = useActions(sidePanelSettingsLogic)
+
+    return !heatmapsEnabled ? (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSettingsPanel({ settingId: 'heatmaps' }),
+                children: 'Configure',
+            }}
+            dismissKey="heatmaps-might-be-disabled-warning"
+        >
+            You aren't collecting heatmaps data. Enable heatmaps in your project.
+        </LemonBanner>
+    ) : null
+}
+
 export function HeatmapsBrowser(): JSX.Element {
     const iframeRef = useRef<HTMLIFrameElement | null>(null)
 
@@ -271,7 +296,8 @@ export function HeatmapsBrowser(): JSX.Element {
 
     return (
         <BindLogic logic={heatmapsBrowserLogic} props={logicProps}>
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-col gap-2">
+                <Warnings />
                 <div className="flex flex-col overflow-hidden w-full h-[90vh] rounded border">
                     <UrlSearchHeader />
 

frontend/src/scenes/scenes.ts

@@ -408,7 +408,6 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
     [Scene.Heatmaps]: {
         projectBased: true,
         name: 'Heatmaps',
-        hideProjectNotice: true,
     },
 }