mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-24 18:07:17 +01:00
Code Issues Releases Activity

chore(surveys): refactor survey preview (#22617)

Browse Source
This commit is contained in:
Juraj Majerik 2024-06-04 17:30:33 +02:00 committed by GitHub
parent cb5260c8e0
commit 6a097d7f4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 42 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/__snapshots__/scenes-app-pipeline--pipeline-node-metrics--dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
frontend/__snapshots__/scenes-app-pipeline--pipeline-node-metrics--light.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 27 KiB

6
frontend/src/scenes/notebooks/Nodes/NotebookNodeSurvey.tsx
View File

@ -80,11 +80,7 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeSurveyAttribute
/>
<div className="w-full flex flex-col items-center">
<SurveyAppearancePreview
survey={survey}
activePreview="survey"
questionIndex={0}
/>
<SurveyAppearancePreview survey={survey} previewPageIndex={0} />
</div>
</div>
</>

10
frontend/src/scenes/surveys/SurveyAppearancePreview.tsx
View File

@ -7,25 +7,23 @@ import { NewSurvey } from './constants'
export function SurveyAppearancePreview({
survey,
activePreview,
questionIndex,
previewPageIndex,
}: {
survey: Survey | NewSurvey
activePreview: 'survey' | 'confirmation'
questionIndex: number
previewPageIndex: number
}): JSX.Element {
const surveyPreviewRef = useRef<HTMLDivElement>(null)
const feedbackWidgetPreviewRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (surveyPreviewRef.current) {
renderSurveysPreview(survey, surveyPreviewRef.current, activePreview, questionIndex)
renderSurveysPreview(survey, surveyPreviewRef.current, previewPageIndex)
}
if (feedbackWidgetPreviewRef.current) {
renderFeedbackWidgetPreview(survey, feedbackWidgetPreviewRef.current)
}
}, [survey, activePreview, questionIndex])
}, [survey, previewPageIndex])
return (
<>
<div ref={surveyPreviewRef} />

28
frontend/src/scenes/surveys/SurveyEdit.tsx
View File

@ -43,7 +43,7 @@ export default function SurveyEdit(): JSX.Element {
urlMatchTypeValidationError,
writingHTMLDescription,
hasTargetingSet,
selectedQuestion,
selectedPageIndex,
selectedSection,
isEditingSurvey,
targetingFlagFilters,
@ -52,7 +52,7 @@ export default function SurveyEdit(): JSX.Element {
setSurveyValue,
setWritingHTMLDescription,
resetTargeting,
setSelectedQuestion,
setSelectedPageIndex,
setSelectedSection,
setFlagPropertyErrors,
} = useActions(surveyLogic)
@ -70,7 +70,7 @@ export default function SurveyEdit(): JSX.Element {
return clone.map((child) => ({ ...child }))
}
setSurveyValue('questions', move(survey.questions, oldIndex, newIndex))
setSelectedQuestion(newIndex)
setSelectedPageIndex(newIndex)
}
return (
@ -113,11 +113,7 @@ export default function SurveyEdit(): JSX.Element {
left: '-1rem',
}}
>
<SurveyAppearancePreview
survey={survey}
activePreview="survey"
questionIndex={0}
/>
<SurveyAppearancePreview survey={survey} previewPageIndex={0} />
</div>
</PresentationTypeCard>
<PresentationTypeCard
@ -175,9 +171,9 @@ export default function SurveyEdit(): JSX.Element {
strategy={verticalListSortingStrategy}
>
<LemonCollapse
activeKey={selectedQuestion === null ? undefined : selectedQuestion}
activeKey={selectedPageIndex === null ? undefined : selectedPageIndex}
onChange={(index) => {
setSelectedQuestion(index)
setSelectedPageIndex(index)
}}
panels={[
...survey.questions.map(
@ -193,7 +189,7 @@ export default function SurveyEdit(): JSX.Element {
<SurveyEditQuestionHeader
index={index}
survey={survey}
setSelectedQuestion={setSelectedQuestion}
setSelectedPageIndex={setSelectedPageIndex}
setSurveyValue={setSurveyValue}
/>
),
@ -218,7 +214,7 @@ export default function SurveyEdit(): JSX.Element {
data-attr="delete-survey-confirmation"
onClick={(e) => {
e.stopPropagation()
setSelectedQuestion(
setSelectedPageIndex(
survey.questions.length - 1
)
setSurveyValue('appearance', {
@ -316,7 +312,7 @@ export default function SurveyEdit(): JSX.Element {
...survey.questions,
{ ...defaultSurveyFieldValues.open.questions[0] },
])
setSelectedQuestion(survey.questions.length)
setSelectedPageIndex(survey.questions.length)
}}
>
Add question
@ -337,7 +333,7 @@ export default function SurveyEdit(): JSX.Element {
...survey.appearance,
displayThankYouMessage: true,
})
setSelectedQuestion(survey.questions.length)
setSelectedPageIndex(survey.questions.length)
}}
>
Add confirmation message
@ -651,9 +647,9 @@ export default function SurveyEdit(): JSX.Element {
<LemonDivider vertical />
<div className="max-w-80 mx-4 flex flex-col items-center h-full w-full sticky top-0 pt-16">
<SurveyFormAppearance
activePreview={selectedQuestion || 0}
previewPageIndex={selectedPageIndex || 0}
survey={survey}
setActivePreview={(preview) => setSelectedQuestion(preview)}
handleSetSelectedPageIndex={(pageIndex) => setSelectedPageIndex(pageIndex)}
isEditingSurvey={isEditingSurvey}
/>
</div>

6
frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
View File

@ -19,7 +19,7 @@ import { surveyLogic } from './surveyLogic'
type SurveyQuestionHeaderProps = {
index: number
survey: Survey | NewSurvey
setSelectedQuestion: (index: number) => void
setSelectedPageIndex: (index: number) => void
setSurveyValue: (key: string, value: any) => void
}
@ -32,7 +32,7 @@ const DragHandle = ({ listeners }: { listeners: DraggableSyntheticListeners | un
export function SurveyEditQuestionHeader({
index,
survey,
setSelectedQuestion,
setSelectedPageIndex,
setSurveyValue,
}: SurveyQuestionHeaderProps): JSX.Element {
const { setNodeRef, attributes, transform, transition, listeners, isDragging } = useSortable({
@ -69,7 +69,7 @@ export function SurveyEditQuestionHeader({
data-attr={`delete-survey-question-${index}`}
onClick={(e) => {
e.stopPropagation()
setSelectedQuestion(index <= 0 ? 0 : index - 1)
setSelectedPageIndex(index <= 0 ? 0 : index - 1)
setSurveyValue(
'questions',
survey.questions.filter((_, i) => i !== index)

22
frontend/src/scenes/surveys/SurveyFormAppearance.tsx
View File

@ -7,33 +7,25 @@ import { SurveyAPIEditor } from './SurveyAPIEditor'
import { SurveyAppearancePreview } from './SurveyAppearancePreview'
interface SurveyFormAppearanceProps {
activePreview: number
previewPageIndex: number
survey: NewSurvey | Survey
setActivePreview: (activePreview: number) => void
handleSetSelectedPageIndex: (activePreview: number) => void
isEditingSurvey?: boolean
}
export function SurveyFormAppearance({
activePreview,
previewPageIndex,
survey,
setActivePreview,
handleSetSelectedPageIndex,
}: SurveyFormAppearanceProps): JSX.Element {
const showThankYou = survey.appearance?.displayThankYouMessage && activePreview >= survey.questions.length
return survey.type !== SurveyType.API ? (
<div className="survey-view max-w-72">
<SurveyAppearancePreview
survey={survey as Survey}
activePreview={showThankYou ? 'confirmation' : 'survey'}
questionIndex={activePreview}
/>
<SurveyAppearancePreview survey={survey as Survey} previewPageIndex={previewPageIndex} />
<LemonSelect
onChange={(activePreview) => {
setActivePreview(activePreview)
}}
onChange={(pageIndex) => handleSetSelectedPageIndex(pageIndex)}
className="mt-4 whitespace-nowrap"
fullWidth
value={activePreview}
value={previewPageIndex}
options={[
...survey.questions.map((question, index) => ({
label: `${index + 1}. ${question.question ?? ''}`,

3
frontend/src/scenes/surveys/SurveyTemplates.tsx
View File

@ -67,8 +67,7 @@ export function SurveyTemplates(): JSX.Element {
},
} as Survey
}
activePreview="survey"
questionIndex={0}
previewPageIndex={0}
/>
</div>
</div>

10
frontend/src/scenes/surveys/SurveyView.tsx
View File

@ -33,7 +33,7 @@ import {
} from './surveyViewViz'
export function SurveyView({ id }: { id: string }): JSX.Element {
const { survey, surveyLoading, selectedQuestion, targetingFlagFilters } = useValues(surveyLogic)
const { survey, surveyLoading, selectedPageIndex, targetingFlagFilters } = useValues(surveyLogic)
const {
editingSurvey,
updateSurvey,
@ -41,7 +41,7 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
stopSurvey,
archiveSurvey,
resumeSurvey,
setSelectedQuestion,
setSelectedPageIndex,
duplicateSurvey,
} = useActions(surveyLogic)
const { deleteSurvey } = useActions(surveysLogic)
@ -252,9 +252,11 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
{survey.type !== SurveyType.API ? (
<div className="mt-6 max-w-72">
<SurveyFormAppearance
activePreview={selectedQuestion || 0}
previewPageIndex={selectedPageIndex || 0}
survey={survey}
setActivePreview={(preview) => setSelectedQuestion(preview)}
handleSetSelectedPageIndex={(preview) =>
setSelectedPageIndex(preview)
}
/>
</div>
) : (

6
frontend/src/scenes/surveys/surveyLogic.tsx
View File

@ -141,7 +141,7 @@ export const surveyLogic = kea<surveyLogicType>([
archiveSurvey: true,
setWritingHTMLDescription: (writingHTML: boolean) => ({ writingHTML }),
setSurveyTemplateValues: (template: any) => ({ template }),
setSelectedQuestion: (idx: number | null) => ({ idx }),
setSelectedPageIndex: (idx: number | null) => ({ idx }),
setSelectedSection: (section: SurveyEditSection | null) => ({ section }),
resetTargeting: true,
setFlagPropertyErrors: (errors: any) => ({ errors }),
@ -541,10 +541,10 @@ export const surveyLogic = kea<surveyLogicType>([
},
},
],
selectedQuestion: [
selectedPageIndex: [
0 as number | null,
{
setSelectedQuestion: (_, { idx }) => idx,
setSelectedPageIndex: (_, { idx }) => idx,
},
],
selectedSection: [

2
package.json
View File

@ -146,7 +146,7 @@
"pmtiles": "^2.11.0",
"postcss": "^8.4.31",
"postcss-preset-env": "^9.3.0",
"posthog-js": "1.136.5",
"posthog-js": "1.136.6",
"posthog-js-lite": "3.0.0",
"prettier": "^2.8.8",
"prop-types": "^15.7.2",

8
pnpm-lock.yaml
View File

@ -260,8 +260,8 @@ dependencies:
specifier: ^9.3.0
version: 9.3.0(postcss@8.4.31)
posthog-js:
specifier: 1.136.5
version: 1.136.5
specifier: 1.136.6
version: 1.136.6
posthog-js-lite:
specifier: 3.0.0
version: 3.0.0
@ -17564,8 +17564,8 @@ packages:
resolution: {integrity: sha512-dyajjnfzZD1tht4N7p7iwf7nBnR1MjVaVu+MKr+7gBgA39bn28wizCIJZztZPtHy4PY0YwtSGgwfBCuG/hnHgA==}
dev: false
/posthog-js@1.136.5:
resolution: {integrity: sha512-jLmR9HX7/zR/EfJ+7Fl6ivvBKJdmaFiB8mhdEITIPWpXVgGRvp3u5JuvlNXPW9r1pfux8qoPJCtsqHP+uv73gw==}
/posthog-js@1.136.6:
resolution: {integrity: sha512-gy20/2l7pnJ6/OO9o8D662nzRqfQRnmV3EK5jL8rMyOCSJrx4g/9Ne9kdxRY3zbnmn1Mh2K/ZvyQRkM6gCHxqA==}
dependencies:
fflate: 0.4.8
preact: 10.22.0