chore: Add Flutter feature flags snippets (#19563)

PostHog · Jan 4, 2024 · dea3fb1 · dea3fb1
1 parent d37088d
commit dea3fb1
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -79,7 +79,7 @@ PostHog brings all the tools and data you need to build better products.
 ### Data and infrastructure tools
 
 - **Import and export your data:** Import from and export to the services that matter to you with [the PostHog CDP](https://posthog.com/docs/cdp)
-- **Ready-made libraries:** We’ve built libraries for [JavaScript](https://posthog.com/docs/integrations/js-integration), [Python](https://posthog.com/docs/integrations/python-integration), [Ruby](https://posthog.com/docs/integrations/ruby-integration), [Node](https://posthog.com/docs/integrations/node-integration), [Go](https://posthog.com/docs/integrations/go-integration), [Android](https://posthog.com/docs/integrations/android-integration), [iOS](https://posthog.com/docs/integrations/ios-integration), [PHP](https://posthog.com/docs/integrations/php-integration), [Flutter](https://posthog.com/docs/integrations/flutter-integration), [React Native](https://posthog.com/docs/integrations/react-native-integration), [Elixir](https://posthog.com/docs/integrations/elixir-integration), [Nim](https://github.com/Yardanico/posthog-nim), and an [API](https://posthog.com/docs/integrations/api) for anything else
+- **Ready-made libraries:** We’ve built libraries for [JavaScript](https://posthog.com/docs/libraries/js), [Python](https://posthog.com/docs/libraries/python), [Ruby](https://posthog.com/docs/libraries/ruby), [Node](https://posthog.com/docs/libraries/node), [Go](https://posthog.com/docs/libraries/go), [Android](https://posthog.com/docs/libraries/android), [iOS](https://posthog.com/docs/libraries/ios), [PHP](https://posthog.com/docs/libraries/php), [Flutter](https://posthog.com/docs/libraries/flutter), [React Native](https://posthog.com/docs/libraries/react-native), [Elixir](https://posthog.com/docs/libraries/elixir), [Nim](https://github.com/Yardanico/posthog-nim), and an [API](https://posthog.com/docs/api) for anything else
 - **Plays nicely with data warehouses:** import events or user data from your warehouse by writing a simple transformation plugin, and export data with pre-built apps - such as [BigQuery](https://posthog.com/apps/bigquery-export), [Redshift](https://posthog.com/apps/redshift-export), [Snowflake](https://posthog.com/apps/snowflake-export), and [S3](https://posthog.com/apps/s3-expo)
 
 [Read a full list of PostHog features](https://posthog.com/product).

diff --git a/cypress/e2e/featureFlags.cy.ts b/cypress/e2e/featureFlags.cy.ts
@@ -28,7 +28,7 @@ describe('Feature Flags', () => {
         cy.get('[data-attr=feature-flag-doc-link]').should(
             'have.attr',
             'href',
-            'https://posthog.com/docs/integrations/php-integration?utm_medium=in-product&utm_campaign=feature-flag#feature-flags'
+            'https://posthog.com/docs/libraries/php?utm_medium=in-product&utm_campaign=feature-flag#feature-flags'
         )
 
         // select "add filter" and "property"

diff --git a/frontend/src/scenes/feature-flags/FeatureFlagCodeOptions.tsx b/frontend/src/scenes/feature-flags/FeatureFlagCodeOptions.tsx
@@ -4,6 +4,7 @@ import {
     AndroidSnippet,
     APISnippet,
     FeatureFlagSnippet,
+    FlutterSnippet,
     GolangSnippet,
     iOSSnippet,
     JSBootstrappingSnippet,
@@ -39,28 +40,28 @@ export enum LibraryType {
 export const OPTIONS: InstructionOption[] = [
     {
         value: 'JavaScript',
-        documentationLink: `${DOC_BASE_URL}integrations/js-integration${UTM_TAGS}`,
+        documentationLink: `${DOC_BASE_URL}libraries/js${UTM_TAGS}`,
         Snippet: JSSnippet,
         type: LibraryType.Client,
         key: SDKKey.JS_WEB,
     },
     {
         value: 'Android',
-        documentationLink: `${DOC_BASE_URL}integrate/client/android${UTM_TAGS}`,
+        documentationLink: `${DOC_BASE_URL}libraries/android${UTM_TAGS}`,
         Snippet: AndroidSnippet,
         type: LibraryType.Client,
         key: SDKKey.ANDROID,
     },
     {
         value: 'iOS',
-        documentationLink: `${DOC_BASE_URL}integrate/client/ios${UTM_TAGS}`,
+        documentationLink: `${DOC_BASE_URL}libraries/ios${UTM_TAGS}`,
         Snippet: iOSSnippet,
         type: LibraryType.Client,
         key: SDKKey.IOS,
     },
     {
         value: 'React Native',
-        documentationLink: `${DOC_BASE_URL}integrate/client/react-native${UTM_TAGS}`,
+        documentationLink: `${DOC_BASE_URL}libraries/react-native${UTM_TAGS}`,
         Snippet: ReactNativeSnippet,
         type: LibraryType.Client,
         key: SDKKey.REACT_NATIVE,
@@ -74,21 +75,21 @@ export const OPTIONS: InstructionOption[] = [
     },
     {
         value: 'Node.js',
-        documentationLink: `${DOC_BASE_URL}integrations/node-integration${UTM_TAGS}`,
+        documentationLink: `${DOC_BASE_URL}libraries/node${UTM_TAGS}`,
         Snippet: NodeJSSnippet,
         type: LibraryType.Server,
         key: SDKKey.NODE_JS,
     },
     {
         value: 'Python',
-        documentationLink: `${DOC_BASE_URL}integrations/python-integration${UTM_TAGS}`,
+        documentationLink: `${DOC_BASE_URL}libraries/python${UTM_TAGS}`,
         Snippet: PythonSnippet,
         type: LibraryType.Server,
         key: SDKKey.PYTHON,
     },
     {
         value: 'Ruby',
-        documentationLink: `${DOC_BASE_URL}integrations/ruby-integration${UTM_TAGS}`,
+        documentationLink: `${DOC_BASE_URL}libraries/ruby${UTM_TAGS}`,
         Snippet: RubySnippet,
         type: LibraryType.Server,
         key: SDKKey.RUBY,
@@ -102,18 +103,25 @@ export const OPTIONS: InstructionOption[] = [
     },
     {
         value: 'PHP',
-        documentationLink: `${DOC_BASE_URL}integrations/php-integration${UTM_TAGS}`,
+        documentationLink: `${DOC_BASE_URL}libraries/php${UTM_TAGS}`,
         Snippet: PHPSnippet,
         type: LibraryType.Server,
         key: SDKKey.PHP,
     },
     {
         value: 'Go',
-        documentationLink: `${DOC_BASE_URL}integrations/go-integration${UTM_TAGS}`,
+        documentationLink: `${DOC_BASE_URL}libraries/go${UTM_TAGS}`,
         Snippet: GolangSnippet,
         type: LibraryType.Server,
         key: SDKKey.GO,
     },
+    {
+        value: 'Flutter',
+        documentationLink: `${DOC_BASE_URL}libraries/flutter${UTM_TAGS}`,
+        Snippet: FlutterSnippet,
+        type: LibraryType.Client,
+        key: SDKKey.FLUTTER,
+    },
 ]
 
 export const LOCAL_EVALUATION_LIBRARIES: string[] = [SDKKey.NODE_JS, SDKKey.PYTHON, SDKKey.RUBY, SDKKey.PHP, SDKKey.GO]

diff --git a/frontend/src/scenes/feature-flags/FeatureFlagSnippets.tsx b/frontend/src/scenes/feature-flags/FeatureFlagSnippets.tsx
@@ -336,6 +336,17 @@ export function AndroidSnippet({ flagKey, multivariant, payload }: FeatureFlagSn
     )
 }
 
+export function FlutterSnippet({ flagKey }: FeatureFlagSnippet): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Dart} wrap>
+            {`if (await Posthog().isFeatureEnabled('${flagKey}') ?? false) {
+    // do something
+}
+            `}
+        </CodeSnippet>
+    )
+}
+
 export function iOSSnippet({ flagKey, multivariant, payload }: FeatureFlagSnippet): JSX.Element {
     const clientSuffix = 'posthog.'
 

diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
@@ -3,6 +3,7 @@ import { SDKInstructionsMap, SDKKey } from '~/types'
 import {
     FeatureFlagsAndroidInstructions,
     FeatureFlagsAPIInstructions,
+    FeatureFlagsFlutterInstructions,
     FeatureFlagsGoInstructions,
     FeatureFlagsIOSInstructions,
     FeatureFlagsJSWebInstructions,
@@ -22,11 +23,12 @@ export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.IOS]: FeatureFlagsIOSInstructions,
     [SDKKey.REACT_NATIVE]: FeatureFlagsRNInstructions,
     [SDKKey.ANDROID]: FeatureFlagsAndroidInstructions,
+    [SDKKey.FLUTTER]: FeatureFlagsFlutterInstructions,
     [SDKKey.NODE_JS]: FeatureFlagsNodeInstructions,
     [SDKKey.PYTHON]: FeatureFlagsPythonInstructions,
     [SDKKey.RUBY]: FeatureFlagsRubyInstructions,
     [SDKKey.PHP]: FeatureFlagsPHPInstructions,
     [SDKKey.GO]: FeatureFlagsGoInstructions,
     [SDKKey.API]: FeatureFlagsAPIInstructions,
-    // add flutter, rust, gatsby, nuxt, vue, svelte, and others here
+    // add rust, gatsby, nuxt, vue, svelte, and others here
 }
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/flutter.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/flutter.tsx
@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallFlutterInstructions } from '../sdk-install-instructions'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsFlutterInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallFlutterInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.FLUTTER} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
@@ -1,5 +1,6 @@
 export * from './android'
 export * from './api'
+export * from './flutter'
 export * from './go'
 export * from './ios'
 export * from './js-web'

diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/flutter.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/flutter.tsx
@@ -31,7 +31,7 @@ function FlutterIOSSetupSnippet(): JSX.Element {
                 currentTeam?.api_token +
                 '</string>\n\t<key>com.posthog.posthog.POSTHOG_HOST</key>\n\t<string>' +
                 url +
-                '</string>\n\t<key>com.posthog.posthog.TRACK_APPLICATION_LIFECYCLE_EVENTS</key>\n\t<false/>\n\t[...]\n</dict>'}
+                '</string>\n\t<key>com.posthog.posthog.CAPTURE_APPLICATION_LIFECYCLE_EVENTS</key>\n\t<false/>\n\t[...]\n</dict>'}
         </CodeSnippet>
     )
 }

diff --git a/frontend/src/scenes/settings/project/ProjectSettings.tsx b/frontend/src/scenes/settings/project/ProjectSettings.tsx
@@ -55,7 +55,7 @@ export function WebSnippet(): JSX.Element {
             </p>
             <p>
                 For more guidance, including on identifying users,{' '}
-                <Link to="https://posthog.com/docs/integrations/js-integration">see PostHog Docs</Link>.
+                <Link to="https://posthog.com/docs/libraries/js">see PostHog Docs</Link>.
             </p>
             {currentTeamLoading && !currentTeam ? (
                 <div className="space-y-4">
@@ -97,7 +97,7 @@ export function ProjectVariables(): JSX.Element {
                 </h3>
                 <p>
                     You can use this write-only key in any one of{' '}
-                    <Link to="https://posthog.com/docs/integrations">our libraries</Link>.
+                    <Link to="https://posthog.com/docs/libraries">our libraries</Link>.
                 </p>
                 <CodeSnippet
                     actions={

diff --git a/frontend/src/scenes/settings/project/SessionRecordingSettings.tsx b/frontend/src/scenes/settings/project/SessionRecordingSettings.tsx
@@ -42,7 +42,7 @@ export function ReplayGeneral(): JSX.Element {
                     Please note your website needs to have the{' '}
                     <Link to={urls.settings('project', 'snippet')}>PostHog snippet</Link> or the latest version of{' '}
                     <Link
-                        to="https://posthog.com/docs/integrations/js-integration?utm_campaign=session-recording&utm_medium=in-product"
+                        to="https://posthog.com/docs/libraries/js?utm_campaign=session-recording&utm_medium=in-product"
                         target="_blank"
                     >
                         posthog-js

diff --git a/frontend/src/scenes/settings/project/WebhookIntegration.tsx b/frontend/src/scenes/settings/project/WebhookIntegration.tsx
@@ -43,8 +43,8 @@ export function WebhookIntegration(): JSX.Element {
                 <br />
                 Guidance on integrating with webhooks available in our docs,{' '}
                 <Link to="https://posthog.com/docs/integrate/third-party/slack">for Slack</Link> and{' '}
-                <Link to="https://posthog.com/docs/integrations/microsoft-teams">for Microsoft Teams</Link>. Discord is
-                also supported.
+                <Link to="https://posthog.com/docs/webhooks/microsoft-teams">for Microsoft Teams</Link>. Discord is also
+                supported.
             </p>
 
             <div className="space-y-4 max-w-160">

diff --git a/frontend/src/scenes/surveys/SurveySettings.tsx b/frontend/src/scenes/surveys/SurveySettings.tsx
@@ -33,7 +33,7 @@ export function SurveySettings({ inModal = false }: SurveySettingsProps): JSX.El
                     Please note your website needs to have the{' '}
                     <Link to={urls.settings('project', 'snippet')}>PostHog snippet</Link> or at least version 1.81.1 of{' '}
                     <Link
-                        to="https://posthog.com/docs/integrations/js-integration?utm_campaign=surveys&utm_medium=in-product"
+                        to="https://posthog.com/docs/libraries/js?utm_campaign=surveys&utm_medium=in-product"
                         target="_blank"
                     >
                         posthog-js