feat(surveys): Custom and tab widget (#19223)

* add widget to surveys UI * add widget to survey appearance * add beta tag and flag * fix template titles * Update UI snapshots for `chromium` (2) * migration for type * migration file * move widget customization into customization panel * fix migration conflict --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Dec 13, 2023 · 255f6b1 · 255f6b1
1 parent 74a06f1
commit 255f6b1
Show file tree

Hide file tree

Showing 17 changed files with 400 additions and 163 deletions.
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-appearance-section.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-appearance-section.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-presentation-section.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-presentation-section.png
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
@@ -185,6 +185,7 @@ export const FEATURE_FLAGS = {
     NETWORK_PAYLOAD_CAPTURE: 'network-payload-capture', // owner: #team-replay
     FEATURE_FLAG_COHORT_CREATION: 'feature-flag-cohort-creation', // owner: @neilkakkar #team-feature-success
     INSIGHT_HORIZONTAL_CONTROLS: 'insight-horizontal-controls', // owner: @benjackwhite
+    SURVEYS_WIDGETS: 'surveys-widgets', // owner: @liyiy
     SCHEDULED_CHANGES_FEATURE_FLAGS: 'scheduled-changes-feature-flags', // owner: @jurajmajerik #team-feature-success
     ALWAYS_SHOW_SEEKBAR_PREVIEW: 'always-show-seekbar-preview', // owner: #team-replay
     SESSION_REPLAY_MOBILE: 'session-replay-mobile', // owner: #team-replay

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeSurvey.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeSurvey.tsx
@@ -78,7 +78,7 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeSurveyAttribute
 
                                     <div className="w-full flex flex-col items-center">
                                         <SurveyAppearance
-                                            type={survey.questions[0].type}
+                                            surveyType={survey.type}
                                             surveyQuestionItem={survey.questions[0]}
                                             appearance={survey.appearance || defaultSurveyAppearance}
                                         />

diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss
@@ -303,3 +303,22 @@
 .bottom-section {
     margin-top: 14px;
 }
+
+.ph-survey-widget-tab {
+    position: fixed;
+    top: 50%;
+    right: 0;
+    z-index: 9999999;
+    min-width: 40px;
+    padding: 8px 12px;
+    font-weight: 500;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 3px 3px 0 0;
+    transform: rotate(-90deg) translate(0, -100%);
+    transform-origin: right top;
+}
+
+.ph-survey-widget-tab:hover {
+    padding-bottom: 13px;
+}