Skip to content

Commit

Permalink
feat(surveys branching): handle question deletion/rearrangement (#23109)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jurajmajerik
jurajmajerik authored Jun 20, 2024
1 parent 55cc5d2 commit 3ce1a89
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 19 deletions.
Binary file added ...end/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...nd/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
43 changes: 36 additions & 7 deletions frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { DraggableSyntheticListeners } from '@dnd-kit/core'
import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { IconPlusSmall, IconTrash } from '@posthog/icons'
import { LemonButton, LemonCheckbox, LemonInput, LemonSelect } from '@posthog/lemon-ui'
import { LemonButton, LemonCheckbox, LemonDialog, LemonInput, LemonSelect } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { Group } from 'kea-forms'
import { FEATURE_FLAGS } from 'lib/constants'
Expand Down Expand Up @@ -38,6 +38,8 @@ export function SurveyEditQuestionHeader({
setSelectedPageIndex,
setSurveyValue,
}: SurveyQuestionHeaderProps): JSX.Element {
const { hasBranchingLogic } = useValues(surveyLogic)
const { deleteBranchingLogic } = useActions(surveyLogic)
const { setNodeRef, attributes, transform, transition, listeners, isDragging } = useSortable({
id: index.toString(),
})
Expand Down Expand Up @@ -71,12 +73,39 @@ export function SurveyEditQuestionHeader({
icon={<IconTrash />}
data-attr={`delete-survey-question-${index}`}
onClick={(e) => {
e.stopPropagation()
setSelectedPageIndex(index <= 0 ? 0 : index - 1)
setSurveyValue(
'questions',
survey.questions.filter((_, i) => i !== index)
)
const deleteQuestion = (): void => {
e.stopPropagation()
setSelectedPageIndex(index <= 0 ? 0 : index - 1)
setSurveyValue(
'questions',
survey.questions.filter((_, i) => i !== index)
)
}

if (hasBranchingLogic) {
LemonDialog.open({
title: 'Your survey has active branching logic',
description: (
<p className="py-2">
Deleting the question will remove your branching logic. Are you sure you want to
continue?
</p>
),
primaryButton: {
children: 'Continue',
status: 'danger',
onClick: () => {
deleteBranchingLogic()
deleteQuestion()
},
},
secondaryButton: {
children: 'Cancel',
},
})
} else {
deleteQuestion()
}
}}
tooltipPlacement="top-end"
/>
Expand Down
17 changes: 17 additions & 0 deletions frontend/src/scenes/surveys/surveyLogic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ export const surveyLogic = kea<surveyLogicType>([
specificQuestionIndex,
}),
resetBranchingForQuestion: (questionIndex) => ({ questionIndex }),
deleteBranchingLogic: true,
archiveSurvey: true,
setWritingHTMLDescription: (writingHTML: boolean) => ({ writingHTML }),
setSurveyTemplateValues: (template: any) => ({ template }),
Expand Down Expand Up @@ -760,6 +761,17 @@ export const surveyLogic = kea<surveyLogicType>([
questions: newQuestions,
}
},
deleteBranchingLogic: (state) => {
const newQuestions = [...state.questions]
newQuestions.forEach((question) => {
delete question.branching
})

return {
...state,
questions: newQuestions,
}
},
},
],
selectedPageIndex: [
Expand Down Expand Up @@ -1094,6 +1106,11 @@ export const surveyLogic = kea<surveyLogicType>([
return cycleDetected
},
],
hasBranchingLogic: [
(s) => [s.survey],
(survey) =>
survey.questions.some((question) => question.branching && Object.keys(question.branching).length > 0),
],
}),
forms(({ actions, props, values }) => ({
survey: {
Expand Down

0 comments on commit 3ce1a89

Please sign in to comment.