Skip to content

Commit

Permalink
Merge branch 'trailing-commas' of github.com:PostHog/posthog into tra…
Browse files Browse the repository at this point in the history 
…iling-commas
  • Loading branch information
@mariusandra
mariusandra committed Jun 20, 2024
2 parents b562c64 + d90e59d commit 1d46ede
Show file tree
Hide file tree
Showing 8 changed files with 230 additions and 64 deletions.
1 change: 1 addition & 0 deletions frontend/src/exporter/Exporter.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ FunnelTopToBottomBreakdownInsight.args = {
}

export const FunnelHistoricalTrendsInsight: Story = Template.bind({})
FunnelHistoricalTrendsInsight.tags = ['autodocs', 'test-skip']
FunnelHistoricalTrendsInsight.args = {
insight: require('../mocks/fixtures/api/projects/team_id/insights/funnelHistoricalTrends.json'),
}
Expand Down
123 changes: 93 additions & 30 deletions frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { closestCenter, DndContext } from '@dnd-kit/core'
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { Monaco } from '@monaco-editor/react'
import { IconGear, IconPlus, IconTrash, IconX } from '@posthog/icons'
import {
Expand All @@ -7,6 +10,7 @@ import {
LemonInputSelect,
LemonLabel,
LemonSelect,
LemonTag,
LemonTextArea,
} from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
Expand Down Expand Up @@ -362,6 +366,7 @@ function HogFunctionInputSchemaControls({ value, onChange, onDone }: HogFunction
}

export function HogFunctionInputWithSchema({ schema }: HogFunctionInputWithSchemaProps): JSX.Element {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: schema.key })
const { showSource, configuration } = useValues(pipelineHogFunctionConfigurationLogic)
const { setConfigurationValue } = useActions(pipelineHogFunctionConfigurationLogic)
const [editing, setEditing] = useState(showSource)
Expand Down Expand Up @@ -394,38 +399,96 @@ export function HogFunctionInputWithSchema({ schema }: HogFunctionInputWithSchem
}
}, [showSource])

if (!editing) {
return (
<LemonField name={`inputs.${schema.key}`} help={schema.description}>
{({ value, onChange }) => {
return (
<>
<div className="flex items-center justify-between">
<LemonLabel showOptional={!schema.required}>{schema.label || schema.key}</LemonLabel>
{showSource ? (
<LemonButton
size="small"
noPadding
icon={<IconGear />}
onClick={() => setEditing(true)}
/>
) : null}
</div>
<HogFunctionInputRenderer
schema={schema}
value={value?.value}
onChange={(val) => onChange({ value: val })}
/>
</>
)
}}
</LemonField>
)
return (
<div
ref={setNodeRef}
// eslint-disable-next-line react/forbid-dom-props
style={{
transform: CSS.Transform.toString(transform),
transition,
}}
>
{!editing ? (
<LemonField name={`inputs.${schema.key}`} help={schema.description}>
{({ value, onChange }) => {
return (
<>
<div className="flex items-center gap-2">
<LemonLabel
className={showSource ? 'cursor-grab' : ''}
showOptional={!schema.required}
{...attributes}
{...listeners}
>
{schema.label || schema.key}
</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}
</div>
<HogFunctionInputRenderer
schema={schema}
value={value?.value}
onChange={(val) => onChange({ value: val })}
/>
</>
)
}}
</LemonField>
) : (
<div className="border rounded p-2 border-dashed space-y-4">
<HogFunctionInputSchemaControls
value={schema}
onChange={onSchemaChange}
onDone={() => setEditing(false)}
/>
</div>
)}
</div>
)
}

export function HogFunctionInputs(): JSX.Element {
const { showSource, configuration } = useValues(pipelineHogFunctionConfigurationLogic)
const { setConfigurationValue } = useActions(pipelineHogFunctionConfigurationLogic)

if (!configuration?.inputs_schema?.length) {
return <span className="italic text-muted-alt">This function does not require any input variables.</span>
}

const inputSchemas = configuration.inputs_schema
const inputSchemaIds = inputSchemas.map((schema) => schema.key)

return (
<div className="border rounded p-2 border-dashed space-y-4">
<HogFunctionInputSchemaControls value={schema} onChange={onSchemaChange} onDone={() => setEditing(false)} />
</div>
<>
<DndContext
collisionDetection={closestCenter}
onDragEnd={({ active, over }) => {
if (over && active.id !== over.id) {
const oldIndex = inputSchemaIds.indexOf(active.id as string)
const newIndex = inputSchemaIds.indexOf(over.id as string)

setConfigurationValue('inputs_schema', arrayMove(inputSchemas, oldIndex, newIndex))
}
}}
>
<SortableContext disabled={!showSource} items={inputSchemaIds} strategy={verticalListSortingStrategy}>
{configuration.inputs_schema?.map((schema) => {
return <HogFunctionInputWithSchema key={schema.key} schema={schema} />
})}
</SortableContext>
</DndContext>
</>
)
}
12 changes: 2 additions & 10 deletions frontend/src/scenes/pipeline/hogfunctions/PipelineHogFunctionConfiguration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { groupsModel } from '~/models/groupsModel'
import { EntityTypes } from '~/types'

