fix(insights): Remove "queries unsupported here" from UI (#21940)

* fix(insights): Remove "queries unsupported here" from UI

* Add stories for more exporter cases

* Update UI snapshots for `chromium` (1)

---------

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

frontend/src/exporter/ExportedInsight/ExportedInsight.tsx

@@ -3,7 +3,6 @@ import './ExportedInsight.scss'
 import clsx from 'clsx'
 import { BindLogic } from 'kea'
 import { FilterBasedCardContent } from 'lib/components/Cards/InsightCard/InsightCard'
-import { QueriesUnsupportedHere } from 'lib/components/Cards/InsightCard/QueriesUnsupportedHere'
 import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
 import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
 import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
@@ -87,11 +86,7 @@ export function ExportedInsight({
                     })}
                 >
                     {query ? (
-                        insight.result ? (
-                            <Query query={query} cachedResults={insight.result} readOnly />
-                        ) : (
-                            <QueriesUnsupportedHere />
-                        )
+                        <Query query={query} cachedResults={insight.result} readOnly />
                     ) : (
                         <FilterBasedCardContent insight={insight as any} insightProps={insightLogicProps} />
                     )}

frontend/src/exporter/Exporter.stories.tsx

@@ -42,6 +42,11 @@ 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') }
 
+/** 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
+TrendsLineInsightNoResults.args = { insight: { ...TrendsLineInsight.args.insight, result: null } }
+
 export const TrendsLineMultiInsight: Story = Template.bind({})
 TrendsLineMultiInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLineMulti.json'),
@@ -108,6 +113,11 @@ FunnelLeftToRightInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/funnelLeftToRight.json'),
 }
 
+/** This should not happen in the exporter, but if it does, it shouldn't error out - we want a clear message. */
+export const FunnelLeftToRightInsightNoResults: Story = Template.bind({})
+// @ts-expect-error
+FunnelLeftToRightInsightNoResults.args = { insight: { ...FunnelLeftToRightInsight.args.insight, result: null } }
+
 export const FunnelLeftToRightBreakdownInsight: Story = Template.bind({})
 FunnelLeftToRightBreakdownInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/funnelLeftToRightBreakdown.json'),
@@ -117,6 +127,10 @@ export const FunnelTopToBottomInsight: Story = Template.bind({})
 FunnelTopToBottomInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/funnelTopToBottom.json'),
 }
+/** This should not happen in the exporter, but if it does, it shouldn't error out - we want a clear message. */
+export const FunnelTopToBottomInsightNoResults: Story = Template.bind({})
+// @ts-expect-error
+FunnelTopToBottomInsightNoResults.args = { insight: { ...FunnelTopToBottomInsight.args.insight, result: null } }
 
 export const FunnelTopToBottomBreakdownInsight: Story = Template.bind({})
 FunnelTopToBottomBreakdownInsight.args = {
@@ -152,3 +166,19 @@ UserPathsInsight.args = { insight: require('../mocks/fixtures/api/projects/team_
 
 export const Dashboard: Story = Template.bind({})
 Dashboard.args = { dashboard }
+
+export const EventTableInsight: Story = Template.bind({})
+EventTableInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/dataTableEvents.json') }
+
+/** This should not happen in the exporter, but if it does, it shouldn't error out - we want a clear message. */
+export const EventTableInsightNoResults: Story = Template.bind({})
+// @ts-expect-error
+EventTableInsightNoResults.args = { insight: { ...EventTableInsight.args.insight, result: null } }
+
+export const SQLInsight: Story = Template.bind({})
+SQLInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/dataTableHogQL.json') }
+
+/** This should not happen in the exporter, but if it does, it shouldn't error out - we want a clear message. */
+export const SQLInsightNoResults: Story = Template.bind({})
+// @ts-expect-error
+SQLInsightNoResults.args = { insight: { ...SQLInsight.args.insight, result: null } }

frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx

@@ -3,7 +3,6 @@ import './InsightCard.scss'
 import clsx from 'clsx'
 import { BindLogic, useValues } from 'kea'
 import { Resizeable } from 'lib/components/Cards/CardMeta'
-import { QueriesUnsupportedHere } from 'lib/components/Cards/InsightCard/QueriesUnsupportedHere'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import React, { useState } from 'react'
@@ -289,12 +288,6 @@ function InsightCardInternal(
 
     const [areDetailsShown, setAreDetailsShown] = useState(false)
 
-    const canMakeQueryAPICalls =
-        placement === 'SavedInsightGrid' ||
-        [DashboardPlacement.Dashboard, DashboardPlacement.ProjectHomepage, DashboardPlacement.FeatureFlag].includes(
-            placement
-        )
-
     return (
         <div
             className={clsx('InsightCard border', highlighted && 'InsightCard--highlighted', className)}
@@ -325,13 +318,7 @@ function InsightCardInternal(
                 />
                 {insight.query ? (
                     <div className="InsightCard__viz">
-                        {insight.result ? (
-                            <Query query={insight.query} cachedResults={insight.result} readOnly />
-                        ) : canMakeQueryAPICalls ? (
-                            <Query query={insight.query} readOnly />
-                        ) : (
-                            <QueriesUnsupportedHere />
-                        )}
+                        <Query query={insight.query} cachedResults={insight.result} readOnly />
                     </div>
                 ) : insight.filters?.insight ? (
                     <FilterBasedCardContent

frontend/src/mocks/fixtures/api/projects/team_id/insights/dataTableHogQL.json

@@ -2,7 +2,7 @@
     "id": 14,
     "short_id": "PSWiXI9H",
     "name": "",
-    "derived_name": "from HogQL into a data table.",
+    "derived_name": "SQL query",
     "filters": {},
     "query": {
         "full": true,