diff --git a/frontend/src/scenes/insights/InsightPageHeader.tsx b/frontend/src/scenes/insights/InsightPageHeader.tsx
index 6932280253a00..d3f7e6ae349ae 100644
--- a/frontend/src/scenes/insights/InsightPageHeader.tsx
+++ b/frontend/src/scenes/insights/InsightPageHeader.tsx
@@ -12,6 +12,7 @@ import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/User
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { More } from 'lib/lemon-ui/LemonButton/More'
import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { LemonSwitch } from 'lib/lemon-ui/LemonSwitch'
import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
import { useState } from 'react'
import { NewDashboardModal } from 'scenes/dashboard/NewDashboardModal'
@@ -164,48 +165,53 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
) : null}
>
)}
-
+ {
+ className="px-2 py-1"
+ checked={showQueryEditor}
+ onChange={() => {
// for an existing insight in view mode
if (hasDashboardItemId && insightMode !== ItemMode.Edit) {
// enter edit mode
setInsightMode(ItemMode.Edit, null)
// exit early if query editor doesn't need to be toggled
- if (showQueryEditor !== false) {
+ if (showQueryEditor) {
return
}
}
toggleQueryEditorPanel()
}}
fullWidth
- >
- {showQueryEditor ? 'Hide source' : 'View source'}
-
+ label="View Source"
+ />
{hogQL && (
- {
- router.actions.push(
- urls.insightNew(
- undefined,
- undefined,
- JSON.stringify({
- kind: NodeKind.DataTableNode,
- source: {
- kind: NodeKind.HogQLQuery,
- query: hogQL,
- },
- full: true,
- } as DataTableNode)
+ <>
+
+ {
+ router.actions.push(
+ urls.insightNew(
+ undefined,
+ undefined,
+ JSON.stringify({
+ kind: NodeKind.DataTableNode,
+ source: {
+ kind: NodeKind.HogQLQuery,
+ query: hogQL,
+ },
+ full: true,
+ } as DataTableNode)
+ )
)
- )
- }}
- fullWidth
- >
- Edit SQL directly
-
+ }}
+ fullWidth
+ >
+ Edit SQL directly
+
+ >
)}
{hasDashboardItemId && (
<>