typing

PostHog · Mar 27, 2024 · bb15347 · bb15347
1 parent 80f9803
commit bb15347
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 12 deletions.
diff --git a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx
@@ -15,7 +15,7 @@ export type TreeItem = TreeItemFolder | TreeItemLeaf
 
 export interface TreeItemFolder {
     name: string
-    items: TreeItemLeaf[]
+    items: TreeItem[]
     emptyLabel?: JSX.Element
     isLoading?: boolean
 }
@@ -34,7 +34,7 @@ export function DatabaseTableTree({
     ...props
 }: TreeProps): JSX.Element {
     return (
-        <ul className={`bg-bg-light p-4 rounded-lg ${className}`} {...props}>
+        <ul className={`bg-bg-light ${depth == 1 ? 'p-4' : ''} rounded-lg ${className}`} {...props}>
             {items.map((item, index) => {
                 if ('items' in item) {
                     return (

diff --git a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx
@@ -59,13 +59,13 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderR
                         depth={depth + 1}
                         onSelectRow={onClick}
                         selectedRow={selectedRow}
-                        style={{ marginLeft: `${2 * depth}rem`, padding: 0 }}
+                        style={{ marginLeft: `2rem`, padding: 0 }}
                     />
                 ) : (
                     <div
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{
-                            marginLeft: `${3 * depth}rem`,
+                            marginLeft: `${2 * depth}rem`,
                         }}
                     >
                         {item.isLoading ? (

diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx
@@ -20,7 +20,7 @@ import SourceModal from './SourceModal'
 export const DataWarehouseTables = (): JSX.Element => {
     const {
         isSourceModalOpen,
-        externalTables,
+        externalTablesBySourceType,
         dataWarehouseLoading,
         posthogTables,
         savedQueriesFormatted,
@@ -72,12 +72,15 @@ export const DataWarehouseTables = (): JSX.Element => {
     }
 
     const treeItems = (): TreeItem[] => {
-        const items = [
+        const items: TreeItem[] = [
             {
                 name: 'External',
-                items: externalTables.map((table) => ({
-                    table: table,
-                    icon: <IconDatabase />,
+                items: Object.keys(externalTablesBySourceType).map((source_type) => ({
+                    name: source_type,
+                    items: externalTablesBySourceType[source_type].map((table) => ({
+                        table: table,
+                        icon: <IconDatabase />,
+                    })),
                 })),
                 emptyLabel: (
                     <span className="text-muted">

diff --git a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts
@@ -8,7 +8,13 @@ import { userLogic } from 'scenes/userLogic'
 import { DataWarehouseTable } from '~/types'
 
 import { dataWarehouseSavedQueriesLogic } from '../saved_queries/dataWarehouseSavedQueriesLogic'
-import { DatabaseTableListRow, DataWarehouseRowType, DataWarehouseSceneTab, DataWarehouseTableType } from '../types'
+import {
+    DatabaseTableListRow,
+    DataWarehouseExternalTableType,
+    DataWarehouseRowType,
+    DataWarehouseSceneTab,
+    DataWarehouseTableType,
+} from '../types'
 import type { dataWarehouseSceneLogicType } from './dataWarehouseSceneLogicType'
 
 export const dataWarehouseSceneLogic = kea<dataWarehouseSceneLogicType>([
@@ -132,6 +138,21 @@ export const dataWarehouseSceneLogic = kea<dataWarehouseSceneLogicType>([
                 return [...externalTables, ...posthogTables, ...savedQueriesFormatted]
             },
         ],
+        externalTablesBySourceType: [
+            (s) => [s.externalTables],
+            (externalTables): Record<string, DataWarehouseTableType[]> => {
+                return externalTables.reduce((acc: Record<string, DataWarehouseTableType[]>, table) => {
+                    table = table as DataWarehouseExternalTableType
+                    if (table.payload.external_data_source) {
+                        if (!acc[table.payload.external_data_source.source_type]) {
+                            acc[table.payload.external_data_source.source_type] = []
+                        }
+                        acc[table.payload.external_data_source.source_type].push(table)
+                    }
+                    return acc
+                }, {})
+            },
+        ],
     }),
     listeners(({ actions }) => ({
         deleteDataWarehouseSavedQuery: async (view) => {

diff --git a/frontend/src/scenes/data-warehouse/types.ts b/frontend/src/scenes/data-warehouse/types.ts
@@ -42,7 +42,7 @@ export interface DataWarehousePostHogTableType extends DataWarehouseTableBaseTyp
     payload: DatabaseTableListRow
 }
 
-export interface DataWarehouseExternalTablType extends DataWarehouseTableBaseType {
+export interface DataWarehouseExternalTableType extends DataWarehouseTableBaseType {
     type: DataWarehouseRowType.ExternalTable
     payload: DataWarehouseTable
 }
@@ -54,7 +54,7 @@ export interface DataWarehouseViewType extends DataWarehouseTableBaseType {
 
 export type DataWarehouseTableType =
     | DataWarehousePostHogTableType
-    | DataWarehouseExternalTablType
+    | DataWarehouseExternalTableType
     | DataWarehouseViewType
 
 export enum DataWarehouseSceneTab {