feat(surveys): Improved survey creation flow (#17902)

* create edit survey components for feature flagging * visual type picker * organization * move previews into tooltips * targeting * sync preview and accordion * better presentation view * Update UI snapshots for `chromium` (2) * fix migration file lint * Update UI snapshots for `chromium` (2) * make collapse panel header easier to see * label question index * more fixes * update * surveys new creation flow flag * fix linter spacing * form appearance file * Update UI snapshots for `chromium` (2) * fix * fix * Update UI snapshots for `chromium` (2) * fix targeting * fix cypress tests * black --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Li Yi Yu <[email protected]> Co-authored-by: Neil Kakkar <[email protected]>
PostHog · Oct 16, 2023 · 27e183b · 27e183b
1 parent e94ea2a
commit 27e183b
Show file tree

Hide file tree

Showing 26 changed files with 1,899 additions and 768 deletions.
diff --git a/cypress/e2e/surveys.cy.ts b/cypress/e2e/surveys.cy.ts
@@ -114,6 +114,9 @@ describe('Surveys', () => {
         cy.get('[data-attr="survey-preview"]').find('form').find('.ratings-number').should('have.length', 5)
 
         // add targeting filters
+        cy.get('.LemonCollapsePanel').contains('Targeting').click()
+        cy.contains('All users').click()
+        cy.get('.Popover__content').contains('Users who match').click()
         cy.contains('Add user targeting').click()
 
         // select the first property
@@ -156,6 +159,7 @@ describe('Surveys', () => {
         cy.get('.Popover__content').contains('Edit').click()
 
         // remove user targeting properties
+        cy.get('.LemonCollapsePanel').contains('Targeting').click()
         cy.contains('Remove all user properties').click()
 
         // save

diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -30,6 +30,7 @@ beforeEach(() => {
             decideResponse({
                 // set feature flags here e.g.
                 // 'toolbar-launch-side-action': true,
+                'surveys-new-creation-flow': true,
                 'surveys-results-visualizations': true,
                 'auto-redirect': true,
                 notebooks: true,

diff --git a/ee/clickhouse/views/test/test_clickhouse_experiments.py b/ee/clickhouse/views/test/test_clickhouse_experiments.py
@@ -119,7 +119,6 @@ def test_creating_updating_basic_experiment(self):
         self.assertEqual(experiment.end_date.strftime("%Y-%m-%dT%H:%M"), end_date)
 
     def test_adding_behavioral_cohort_filter_to_experiment_fails(self):
-
         cohort = Cohort.objects.create(
             team=self.team,
             filters={
@@ -739,7 +738,6 @@ def test_creating_experiment_with_group_aggregation_parameter(self):
         self.assertEqual(created_ff.filters["aggregation_group_type_index"], 0)
 
     def test_used_in_experiment_is_populated_correctly_for_feature_flag_list(self) -> None:
-
         ff_key = "a-b-test"
         response = self.client.post(
             f"/api/projects/{self.team.id}/experiments/",
@@ -945,7 +943,6 @@ def test_create_experiment_updates_feature_flag_cache(self):
 class ClickhouseTestFunnelExperimentResults(ClickhouseTestMixin, APILicensedTest):
     @snapshot_clickhouse_queries
     def test_experiment_flow_with_event_results(self):
-
         journeys_for(
             {
                 "person1": [
@@ -1031,7 +1028,6 @@ def test_experiment_flow_with_event_results(self):
 
     @snapshot_clickhouse_queries
     def test_experiment_flow_with_event_results_with_hogql_aggregation(self):
-
         journeys_for(
             {
                 "person1": [
@@ -1150,7 +1146,6 @@ def test_experiment_flow_with_event_results_with_hogql_aggregation(self):
         self.assertAlmostEqual(response_data["expected_loss"], 1, places=2)
 
     def test_experiment_flow_with_event_results_cached(self):
-
         journeys_for(
             {
                 "person1": [
@@ -1248,7 +1243,6 @@ def test_experiment_flow_with_event_results_cached(self):
 
     @snapshot_clickhouse_queries
     def test_experiment_flow_with_event_results_and_events_out_of_time_range_timezones(self):
-
         journeys_for(
             {
                 "person1": [

diff --git a/ee/session_recordings/session_recording_extensions.py b/ee/session_recordings/session_recording_extensions.py
@@ -25,6 +25,7 @@
 
 MINIMUM_AGE_FOR_RECORDING = timedelta(hours=24)
 
+
 # TODO rename this...
 def save_recording_with_new_content(recording: SessionRecording, content: str) -> str:
     if not settings.OBJECT_STORAGE_ENABLED:

diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey.png b/frontend/__snapshots__/scenes-app-surveys--new-survey.png
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -162,6 +162,7 @@ export const FEATURE_FLAGS = {
     WEBHOOKS_DENYLIST: 'webhooks-denylist', // owner: #team-pipeline
     SURVEYS_MULTIPLE_QUESTIONS: 'surveys-multiple-questions', // owner: @liyiy
     SURVEYS_RESULTS_VISUALIZATIONS: 'surveys-results-visualizations', // owner: @jurajmajerik
+    SURVEYS_NEW_CREATION_FLOW: 'surveys-new-creation-flow', // owner: @liyiy
     CONSOLE_RECORDING_SEARCH: 'console-recording-search', // owner: #team-monitoring
     PERSONS_HOGQL_QUERY: 'persons-hogql-query', // owner: @mariusandra
 } as const

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeSurvey.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeSurvey.tsx
@@ -88,8 +88,6 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeSurveyAttribute
                                                     ? survey.questions[0].link
                                                     : undefined
                                             }
-                                            readOnly={true}
-                                            onAppearanceChange={() => {}}
                                         />
                                     </div>
                                 </div>

diff --git a/frontend/src/scenes/surveys/EditSurvey.scss b/frontend/src/scenes/surveys/EditSurvey.scss
@@ -0,0 +1,9 @@
+.presentation-preview .CodeSnippet__actions {
+    display: none;
+}
+
+.SurveyForm {
+    .LemonCollapsePanel__header {
+        background: var(--border-light);
+    }
+}
diff --git a/frontend/src/scenes/surveys/EditSurveyNew.tsx b/frontend/src/scenes/surveys/EditSurveyNew.tsx
diff --git a/frontend/src/scenes/surveys/EditSurveyOld.tsx b/frontend/src/scenes/surveys/EditSurveyOld.tsx
diff --git a/frontend/src/scenes/surveys/Survey.tsx b/frontend/src/scenes/surveys/Survey.tsx
diff --git a/frontend/src/scenes/surveys/SurveyAPIEditor.tsx b/frontend/src/scenes/surveys/SurveyAPIEditor.tsx
@@ -8,7 +8,7 @@ export function SurveyAPIEditor({ survey }: { survey: Survey | NewSurvey }): JSX
         id: survey.id,
         name: survey.name,
         description: survey.description,
-        type: survey.type,
+        type: 'api',
         linked_flag_key: survey.linked_flag ? survey.linked_flag.key : null,
         targeting_flag_key: survey.targeting_flag ? survey.targeting_flag.key : null,
         questions: survey.questions,
@@ -18,11 +18,8 @@ export function SurveyAPIEditor({ survey }: { survey: Survey | NewSurvey }): JSX
     }
 
     return (
-        <div className="flex flex-col">
-            <h4 className="text-center">API survey response</h4>
-            <CodeSnippet wrap language={Language.JSON}>
-                {JSON.stringify(apiSurvey, null, 2)}
-            </CodeSnippet>
-        </div>
+        <CodeSnippet wrap language={Language.JSON}>
+            {JSON.stringify(apiSurvey, null, 2)}
+        </CodeSnippet>
     )
 }