feat(surveys): some small UI polishing for the survey form editor (#2…

…2496)

* added a survey wait period tooltip

* more sensible display conditions summary

* easy fix for the missing buttonText defaults on the rating question

* copy change and a little text box magic makes this nice for monitor users

* Update UI snapshots for `chromium` (2)

* add a wait period condition

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/scenes/notebooks/Nodes/NotebookNodeSurvey.tsx

@@ -11,7 +11,7 @@ import { buildFlagContent } from './NotebookNodeFlag'
 import { surveyLogic } from 'scenes/surveys/surveyLogic'
 import { StatusTag } from 'scenes/surveys/Surveys'
 import { SurveyResult } from 'scenes/surveys/SurveyView'
-import { SurveyReleaseSummary } from 'scenes/surveys/Survey'
+import { SurveyDisplaySummary } from 'scenes/surveys/Survey'
 import { useEffect } from 'react'
 import { NotFound } from 'lib/components/NotFound'
 import { SurveyAppearancePreview } from 'scenes/surveys/SurveyAppearancePreview'
@@ -73,7 +73,7 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeSurveyAttribute
                             <>
                                 <LemonDivider className="my-0" />
                                 <div className="p-2">
-                                    <SurveyReleaseSummary
+                                    <SurveyDisplaySummary
                                         id={id}
                                         survey={survey}
                                         targetingFlagFilters={targetingFlagFilters}

frontend/src/scenes/surveys/Survey.tsx

@@ -86,7 +86,7 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
             <LemonDivider />
             <SurveyEdit />
             <LemonDivider />
-            <SurveyReleaseSummary id={id} survey={survey} targetingFlagFilters={targetingFlagFilters} />
+            <SurveyDisplaySummary id={id} survey={survey} targetingFlagFilters={targetingFlagFilters} />
             <LemonDivider />
             <div className="flex items-center gap-2 justify-end">
                 <LemonButton
@@ -112,7 +112,7 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
     )
 }
 
-export function SurveyReleaseSummary({
+export function SurveyDisplaySummary({
     id,
     survey,
     targetingFlagFilters,
@@ -121,11 +121,17 @@ export function SurveyReleaseSummary({
     survey: Survey | NewSurvey
     targetingFlagFilters?: FeatureFlagFilters
 }): JSX.Element {
+    const hasConditions =
+        survey.conditions?.url || survey.conditions?.selector || survey.conditions?.seenSurveyWaitPeriodInDays
+    const hasFeatureFlags = survey.linked_flag_id || targetingFlagFilters
+
     return (
         <div className="flex flex-col mt-2 gap-2">
-            <div className="font-semibold">Release conditions summary</div>
+            <div className="font-semibold">Display conditions summary</div>
             <span className="text-muted">
-                By default surveys will be released to everyone unless targeting options are set.
+                {hasConditions || hasFeatureFlags
+                    ? 'Surveys will be displayed to users that match the following conditions:'
+                    : 'Surveys will be displayed to everyone.'}
             </span>
             {survey.conditions?.url && (
                 <div className="flex flex-col font-medium gap-1">

frontend/src/scenes/surveys/SurveyEdit.tsx

@@ -486,7 +486,10 @@ export default function SurveyEdit(): JSX.Element {
                                                                 placeholder="ex: .className or #id"
                                                             />
                                                         </LemonField.Pure>
-                                                        <LemonField.Pure label="Survey wait period">
+                                                        <LemonField.Pure
+                                                            label="Survey wait period"
+                                                            info="Note that this condition will only apply to one browser for a given non-anonymous user.  If the user switches browsers or uses an incognito session, they could see this survey again."
+                                                        >
                                                             <div className="flex flex-row gap-2 items-center">
                                                                 <LemonCheckbox
                                                                     checked={!!value?.seenSurveyWaitPeriodInDays}
@@ -507,11 +510,10 @@ export default function SurveyEdit(): JSX.Element {
                                                                         }
                                                                     }}
                                                                 />
-                                                                Do not display this survey to users who have already
-                                                                seen a survey in the last
+                                                                Don't show to users who saw a survey within the last
                                                                 <LemonInput
                                                                     type="number"
-                                                                    size="small"
+                                                                    size="xsmall"
                                                                     min={0}
                                                                     value={value?.seenSurveyWaitPeriodInDays || NaN}
                                                                     onChange={(val) => {
@@ -527,7 +529,7 @@ export default function SurveyEdit(): JSX.Element {
                                                                             })
                                                                         }
                                                                     }}
-                                                                    className="w-16"
+                                                                    className="w-12"
                                                                 />{' '}
                                                                 days.
                                                             </div>

frontend/src/scenes/surveys/SurveyView.tsx

@@ -19,7 +19,7 @@ import { NodeKind } from '~/queries/schema'
 import { InsightType, PropertyFilterType, PropertyOperator, Survey, SurveyQuestionType, SurveyType } from '~/types'
 
 import { SURVEY_EVENT_NAME } from './constants'
-import { SurveyReleaseSummary } from './Survey'
+import { SurveyDisplaySummary } from './Survey'
 import { SurveyAPIEditor } from './SurveyAPIEditor'
 import { SurveyFormAppearance } from './SurveyFormAppearance'
 import { surveyLogic } from './surveyLogic'
@@ -227,7 +227,7 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                                 </>
                                             )}
                                             <LemonDivider />
-                                            <SurveyReleaseSummary
+                                            <SurveyDisplaySummary
                                                 id={id}
                                                 survey={survey}
                                                 targetingFlagFilters={targetingFlagFilters}

frontend/src/scenes/surveys/constants.tsx

@@ -67,6 +67,7 @@ export const defaultSurveyFieldValues = {
                 scale: 10,
                 lowerBoundLabel: 'Unlikely',
                 upperBoundLabel: 'Very likely',
+                buttonText: 'Submit',
             },
         ],
         appearance: {