Skip to content

Commit

Permalink
feat(cdp): Added docs links for hog functions (#24545)
Browse files Browse the repository at this point in the history
  • Loading branch information
benjackwhite authored Aug 26, 2024
1 parent 1ff06d0 commit fc00dd0
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 19 deletions.
23 changes: 19 additions & 4 deletions frontend/src/lib/lemon-ui/Link/Link.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import './Link.scss'

import clsx from 'clsx'
import { useActions } from 'kea'
import { router } from 'kea-router'
import { isExternalLink } from 'lib/utils'
import { getCurrentTeamId } from 'lib/utils/getAppContext'
Expand Down Expand Up @@ -96,8 +95,6 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
href: typeof to === 'string' ? to : undefined,
})

const { openSidePanel } = useActions(sidePanelStateLogic)

const onClick = (event: React.MouseEvent<HTMLElement>): void => {
if (event.metaKey || event.ctrlKey) {
event.stopPropagation()
Expand All @@ -111,8 +108,26 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
return
}

if (typeof to === 'string' && isPostHogComDocs(to)) {
const mountedSidePanelLogic = sidePanelStateLogic.findMounted()

if (typeof to === 'string' && isPostHogComDocs(to) && mountedSidePanelLogic) {
// TRICKY: We do this instead of hooks as there is some weird cyclic issue in tests
const { sidePanelOpen } = mountedSidePanelLogic.values
const { openSidePanel } = mountedSidePanelLogic.actions

event.preventDefault()

const target = event.currentTarget
const container = document.getElementsByTagName('main')[0]
const topBar = document.getElementsByClassName('TopBar3000')[0]
if (!sidePanelOpen && container.contains(target)) {
setTimeout(() => {
// Little delay to allow the rendering of the side panel
const y = container.scrollTop + target.getBoundingClientRect().top - topBar.clientHeight
container.scrollTo({ top: y })
}, 50)
}

openSidePanel(SidePanelTab.Docs, to)
return
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,14 @@ export function HogFunctionConfiguration({ templateId, id }: { templateId?: stri
Hide source code
</LemonButton>
</div>
<span className="text-xs text-muted-alt">
This is the underlying Hog code that will run whenever the
filters match.{' '}
<Link to="https://posthog.com/docs/cdp/destinations#advanced---custom-code">
See the docs
</Link>{' '}
for more info
</span>
<CodeEditorResizeable
language="hog"
value={value ?? ''}
Expand Down
45 changes: 30 additions & 15 deletions frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { closestCenter, DndContext } from '@dnd-kit/core'
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { IconGear, IconLock, IconPlus, IconTrash, IconX } from '@posthog/icons'
import { IconGear, IconInfo, IconLock, IconPlus, IconTrash, IconX } from '@posthog/icons'
import {
LemonButton,
LemonCheckbox,
Expand Down Expand Up @@ -344,8 +344,11 @@ export function HogFunctionInputWithSchema({ schema }: HogFunctionInputWithSchem
}
}, [showSource])

const supportsTemplating = ['string', 'json', 'dictionary', 'email'].includes(schema.type)

return (
<div
className="group"
ref={setNodeRef}
// eslint-disable-next-line react/forbid-dom-props
style={{
Expand Down Expand Up @@ -378,20 +381,32 @@ export function HogFunctionInputWithSchema({ schema }: HogFunctionInputWithSchem
</Tooltip>
) : undefined}
</LemonLabel>
{showSource ? (
<>
<LemonTag type="muted" className="font-mono">
inputs.{schema.key}
</LemonTag>
<div className="flex-1" />
<LemonButton
size="small"
noPadding
icon={<IconGear />}
onClick={() => setEditing(true)}
/>
</>
) : null}
{showSource && (
<LemonTag type="muted" className="font-mono">
inputs.{schema.key}
</LemonTag>
)}
<div className="flex-1" />

{supportsTemplating && (
<LemonButton
size="xsmall"
to="https://posthog.com/docs/cdp/destinations#input-formatting"
sideIcon={<IconInfo />}
noPadding
className=" opacity-0 group-hover:opacity-100 p-1 transition-opacity"
>
Supports templating
</LemonButton>
)}
{showSource && (
<LemonButton
size="small"
noPadding
icon={<IconGear />}
onClick={() => setEditing(true)}
/>
)}
</div>
{value?.secret ? (
<div className="border border-dashed rounded p-1 flex gap-2 items-center">
Expand Down

0 comments on commit fc00dd0

Please sign in to comment.