trunk-merge/pr-108162/1d6dd547-beb0-4a6d-a92a-4c724de0977f

frontend/snapshots.yml

@@ -9510,6 +9510,10 @@ snapshots:
         hash: v1.k794b7964.8c150639468430cd106d26a5e3dde526b0d08bde8d07f37527113386e022d97b.xTBWyA6WWMQjVdb8wJvusy7_4oieQVnkHe2FCJxpQHg
     scenes-app-data-warehouse-sql-editor--lazy-schema--light:
         hash: v1.k794b7964.3b4c2157445c95071aca5b730f192c94fe1c7379bbec6f9e662fb0f52c74a1cb.P6dqBWgIQEb6E9d0pr2oYfd_klhDKPyksBErJxXKTY4
+    scenes-app-data-warehouse-sql-editor--loading-insight--dark:
+        hash: v1.k794b7964.c5cca89da338912886f2d329a909da87ca3ce5e6f12e0c90ee23c7c8241f768e.XfxPjuo4QbCabh0VgS40-cL0nvbKa4LIqmMHGreN0zI
+    scenes-app-data-warehouse-sql-editor--loading-insight--light:
+        hash: v1.k794b7964.2d303aecb03d48aa8dacc6e8d6cf8ff68abb8229a4338689b74b6f79d8589ed3.JQsHYIybl3SsiKa9u_elKJhuk1Td__oUl5pjqfEO-OE
     scenes-app-data-warehouse-sql-editor--managed-warehouse-connection--dark:
         hash: v1.k794b7964.3c4bbe63ff30dee2cdef4a41a06d5a83bedcbaf8fd06bd14e8f7632f5c3d097c.qzBmH7GQm_oM_jCNWuSApX-cI65YcyEnwosDth6tlnE
     scenes-app-data-warehouse-sql-editor--managed-warehouse-connection--light:
@@ -13439,13 +13443,13 @@ snapshots:
     scenes-app-web-analytics--web-analytics-dashboard-narrow--light:
         hash: v1.k794b7964.9d31020061155395b85003dae42b77a09a84839c2b65e7a1bb6f7e764067e190.zLKSfk0tFj7IATJU0hiNbNGx2_DE5uVPPZZLQLQXqrM
     scenes-app-web-analytics--web-analytics-dashboard-tile-header-v-2-medium--dark:
-        hash: v1.k794b7964.865308ee7b3cc95ae6a9d3f78ff061e02cf29610e6af98af8d9793fc027f083c.zzjFc2X6UxtQq1vmXHEkobuQiEGSMX5_Q5kpKagU7Zk
+        hash: v1.k794b7964.ba43e537c83b8046afd7ff4bb61a05c6143a8ae30cb4d0fc5aa10cd0c2bb26b4.k2L76-XagrvTM-zJz1amiVEtXr1D5pdml6v57bP6JRI
     scenes-app-web-analytics--web-analytics-dashboard-tile-header-v-2-medium--light:
-        hash: v1.k794b7964.ea3c672066d0af122eaacb17a34da1613a5fd9a9c4afe78872f036d5481a3d38.qlkdK0-nZPYtsFp0cyegdj0iziswRMM1iJFEOWN1V2g
+        hash: v1.k794b7964.e8e3380fad8a375ea6df3522c6375011e9a8c211fb9432432d98a8074219d7c2.Qi7lh9Pa8AmXx_cLU7NKTz83gtFkR2fdqoV3F4PW57c
     scenes-app-web-analytics--web-analytics-dashboard-tile-header-v-2-wide--dark:
-        hash: v1.k794b7964.ef09b67b9d8cf134fa292b1d49156804eb007f718fe890bd169d0fe1d014b2f9.VJGrECMOd1vMwf1ENv4mz3knvaC1j0r9JBSlZww0R5s
+        hash: v1.k794b7964.dcf4383ad413029603aa0769919ff748fb3b6185dd4f13ed16a5d13b61cac901.cOctP1XQJRmbRU1CN7WSa-3S7k9zddfUczaxhQTVs08
     scenes-app-web-analytics--web-analytics-dashboard-tile-header-v-2-wide--light:
