From ccee1fbe1add1aaa5c3016d1c9607b1947006944 Mon Sep 17 00:00:00 2001
From: Eric Duong <eeoneric@gmail.com>
Date: Wed, 27 Mar 2024 16:11:29 -0400
Subject: [PATCH] fix(data-warehouse): data warehouse scene ui updates (#21189)

* add loading indicator for data warehouse tables

* typing

* add refresh time on external table info

* typing

* add height limit
---
 .../DatabaseTableTree/DatabaseTableTree.tsx   |  8 +++-
 .../components/DatabaseTableTree/TreeRow.tsx  | 11 ++++-
 .../external/DataWarehouseTables.tsx          | 42 +++++++++++++++----
 .../external/dataWarehouseSceneLogic.ts       | 27 ++++++++++--
 frontend/src/scenes/data-warehouse/types.ts   |  4 +-
 5 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx
index 2d7bfb893150e..8f42f841a8457 100644
--- a/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx
+++ b/frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx
@@ -15,8 +15,9 @@ export type TreeItem = TreeItemFolder | TreeItemLeaf
 
 export interface TreeItemFolder {
     name: string
-    items: TreeItemLeaf[]
+    items: TreeItem[]
     emptyLabel?: JSX.Element
+    isLoading?: boolean
 }
 
 export interface TreeItemLeaf {
@@ -33,7 +34,10 @@ 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 overflow-y-scroll h-full' : ''} 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
index b49167a4f6c67..d8f46d04adac5 100644
--- a/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx
+++ b/frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx
@@ -1,6 +1,7 @@
 import './TreeRow.scss'
 
 import { IconChevronDown } from '@posthog/icons'
+import { Spinner } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { IconChevronRight } from 'lib/lemon-ui/icons'
 import { useCallback, useState } from 'react'
@@ -58,7 +59,7 @@ 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
@@ -67,7 +68,13 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderR
                             marginLeft: `${2 * depth}rem`,
                         }}
                     >
-                        {emptyLabel ? emptyLabel : <span className="text-muted">No tables found</span>}
+                        {item.isLoading ? (
+                            <Spinner className="mt-2" />
+                        ) : emptyLabel ? (
+                            emptyLabel
+                        ) : (
+                            <span className="text-muted">No tables found</span>
+                        )}
                     </div>
                 ))}
         </li>
diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx
index 1c72b31bd011f..26c90d15f1600 100644
--- a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx
+++ b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx
@@ -5,6 +5,7 @@ import { DatabaseTableTree, TreeItem } from 'lib/components/DatabaseTableTree/Da
 import { EmptyMessage } from 'lib/components/EmptyMessage/EmptyMessage'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { humanFriendlyDetailedTime } from 'lib/utils'
 import { DatabaseTable } from 'scenes/data-management/database/DatabaseTable'
 import { urls } from 'scenes/urls'
 
@@ -17,8 +18,16 @@ import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
 import SourceModal from './SourceModal'
 
 export const DataWarehouseTables = (): JSX.Element => {
-    const { isSourceModalOpen, externalTables, posthogTables, savedQueriesFormatted, allTables, selectedRow } =
-        useValues(dataWarehouseSceneLogic)
+    const {
+        isSourceModalOpen,
+        externalTablesBySourceType,
+        dataWarehouseLoading,
+        posthogTables,
+        savedQueriesFormatted,
+        allTables,
+        selectedRow,
+        dataWarehouseSavedQueriesLoading,
+    } = useValues(dataWarehouseSceneLogic)
     const { toggleSourceModal, selectRow, deleteDataWarehouseSavedQuery, deleteDataWarehouseTable } =
         useActions(dataWarehouseSceneLogic)
     const { featureFlags } = useValues(featureFlagLogic)
@@ -63,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">
@@ -82,6 +94,7 @@ export const DataWarehouseTables = (): JSX.Element => {
                         </Link>
                     </span>
                 ),
+                isLoading: dataWarehouseLoading,
             },
             {
                 name: 'PostHog',
@@ -99,6 +112,8 @@ export const DataWarehouseTables = (): JSX.Element => {
                     table: table,
                     icon: <IconBrackets />,
                 })),
+                emptyLabel: <span className="text-muted">No views found</span>,
+                isLoading: dataWarehouseSavedQueriesLoading,
             })
         }
 
@@ -108,7 +123,7 @@ export const DataWarehouseTables = (): JSX.Element => {
     return (
         <>
             <div className="grid md:grid-cols-3">
-                <div className="sm:col-span-3 md:col-span-1">
+                <div className="sm:col-span-3 md:col-span-1 max-h-160">
                     <DatabaseTableTree onSelectRow={selectRow} items={treeItems()} selectedRow={selectedRow} />
                 </div>
                 {selectedRow ? (
@@ -149,6 +164,19 @@ export const DataWarehouseTables = (): JSX.Element => {
                         </div>
                         {selectedRow.type == DataWarehouseRowType.ExternalTable && (
                             <div className="flex flex-col">
+                                <>
+                                    <span className="card-secondary mt-2">Last Synced At</span>
+                                    <span>
+                                        {selectedRow.payload.external_schema?.last_synced_at
+                                            ? humanFriendlyDetailedTime(
+                                                  selectedRow.payload.external_schema?.last_synced_at,
+                                                  'MMMM DD, YYYY',
+                                                  'h:mm A'
+                                              )
+                                            : 'Not yet synced'}
+                                    </span>
+                                </>
+
                                 <>
                                     <span className="card-secondary mt-2">Files URL pattern</span>
                                     <span>{selectedRow.payload.url_pattern}</span>
diff --git a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts
index db722a37777a1..b95ae5d8755b7 100644
--- 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>([
@@ -18,9 +24,9 @@ export const dataWarehouseSceneLogic = kea<dataWarehouseSceneLogicType>([
             userLogic,
             ['user'],
             databaseTableListLogic,
-            ['filteredTables', 'dataWarehouse'],
+            ['filteredTables', 'dataWarehouse', 'dataWarehouseLoading'],
             dataWarehouseSavedQueriesLogic,
-            ['savedQueries'],
+            ['savedQueries', 'dataWarehouseSavedQueriesLoading'],
             featureFlagLogic,
             ['featureFlags'],
         ],
@@ -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
index 6f5f375d5ee2c..2b1bb3edef117 100644
--- 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 {