feat: add zendesk-like context to new GitHub issues (#21496)

* add zendesk-like context to new GitHub issues

* Update UI snapshots for `chromium` (1)

* Update SidePanelSupport.tsx

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx

@@ -14,9 +14,10 @@ import {
 import { LemonButton, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { SupportForm } from 'lib/components/Support/SupportForm'
-import { supportLogic } from 'lib/components/Support/supportLogic'
+import { getPublicSupportSnippet, supportLogic } from 'lib/components/Support/supportLogic'
 import React from 'react'
 import { billingLogic } from 'scenes/billing/billingLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
@@ -145,6 +146,9 @@ export const SidePanelSupport = (): JSX.Element => {
     const { hasAvailableFeature } = useValues(userLogic)
     const { openEmailForm, closeEmailForm } = useActions(supportLogic)
     const { isEmailFormOpen } = useValues(supportLogic)
+    const { preflight } = useValues(preflightLogic)
+    const { user } = useValues(userLogic)
+    const region = preflight?.region
 
     const theLogic = supportLogic({ onClose: () => closeSidePanel(SidePanelTab.Support) })
     const { title } = useValues(theLogic)
@@ -231,7 +235,9 @@ export const SidePanelSupport = (): JSX.Element => {
                                 <LemonButton
                                     type="secondary"
                                     status="alt"
-                                    to="https://github.com/posthog/posthog/issues"
+                                    to={`https://github.com/PostHog/posthog/issues/new?&labels=bug&template=bug_report.yml&debug-info=${encodeURIComponent(
+                                        getPublicSupportSnippet(region, user)
+                                    )}`}
                                     icon={<IconBug />}
                                     targetBlank
                                 >
@@ -264,7 +270,9 @@ export const SidePanelSupport = (): JSX.Element => {
                                 <LemonButton
                                     type="secondary"
                                     status="alt"
-                                    to="https://github.com/posthog/posthog/issues"
+                                    to={`https://github.com/PostHog/posthog/issues/new?&labels=enhancement&template=feature_request.yml&debug-info=${encodeURIComponent(
+                                        getPublicSupportSnippet(region, user)
+                                    )}`}
                                     icon={<IconFeatures />}
                                     targetBlank
                                 >

frontend/src/lib/components/Support/supportLogic.ts

@@ -16,6 +16,20 @@ import { Region, SidePanelTab, TeamType, UserType } from '~/types'
 import type { supportLogicType } from './supportLogicType'
 import { openSupportModal } from './SupportModal'
 
+export function getPublicSupportSnippet(region: Region | null | undefined, user: UserType | null): string {
+    if (!user || !region) {
+        return ''
+    }
+
+    return `Session: ${posthog
+        .get_session_replay_url({ withTimestamp: true, timestampLookBack: 30 })
+        .replace(window.location.origin + '/replay/', 'http://go/session/')} ${
+        !window.location.href.includes('settings/project') ? `(at ${window.location.href})` : ''
+    }\n${`Admin: ${`http://go/adminOrg${region}/${user.organization?.id}`} (Project: ${
+        teamLogic.values.currentTeamId
+    })`}\nSentry: ${`http://go/sentry${region}/${user.team?.id}`}`
+}
+
 function getSessionReplayLink(): string {
     const link = posthog
         .get_session_replay_url({ withTimestamp: true, timestampLookBack: 30 })

frontend/src/scenes/settings/project/ProjectSettings.tsx

@@ -6,11 +6,13 @@ import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authoriz
 import { CodeSnippet } from 'lib/components/CodeSnippet'
 import { JSBookmarklet } from 'lib/components/JSBookmarklet'
 import { JSSnippet } from 'lib/components/JSSnippet'
+import { getPublicSupportSnippet } from 'lib/components/Support/supportLogic'
 import { IconRefresh } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
 import { useState } from 'react'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
+import { userLogic } from 'scenes/userLogic'
 
 import { TimezoneConfig } from './TimezoneConfig'
 import { WeekStartConfig } from './WeekStartConfig'
@@ -90,6 +92,7 @@ export function ProjectVariables(): JSX.Element {
     const { currentTeam, isTeamTokenResetAvailable } = useValues(teamLogic)
     const { resetToken } = useActions(teamLogic)
     const { preflight } = useValues(preflightLogic)
+    const { user } = useValues(userLogic)
     const region = preflight?.region
 
     const openDialog = (): void => {
@@ -152,6 +155,17 @@ export function ProjectVariables(): JSX.Element {
                     <CodeSnippet thing="project region">{`${region} Cloud`}</CodeSnippet>
                 </div>
             ) : null}
+            {region && user ? (
+                <div className="flex-1 max-w-full">
+                    <h3 id="debug-info" className="min-w-[25rem]">
+                        Debug information
+                    </h3>
+                    <p>Include this snippet when opening a Feature request or Bug report on GitHub.</p>
+                    <CodeSnippet compact thing="debug info">
+                        {getPublicSupportSnippet(region, user)}
+                    </CodeSnippet>
+                </div>
+            ) : null}
         </div>
     )
 }