feat: persons & events settings in notebooks (#17866)

PostHog · Oct 11, 2023 · c811b4e · c811b4e
1 parent 72720cf
commit c811b4e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git 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,9 @@ 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>
+                            <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
@@ -63,7 +63,6 @@ const Component = ({
         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
@@ -108,13 +107,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.showReload = true
             modifiedQuery.showElapsedTime = false
+            modifiedQuery.showTimings = false
+
             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) {