From 3b0e3a5ea253d6b49d825b99c5578079ec4bec84 Mon Sep 17 00:00:00 2001
From: Lior <lneuner@gmail.com>
Date: Wed, 13 Mar 2024 12:07:36 +0000
Subject: [PATCH] imports

---
 frontend/src/scenes/onboarding/sdks/allSDKs.tsx     |  2 +-
 .../scenes/onboarding/sdks/feature-flags/index.tsx  |  1 +
 .../onboarding/sdks/product-analytics/index.tsx     |  1 +
 .../sdks/sdk-install-instructions/angular.tsx       | 13 +++----------
 .../sdks/sdk-install-instructions/index.tsx         |  1 +
 .../onboarding/sdks/session-replay/angular.tsx      | 11 +++++++++++
 .../scenes/onboarding/sdks/session-replay/index.tsx |  1 +
 .../sdks/surveys/SurveysSDKInstructions.tsx         |  8 +++++++-
 .../src/scenes/onboarding/sdks/surveys/index.tsx    |  1 +
 9 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/scenes/onboarding/sdks/session-replay/angular.tsx

diff --git a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
index ec5cd0d7e9785..ab980c8d2e350 100644
--- a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
+++ b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx
@@ -24,7 +24,7 @@ export const allSDKs: SDK[] = [
         key: SDKKey.ANGULAR,
         tags: [SDKTag.WEB],
         image: require('./logos/angular.svg'),
-        docsLink: 'https://posthog.com/docs/libraries/react-native',
+        docsLink: 'https://posthog.com/docs/libraries/angular',
     },
     {
         name: 'React',
diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
index c7a6d79949424..20ae0c2eefe0f 100644
--- a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx
@@ -1,4 +1,5 @@
 export * from './android'
+export * from './angular'
 export * from './api'
 export * from './flutter'
 export * from './go'
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
index 291d5555184a4..119fcf40fa905 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
@@ -1,4 +1,5 @@
 export * from './android'
+export * from './angular'
 export * from './api'
 export * from './elixir'
 export * from './flutter'
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/angular.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/angular.tsx
index f44a53b896396..7587684b9d07b 100644
--- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/angular.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/angular.tsx
@@ -1,6 +1,5 @@
 import { useValues } from 'kea'
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { Link } from 'lib/lemon-ui/Link'
 import { apiHostOrigin } from 'lib/utils/apiHost'
 import { teamLogic } from 'scenes/teamLogic'
 
@@ -11,9 +10,7 @@ function EnvVarsSnippet(): JSX.Element {
 
     return (
         <CodeSnippet language={Language.Bash}>
-            {[`POSTHOG_KEY=${currentTeam?.api_token}`, `POSTHOG_HOST=${apiHostOrigin()}`].join(
-                '\n'
-            )}
+            {[`POSTHOG_KEY=${currentTeam?.api_token}`, `POSTHOG_HOST=${apiHostOrigin()}`].join('\n')}
         </CodeSnippet>
     )
 }
@@ -21,7 +18,8 @@ function EnvVarsSnippet(): JSX.Element {
 function AngularInitializeCodeSnippet(): JSX.Element {
     return (
         <CodeSnippet language={Language.JavaScript}>
-            {`
+            {`// in src/main.ts
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
@@ -40,7 +38,6 @@ bootstrapApplication(AppComponent, appConfig)
     )
 }
 
-
 export function SDKInstallAngularInstructions(): JSX.Element {
     return (
         <>
@@ -51,10 +48,6 @@ export function SDKInstallAngularInstructions(): JSX.Element {
                 Add your environment variables to your .env.local file and to your hosting provider (e.g. Vercel,
                 Netlify, AWS). You can find your project API key in your project settings.
             </p>
-            <p className="italic">
-                These values need to start with <code className="not-italic">NEXT_PUBLIC_</code> to be accessible on the
-                client-side.
-            </p>
             <EnvVarsSnippet />
 
             <h3>Initialize</h3>
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 0765b5bbf12f6..5618d2f4ae886 100644
--- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx
@@ -1,4 +1,5 @@
 export * from './android'
+export * from './angular'
 export * from './elixir'
 export * from './flutter'
 export * from './go'
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/angular.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/angular.tsx
new file mode 100644
index 0000000000000..c8cc574248356
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/angular.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallAngularInstructions } from '../sdk-install-instructions'
+import { SessionReplayFinalSteps } from '../shared-snippets'
+
+export function AngularInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallAngularInstructions />
+            <SessionReplayFinalSteps />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx
index bee13a5ce58bb..5b9ed08b8ce33 100644
--- a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx
@@ -1,3 +1,4 @@
+export * from './angular'
 export * from './html-snippet'
 export * from './js-web'
 export * from './next-js'
diff --git a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx
index e4d94944b06a2..67f4b8c3f59d7 100644
--- a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx
+++ b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx
@@ -1,6 +1,12 @@
 import { SDKInstructionsMap, SDKKey } from '~/types'
 
-import { HTMLSnippetInstructions, JSWebInstructions, NextJSInstructions, ReactInstructions, AngularInstructions } from '.'
+import {
+    AngularInstructions,
+    HTMLSnippetInstructions,
+    JSWebInstructions,
+    NextJSInstructions,
+    ReactInstructions,
+} from '.'
 
 export const SurveysSDKInstructions: SDKInstructionsMap = {
     [SDKKey.JS_WEB]: JSWebInstructions,
diff --git a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx
index bee13a5ce58bb..5b9ed08b8ce33 100644
--- a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx
@@ -1,3 +1,4 @@
+export * from './angular'
 export * from './html-snippet'
 export * from './js-web'
 export * from './next-js'