Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(cdp): prominently show source code #25639

Merged
merged 2 commits into from
Oct 17, 2024
Merged

feat(cdp): prominently show source code #25639

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb95c07
feat(cdp): prominently show source code
mariusandra Oct 16, 2024
6b9cd09
Update UI snapshots for `chromium` (1)
github-actions[bot] Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 88 additions & 79 deletions frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx
View file
Open in desktop
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
Loading