diff --git a/develop-docs/integrations/github.mdx b/develop-docs/integrations/github.mdx index 5d21ac4edb4da3..c82d0a3b1ba753 100644 --- a/develop-docs/integrations/github.mdx +++ b/develop-docs/integrations/github.mdx @@ -20,7 +20,7 @@ For local development make sure to use your ngrok URL as the prefix. diff --git a/develop-docs/self-hosted/configuration/sso.mdx b/develop-docs/self-hosted/configuration/sso.mdx index 36cf42a2ad2d47..b4a86195ff7286 100644 --- a/develop-docs/self-hosted/configuration/sso.mdx +++ b/develop-docs/self-hosted/configuration/sso.mdx @@ -51,7 +51,7 @@ As of [Sentry 10](https://github.com/getsentry/self-hosted/releases/tag/10.0.1), The GitHub App name must not contain any spaces. - + If the form above does not work for you, you need the following settings for your GitHub Application: diff --git a/src/components/createGitHubAppForm.tsx b/src/components/createGitHubAppForm.tsx index 834a3fd8299cab..ef8634af17741a 100644 --- a/src/components/createGitHubAppForm.tsx +++ b/src/components/createGitHubAppForm.tsx @@ -5,37 +5,85 @@ import {Button} from '@radix-ui/themes'; const MAX_COMPONENTS_ON_PAGE = 100; +type AccountType = 'personal' | 'organization'; + export function CreateGitHubAppForm({url, defaultOrg, defaultUrlPrefix}) { + const [accountType, setAccountType] = useState('organization'); const [orgSlug, setOrgSlug] = useState(''); const [urlPrefix, setUrlPrefix] = useState(''); - const renderedUrl = url - .replace(/:org(?=\W)/g, orgSlug) - .replace(/:url-prefix(?=\W)/g, encodeURIComponent(urlPrefix)); + + const isPersonal = accountType === 'personal'; + + const renderedUrl = (() => { + let processedUrl = url; + if (isPersonal) { + // For personal accounts, remove the organizations/:org/ path segment + processedUrl = processedUrl + .replace('organizations/:org/', '') + .replace(':org-Sentry', 'Sentry'); + } else { + processedUrl = processedUrl.replace(/:org(?=\W)/g, orgSlug); + } + return processedUrl.replace(/:url-prefix(?=\W)/g, encodeURIComponent(urlPrefix)); + })(); const inputClassName = - 'form-input w-full rounded-md border-[1.5px] focus:ring-2 focus:ring-accent-purple/20 border-gray-200'; + 'form-input w-full rounded-md border-[1.5px] focus:ring-2 focus:ring-accent-purple/20 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500'; // This is to avoid in case multiple instances of this component are used on the page const randomCounter = Math.round(Math.random() * MAX_COMPONENTS_ON_PAGE); + const isValid = isPersonal ? !!urlPrefix : !!orgSlug && !!urlPrefix; + return ( -
+
-
+
+ +
- setOrgSlug(ev.target.value)} - />
+ {!isPersonal && ( +
+
+ +
+ setOrgSlug(ev.target.value)} + /> +
+ )}
-
@@ -54,7 +102,7 @@ export function CreateGitHubAppForm({url, defaultOrg, defaultUrlPrefix}) { type="button" size="3" onClick={() => window.open(renderedUrl, '_blank', 'noopener')} - disabled={!orgSlug || !urlPrefix} + disabled={!isValid} className="rounded-md" > Create GitHub App