Skip to content

Commit

Permalink
feat(cdp): prominently show source code (#25639)
Browse files Browse the repository at this point in the history
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
mariusandra and github-actions[bot] authored Oct 17, 2024
1 parent 41bbc38 commit b3b38cd
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 79 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
167 changes: 88 additions & 79 deletions frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
Link,
SpinnerOverlay,
} from '@posthog/lemon-ui'
import clsx from 'clsx'
import { BindLogic, useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
import { NotFound } from 'lib/components/NotFound'
Expand Down Expand Up @@ -340,89 +341,97 @@ export function HogFunctionConfiguration({ templateId, id }: { templateId?: stri
<div className="border bg-bg-light rounded p-3 space-y-2">
<div className="space-y-2">
<HogFunctionInputs />

{showSource ? (
<>
<LemonButton
icon={<IconPlus />}
size="small"
type="secondary"
className="my-4"
onClick={() => {
setConfigurationValue('inputs_schema', [
...(configuration.inputs_schema ?? []),
{
type: 'string',
key: `input_${
(configuration.inputs_schema?.length ?? 0) + 1
}`,
label: '',
required: false,
},
])
}}
>
Add input variable
</LemonButton>
<LemonField name="hog">
{({ value, onChange }) => (
<>
<div className="flex justify-between gap-2">
<LemonLabel>Function source code</LemonLabel>
<LemonButton
size="xsmall"
type="secondary"
onClick={() => setShowSource(false)}
>
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/hog">See the docs</Link>{' '}
for more info
</span>
<CodeEditorResizeable
language="hog"
value={value ?? ''}
onChange={(v) => onChange(v ?? '')}
globals={globalsWithInputs}
options={{
minimap: {
enabled: false,
},
wordWrap: 'on',
scrollBeyondLastLine: false,
automaticLayout: true,
fixedOverflowWidgets: true,
suggest: {
showInlineDetails: true,
},
quickSuggestionsDelay: 300,
}}
/>
</>
)}
</LemonField>
</>
<LemonButton
icon={<IconPlus />}
size="small"
type="secondary"
className="my-4"
onClick={() => {
setConfigurationValue('inputs_schema', [
...(configuration.inputs_schema ?? []),
{
type: 'string',
key: `input_${(configuration.inputs_schema?.length ?? 0) + 1}`,
label: '',
required: false,
},
])
}}
>
Add input variable
</LemonButton>
) : null}
</div>
</div>

<div
className={clsx(
'border rounded p-3 space-y-2',
showSource ? 'bg-bg-light' : 'bg-accent-3000'
)}
>
<div className="flex items-center gap-2 justify-end">
<div className="flex-1 space-y-2">
<h2 className="mb-0">Edit source</h2>
{!showSource ? <p>Click here to edit the function's source code</p> : null}
</div>

{!showSource ? (
<LemonButton
type="secondary"
onClick={() => setShowSource(true)}
disabledReason={
!hasAddon
? 'Editing the source code requires the Data Pipelines addon'
: undefined
}
>
Edit source code
</LemonButton>
) : (
<div className="flex justify-end mt-2">
<LemonButton
size="xsmall"
type="secondary"
onClick={() => setShowSource(true)}
disabledReason={
!hasAddon
? 'Editing the source code requires the Data Pipelines addon'
: undefined
}
>
Show function source code
</LemonButton>
</div>
<LemonButton
size="xsmall"
type="secondary"
onClick={() => setShowSource(false)}
>
Hide source code
</LemonButton>
)}
</div>

{showSource ? (
<LemonField name="hog">
{({ value, onChange }) => (
<>
<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/hog">See the docs</Link>{' '}
for more info
</span>
<CodeEditorResizeable
language="hog"
value={value ?? ''}
onChange={(v) => onChange(v ?? '')}
globals={globalsWithInputs}
options={{
minimap: {
enabled: false,
},
wordWrap: 'on',
scrollBeyondLastLine: false,
automaticLayout: true,
fixedOverflowWidgets: true,
suggest: {
showInlineDetails: true,
},
quickSuggestionsDelay: 300,
}}
/>
</>
)}
</LemonField>
) : null}
</div>

{id ? <HogFunctionTest id={id} /> : <HogFunctionTestPlaceholder />}
Expand Down

0 comments on commit b3b38cd

Please sign in to comment.