Skip to content
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions docs/organization/integrations/source-code-mgmt/github/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,24 @@ There are two types of GitHub integrations, so make sure you're choosing the cor
- `https://ghe.example.com/`

For these accounts, follow the '[Installing GitHub Enterprise](#installing-github-enterprise)' instructions.


### Check Your Domain

To determine which integration to use, enter your GitHub domain below:

<GitHubDomainChecker />

<br />

<Alert>

Sentry owner, manager, or admin permissions, and GitHub owner permissions are required to install this integration.

</Alert>

## Installing GitHub

1. Navigate to **Settings > Integrations > [GitHub](https://sentry.io/orgredirect/organizations/:orgslug/settings/integrations/github)**.

![Install GitHub integration](./img/github-install-page.png)
Expand Down
140 changes: 140 additions & 0 deletions src/components/githubDomainChecker.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
'use client';

import {useState} from 'react';

interface GitHubDomainCheckerProps {
id?: string;
}

export function GitHubDomainChecker({id}: GitHubDomainCheckerProps = {}) {
const [domain, setDomain] = useState('');
const [isValidDomain, setIsValidDomain] = useState(false);

// Safe function to check if domain is github.com or its subdomain
const isValidGitHubDomain = (input_domain: string): boolean => {
try {
const url = new URL(
input_domain.startsWith('http') ? input_domain : `https://${input_domain}`
);
const hostname = url.hostname.toLowerCase();

// Exact match for github.com or valid subdomain (like gist.github.com)
return hostname === 'github.com' || hostname.endsWith('.github.com');
} catch {
return false;
}
};

// Safe function to check if it's an enterprise GitHub domain
const isValidEnterpriseDomain = (input_domain: string): boolean => {
try {
const url = new URL(
input_domain.startsWith('http') ? input_domain : `https://${input_domain}`
);
const hostname = url.hostname.toLowerCase();

// Must be a valid domain with TLD, but not github.com
const domainPattern = /^[\w\-\.]+\.[\w]{2,}$/;
return (
domainPattern.test(hostname) &&
!hostname.endsWith('.github.com') &&
hostname !== 'github.com'
);
} catch {
return false;
}
};

const isGitHubCom = (() => {
const trimmedDomain = domain.toLowerCase().trim();
if (!trimmedDomain) return false;

return isValidGitHubDomain(trimmedDomain);
})();

const hasInput = domain.trim().length > 0;

// Validate domain format
const validateDomain = (inputDomain: string) => {
const trimmedDomain = inputDomain.trim();
if (!trimmedDomain) {
setIsValidDomain(false);
return;
}

// Check if it's a valid GitHub.com domain or subdomain
if (isValidGitHubDomain(trimmedDomain)) {
setIsValidDomain(true);
return;
}

// For enterprise, validate as proper domain
if (isValidEnterpriseDomain(trimmedDomain)) {
setIsValidDomain(true);
return;
}

setIsValidDomain(false);
};

const handleDomainChange = ev => {
const newDomain = ev.target.value;
setDomain(newDomain);
validateDomain(newDomain);
};

// Improved input styling with dark mode support
const inputClassName =
'form-input w-full rounded-md border-[1.5px] focus:ring-2 focus:ring-accent-purple/20 border-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400';

// Use provided id or generate a fallback
const inputId = id || `gh-domain-${Date.now()}`;

return (
<div className="space-y-4 p-6 border border-gray-100 dark:border-gray-700 rounded">
<div className="flex w-full">
<div className="flex items-center min-w-[16ch] px-4">
<label htmlFor={inputId} className="text-nowrap">
GitHub Domain
</label>
</div>
<input
id={inputId}
value={domain}
placeholder="https://github.com or https://ghe.example.com"
className={inputClassName}
onChange={handleDomainChange}
/>
</div>

{hasInput && (
<div className="mt-4 p-4 rounded-md border dark:border-gray-600">
{isValidDomain ? (
<div>
<div className="text-sm font-medium mb-2">Recommended Installation:</div>
{isGitHubCom ? (
<div className="text-green-700 bg-green-50 dark:text-green-300 dark:bg-green-900/30 p-3 rounded-md">
<div className="mb-2">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I dont think the margin here is necessary, it makes for uneven spacing.
image

<strong>GitHub</strong> - Use the standard GitHub integration for
github.com
</div>
</div>
) : (
<div className="text-blue-700 bg-blue-50 dark:text-blue-300 dark:bg-blue-900/30 p-3 rounded-md">
<div className="mb-2">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here neither

<strong>GitHub Enterprise</strong> - Use GitHub Enterprise integration
for your domain
</div>
</div>
)}
</div>
) : (
<div className="text-red-700 bg-red-50 dark:text-red-300 dark:bg-red-900/30 p-3 rounded-md">
<strong>Invalid Domain</strong> - Please enter a valid GitHub domain or URL
</div>
)}
</div>
)}
</div>
);
}
2 changes: 2 additions & 0 deletions src/mdxComponents.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {DefinitionList} from './components/definitionList';
import {DevDocsCardGrid} from './components/devDocsCardGrid';
import DocImage from './components/docImage';
import {Expandable} from './components/expandable';
import {GitHubDomainChecker} from './components/githubDomainChecker';
import {GuideGrid} from './components/guideGrid';
import {JsBundleList} from './components/jsBundleList';
import {LambdaLayerDetail} from './components/lambdaLayerDetail';
Expand Down Expand Up @@ -60,6 +61,7 @@ export function mdxComponents(
SdkApi,
TableOfContents,
CreateGitHubAppForm,
GitHubDomainChecker,
ConfigValue,
DefinitionList,
Expandable,
Expand Down
Loading