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.

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): some small UI polishing for the survey form editor #22496

Merged
merged 9 commits into from
May 24, 2024

Conversation

dmarticus
Copy link
Contributor

Problem

This PR partially closes #22283, this covers points 1, 2, 3, and 5 (point 4 is a more involved bit of code that requires interop with posthog-js, so that will be handled in a separate PR).

Please find the specific changes below:

Changes

  1. I added a tooltip explaining some information about the survey wait period and how it has a caveat with single browser/anonymous browing sessions.
image
  1. I made some changes to the condition summary at the end.

Before (no conditions applied)

image

After (no conditions applied)

image

Before (conditions applied)

image

After (conditions applied)

image

I think my changes improve the overall copy and effectiveness of this summary section.

  1. Fixed this. Was just an oversight from previous implementation (see my comment in the code)

Before:

2024-05-14 16 30 00

After:

2024-05-23 16 41 18

  1. Reduced the copy and shrunk the size of the number box. Looks better now

Before:

image

After:

image

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Does this work well for both Cloud and self-hosted?

Yeah

How did you test this code?

I didn't really change any contracts or functionality, mostly just copy and UI changes. See the images for what I did specifically. Low-risk change IMO.

@@ -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'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

renamed this since it felt more accurate to reflect the new name of the header.

Comment on lines +491 to +492
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."
>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I kinda just fired from the hip on this copy, open to suggestions if folks have any.

Copy link
Collaborator

@neilkakkar neilkakkar May 24, 2024

Choose a reason for hiding this comment

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

this is a bug [well, the same user identity switching browsers bit] 😅 , @Phanatic we found yet another candidate for the internal_targeting_flag so this works cross-browser.

With a different anonymous user, absolutely makes sense.

@@ -67,6 +67,7 @@ export const defaultSurveyFieldValues = {
scale: 10,
lowerBoundLabel: 'Unlikely',
upperBoundLabel: 'Very likely',
buttonText: 'Submit',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this was the fix for issue (3) from the description; we just missed a default.

@dmarticus dmarticus requested a review from a team May 23, 2024 23:44
Copy link
Contributor

github-actions bot commented May 23, 2024

Size Change: +58 B (+0.01%)

Total Size: 1.03 MB

ℹ️ View Unchanged
Filename Size Change
frontend/dist/toolbar.js 1.03 MB +58 B (+0.01%)

compressed-size-action

@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

9 snapshot changes in total. 0 added, 9 modified, 0 deleted:

  • chromium: 0 added, 9 modified, 0 deleted (diff for shard 2)
  • webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@@ -121,11 +121,16 @@ export function SurveyReleaseSummary({
survey: Survey | NewSurvey
targetingFlagFilters?: FeatureFlagFilters
}): JSX.Element {
const hasConditions = survey.conditions?.url || survey.conditions?.selector
Copy link
Collaborator

Choose a reason for hiding this comment

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

For a bonus, would be cool if we can add a line for the wait period here as well, since technically if wait period is set it may not show to everyone.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ooh, great context! Will add.

Copy link
Collaborator

Choose a reason for hiding this comment

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

It also requires adding a bit of text, right now I think when wait period is set the summary shows up empty 😅

Copy link
Contributor Author

Choose a reason for hiding this comment

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

oh man, I'm so sorry I missed that. Out of character for me; I should've double-checked. Here's a fix: #22532

Copy link
Collaborator

@neilkakkar neilkakkar left a comment

Choose a reason for hiding this comment

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

Nicely done!

@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

  • chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
  • webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

  • chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
  • webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@dmarticus dmarticus merged commit 39f09d7 into master May 24, 2024
83 checks passed
@dmarticus dmarticus deleted the feat/survey-editor-form-improvements branch May 24, 2024 15:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Survey form editor UI improvements
3 participants