-        hash: v1.k794b7964.6df48926e7ac9f971d7365bd1862ebf290fa7ed64076a69020e613b23a3a537a.UV8gAJzodjW2qNErfweaYYvFspAKRqSdcoizfF1Jxv0
+        hash: v1.k794b7964.d1f1e26d76b67139b635a4020df243849d60d60cb8b3fe6d132980acc146e56b.WekE32-CE3pdo-V0UR852y2Fa2RwB091zWrfQr4y8-0
     scenes-app-web-analytics--web-analytics-empty-onboarding-narrow--dark:
         hash: v1.k794b7964.605caa854b816f8f47b5ef23cebca23dd5f2b516af151a7df08c9337663b3964.nHXW-vmDopWvz5x29U-iyNWGv9qxfOx64AqB8sykTpo
     scenes-app-web-analytics--web-analytics-empty-onboarding-narrow--light:

frontend/src/layout/panel-layout/ProjectTree/ProjectTree.tsx

@@ -46,7 +46,7 @@
 import { TreeFiltersDropdownMenu } from './TreeFiltersDropdownMenu'
 import { TreeSearchField } from './TreeSearchField'
 import { TreeSortMenuItems } from './TreeSortMenuItems'
-import { calculateMovePath, resolveProjectTreeDrop } from './utils'
+import { calculateMovePath, isProjectTreeItemActive, resolveProjectTreeDrop } from './utils'
 
 interface ProjectTreeBaseProps {
     layout?: 'panel' | 'inline'
@@ -96,36 +96,7 @@
 
 const SHORTCUT_DISMISSAL_LOCAL_STORAGE_KEY = 'shortcut-dismissal'
 
-// Show active state for items that are active in the URL
-const isItemActive = (item: TreeDataItem): boolean => {
-    if (!item.record?.href) {
-        return false
-    }
-
-    const currentPath = removeProjectIdIfPresent(window.location.pathname)
-    const itemHref = typeof item.record.href === 'string' ? item.record.href : ''
-
-    if (currentPath === itemHref) {
-        return true
-    }
-
-    // Current path is a sub-path of item (e.g., /insights/new under /insights)
-    if (currentPath.startsWith(itemHref + '/')) {
-        return true
-    }
-
-    // Special handling for products with child pages on distinct paths (e.g., /replay/home and /replay/playlists)
-    if (item.name === 'Session replay' && currentPath.startsWith('/replay/')) {
-        return true
-    }
-    if (item.name === 'Workflows' && currentPath.startsWith('/workflows')) {
-        return true
-    }
-
-    return false
-}
-
 export function ProjectTree(props: ProjectTreeProps): JSX.Element {
     const {
         logicKey,
         root,
@@ -149,6 +120,7 @@
     const {
         fullFileSystemFiltered,
         lastViewedId,
+        projectTreeRef,
         expandedFolders,
         expandedSearchFolders,
         searchTerm,
@@ -261,12 +233,14 @@
             data={treeData}
             selectMode={selectMode}
             defaultSelectedFolderOrNodeId={lastViewedId || undefined}
-            isItemActive={isItemActive}
+            isItemActive={(item) =>
+                isProjectTreeItemActive(item, removeProjectIdIfPresent(window.location.pathname), projectTreeRef)
+            }
             size={treeSize}
             onItemChecked={onItemChecked}
             checkedItemCount={checkedItemCountNumeric}
             disableScroll={disableScroll}
             onItemClick={(item, event) => {
                 event.preventDefault()
                 if (item?.type === 'empty-folder' || item?.type === 'loading-indicator') {
                     return
@@ -341,7 +315,7 @@
             enableDragAndDrop={!sortMethod || sortMethod === 'folder'}
             dragAndDropScope={props.shareDragAndDropContext ? (logicKey ?? uniqueKey) : undefined}
             rootDropId={root === 'shortcuts://' ? 'shortcuts://' : ''}
             onDragEnd={(dragEvent) => {
                 const oldId = String(dragEvent.active.id)
                 const drop = resolveProjectTreeDrop(
                     oldId,
@@ -507,7 +481,7 @@
                 )
             }}
             renderItemTooltipDocLink={props.renderItemTooltipDocLink}
             renderItemTooltip={(item) => {
                 if (props.renderItemTooltip) {
                     return props.renderItemTooltip(item)
                 }

frontend/src/layout/panel-layout/ProjectTree/utils.test.ts

@@ -1,13 +1,17 @@
 import { renderToStaticMarkup } from 'react-dom/server'
 
+import { TreeDataItem } from 'lib/lemon-ui/LemonTree/LemonTree'
+
 import { FileSystemEntry } from '~/queries/schema/schema-general'
+import { ProjectTreeRef } from '~/types'
 
 import { productsItemName } from '../navbar/tabs/productsCatalog'
 import { getCustomIcon } from './customIconRegistry'
 import { getDefaultTreeData, getDefaultTreeProducts, iconForType } from './defaultTree'
 import {
     convertFileSystemEntryToTreeDataItem,
     escapePath,
+    isProjectTreeItemActive,
     joinPath,
     matchesRefType,
     reparentPath,
@@ -20,6 +24,25 @@ const catalogProducts = [...getDefaultTreeProducts(), ...getDefaultTreeData()].f
 )
 
 describe('project tree utils', () => {
+    describe('isProjectTreeItemActive', () => {
+        const insight: TreeDataItem = {
+            id: 'project/sql-insight',
+            name: 'SQL insight',
+            record: { type: 'insight', ref: 'sql123', href: '/insights/sql123' },
+        }
+
+        it.each<[string, string, ProjectTreeRef | null, boolean]>([
+            ['view mode', '/insights/sql123', null, true],
+            ['edit mode', '/sql', { type: 'insight', ref: 'sql123' }, true],
+            ['another insight', '/sql', { type: 'insight', ref: 'other' }, false],
+            ['another resource with the same ID', '/sql', { type: 'dashboard', ref: 'sql123' }, false],
+            ['unsaved SQL', '/sql', null, false],
+            ['new insight', '/sql', { type: 'insight', ref: null }, false],
+        ])('highlights the current insight in %s', (_, pathname, ref, expected) => {
+            expect(isProjectTreeItemActive(insight, pathname, ref)).toBe(expected)
+        })
+    })
+
     describe('resolveProjectTreeDrop', () => {
         const note: FileSystemEntry = { id: 'note', type: 'notebook', ref: 'note-ref', path: 'Research/Notes' }
         const folder: FileSystemEntry = { id: 'folder', type: 'folder', path: 'Research' }

frontend/src/layout/panel-layout/ProjectTree/utils.tsx

@@ -6,7 +6,7 @@
 import { SearchHighlightMultiple } from '~/layout/navigation-3000/components/SearchHighlight'
 import { RecentResults, SearchResults } from '~/layout/panel-layout/ProjectTree/projectTreeLogic'
 import { FileSystemEntry, FileSystemIconType, FileSystemImport } from '~/queries/schema/schema-general'
-import { UserBasicType } from '~/types'
+import { ProjectTreeRef, UserBasicType } from '~/types'
 
 import { getCustomIcon } from './customIconRegistry'
 import { ProductIconWrapper, getSidebarProduct, iconForType } from './defaultTree'
@@ -67,7 +67,7 @@
     | { type: 'move'; item: FileSystemEntry; folder: string }
     | { type: 'move-shortcut'; item: FileSystemEntry; folder: string }
 
 export function resolveProjectTreeDrop(
     activeId: string,
     overId: string | null,
     items: FileSystemEntry[],
@@ -165,7 +165,7 @@
     )
 }
 
 export function convertFileSystemEntryToTreeDataItem({
     imports,
     folderStates,
     checkedItems,
@@ -179,7 +179,7 @@
     allShortcuts = false,
     disableCategories = false,
 }: ConvertProps): TreeDataItem[] {
     function itemToTreeDataItem(item: FileSystemImport | FileSystemEntry): TreeDataItem {
         const sidebarProduct = getSidebarProduct(item.href)
         // A starred product keeps the name and tags it had when starred, so show the sidebar's current ones instead.
         const starredProduct = root === 'shortcuts://' && item.type !== 'folder' ? sidebarProduct : undefined
@@ -364,7 +364,7 @@
 
     // Helper function to sort nodes (and their children) alphabetically by name.
     const sortNodes = (nodes: TreeDataItem[]): void => {
         nodes.sort((a, b) => {
             // If they have a category, sort by hardcoded category order
             if (a.record?.category && b.record?.category && a.record.category !== b.record.category) {
                 // Use custom category order for the data management panel
@@ -525,6 +525,44 @@
     return type.endsWith('/') ? !!rowType?.startsWith(type) : rowType === type
 }
 
+export function isProjectTreeItemActive(
+    item: TreeDataItem,
+    currentPath: string,
+    projectTreeRef: ProjectTreeRef | null
+): boolean {
+    if (
+        projectTreeRef?.ref &&
+        item.record?.ref === projectTreeRef.ref &&
+        matchesRefType(item.record?.type, projectTreeRef.type)
+    ) {
+        return true
+    }
+
+    if (!item.record?.href) {
+        return false
+    }
+
+    const itemHref = typeof item.record.href === 'string' ? item.record.href : ''
+    if (currentPath === itemHref) {
+        return true
+    }
+
+    // Current path is a sub-path of item (e.g., /insights/new under /insights)
+    if (currentPath.startsWith(itemHref + '/')) {
+        return true
+    }
+
+    // Special handling for products with child pages on distinct paths (e.g., /replay/home and /replay/playlists)
+    if (item.name === 'Session replay' && currentPath.startsWith('/replay/')) {
+        return true
+    }
+    if (item.name === 'Workflows' && currentPath.startsWith('/workflows')) {
+        return true
+    }
+
+    return false
+}
+
 export function refTypeParams(type: string): { type?: string; type__startswith?: string } {
     return type.endsWith('/') ? { type__startswith: type } : { type }
 }

frontend/src/scenes/data-warehouse/editor/QueryPane.tsx

@@ -2,6 +2,7 @@
 import { useMemo } from 'react'
 
 import { IconCheck, IconX } from '@posthog/icons'
+import { Spinner } from '@posthog/lemon-ui'
 
 import { AutoSizer } from 'lib/components/AutoSizer'
 import { Resizer } from 'lib/components/Resizer/Resizer'
@@ -25,10 +26,11 @@
     constrainHeight?: boolean
 }
 
 export function QueryPane(props: QueryPaneProps): JSX.Element {
     const { queryPaneHeight, queryPaneDesiredSize, queryPaneResizerProps } = useValues(editorSizingLogic)
     const { onAcceptSuggestedQueryInput, onRejectSuggestedQueryInput } = useActions(sqlEditorLogic)
-    const { acceptText, rejectText, diffShowRunButton } = useValues(sqlEditorLogic)
+    const { acceptText, rejectText, diffShowRunButton, insightLoading } = useValues(sqlEditorLogic)
+    const queryLoading = insightLoading && !props.queryInput
     const editorOptions = useMemo<CodeEditorProps['options']>(
         () => ({
             minimap: {
@@ -43,8 +45,9 @@
                 showInlineDetails: true,
             },
             quickSuggestionsDelay: 300,
+            readOnly: queryLoading,
         }),
-        [props.originalValue]
+        [props.originalValue, queryLoading]
     )
     // Without an output pane beneath it the editor owns its column, so it takes whatever height the
     // database tree gives the row rather than leaving dead space next to the schema list.
@@ -87,14 +90,23 @@
                                         width={width}
                                         originalValue={props.originalValue}
                                         enableVimMode={props.editorVimModeEnabled}
-                                        autoFocus={true}
                                         {...props.codeEditorProps}
+                                        autoFocus={!queryLoading && (props.codeEditorProps.autoFocus ?? true)}
                                         options={editorOptions}
                                     />
                                 ) : null
                             }
                         />
                     </div>
+                    {queryLoading && (
+                        <div
+                            className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-primary"
+                            role="status"
+                        >
+                            <Spinner />
+                            <span>Loading query…</span>
+                        </div>
+                    )}
                     {props.originalValue && (
                         <div
                             className="absolute flex gap-1 bg-bg-light rounded border py-1 px-1.5 z-10 left-1/2 -translate-x-1/2 bottom-4 whitespace-nowrap"

frontend/src/scenes/data-warehouse/editor/SQLEditorScene.stories.tsx

@@ -1,5 +1,6 @@
 import { Decorator, Meta, StoryObj } from '@storybook/react'
 import { BindLogic } from 'kea'
+import { delay } from 'msw'
 import { useEffect, useRef } from 'react'
 
 import { FEATURE_FLAGS } from 'lib/constants'
@@ -183,6 +184,27 @@ export default meta
 type Story = StoryObj<{}>
 export const TopToolsPerServer: Story = {}
 
+export const LoadingInsight: Story = {
+    parameters: {
+        pageUrl: `${urls.sqlEditor()}?open_insight=loading1`,
+        testOptions: {
+            waitForLoadersToDisappear: false,
+            waitForSelector: '[data-attr="hogql-query-editor"] ~ [role="status"]',
+        },
+        msw: {
+            mocks: {
+                get: {
+                    '/api/environments/:team_id/insights/': async () => {
+                        await delay('infinite')
+                        return [200, { results: [] }]
+                    },
+                    '/api/projects/:team_id/warehouse_expressions/': { results: [] },
+                },
+            },
+        },
+    },
+}
+
 // Selecting the managed warehouse puts its long name in the sidebar's connection selector, where it
 // has to ellipsize on one line rather than wrap or overflow into the Run button's toolbar.
 export const ManagedWarehouseConnection: Story = {

frontend/src/scenes/data-warehouse/editor/editorSceneLogic.tsx

@@ -14,7 +14,7 @@ import { urls } from 'scenes/urls'
 import { SIDE_PANEL_CONTEXT_KEY, SidePanelSceneContext } from '~/layout/navigation-3000/sidepanel/types'
 import { notebooksModel } from '~/models/notebooksModel'
 import { DataVisualizationNode, FileSystemIconType, HogQLFilters, NodeKind } from '~/queries/schema/schema-general'
-import { Breadcrumb } from '~/types'
+import { Breadcrumb, ProjectTreeRef } from '~/types'
 
 import type { FeatureFlagsSet } from '../../../lib/logic/featureFlagLogic'
 import type { DataWarehouseSavedQuery, LinkBreadcrumb, InsightModel } from '../../../types'
@@ -112,6 +112,7 @@ export interface editorSceneLogicValues {
     viewLoading: boolean // sqlEditorLogic
     breadcrumbs: Breadcrumb[]
     isHistoryModalOpen: boolean
+    projectTreeRef: ProjectTreeRef | null
     saveAsMenuItems: {
         primary: SaveAsMenuItem
         secondary: SaveAsMenuItem[]
@@ -190,6 +191,9 @@ export interface editorSceneLogicActions {
 export interface editorSceneLogicMeta {
     key: string
     __keaTypeGenInternalSelectorTypes: {
+        projectTreeRef: (
+            editingInsight: InsightModel<import('~/queries/schema/schema-general').Node<Record<string, any>>> | null
+        ) => ProjectTreeRef | null
         breadcrumbs: (activeTab: QueryTab | null) => Breadcrumb[]
         titleSectionProps: (
             editingInsight: InsightModel<import('~/queries/schema/schema-general').Node<Record<string, any>>> | null,
@@ -288,6 +292,11 @@ export const editorSceneLogic = kea<editorSceneLogicType>([
         ],
     }),
     selectors({
+        projectTreeRef: [
+            (s) => [s.editingInsight],
+            (editingInsight: InsightModel | null): ProjectTreeRef | null =>
+                editingInsight ? { type: 'insight', ref: editingInsight.short_id } : null,
+        ],
         breadcrumbs: [
             (s) => [s.activeTab],
             (activeTab: null | import('./sqlEditorLogic').QueryTab): Breadcrumb[] => {