From d4377712b8fec67176a2ead92675015a6b86d573 Mon Sep 17 00:00:00 2001
From: Lior <lneuner@gmail.com>
Date: Tue, 26 Mar 2024 12:19:03 +0000
Subject: [PATCH] django

---
 .../src/scenes/onboarding/sdks/allSDKs.tsx    |  7 +++
 .../FeatureFlagsSDKInstructions.tsx           |  2 +
 .../onboarding/sdks/feature-flags/django.tsx  | 13 +++++
 .../onboarding/sdks/feature-flags/index.tsx   |  1 +
 .../ProductAnalyticsSDKInstructions.tsx       |  2 +
 .../sdks/product-analytics/django.tsx         | 21 +++++++
 .../sdks/product-analytics/index.tsx          |  1 +
 .../sdks/sdk-install-instructions/django.tsx  | 55 +++++++++++++++++++
 .../sdks/sdk-install-instructions/index.tsx   |  1 +
 frontend/src/types.ts                         |  1 +
 10 files changed, 104 insertions(+)
 create mode 100644 frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx
 create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx
 create mode 100644 frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx

diff --git a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
index 61544a8a86ed6..c9a6a88c5b3cc 100644
--- a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
+++ b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
@@ -58,6 +58,13 @@ export const allSDKs: SDK[] = [
         image: require('./logos/bubble.svg'),
         docsLink: 'https://posthog.com/docs/libraries/bubble',
     },
+    {
+        name: 'Django',
+        key: SDKKey.DJANGO,
+        tags: [SDKTag.SERVER],
+        image: require('./logos/django.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/django',
+    },
     {
         name: 'Elixir',
         key: SDKKey.ELIXIR,
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
index 681d094fae017..ab58f83895d72 100644
--- a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx
@@ -6,6 +6,7 @@ import {
     FeatureFlagsAPIInstructions,
     FeatureFlagsAstroInstructions,
     FeatureFlagsBubbleInstructions,
+    FeatureFlagsDjangoInstructions,
     FeatureFlagsFlutterInstructions,
     FeatureFlagsFramerInstructions,
     FeatureFlagsGoInstructions,
@@ -33,6 +34,7 @@ export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.API]: FeatureFlagsAPIInstructions,
     [SDKKey.ASTRO]: FeatureFlagsAstroInstructions,
     [SDKKey.BUBBLE]: FeatureFlagsBubbleInstructions,
+    [SDKKey.DJANGO]: FeatureFlagsDjangoInstructions,
     [SDKKey.FLUTTER]: FeatureFlagsFlutterInstructions,
     [SDKKey.FRAMER]: FeatureFlagsFramerInstructions,
     [SDKKey.GO]: FeatureFlagsGoInstructions,
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx
new file mode 100644
index 0000000000000..3dfb2c07939c1
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/django.tsx
@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallDjangoInstructions } from '../sdk-install-instructions'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsDjangoInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallDjangoInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.DJANGO} />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
index 900f2f45ba2e9..83d8dd502923b 100644
--- a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
@@ -3,6 +3,7 @@ export * from './angular'
 export * from './api'
 export * from './astro'
 export * from './bubble'
+export * from './django'
 export * from './flutter'
 export * from './framer'
 export * from './go'
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
index 9d5106158a62e..d435dc8bfa3ad 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
@@ -8,6 +8,7 @@ import {
     ProductAnalyticsAPIInstructions,
     ProductAnalyticsAstroInstructions,
     ProductAnalyticsBubbleInstructions,
+    ProductAnalyticsDjangoInstructions,
     ProductAnalyticsElixirInstructions,
     ProductAnalyticsFlutterInstructions,
     ProductAnalyticsFramerInstructions,
@@ -34,6 +35,7 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.API]: ProductAnalyticsAPIInstructions,
     [SDKKey.ASTRO]: ProductAnalyticsAstroInstructions,
     [SDKKey.BUBBLE]: ProductAnalyticsBubbleInstructions,
+    [SDKKey.DJANGO]: ProductAnalyticsDjangoInstructions,
     [SDKKey.ELIXIR]: ProductAnalyticsElixirInstructions,
     [SDKKey.FLUTTER]: ProductAnalyticsFlutterInstructions,
     [SDKKey.FRAMER]: ProductAnalyticsFramerInstructions,
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx
new file mode 100644
index 0000000000000..8729c42c514a1
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/django.tsx
@@ -0,0 +1,21 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+
+import { SDKInstallDjangoInstructions } from '../sdk-install-instructions'
+
+function DjangoCaptureSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Python}>{`import posthog
+    
+posthog.capture('test-id', 'test-event')`}</CodeSnippet>
+    )
+}
+
+export function ProductAnalyticsDjangoInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallDjangoInstructions />
+            <h3>Send an Event</h3>
+            <DjangoCaptureSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
index 4585fda4a7079..bf5c8678d04a1 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
@@ -3,6 +3,7 @@ export * from './angular'
 export * from './api'
 export * from './astro'
 export * from './bubble'
+export * from './django'
 export * from './elixir'
 export * from './flutter'
 export * from './framer'
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx
new file mode 100644
index 0000000000000..aee7182c84c6a
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/django.tsx
@@ -0,0 +1,55 @@
+import { useValues } from 'kea'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { apiHostOrigin } from 'lib/utils/apiHost'
+import { teamLogic } from 'scenes/teamLogic'
+
+function DjangoInstallSnippet(): JSX.Element {
+    return <CodeSnippet language={Language.Bash}>pip install posthog</CodeSnippet>
+}
+
+function DjangoAppConfigSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.Python}>
+            {`from django.apps import AppConfig
+import posthog
+
+class YourAppConfig(AppConfig):
+    name = "your_app_name"
+    def ready(self):
+        posthog.api_key = '${currentTeam?.api_token}'
+        posthog.host = '${apiHostOrigin()}'`}
+        </CodeSnippet>
+    )
+}
+
+function DjangoSettingsSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Python}>
+            {`INSTALLED_APPS = [
+    # other apps
+    'your_app_name.apps.MyAppConfig',  # Add your app config
+] `}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallDjangoInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <DjangoInstallSnippet />
+            <h3>Configure</h3>
+            <p>
+                Set the PostHog API key and host in your <code>AppConfig</code> in <code>apps.py</code> so that's it's
+                available everywhere:
+            </p>
+            <DjangoAppConfigSnippet />
+            <p />
+            Next, if you haven't done so already, make sure you add your <code>AppConfig</code> to your{' '}
+            <code>settings.py</code> under <code>INSTALLED_APPS</code>:
+            <DjangoSettingsSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
index 4c8ef1e268d09..45ffdf34a9919 100644
--- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
@@ -2,6 +2,7 @@ export * from './android'
 export * from './angular'
 export * from './astro'
 export * from './bubble'
+export * from './django'
 export * from './elixir'
 export * from './flutter'
 export * from './framer'
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 898fb88acb078..00ad4a8cdbfe7 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -3744,6 +3744,7 @@ export enum SDKKey {
     ASTRO = 'astro',
     API = 'api',
     BUBBLE = 'bubble',
+    DJANGO = 'django',
     DOCUSAURUS = 'docusaurus',
     ELIXIR = 'elixir',
     FRAMER = 'framer',