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 regex matching option #17738

Merged
merged 6 commits into from
Oct 4, 2023
Merged

feat(surveys): Add regex matching option #17738

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a30f46f
feat(surveys): Add regex matching option
neilkakkar Oct 3, 2023
96bf53a
Update UI snapshots for `chromium` (2)
github-actions[bot] Oct 3, 2023
712501b
fix
neilkakkar Oct 3, 2023
635fa2a
Merge branch 'survey-regex' of github.com:PostHog/posthog into survey…
neilkakkar Oct 3, 2023
654e864
address
neilkakkar Oct 4, 2023
1dda4c4
merge
neilkakkar Oct 4, 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.
41 changes: 33 additions & 8 deletions frontend/src/scenes/surveys/Survey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
SurveyType,
LinkSurveyQuestion,
RatingSurveyQuestion,
SurveyUrlMatchType,
} from '~/types'
import { FlagSelector } from 'scenes/early-access-features/EarlyAccessFeature'
import { IconCancel, IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
Expand All @@ -31,7 +32,13 @@ import { SurveyAppearance } from './SurveyAppearance'
import { SurveyAPIEditor } from './SurveyAPIEditor'
import { featureFlagLogic as enabledFeaturesLogic } from 'lib/logic/featureFlagLogic'
import { featureFlagLogic } from 'scenes/feature-flags/featureFlagLogic'
import { defaultSurveyFieldValues, defaultSurveyAppearance, SurveyQuestionLabel, NewSurvey } from './constants'
import {
defaultSurveyFieldValues,
defaultSurveyAppearance,
SurveyQuestionLabel,
NewSurvey,
SurveyUrlMatchTypeLabels,
} from './constants'
import { FEATURE_FLAGS } from 'lib/constants'
import { FeatureFlagReleaseConditions } from 'scenes/feature-flags/FeatureFlagReleaseConditions'

Expand Down Expand Up @@ -346,12 +353,27 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
<Field name="conditions">
{({ value, onChange }) => (
<>
<PureField label="URL contains:">
<LemonInput
value={value?.url}
onChange={(urlVal) => onChange({ ...value, url: urlVal })}
placeholder="ex: https://app.posthog.com"
/>
<PureField label="URL targeting">
<div className="flex flex-row gap-2 items-center">
URL
<LemonSelect
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This won't work for users unless they upgrade to latest posthog-js, so maybe we can include some sort of tooltip or message somewhere about it? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah makes sense, added message and validation

image

value={value?.urlMatchType || SurveyUrlMatchType.Contains}
onChange={(matchTypeVal) => {
onChange({ ...value, urlMatchType: matchTypeVal })
}}
data-attr="survey-url-matching-type"
options={Object.keys(SurveyUrlMatchTypeLabels).map((key) => ({
label: SurveyUrlMatchTypeLabels[key],
value: key,
}))}
/>
<LemonInput
value={value?.url}
onChange={(urlVal) => onChange({ ...value, url: urlVal })}
placeholder="ex: https://app.posthog.com"
fullWidth
/>
</div>
</PureField>
<PureField label="Selector matches:">
<LemonInput
Expand Down Expand Up @@ -506,7 +528,10 @@ export function SurveyReleaseSummary({
{survey.conditions?.url && (
<div className="flex flex-col font-medium gap-1">
<div className="flex-row">
<span>URL contains:</span>{' '}
<span>
URL{' '}
{SurveyUrlMatchTypeLabels[survey.conditions?.urlMatchType || SurveyUrlMatchType.Contains]}:
</span>{' '}
<span className="simple-tag tag-light-blue text-primary-alt">{survey.conditions.url}</span>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/surveys/Surveys.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ export function Surveys(): JSX.Element {
{
title: 'Question type',
render: function RenderResponses(_, survey) {
return survey.questions.length === 1
return survey.questions?.length === 1
? SurveyQuestionLabel[survey.questions[0].type]
: 'Multiple'
},
Expand Down
9 changes: 8 additions & 1 deletion frontend/src/scenes/surveys/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FeatureFlagFilters, Survey, SurveyQuestionType, SurveyType } from '~/types'
import { FeatureFlagFilters, Survey, SurveyQuestionType, SurveyType, SurveyUrlMatchType } from '~/types'

export const SURVEY_EVENT_NAME = 'survey sent'
export const SURVEY_RESPONSE_PROPERTY = '$survey_response'
Expand All @@ -11,6 +11,12 @@ export const SurveyQuestionLabel = {
[SurveyQuestionType.MultipleChoice]: 'Multiple choice select',
}

export const SurveyUrlMatchTypeLabels = {
[SurveyUrlMatchType.Contains]: 'contains',
[SurveyUrlMatchType.Regex]: 'matches regex',
[SurveyUrlMatchType.Exact]: 'matches exactly',
neilkakkar marked this conversation as resolved.
Show resolved Hide resolved
}

export const defaultSurveyAppearance = {
backgroundColor: 'white',
textColor: 'black',
Expand All @@ -23,6 +29,7 @@ export const defaultSurveyAppearance = {
placeholder: '',
position: 'right',
thankYouMessageHeader: 'Thank you for your feedback!',
borderColor: '#c9c6c6',
}

export const defaultSurveyFieldValues = {
Expand Down
14 changes: 13 additions & 1 deletion frontend/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2089,7 +2089,13 @@ export interface Survey {
linked_flag: FeatureFlagBasicType | null
targeting_flag: FeatureFlagBasicType | null
targeting_flag_filters: Pick<FeatureFlagFilters, 'groups'> | undefined
conditions: { url: string; selector: string; is_headless?: boolean; seenSurveyWaitPeriodInDays?: number } | null
conditions: {
url: string
selector: string
is_headless?: boolean
seenSurveyWaitPeriodInDays?: number
urlMatchType?: SurveyUrlMatchType
} | null
appearance: SurveyAppearance
questions: (BasicSurveyQuestion | LinkSurveyQuestion | RatingSurveyQuestion | MultipleSurveyQuestion)[]
created_at: string
Expand All @@ -2100,6 +2106,12 @@ export interface Survey {
remove_targeting_flag?: boolean
}

export enum SurveyUrlMatchType {
Exact = 'exact',
Contains = 'contains',
Regex = 'regex',
}

export enum SurveyType {
Popover = 'popover',
Button = 'button',
Expand Down