feat(insights): Allow "Detailed results" table in shared insights (#2…

…3866)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/exporter/ExportedInsight/ExportedInsight.scss

@@ -29,12 +29,7 @@
         display: flex;
         flex: 1;
         flex-direction: column;
-
-        .LemonTable {
-            background: none;
-            border: none;
-            border-radius: 0;
-        }
+        border-radius: 0 0 var(--radius) var(--radius);
 
         html.export-type-image & .InsightCard__viz {
             // We can't use the viewport height, as the screenshotter will resize the height of the window to capture the full content
@@ -43,6 +38,10 @@
         }
     }
 
+    .LemonTable {
+        --lemon-table-background-color: var(--bg-light);
+    }
+
     .ExportedInsight__watermark {
         position: absolute;
         top: 0;

frontend/src/exporter/ExportedInsight/ExportedInsight.tsx

@@ -5,10 +5,15 @@ import { BindLogic } from 'kea'
 import { FilterBasedCardContent } from 'lib/components/Cards/InsightCard/InsightCard'
 import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
 import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
+import {
+    DISPLAY_TYPES_WITHOUT_DETAILED_RESULTS,
+    DISPLAY_TYPES_WITHOUT_LEGEND,
+} from 'lib/components/InsightLegend/utils'
 import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
 import { insightLogic } from 'scenes/insights/insightLogic'
+import { InsightsTable } from 'scenes/insights/views/InsightsTable/InsightsTable'
 
-import { ExportOptions, ExportType } from '~/exporter/types'
+import { ExportOptions } from '~/exporter/types'
 import { getQueryBasedInsightModel } from '~/queries/nodes/InsightViz/utils'
 import { Query } from '~/queries/Query/Query'
 import { isDataTableNode, isInsightVizNode, isTrendsQuery } from '~/queries/utils'
@@ -17,12 +22,10 @@ import { ChartDisplayType, InsightLogicProps, InsightModel } from '~/types'
 
 export function ExportedInsight({
     insight: legacyInsight,
-    exportOptions: { whitelabel, noHeader, legend },
-    type,
+    exportOptions: { whitelabel, noHeader, legend, detailed: detailedResults },
 }: {
     insight: InsightModel
     exportOptions: ExportOptions
-    type: ExportType
 }): JSX.Element {
     const insight = getQueryBasedInsightModel(legacyInsight)
 
@@ -49,25 +52,25 @@ export function ExportedInsight({
         doNotLoad: true,
     }
 
-    const { query, name, derived_name, description } = insight
+    const { short_id, query, name, derived_name, description } = insight
 
     const showWatermark = noHeader && !whitelabel
     const showLegend =
         legend &&
         isInsightVizNode(query) &&
         isTrendsQuery(query.source) &&
-        (!query.source.trendsFilter ||
-            !query.source.trendsFilter.display ||
-            (!SINGLE_SERIES_DISPLAY_TYPES.includes(query.source.trendsFilter.display) &&
-                query.source.trendsFilter.display !== ChartDisplayType.ActionsTable))
+        !SINGLE_SERIES_DISPLAY_TYPES.includes(query.source.trendsFilter?.display as ChartDisplayType) &&
+        !DISPLAY_TYPES_WITHOUT_LEGEND.includes(query.source.trendsFilter?.display as ChartDisplayType)
+
+    const showDetailedResultsTable =
+        detailedResults &&
+        isInsightVizNode(query) &&
+        isTrendsQuery(query.source) &&
+        !DISPLAY_TYPES_WITHOUT_DETAILED_RESULTS.includes(query.source.trendsFilter?.display as ChartDisplayType)
 
     return (
         <BindLogic logic={insightLogic} props={insightLogicProps}>
-            <div
-                className={clsx('ExportedInsight', {
-                    'ExportedInsight--fit-screen': type === ExportType.Embed,
-                })}
-            >
+            <div className="ExportedInsight">
                 {!noHeader && (
                     <div className="ExportedInsight__header">
                         <div>
@@ -104,6 +107,11 @@ export function ExportedInsight({
                             <InsightLegend horizontal readOnly />
                         </div>
                     )}
+                    {showDetailedResultsTable && (
+                        <div className="border-t mt-2">
+                            <InsightsTable filterKey={short_id} isLegend embedded />
+                        </div>
+                    )}
                 </div>
             </div>
         </BindLogic>

frontend/src/exporter/Exporter.scss

@@ -56,7 +56,6 @@ html.export-type-embed {
     overflow-y: auto;
 
     .Exporter {
-        height: 100vh;
         padding: 0;
     }
 }

frontend/src/exporter/Exporter.stories.tsx

@@ -15,6 +15,7 @@ const meta: Meta<typeof Exporter> = {
         whitelabel: false,
         noHeader: false,
         legend: false,
+        detailed: false,
     },
     parameters: {
         testOptions: {
@@ -42,6 +43,18 @@ const Template: StoryFn<typeof Exporter> = (props) => {
 export const TrendsLineInsight: Story = Template.bind({})
 TrendsLineInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLine.json') }
 
+export const TrendsLineInsightLegend: Story = Template.bind({})
+TrendsLineInsightLegend.args = {
+    insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLine.json'),
+    legend: true,
+}
+
+export const TrendsLineInsightDetailed: Story = Template.bind({})
+TrendsLineInsightDetailed.args = {
+    insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLine.json'),
+    detailed: true,
+}
+
 /** This should not happen in the exporter, but if it does, it shouldn't error out - we want a clear message. */
 export const TrendsLineInsightNoResults: Story = Template.bind({})
 // @ts-expect-error
@@ -98,6 +111,18 @@ TrendsTableBreakdownInsight.args = {
 export const TrendsPieInsight: Story = Template.bind({})
 TrendsPieInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsPie.json') }
 
+export const TrendsPieInsightLegend: Story = Template.bind({})
+TrendsPieInsightLegend.args = {
+    insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsPie.json'),
+    legend: true,
+}
+
+export const TrendsPieInsightDetailed: Story = Template.bind({})
+TrendsPieInsightDetailed.args = {
+    insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsPie.json'),
+    detailed: true,
+}
+
 export const TrendsPieBreakdownInsight: Story = Template.bind({})
 TrendsPieBreakdownInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsPieBreakdown.json'),

frontend/src/exporter/Exporter.tsx

@@ -74,7 +74,7 @@ export function Exporter(props: ExportedData): JSX.Element {
                 ) : null
             ) : null}
             {insight ? (
-                <ExportedInsight type={type} insight={insight} exportOptions={exportOptions} />
+                <ExportedInsight insight={insight} exportOptions={exportOptions} />
             ) : dashboard ? (
                 <Dashboard
                     id={String(dashboard.id)}

frontend/src/exporter/types.ts

@@ -10,6 +10,7 @@ export interface ExportOptions {
     whitelabel?: boolean
     noHeader?: boolean
     legend?: boolean
+    detailed?: boolean
     // Recording options
     showInspector?: boolean
 }

frontend/src/lib/components/InsightLegend/utils.ts

@@ -7,6 +7,11 @@ export const DISPLAY_TYPES_WITHOUT_LEGEND = [
     ChartDisplayType.ActionsBarValue,
 ]
 
+export const DISPLAY_TYPES_WITHOUT_DETAILED_RESULTS = [
+    ChartDisplayType.ActionsTable, // The table is already loaded as the main component (in `Trends.tsx`)
+    ChartDisplayType.ActionsBarValue, // This view displays data in completely different dimensions
+]
+
 export function shouldHighlightThisRow(
     currentIndex: number,
     highlightedIndex: number | null,

frontend/src/lib/components/Sharing/SharingModal.tsx

@@ -15,8 +15,9 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { copyToClipboard } from 'lib/utils/copyToClipboard'
 import { useEffect, useState } from 'react'
 import { DashboardCollaboration } from 'scenes/dashboard/DashboardCollaborators'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
-import { isInsightVizNode, isTrendsQuery } from '~/queries/utils'
+import { isInsightVizNode } from '~/queries/utils'
 import { AvailableFeature, InsightShortId, QueryBasedInsightModel } from '~/types'
 
 import { upgradeModalLogic } from '../UpgradeModal/upgradeModalLogic'
@@ -69,7 +70,6 @@ export function SharingModalContent({
 
     const [iframeLoaded, setIframeLoaded] = useState(false)
 
-    const showLegendCheckbox = isInsightVizNode(insight?.query) && isTrendsQuery(insight?.query.source)
     const resource = dashboardId ? 'dashboard' : insightShortId ? 'insight' : recordingId ? 'recording' : 'this'
 
     useEffect(() => {
@@ -143,69 +143,67 @@ export function SharingModalContent({
                                     formKey="embedConfig"
                                     className="space-y-2"
                                 >
-                                    <LemonField name="whitelabel">
-                                        {({ value, onChange }) => (
-                                            <LemonSwitch
-                                                fullWidth
-                                                bordered
-                                                label={
-                                                    <div className="flex items-center">
-                                                        <span>Show PostHog branding</span>
-                                                        {!whitelabelAvailable && (
-                                                            <Tooltip title="This is a premium feature, click to learn more.">
-                                                                <IconLock className="ml-1 text-muted text-base" />
-                                                            </Tooltip>
-                                                        )}
-                                                    </div>
-                                                }
-                                                onChange={() =>
-                                                    guardAvailableFeature(AvailableFeature.WHITE_LABELLING, () =>
-                                                        onChange(!value)
-                                                    )
-                                                }
-                                                checked={!value}
-                                            />
+                                    <div className="grid grid-cols-2 gap-2 grid-flow odd:last:*:col-span-2">
+                                        {insight && (
+                                            <LemonField name="noHeader">
+                                                {({ value, onChange }) => (
+                                                    <LemonSwitch
+                                                        fullWidth
+                                                        bordered
+                                                        label={<div>Show title and description</div>}
+                                                        onChange={() => onChange(!value)}
+                                                        checked={!value}
+                                                    />
+                                                )}
+                                            </LemonField>
                                         )}
-                                    </LemonField>
-                                    {insight && (
-                                        <LemonField name="noHeader">
+                                        <LemonField name="whitelabel">
                                             {({ value, onChange }) => (
                                                 <LemonSwitch
                                                     fullWidth
                                                     bordered
-                                                    label={<div>Show title and description</div>}
-                                                    onChange={() => onChange(!value)}
+                                                    label={
+                                                        <div className="flex items-center">
+                                                            <span>Show PostHog branding</span>
+                                                            {!whitelabelAvailable && (
+                                                                <Tooltip title="This is a premium feature, click to learn more.">
+                                                                    <IconLock className="ml-1.5 text-muted text-lg" />
+                                                                </Tooltip>
+                                                            )}
+                                                        </div>
+                                                    }
+                                                    onChange={() =>
+                                                        guardAvailableFeature(AvailableFeature.WHITE_LABELLING, () =>
+                                                            onChange(!value)
+                                                        )
+                                                    }
                                                     checked={!value}
                                                 />
                                             )}
                                         </LemonField>
-                                    )}
-                                    {showLegendCheckbox && (
-                                        <LemonField name="legend">
-                                            {({ value, onChange }) => (
-                                                <LemonSwitch
-                                                    fullWidth
-                                                    bordered
-                                                    label={<div>Show legend</div>}
-                                                    onChange={() => onChange(!value)}
-                                                    checked={value}
-                                                />
-                                            )}
-                                        </LemonField>
-                                    )}
-                                    {recordingId && (
-                                        <LemonField name="showInspector">
-                                            {({ value, onChange }) => (
-                                                <LemonSwitch
-                                                    fullWidth
-                                                    bordered
-                                                    label={<div>Show inspector panel</div>}
-                                                    onChange={onChange}
-                                                    checked={value}
-                                                />
-                                            )}
-                                        </LemonField>
-                                    )}
+
+                                        {isInsightVizNode(insight?.query) && insightShortId && (
+                                            // These options are only valid for `InsightVizNode`s, and they rely on `insightVizDataLogic`
+                                            <>
+                                                <LegendCheckbox insightShortId={insightShortId} />
+                                                <DetailedResultsCheckbox insightShortId={insightShortId} />
+                                            </>
+                                        )}
+
+                                        {recordingId && (
+                                            <LemonField name="showInspector">
+                                                {({ value, onChange }) => (
+                                                    <LemonSwitch
+                                                        fullWidth
+                                                        bordered
+                                                        label={<div>Show inspector panel</div>}
+                                                        onChange={onChange}
+                                                        checked={value}
+                                                    />
+                                                )}
+                                            </LemonField>
+                                        )}
+                                    </div>
 
                                     {previewIframe && (
                                         <div className="rounded border">
@@ -238,6 +236,44 @@ export function SharingModalContent({
     )
 }
 
+function DetailedResultsCheckbox({ insightShortId }: { insightShortId: InsightShortId }): JSX.Element | null {
+    const { hasDetailedResultsTable } = useValues(insightVizDataLogic({ dashboardItemId: insightShortId }))
+
+    if (!hasDetailedResultsTable) {
+        return null // No detailed results toggle
+    }
+
+    return (
+        <LemonField name="detailed">
+            {({ value, onChange }) => (
+                <LemonSwitch
+                    fullWidth
+                    bordered
+                    label="Show detailed results"
+                    onChange={() => onChange(!value)}
+                    checked={value}
+                />
+            )}
+        </LemonField>
+    )
+}
+
+function LegendCheckbox({ insightShortId }: { insightShortId: InsightShortId }): JSX.Element | null {
+    const { hasLegend } = useValues(insightVizDataLogic({ dashboardItemId: insightShortId }))
+
+    if (!hasLegend) {
+        return null // No legend to toggle
+    }
+
+    return (
+        <LemonField name="legend">
+            {({ value, onChange }) => (
+                <LemonSwitch fullWidth bordered label="Show legend" onChange={() => onChange(!value)} checked={value} />
+            )}
+        </LemonField>
+    )
+}
+
 export function SharingModal({ closeModal, isOpen, inline, title, ...props }: SharingModalProps): JSX.Element {
     return (
         <LemonModal