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(surveys): Add question html support #17847

Merged
merged 4 commits into from
Oct 10, 2023
Merged

feat(surveys): Add question html support #17847

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec256cf
feat(surveys): Add question html support
neilkakkar Oct 6, 2023
0aafeae
Update UI snapshots for `chromium` (2)
github-actions[bot] Oct 6, 2023
b4884fb
fix things
neilkakkar Oct 9, 2023
cf44444
merge
neilkakkar Oct 9, 2023
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
Binary file modified frontend/__snapshots__/scenes-app-surveys--new-survey.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
86 changes: 80 additions & 6 deletions frontend/src/scenes/surveys/Survey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ import { Form, Group } from 'kea-forms'
import { PageHeader } from 'lib/components/PageHeader'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import {
LemonBanner,
LemonButton,
LemonCheckbox,
LemonCollapse,
LemonDivider,
LemonInput,
LemonSelect,
LemonTabs,
LemonTextArea,
Link,
} from '@posthog/lemon-ui'
Expand All @@ -36,6 +38,7 @@ import { featureFlagLogic } from 'scenes/feature-flags/featureFlagLogic'
import { defaultSurveyFieldValues, defaultSurveyAppearance, NewSurvey, SurveyUrlMatchTypeLabels } from './constants'
import { FEATURE_FLAGS } from 'lib/constants'
import { FeatureFlagReleaseConditions } from 'scenes/feature-flags/FeatureFlagReleaseConditions'
import { CodeEditor } from 'lib/components/CodeEditors'

export const scene: SceneExport = {
component: SurveyComponent,
Expand All @@ -62,9 +65,16 @@ export function SurveyComponent({ id }: { id?: string } = {}): JSX.Element {
}

export function SurveyForm({ id }: { id: string }): JSX.Element {
const { survey, surveyLoading, isEditingSurvey, hasTargetingFlag, urlMatchTypeValidationError } =
useValues(surveyLogic)
const { loadSurvey, editingSurvey, setSurveyValue, setDefaultForQuestionType } = useActions(surveyLogic)
const {
survey,
surveyLoading,
isEditingSurvey,
hasTargetingFlag,
urlMatchTypeValidationError,
writingHTMLDescription,
} = useValues(surveyLogic)
const { loadSurvey, editingSurvey, setSurveyValue, setDefaultForQuestionType, setWritingHTMLDescription } =
useActions(surveyLogic)
const { featureFlags } = useValues(enabledFeaturesLogic)

return (
Expand Down Expand Up @@ -147,7 +157,7 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
</div>
),
content: (
<>
<div className="space-y-2">
<Field name="type" label="Question type" className="max-w-60">
<LemonSelect
onSelect={(newType) => {
Expand Down Expand Up @@ -202,7 +212,71 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
</Field>
)}
<Field name="description" label="Question description (optional)">
<LemonTextArea value={question.description || ''} minRows={2} />
{({ value, onChange }) => (
<>
<LemonTabs
activeKey={writingHTMLDescription ? 'html' : 'text'}
onChange={(key) =>
setWritingHTMLDescription(key === 'html')
}
tabs={[
{
key: 'text',
label: (
<span className="text-sm">Text</span>
),
content: (
<LemonTextArea
data-attr="survey-description"
minRows={2}
value={value}
onChange={(v) => onChange(v)}
/>
),
},
{
key: 'html',
label: (
<span className="text-sm">HTML</span>
),
content: (
<div>
<CodeEditor
className="border"
language="html"
value={value}
onChange={(v) =>
onChange(v ?? '')
}
height={150}
options={{
minimap: { enabled: false },
wordWrap: 'on',
scrollBeyondLastLine: false,
automaticLayout: true,
fixedOverflowWidgets: true,
lineNumbers: 'off',
glyphMargin: false,
folding: false,
}}
/>
</div>
),
},
]}
/>
{question.description &&
question.description
?.toLowerCase()
.includes('<script') && (
<LemonBanner type="warning">
Scripts won't run in the survey popup. Use
the API question mode to run your own
scripts in surveys.
</LemonBanner>
)}
</>
)}
</Field>
{question.type === SurveyQuestionType.Rating && (
<div className="flex flex-col gap-2">
Expand Down Expand Up @@ -317,7 +391,7 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
</Field>
</div>
)}
</>
</div>
),
},
]}
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/scenes/surveys/SurveyAppearance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { useValues } from 'kea'
import { useEffect, useRef, useState } from 'react'
import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { sanitize } from 'dompurify'

interface SurveyAppearanceProps {
type: SurveyQuestionType
Expand Down Expand Up @@ -270,7 +271,12 @@ function BaseAppearance({
</div>
<div className="question-textarea-wrapper">
<div className="survey-question">{question}</div>
{description && <div className="description">{description}</div>}
{/* Using dangerouslySetInnerHTML is safe here, because it's taking the user's input and showing it to the same user.
They can try passing in arbitrary scripts, but it would show up only for them, so it's like trying to XSS yourself, where
you already have all the data. Furthermore, sanitization should catch all obvious attempts */}
{description && (
<div className="description" dangerouslySetInnerHTML={{ __html: sanitize(description) }} />
)}
{type === SurveyQuestionType.Open && (
<textarea
style={{
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/scenes/surveys/surveyLogic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export const surveyLogic = kea<surveyLogicType>([
archiveSurvey: true,
resumeSurvey: true,
setCurrentQuestionIndexAndType: (idx: number, type: SurveyQuestionType) => ({ idx, type }),
setWritingHTMLDescription: (writingHTML: boolean) => ({ writingHTML }),
}),
loaders(({ props, actions }) => ({
survey: {
Expand Down Expand Up @@ -199,6 +200,12 @@ export const surveyLogic = kea<surveyLogicType>([
setCurrentQuestionIndexAndType: (_, { idx, type }) => ({ idx, type }),
},
],
writingHTMLDescription: [
false,
{
setWritingHTMLDescription: (_, { writingHTML }) => writingHTML,
},
],
}),
selectors({
isSurveyRunning: [
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
"d3": "^7.8.2",
"d3-sankey": "^0.12.3",
"dayjs": "^1.10.7",
"dompurify": "^3.0.6",
"esbuild": "^0.14.54",
"esbuild-plugin-less": "^1.1.7",
"esbuild-sass-plugin": "^1.8.2",
Expand Down Expand Up @@ -201,6 +202,7 @@
"@types/clone": "^2.1.1",
"@types/d3": "^7.4.0",
"@types/d3-sankey": "^0.12.1",
"@types/dompurify": "^3.0.3",
"@types/image-blob-reduce": "^4.1.1",
"@types/jest": "^29.2.3",
"@types/jest-image-snapshot": "^6.1.0",
Expand Down
22 changes: 21 additions & 1 deletion pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading