feat(editor-3001): info tab

frontend/src/layout/navigation-3000/Navigation.scss

@@ -175,7 +175,7 @@
 .Sidebar3000 {
     --sidebar-slider-padding: 0.125rem;
     --sidebar-horizontal-padding: 0.5rem;
-    --sidebar-row-height: 2.5rem;
+    --sidebar-row-height: 3rem;
     --sidebar-background: var(--bg-3000);
 
     position: relative;
@@ -533,8 +533,6 @@
 
     position: relative;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     width: 100%;
     height: 100%;
     color: inherit;
@@ -549,7 +547,9 @@
 }
 
 .SidebarListItem__link {
+    flex-direction: column;
     row-gap: 1px;
+    justify-content: center;
     padding: 0 var(--sidebar-horizontal-padding) 0 var(--sidebar-list-item-inset);
     color: inherit !important; // Disable link color
     .SidebarListItem[aria-disabled='true'] & {
@@ -558,8 +558,12 @@
 }
 
 .SidebarListItem__button {
+    flex-direction: row;
+    gap: 0.25rem;
     row-gap: 1px;
+    align-items: center;
     padding: 0 var(--sidebar-horizontal-padding) 0 var(--sidebar-list-item-inset);
+    font-size: 1.125rem; // Make icons bigger
     color: inherit !important; // Disable link color
     cursor: pointer;
 
@@ -569,6 +573,9 @@
 }
 
 .SidebarListItem__rename {
+    flex-direction: column;
+    justify-content: center;
+
     // Pseudo-elements don't work on inputs, so we use a wrapper div
     background: var(--bg-light);
 

frontend/src/layout/navigation-3000/components/SidebarList.tsx

@@ -232,6 +232,7 @@ function SidebarListItem({ item, validateName, active, style }: SidebarListItemP
     if (isItemClickable(item)) {
         content = (
             <li className="SidebarListItem__button" onClick={item.onClick}>
+                {item.icon}
                 <h5>{item.name}</h5>
             </li>
         )

frontend/src/layout/navigation-3000/types.ts

@@ -151,4 +151,5 @@ export interface TentativeListItem {
 export interface ButtonListItem extends BasicListItem {
     key: '__button__'
     onClick: () => void
+    icon?: JSX.Element
 }

frontend/src/lib/monaco/CodeEditor.tsx

@@ -16,7 +16,7 @@ import * as monaco from 'monaco-editor'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-import { AnyDataNode, HogLanguage } from '~/queries/schema'
+import { AnyDataNode, HogLanguage, HogQLMetadataResponse } from '~/queries/schema'
 
 if (loader) {
     loader.config({ monaco })
@@ -32,7 +32,7 @@ export interface CodeEditorProps extends Omit<EditorProps, 'loading' | 'theme'>
     sourceQuery?: AnyDataNode
     globals?: Record<string, any>
     schema?: Record<string, any> | null
-
+    onMetadata?: (metadata: HogQLMetadataResponse) => void
     onError?: (error: string | null, isValidView: boolean) => void
 }
 let codeEditorIndex = 0
@@ -121,6 +121,7 @@ export function CodeEditor({
     sourceQuery,
     schema,
     onError,
+    onMetadata,
     ...editorProps
 }: CodeEditorProps): JSX.Element {
     const { isDarkModeOn } = useValues(themeLogic)
@@ -140,6 +141,7 @@ export function CodeEditor({
         monaco: monaco,
         editor: editor,
         onError,
+        onMetadata,
     })
     useMountedLogic(builtCodeEditorLogic)
 

frontend/src/lib/monaco/codeEditorLogic.tsx

@@ -50,6 +50,7 @@ export interface CodeEditorLogicProps {
     globals?: Record<string, any>
     multitab?: boolean
     onError?: (error: string | null, isValidView: boolean) => void
+    onMetadata?: (metadata: HogQLMetadataResponse) => void
 }
 
 export const codeEditorLogic = kea<codeEditorLogicType>([
@@ -100,6 +101,7 @@ export const codeEditorLogic = kea<codeEditorLogicType>([
                         variables,
                     })
                     breakpoint()
+                    props.onMetadata?.(response)
                     return [query, response]
                 },
             },

frontend/src/queries/schema.json

@@ -7265,6 +7265,12 @@
                 "query": {
                     "type": "string"
                 },
+                "table_names": {
+                    "items": {
+                        "type": "string"
+                    },
+                    "type": "array"
+                },
                 "warnings": {
                     "items": {
                         "$ref": "#/definitions/HogQLNotice"
@@ -9426,6 +9432,12 @@
                         "query": {
                             "type": "string"
                         },
+                        "table_names": {
+                            "items": {
+                                "type": "string"
+                            },
+                            "type": "array"
+                        },
                         "warnings": {
                             "items": {
                                 "$ref": "#/definitions/HogQLNotice"

frontend/src/queries/schema.ts

@@ -367,6 +367,7 @@ export interface HogQLMetadataResponse {
     warnings: HogQLNotice[]
     notices: HogQLNotice[]
     query_status?: never
+    table_names?: string[]
 }
 
 export type AutocompleteCompletionItemKind =

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

@@ -30,13 +30,14 @@ import { ChartDisplayType, ExporterFormat } from '~/types'
 import { dataWarehouseViewsLogic } from '../saved_queries/dataWarehouseViewsLogic'
 import { multitabEditorLogic } from './multitabEditorLogic'
 import { outputPaneLogic, OutputTab } from './outputPaneLogic'
+import { InfoTab } from './OutputPaneTabs/InfoTab'
 
 export function OutputPane(): JSX.Element {
     const { activeTab } = useValues(outputPaneLogic)
     const { setActiveTab } = useActions(outputPaneLogic)
     const { variablesForInsight } = useValues(variablesLogic)
 
-    const { editingView, sourceQuery, exportContext, isValidView, error } = useValues(multitabEditorLogic)
+    const { editingView, sourceQuery, exportContext, isValidView, error, editorKey } = useValues(multitabEditorLogic)
     const { saveAsInsight, saveAsView, setSourceQuery, runQuery } = useActions(multitabEditorLogic)
     const { isDarkModeOn } = useValues(themeLogic)
     const { response, responseLoading, responseError } = useValues(dataNodeLogic)
@@ -130,6 +131,10 @@ export function OutputPane(): JSX.Element {
             )
         }
 
+        if (activeTab === OutputTab.Info) {
+            return <InfoTab codeEditorKey={editorKey} />
+        }
+
         return null
     }
 
@@ -153,6 +158,10 @@ export function OutputPane(): JSX.Element {
                             key: OutputTab.Visualization,
                             label: 'Visualization',
                         },
+                        {
+                            key: OutputTab.Info,
+                            label: 'Info',
+                        },
                     ]}
                 />
                 <div className="flex gap-4">
@@ -214,7 +223,7 @@ export function OutputPane(): JSX.Element {
                     </LemonButton>
                 </div>
             </div>
-            <div className="flex flex-1 relative bg-dark justify-center items-center">
+            <div className="flex flex-1 relative bg-dark">
                 <Content />
             </div>
         </div>

frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/InfoTab.tsx

@@ -0,0 +1,101 @@
+import { LemonButton, Tooltip } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { LemonTable } from 'lib/lemon-ui/LemonTable'
+
+import { multitabEditorLogic } from '../multitabEditorLogic'
+import { infoTabLogic } from './infoTabLogic'
+
+interface InfoTabProps {
+    codeEditorKey: string
+}
+
+export function InfoTab({ codeEditorKey }: InfoTabProps): JSX.Element {
+    const { sourceTableItems } = useValues(infoTabLogic({ codeEditorKey: codeEditorKey }))
+    const { editingView, isEditingMaterializedView } = useValues(multitabEditorLogic)
+    const { runDataWarehouseSavedQuery } = useActions(multitabEditorLogic)
+
+    return (
+        <div className="flex flex-col flex-1 m-4 gap-4">
+            <div>
+                <h3>Materialization</h3>
+                <div>
+                    {isEditingMaterializedView ? (
+                        <div>
+                            {editingView?.last_run_at ? (
+                                `Last run at ${editingView?.last_run_at}`
+                            ) : (
+                                <div>
+                                    <span>Materialization scheduled</span>
+                                </div>
+                            )}
+                            <LemonButton
+                                onClick={() => editingView && runDataWarehouseSavedQuery(editingView.id)}
+                                className="mt-2"
+                                type="secondary"
+                            >
+                                Run now
+                            </LemonButton>
+                        </div>
+                    ) : (
+                        <LemonButton
+                            onClick={() => editingView && runDataWarehouseSavedQuery(editingView.id)}
+                            type="primary"
+                            disabledReason={editingView ? undefined : 'You must save the view first'}
+                        >
+                            Materialize
+                        </LemonButton>
+                    )}
+                </div>
+            </div>
+            <div>
+                <h3>Dependencies</h3>
+                <p className="text-muted">
+                    Dependencies are tables that this query uses. See when a source or materialized table was last run.
+                </p>
+            </div>
+            <LemonTable
+                columns={[
+                    {
+                        key: 'Name',
+                        title: 'Name',
+                        render: (_, { name }) => name,
+                    },
+                    {
+                        key: 'Type',
+                        title: 'Type',
+                        render: (_, { type }) => type,
+                    },
+                    {
+                        key: 'Status',
+                        title: 'Status',
+                        render: (_, { type, status }) => {
+                            if (type === 'source') {
+                                return (
+                                    <Tooltip title="This is a source table, so it doesn't have a status">
+                                        <span className="text-muted">N/A</span>
+                                    </Tooltip>
+                                )
+                            }
+                            return status
+                        },
+                    },
+                    {
+                        key: 'Last run at',
+                        title: 'Last run at',
+                        render: (_, { type, last_run_at }) => {
+                            if (type === 'source') {
+                                return (
+                                    <Tooltip title="This is a source table, so it is never run">
+                                        <span className="text-muted">N/A</span>
+                                    </Tooltip>
+                                )
+                            }
+                            return last_run_at
+                        },
+                    },
+                ]}
+                dataSource={sourceTableItems}
+            />
+        </div>
+    )
+}

frontend/src/scenes/data-warehouse/editor/OutputPaneTabs/infoTabLogic.ts

@@ -0,0 +1,61 @@
+import { connect, kea, path, props, selectors } from 'kea'
+import { databaseTableListLogic } from 'scenes/data-management/database/databaseTableListLogic'
+import { dataWarehouseViewsLogic } from 'scenes/data-warehouse/saved_queries/dataWarehouseViewsLogic'
+
+import { multitabEditorLogic } from '../multitabEditorLogic'
+import type { infoTabLogicType } from './infoTabLogicType'
+
+export interface InfoTableRow {
+    name: string
+    type: 'source' | 'table'
+    status?: string
+    last_run_at?: string
+}
+
+interface InfoTabLogicProps {
+    codeEditorKey: string
+}
+
+export const infoTabLogic = kea<infoTabLogicType>([
+    path(['data-warehouse', 'editor', 'outputPaneTabs', 'infoTabLogic']),
+    props({} as InfoTabLogicProps),
+    connect((props: InfoTabLogicProps) => ({
+        values: [
+            multitabEditorLogic({ key: props.codeEditorKey }),
+            ['metadata'],
+            databaseTableListLogic,
+            ['posthogTablesMap', 'dataWarehouseTablesMap'],
+            dataWarehouseViewsLogic,
+            ['dataWarehouseSavedQueryMap'],
+        ],
+    })),
+    selectors({
+        sourceTableItems: [
+            (s) => [s.metadata, s.dataWarehouseTablesMap, s.posthogTablesMap, s.dataWarehouseSavedQueryMap],
+            (metadata, dataWarehouseTablesMap, posthogTablesMap, dataWarehouseSavedQueryMap) => {
+                if (!metadata) {
+                    return []
+                }
+                return metadata.table_names.map((table_name) => {
+                    let table = dataWarehouseSavedQueryMap[table_name]
+                    if (table) {
+                        return {
+                            name: table_name,
+                            type: 'table',
+                            status: table.status,
+                            last_run_at: table.last_run_at || 'never',
+                        }
+                    }
+
+                    table = dataWarehouseTablesMap[table_name] || posthogTablesMap[table_name]
+                    return {
+                        name: table_name,
+                        type: 'source',
+                        status: undefined,
+                        last_run_at: undefined,
+                    }
+                })
+            },
+        ],
+    }),
+])

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

@@ -37,7 +37,8 @@ export function QueryWindow(): JSX.Element {
     })
 
     const { allTabs, activeModelUri, queryInput, editingView, sourceQuery } = useValues(logic)
-    const { selectTab, deleteTab, createTab, setQueryInput, runQuery, setError, setIsValidView } = useActions(logic)
+    const { selectTab, deleteTab, createTab, setQueryInput, runQuery, setError, setIsValidView, setMetadata } =
+        useActions(logic)
 
     return (
         <div className="flex flex-1 flex-col h-full">
@@ -50,7 +51,9 @@ export function QueryWindow(): JSX.Element {
             />
             {editingView && (
                 <div className="h-7 bg-warning-highlight p-1">
-                    <span> Editing view "{editingView.name}"</span>
+                    <span>
+                        Editing {editingView.status ? 'materialized view' : 'view'} "{editingView.name}"
+                    </span>
                 </div>
             )}
             <QueryPane
@@ -76,6 +79,9 @@ export function QueryWindow(): JSX.Element {
                         setError(error)
                         setIsValidView(isValidView)
                     },
+                    onMetadata: (metadata) => {
+                        setMetadata(metadata)
+                    },
                 }}
             />
             <BindLogic logic={multitabEditorLogic} props={{ key: codeEditorKey, monaco, editor }}>