fix(surveys): update in app docs info (#17819)

* fix(surveys): update in app docs info * Update UI snapshots for `chromium` (2) * update * fix link --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Oct 5, 2023 · 12efd73 · 12efd73
1 parent bf8dcd7
commit 12efd73
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 46 deletions.
diff --git a/frontend/__snapshots__/scenes-app-surveys--surveys-list.png b/frontend/__snapshots__/scenes-app-surveys--surveys-list.png
diff --git a/frontend/src/scenes/surveys/SurveyView.tsx b/frontend/src/scenes/surveys/SurveyView.tsx
@@ -1,7 +1,6 @@
 import { TZLabel } from '@posthog/apps-common'
-import { LemonButton, LemonDivider, LemonSelect } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, LemonSelect, Link } from '@posthog/lemon-ui'
 import { useValues, useActions } from 'kea'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
 import { EditableField } from 'lib/components/EditableField/EditableField'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
@@ -26,7 +25,6 @@ import {
 } from '~/types'
 import { SurveyAPIEditor } from './SurveyAPIEditor'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { NodeKind } from '~/queries/schema'
 import { dayjs } from 'lib/dayjs'
 import { defaultSurveyAppearance, SURVEY_EVENT_NAME } from './constants'
@@ -205,45 +203,21 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                             />
                                         </div>
                                         <div className="w-full flex flex-col items-center">
-                                            <div className="border rounded p-4 w-full">
-                                                {survey.type !== SurveyType.API ? (
-                                                    showSurveyAppWarning && (
-                                                        <div className="flex flex-col">
-                                                            <div className="flex gap-2 items-start">
-                                                                1. Add the following option to your PostHog instance:
-                                                            </div>
-                                                            <CodeSnippet language={Language.JavaScript} wrap>
-                                                                {OPT_IN_SNIPPET}
-                                                            </CodeSnippet>
-                                                            <div className="flex items-center">
-                                                                2.{' '}
-                                                                <LemonButton
-                                                                    onClick={() =>
-                                                                        surveyPlugin?.id && editPlugin(surveyPlugin.id)
-                                                                    }
-                                                                >
-                                                                    Enable and save the surveys app
-                                                                </LemonButton>
-                                                            </div>
-                                                        </div>
-                                                    )
-                                                ) : (
-                                                    <span className="font-medium">
-                                                        See the documentation below on API survey setup.
-                                                    </span>
-                                                )}
-                                                <div>
-                                                    Need more information?{' '}
-                                                    <a
-                                                        data-attr="survey-doc-link"
-                                                        target="_blank"
-                                                        rel="noopener"
-                                                        href="https://posthog.com/docs/surveys/manual"
-                                                    >
-                                                        Check the docs <IconOpenInNew />
-                                                    </a>
+                                            {survey.type === SurveyType.API && (
+                                                <div className="border rounded p-4">
+                                                    <div className="w-full flex flex-row gap-1 items-center">
+                                                        Learn how to set up API surveys{' '}
+                                                        <Link
+                                                            data-attr="survey-doc-link"
+                                                            target="_blank"
+                                                            to="https://posthog.com/docs/surveys/implementing-custom-surveys"
+                                                            targetBlankIcon
+                                                        >
+                                                            in the docs
+                                                        </Link>
+                                                    </div>
                                                 </div>
-                                            </div>
+                                            )}
                                             {survey.type !== SurveyType.API ? (
                                                 <div className="mt-6">
                                                     <SurveyAppearance
@@ -347,11 +321,6 @@ export function SurveyResult({ disableEventsTable }: { disableEventsTable?: bool
     )
 }
 
-const OPT_IN_SNIPPET = `posthog.init('YOUR_PROJECT_API_KEY', {
-    api_host: 'YOUR API HOST',
-    opt_in_site_apps: true // <--- Add this line
-})`
-
 function SurveyNPSResults({ survey }: { survey: Survey }): JSX.Element {
     return (
         <Query

diff --git a/frontend/src/scenes/surveys/Surveys.tsx b/frontend/src/scenes/surveys/Surveys.tsx
@@ -94,6 +94,20 @@ export function Surveys(): JSX.Element {
                         </LemonButton>
                     </>
                 }
+                caption={
+                    <>
+                        Check out our
+                        <Link
+                            data-attr="survey-help"
+                            to="https://posthog.com/docs/surveys?utm_medium=in-product&utm_campaign=new-survey"
+                            target="_blank"
+                        >
+                            {' '}
+                            surveys docs
+                        </Link>{' '}
+                        to learn more.
+                    </>
+                }
             />
             <LemonTabs
                 activeKey={tab}