Add note to sign in in order to fully benefit from code samples (#7318)

---------

Co-authored-by: Francesco Novy <francesco.novy@sentry.io>
Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com>

Author: 3 people

src/components/codeContext.tsx

@@ -16,8 +16,14 @@ type ProjectCodeKeywords = {
   title: string;
 };
 
+type UserCodeKeywords = {
+  ID: number;
+  NAME: string;
+};
+
 type CodeKeywords = {
   PROJECT: ProjectCodeKeywords[];
+  USER: UserCodeKeywords | undefined;
 };
 
 type Dsn = {
@@ -31,13 +37,20 @@ type Dsn = {
 type ProjectApiResult = {
   dsn: string;
   dsnPublic: string;
-  id: string;
-  organizationId: string;
+  id: number;
+  organizationId: number;
   organizationSlug: string;
   projectSlug: string;
   slug: string;
 };
 
+type UserApiResult = {
+  avatarUrl: string;
+  id: number;
+  isAuthenticated: boolean;
+  name: string;
+};
+
 // only fetch them once
 let cachedCodeKeywords = null;
 
@@ -60,6 +73,7 @@ const DEFAULTS: CodeKeywords = {
       title: `example-org / example-project`,
     },
   ],
+  USER: undefined,
 };
 
 type CodeContextType = {
@@ -99,8 +113,8 @@ const formatApiUrl = ({scheme, host}: Dsn) => {
 /**
  * Fetch project details from sentry
  */
-export async function fetchCodeKeywords() {
-  let json: {projects: ProjectApiResult[]} | null = null;
+export async function fetchCodeKeywords(): Promise<CodeKeywords> {
+  let json: {projects: ProjectApiResult[]; user: UserApiResult} | null = null;
 
   const url =
     process.env.NODE_ENV === 'development'
@@ -125,7 +139,7 @@ export async function fetchCodeKeywords() {
     return makeDefaults();
   }
 
-  const {projects} = json;
+  const {projects, user} = json;
 
   if (projects?.length === 0) {
     return makeDefaults();
@@ -150,6 +164,12 @@ export async function fetchCodeKeywords() {
         title: `${project.organizationSlug} / ${project.projectSlug}`,
       };
     }),
+    USER: user.isAuthenticated
+      ? {
+          ID: user.id,
+          NAME: user.name,
+        }
+      : undefined,
   };
 }
 

src/components/markdown.tsx

@@ -27,6 +27,7 @@ import {PlatformSection} from './platformSection';
 import {RelayMetrics} from './relayMetrics';
 import {PiiFields} from './relayPiifields';
 import {SandboxLink, SandboxOnly} from './sandboxLink';
+import {SignInNote} from './signInNote';
 import {SmartLink} from './smartLink';
 import {VimeoEmbed, YouTubeEmbed} from './video';
 
@@ -59,6 +60,7 @@ const mdxComponents = {
   YouTubeEmbed,
   SandboxLink,
   SandboxOnly,
+  SignInNote,
 };
 
 export function Markdown({value}) {

src/components/signInNote.tsx

@@ -0,0 +1,52 @@
+import React, {useContext} from 'react';
+import {useLocation} from '@reach/router';
+import {graphql, StaticQuery} from 'gatsby';
+
+import {CodeContext} from './codeContext';
+import {ExternalLink} from './externalLink';
+import {Note} from './note';
+
+const siteMetaQuery = graphql`
+  query SignInNoteQuery {
+    site {
+      siteMetadata {
+        siteUrl
+      }
+    }
+  }
+`;
+
+export function SignInNote(): JSX.Element {
+  const location = useLocation();
+
+  const {codeKeywords} = useContext(CodeContext);
+
+  const user = codeKeywords.USER;
+
+  // This means the user is signed in
+  if (user) {
+    return null;
+  }
+
+  return (
+    <StaticQuery
+      query={siteMetaQuery}
+      render={data => {
+        const url = data.site.siteMetadata.siteUrl + location.pathname;
+        return (
+          <Note>
+            The following code sample will let you choose your personal config from the
+            dropdown, once you're{' '}
+            <ExternalLink
+              href={`https://sentry.io/auth/login/?next=${url}`}
+              target="_blank"
+            >
+              logged in
+            </ExternalLink>
+            .
+          </Note>
+        );
+      }}
+    />
+  );
+}

src/platform-includes/getting-started-install/javascript.mdx

@@ -1,5 +1,7 @@
 In order to get started using the Sentry JavaScript SDK, add the following code to the top of your application, before all other scripts:
 
+<SignInNote />
+
 ```html
 <script
   src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"