From e28d34c6e90772f8c5a00dd5d2b49821466e7074 Mon Sep 17 00:00:00 2001 From: Manoel Aranda Neto <5731772+marandaneto@users.noreply.github.com> Date: Wed, 3 Jan 2024 13:19:09 +0100 Subject: [PATCH] chore: Add Flutter feature flags snippets (#19563) --- README.md | 2 +- cypress/e2e/featureFlags.cy.ts | 2 +- .../feature-flags/FeatureFlagCodeOptions.tsx | 26 ++++++++++++------- .../feature-flags/FeatureFlagSnippets.tsx | 11 ++++++++ .../FeatureFlagsSDKInstructions.tsx | 4 ++- .../onboarding/sdks/feature-flags/flutter.tsx | 13 ++++++++++ .../onboarding/sdks/feature-flags/index.tsx | 1 + .../sdks/sdk-install-instructions/flutter.tsx | 2 +- .../settings/project/ProjectSettings.tsx | 4 +-- .../project/SessionRecordingSettings.tsx | 2 +- .../settings/project/WebhookIntegration.tsx | 4 +-- .../src/scenes/surveys/SurveySettings.tsx | 2 +- 12 files changed, 54 insertions(+), 19 deletions(-) create mode 100644 frontend/src/scenes/onboarding/sdks/feature-flags/flutter.tsx diff --git a/README.md b/README.md index 4629af2ac10..7e2f8d5ac44 100644 --- 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 index 9f1c395493e..2d6b30aaabb 100644 --- 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 index 2d5d2c618d6..ebfe728f181 100644 --- 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 index 7bee754183d..54f8d6c1ff7 100644 --- 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 ( + + {`if (await Posthog().isFeatureEnabled('${flagKey}') ?? false) { + // do something +} + `} + + ) +} + 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 index fee11b72005..db8b896c25a 100644 --- 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 new file mode 100644 index 00000000000..ac4e3750e6d --- /dev/null +++ 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 ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx index 69d5234c62f..c7a6d799494 100644 --- 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 index b2284e00d65..496eec8c7d8 100644 --- 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 + '\n\tcom.posthog.posthog.POSTHOG_HOST\n\t' + url + - '\n\tcom.posthog.posthog.TRACK_APPLICATION_LIFECYCLE_EVENTS\n\t\n\t[...]\n'} + '\n\tcom.posthog.posthog.CAPTURE_APPLICATION_LIFECYCLE_EVENTS\n\t\n\t[...]\n'} ) } diff --git a/frontend/src/scenes/settings/project/ProjectSettings.tsx b/frontend/src/scenes/settings/project/ProjectSettings.tsx index 77ace6cdb46..3a50c902d8a 100644 --- 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 {

For more guidance, including on identifying users,{' '} - see PostHog Docs. + see PostHog Docs.

{currentTeamLoading && !currentTeam ? (
@@ -97,7 +97,7 @@ export function ProjectVariables(): JSX.Element {

You can use this write-only key in any one of{' '} - our libraries. + our libraries.

PostHog snippet or the latest version of{' '} posthog-js diff --git a/frontend/src/scenes/settings/project/WebhookIntegration.tsx b/frontend/src/scenes/settings/project/WebhookIntegration.tsx index 060826fac74..a3e30b57fce 100644 --- 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 {
Guidance on integrating with webhooks available in our docs,{' '} for Slack and{' '} - for Microsoft Teams. Discord is - also supported. + for Microsoft Teams. Discord is also + supported.

diff --git a/frontend/src/scenes/surveys/SurveySettings.tsx b/frontend/src/scenes/surveys/SurveySettings.tsx index ac5fd8c458b..83703bcfce5 100644 --- 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{' '} PostHog snippet or at least version 1.81.1 of{' '} posthog-js