From fc00dd0c07a2bc2c0da2e08c859895caa57abe22 Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Mon, 26 Aug 2024 08:44:11 +0100
Subject: [PATCH] feat(cdp): Added docs links for hog functions (#24545)

---
 frontend/src/lib/lemon-ui/Link/Link.tsx       | 23 ++++++++--
 .../hogfunctions/HogFunctionConfiguration.tsx |  8 ++++
 .../hogfunctions/HogFunctionInputs.tsx        | 45 ++++++++++++-------
 3 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/Link/Link.tsx b/frontend/src/lib/lemon-ui/Link/Link.tsx
index 08a37f4366add..a8ce49710e678 100644
--- a/frontend/src/lib/lemon-ui/Link/Link.tsx
+++ b/frontend/src/lib/lemon-ui/Link/Link.tsx
@@ -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'
@@ -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()
@@ -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
             }
diff --git a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx
index a1a055618386a..6057a4c81c91e 100644
--- a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx
+++ b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx
@@ -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 ?? ''}
diff --git a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx
index ec7bc78df271a..f60951249226a 100644
--- a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx
+++ b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx
@@ -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,
@@ -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={{
@@ -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">