From 9587f28ec81c11ee4ecada3f681e9c7f4bc9b57c Mon Sep 17 00:00:00 2001 From: Li Yi Yu Date: Tue, 14 Nov 2023 13:38:01 -0500 Subject: [PATCH 1/9] add button text field to question --- .../src/scenes/surveys/SurveyAppearance.tsx | 58 +++++++++---------- frontend/src/scenes/surveys/SurveyEdit.tsx | 37 ++++++++---- frontend/src/types.ts | 1 + 3 files changed, 55 insertions(+), 41 deletions(-) diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx index 3f1fa5c4074b7..8bbc21651db6a 100644 --- a/frontend/src/scenes/surveys/SurveyAppearance.tsx +++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx @@ -7,6 +7,8 @@ import { SurveyQuestionType, MultipleSurveyQuestion, AvailableFeature, + BasicSurveyQuestion, + LinkSurveyQuestion, } from '~/types' import { defaultSurveyAppearance } from './constants' import { @@ -91,7 +93,6 @@ export function SurveyAppearance({ appearance, surveyQuestionItem, description, - link, preview, }: SurveyAppearanceProps): JSX.Element { return ( @@ -101,8 +102,6 @@ export function SurveyAppearance({ preview={preview} ratingSurveyQuestion={surveyQuestionItem as RatingSurveyQuestion} appearance={appearance} - question={question} - description={description} onSubmit={() => undefined} /> )} @@ -121,11 +120,8 @@ export function SurveyAppearance({ surveyQuestionItem.type === SurveyQuestionType.Link) && ( undefined} /> )} @@ -234,20 +230,14 @@ export function Customization({ appearance, surveyQuestionItem, onAppearanceChan // This should be synced to the UI of the surveys app plugin export function BaseAppearance({ - type, question, appearance, onSubmit, - description, - link, preview, }: { - type: SurveyQuestionType - question: string + question: BasicSurveyQuestion | LinkSurveyQuestion appearance: SurveyAppearanceType onSubmit: () => void - description?: string | null - link?: string | null preview?: boolean }): JSX.Element { const [textColor, setTextColor] = useState('black') @@ -284,14 +274,20 @@ export function BaseAppearance({ )}
-
+
{/* 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 && ( -
+ {question.description && ( +
)} - {type === SurveyQuestionType.Open && ( + {question.type === SurveyQuestionType.Open && (