feat(data-warehosue): bringing SQL into data warehouse scene (#22929)

* sentence casing and lemon tag * add table * split out tables and clean up logic * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * update logo * Update UI snapshots for `chromium` (2) * adjust link flow * bring query pane to data warehouse * adjust tree view * cruft * Update UI snapshots for `chromium` (2) * move buttons around * move buttons around * move more buttons around * restore main * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Jun 17, 2024 · 0e71898 · 0e71898
1 parent 29b6654
commit 0e71898
Show file tree

Hide file tree

Showing 12 changed files with 234 additions and 122 deletions.
diff --git a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx
@@ -14,6 +14,8 @@ export type TreeItem = TreeItemFolder | TreeItemLeaf | TreeTableItemLeaf
 
 export interface TreeItemFolder {
     name: string
+    table?: DatabaseSchemaTable
+    dropdownOverlay?: React.ReactNode
     items: TreeItem[]
     emptyLabel?: JSX.Element
     isLoading?: boolean
@@ -38,6 +40,7 @@ export function DatabaseTableTree({ items, onSelectRow, selectedRow, depth = 1,
                     return (
                         <TreeFolderRow
                             key={depth + '_' + index}
+                            dropdownOverlay={item.dropdownOverlay}
                             item={item}
                             depth={depth}
                             onClick={onSelectRow}

diff --git a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx
@@ -1,4 +1,4 @@
-import { IconChevronDown } from '@posthog/icons'
+import { IconChevronDown, IconEllipsis } from '@posthog/icons'
 import { LemonButton, Spinner } from '@posthog/lemon-ui'
 import { useCallback, useState } from 'react'
 
@@ -58,9 +58,10 @@ export interface TreeFolderRowProps {
     depth: number
     onClick?: (row: DatabaseSchemaTable) => void
     selectedRow?: DatabaseSchemaTable | null
+    dropdownOverlay?: React.ReactNode
 }
 
-export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderRowProps): JSX.Element {
+export function TreeFolderRow({ item, depth, onClick, selectedRow, dropdownOverlay }: TreeFolderRowProps): JSX.Element {
     const { name, items, emptyLabel } = item
 
     const isColumnType = items.length > 0 && 'type' in items[0]
@@ -77,6 +78,17 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderR
                 size="small"
                 fullWidth
                 onClick={_onClick}
+                sideAction={
+                    dropdownOverlay
+                        ? {
+                              icon: <IconEllipsis fontSize={12} />,
+
+                              dropdown: {
+                                  overlay: dropdownOverlay,
+                              },
+                          }
+                        : undefined
+                }
                 icon={<IconChevronDown className={collapsed ? 'rotate-270' : undefined} />}
             >
                 {name}

diff --git a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
@@ -416,7 +416,7 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                                     }
                                     data-attr="hogql-query-editor-save-as-view"
                                 >
-                                    Save as View
+                                    Save as view
                                 </LemonButton>
                             ) : null}
                             {featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE] && (

diff --git a/frontend/src/scenes/data-management/database/DatabaseTables.tsx b/frontend/src/scenes/data-management/database/DatabaseTables.tsx
@@ -7,7 +7,6 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { humanFriendlyDetailedTime } from 'lib/utils'
 import { databaseTableListLogic } from 'scenes/data-management/database/databaseTableListLogic'
 import { viewLinkLogic } from 'scenes/data-warehouse/viewLinkLogic'
-import { ViewLinkModal } from 'scenes/data-warehouse/ViewLinkModal'
 import { urls } from 'scenes/urls'
 
 import { DatabaseSchemaTable, DataTableNode, NodeKind } from '~/queries/schema'
@@ -49,7 +48,6 @@ export function DatabaseTablesContainer(): JSX.Element {
                     )
                 }}
             />
-            <ViewLinkModal />
         </>
     )
 }

diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx
@@ -1,10 +1,12 @@
 import { IconGear } from '@posthog/icons'
 import { LemonButton, Link } from '@posthog/lemon-ui'
-import { useValues } from 'kea'
+import { BindLogic, useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { PageHeader } from 'lib/components/PageHeader'
-import { FEATURE_FLAGS } from 'lib/constants'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
+import { InsightSaveButton } from 'scenes/insights/InsightSaveButton'
+import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
@@ -18,30 +20,36 @@ export const scene: SceneExport = {
 }
 
 export function DataWarehouseExternalScene(): JSX.Element {
-    const { featureFlags } = useValues(featureFlagLogic)
+    const { insightProps, insightChanged, insightSaving, hasDashboardItemId } = useValues(
+        insightLogic({
+            dashboardItemId: 'new',
+            cachedInsight: null,
+        })
+    )
+
+    const { saveInsight, saveAs } = useActions(insightDataLogic(insightProps))
 
     return (
         <div>
             <PageHeader
                 buttons={
                     <>
-                        {featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE] && (
-                            <LemonButton
-                                type="secondary"
-                                data-attr="new-data-warehouse-view"
-                                key="new-data-warehouse-view"
-                                to={urls.insightNewHogQL('SELECT event AS event FROM events LIMIT 100')}
-                            >
-                                Create View
-                            </LemonButton>
-                        )}
+                        <InsightSaveButton
+                            saveAs={saveAs}
+                            saveInsight={saveInsight}
+                            isSaved={hasDashboardItemId}
+                            addingToDashboard={false}
+                            insightSaving={insightSaving}
+                            insightChanged={insightChanged}
+                        />
+
                         <LemonButton
                             type="primary"
                             data-attr="new-data-warehouse-easy-link"
                             key="new-data-warehouse-easy-link"
                             to={urls.dataWarehouseTable()}
                         >
-                            Link Source
+                            Link source
                         </LemonButton>
 
                         <LemonButton
@@ -65,7 +73,9 @@ export function DataWarehouseExternalScene(): JSX.Element {
                 }
             />
             <DataWarehouseBetaNotice />
-            <DataWarehouseTables />
+            <BindLogic logic={insightSceneLogic} props={{}}>
+                <DataWarehouseTables />
+            </BindLogic>
         </div>
     )
 }