From c7ec4a4c4a3b2f51090ac602cfc79c705da7a469 Mon Sep 17 00:00:00 2001
From: David Newell <david@posthog.com>
Date: Mon, 9 Oct 2023 15:38:09 +0100
Subject: [PATCH 1/3] feat: persons & events settings

---
 .../src/queries/nodes/DataTable/DataTable.tsx | 34 +++++++++++--------
 .../notebooks/Nodes/NotebookNodeQuery.tsx     | 16 ++++++---
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
index 002c9b47df87c..8c3504dc8cf77 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -373,40 +373,44 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
 
     const firstRowLeft = [
         showDateRange && sourceFeatures.has(QueryFeature.dateRangePicker) ? (
-            <DateRange query={query.source} setQuery={setQuerySource} />
+            <DateRange key="date-range" query={query.source} setQuery={setQuerySource} />
         ) : null,
         showEventFilter && sourceFeatures.has(QueryFeature.eventNameFilter) ? (
-            <EventName query={query.source as EventsQuery} setQuery={setQuerySource} />
+            <EventName key="event-name" query={query.source as EventsQuery} setQuery={setQuerySource} />
         ) : null,
         showSearch && sourceFeatures.has(QueryFeature.personsSearch) ? (
-            <PersonsSearch query={query.source as PersonsNode} setQuery={setQuerySource} />
+            <PersonsSearch key="persons-search" query={query.source as PersonsNode} setQuery={setQuerySource} />
         ) : null,
         showPropertyFilter && sourceFeatures.has(QueryFeature.eventPropertyFilters) ? (
-            <EventPropertyFilters query={query.source as EventsQuery} setQuery={setQuerySource} />
+            <EventPropertyFilters key="event-property" query={query.source as EventsQuery} setQuery={setQuerySource} />
         ) : null,
         showPropertyFilter && sourceFeatures.has(QueryFeature.personPropertyFilters) ? (
-            <PersonPropertyFilters query={query.source as PersonsNode} setQuery={setQuerySource} />
+            <PersonPropertyFilters
+                key="person-property"
+                query={query.source as PersonsNode}
+                setQuery={setQuerySource}
+            />
         ) : null,
     ].filter((x) => !!x)
 
     const firstRowRight = [
         showSavedQueries && sourceFeatures.has(QueryFeature.savedEventsQueries) ? (
-            <SavedQueries query={query} setQuery={setQuery} />
+            <SavedQueries key="saved-queries" query={query} setQuery={setQuery} />
         ) : null,
     ].filter((x) => !!x)
 
     const secondRowLeft = [
-        showReload ? <Reload /> : null,
-        showReload && canLoadNewData ? <AutoLoad /> : null,
-        showElapsedTime ? <ElapsedTime showTimings={showTimings} /> : null,
+        showReload ? <Reload key="reload" /> : null,
+        showReload && canLoadNewData ? <AutoLoad key="auto-load" /> : null,
+        showElapsedTime ? <ElapsedTime key="elapsed-time" showTimings={showTimings} /> : null,
     ].filter((x) => !!x)
 
     const secondRowRight = [
         (showColumnConfigurator || showPersistentColumnConfigurator) &&
         sourceFeatures.has(QueryFeature.columnConfigurator) ? (
-            <ColumnConfigurator query={query} setQuery={setQuery} />
+            <ColumnConfigurator key="column-configurator" query={query} setQuery={setQuery} />
         ) : null,
-        showExport ? <DataTableExport query={query} setQuery={setQuery} /> : null,
+        showExport ? <DataTableExport key="data-table-export" query={query} setQuery={setQuery} /> : null,
     ].filter((x) => !!x)
 
     const showFirstRow = !isReadOnly && (firstRowLeft.length > 0 || firstRowRight.length > 0)
@@ -437,10 +441,10 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                     )}
                     {showFirstRow && showSecondRow && <LemonDivider className="my-0" />}
                     {showSecondRow && (
-                        <div className="flex gap-4 items-center">
-                            {secondRowLeft}
-                            {secondRowLeft.length > 0 && secondRowRight.length > 0 ? <div className="flex-1" /> : null}
-                            {secondRowRight}
+                        <div className="flex gap-4 justify-between flex-wrap">
+                            <div className="flex gap-4 items-center">{secondRowLeft}</div>
+                            {/* {secondRowLeft.length > 0 && secondRowRight.length > 0 ? <div className="flex-1" /> : null} */}
+                            <div className="flex gap-4 items-center">{secondRowRight}</div>
                         </div>
                     )}
                     {showOpenEditorButton && inlineEditorButtonOnRow === 0 && !isReadOnly ? (
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
index c357814a37f66..f9db62d891313 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
@@ -60,7 +60,6 @@ const Component = (props: NotebookNodeViewProps<NotebookNodeQueryAttributes>): J
         const modifiedQuery = { ...query, full: false }
 
         if (NodeKind.DataTableNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
-            // We don't want to show the insights button for now
             modifiedQuery.showOpenEditorButton = false
             modifiedQuery.full = false
             modifiedQuery.showHogQLEditor = false
@@ -105,13 +104,22 @@ export const Settings = ({
         const modifiedQuery = { ...query, full: false }
 
         if (NodeKind.DataTableNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
-            // We don't want to show the insights button for now
             modifiedQuery.showOpenEditorButton = false
             modifiedQuery.showHogQLEditor = true
             modifiedQuery.showResultsTable = false
-            modifiedQuery.showReload = false
-            modifiedQuery.showElapsedTime = false
+
+            modifiedQuery.showReload = true
+            modifiedQuery.showElapsedTime = true
+            modifiedQuery.showTimings = true
+
             modifiedQuery.embedded = true
+            modifiedQuery.showActions = true
+
+            modifiedQuery.showDateRange = true
+            modifiedQuery.showEventFilter = true
+            modifiedQuery.showSearch = true
+            modifiedQuery.showPropertyFilter = true
+            modifiedQuery.showColumnConfigurator = true
         }
 
         if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {

From 77f12f8dd133c70df5c26c9d8a1a64351fbd9628 Mon Sep 17 00:00:00 2001
From: David Newell <david@posthog.com>
Date: Mon, 9 Oct 2023 15:51:16 +0100
Subject: [PATCH 2/3] remove commented line

---
 frontend/src/queries/nodes/DataTable/DataTable.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
index 8c3504dc8cf77..7b15dfa668741 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -443,7 +443,6 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                     {showSecondRow && (
                         <div className="flex gap-4 justify-between flex-wrap">
                             <div className="flex gap-4 items-center">{secondRowLeft}</div>
-                            {/* {secondRowLeft.length > 0 && secondRowRight.length > 0 ? <div className="flex-1" /> : null} */}
                             <div className="flex gap-4 items-center">{secondRowRight}</div>
                         </div>
                     )}

From d2294a961208121aefbf480d68d7e7d6b03c2f69 Mon Sep 17 00:00:00 2001
From: David Newell <david@posthog.com>
Date: Wed, 11 Oct 2023 15:13:29 +0100
Subject: [PATCH 3/3] finalize params

---
 frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
index e03ecec012efe..10bc6ee836332 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
@@ -112,8 +112,8 @@ export const Settings = ({
             modifiedQuery.showResultsTable = false
 
             modifiedQuery.showReload = true
-            modifiedQuery.showElapsedTime = true
-            modifiedQuery.showTimings = true
+            modifiedQuery.showElapsedTime = false
+            modifiedQuery.showTimings = false
 
             modifiedQuery.embedded = true
             modifiedQuery.showActions = true