import { HogFunctionIconEditable } from './HogFunctionIcon'
import { HogFunctionInputWithSchema } from './HogFunctionInputs'
import { HogFunctionInputs } from './HogFunctionInputs'
import { HogFunctionTest, HogFunctionTestPlaceholder } from './HogFunctionTest'
import { pipelineHogFunctionConfigurationLogic } from './pipelineHogFunctionConfigurationLogic'

Expand Down Expand Up @@ -263,15 +263,7 @@ export function PipelineHogFunctionConfiguration({
<div className="flex-2 min-w-100 space-y-4">
<div className="border bg-bg-light rounded p-3 space-y-2">
<div className="space-y-2">
{configuration?.inputs_schema?.length ? (
configuration?.inputs_schema.map((schema, index) => {
return <HogFunctionInputWithSchema key={index} schema={schema} />
})
) : (
<span className="italic text-muted-alt">
This function does not require any input variables.
</span>
)}
<HogFunctionInputs />

{showSource ? (
<>
Expand Down
88 changes: 76 additions & 12 deletions frontend/src/scenes/surveys/SurveyEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
LemonButton,
LemonCheckbox,
LemonCollapse,
LemonDialog,
LemonDivider,
LemonInput,
LemonSelect,
Expand Down Expand Up @@ -51,6 +52,7 @@ export default function SurveyEdit(): JSX.Element {
targetingFlagFilters,
showSurveyRepeatSchedule,
schedule,
hasBranchingLogic,
} = useValues(surveyLogic)
const {
setSurveyValue,
Expand All @@ -59,6 +61,7 @@ export default function SurveyEdit(): JSX.Element {
setSelectedSection,
setFlagPropertyErrors,
setSchedule,
deleteBranchingLogic,
} = useActions(surveyLogic)
const { surveysMultipleQuestionsAvailable, surveysRecurringScheduleAvailable, surveysEventsAvailable } =
useValues(surveysLogic)
Expand Down Expand Up @@ -171,10 +174,37 @@ export default function SurveyEdit(): JSX.Element {
<DndContext
onDragEnd={({ active, over }) => {
if (over && active.id !== over.id) {
onSortEnd({
oldIndex: sortedItemIds.indexOf(active.id.toString()),
newIndex: sortedItemIds.indexOf(over.id.toString()),
})
const finishDrag = (): void =>
onSortEnd({
oldIndex: sortedItemIds.indexOf(active.id.toString()),
newIndex: sortedItemIds.indexOf(over.id.toString()),
})

if (hasBranchingLogic) {
LemonDialog.open({
title: 'Your survey has active branching logic',
description: (
<p className="py-2">
Rearranging questions will remove your branching logic.
Are you sure you want to continue?
</p>
),

primaryButton: {
children: 'Continue',
status: 'danger',
onClick: () => {
deleteBranchingLogic()
finishDrag()
},
},
secondaryButton: {
children: 'Cancel',
},
})
} else {
finishDrag()
}
}
}}
>
Expand Down Expand Up @@ -226,14 +256,48 @@ export default function SurveyEdit(): JSX.Element {
icon={<IconTrash />}
data-attr="delete-survey-confirmation"
onClick={(e) => {
e.stopPropagation()
setSelectedPageIndex(
survey.questions.length - 1
)
setSurveyValue('appearance', {
...survey.appearance,
displayThankYouMessage: false,
})
const deleteConfirmationMessage =
(): void => {
e.stopPropagation()
setSelectedPageIndex(
survey.questions.length -
1
)
setSurveyValue('appearance', {
...survey.appearance,
displayThankYouMessage:
false,
})
}

if (hasBranchingLogic) {
LemonDialog.open({
title: 'Your survey has active branching logic',
description: (
<p className="py-2">
Deleting the
confirmation message
will remove your
branching logic. Are
you sure you want to
continue?
</p>
),
primaryButton: {
children: 'Continue',
status: 'danger',
onClick: () => {
deleteBranchingLogic()
deleteConfirmationMessage()
},
},
secondaryButton: {
children: 'Cancel',
},
})
} else {
deleteConfirmationMessage()
}
}}
tooltipPlacement="top-end"
/>
Expand Down
Loading

0 comments on commit 1d46ede

Please sign in to comment.