Add React component for GitHub domain check

docs/organization/integrations/source-code-mgmt/gitlab/index.mdx

@@ -1,9 +1,11 @@
 ---
 title: GitLab
 sidebar_order: 1
-description: "Learn more about Sentry’s GitLab integration and how it helps you track and resolve bugs faster by using data from your GitLab commits."
+description: "Learn more about Sentry's GitLab integration and how it helps you track and resolve bugs faster by using data from your GitLab commits."
 ---
 
+<GitHubDomainChecker />
+
 ## Install
 
 <Alert>
@@ -30,15 +32,15 @@ Sentry owner, manager, or admin permissions and GitLab owner or maintainer permi
 
    ![Connect Sentry to a GitLab instance](./img/add-installation.png)
 
-1. In the pop-up window, complete the instructions to create a Sentry app within GitLab. Once you’re finished, click "Next".
+1. In the pop-up window, complete the instructions to create a Sentry app within GitLab. Once you're finished, click "Next".
 
    ![Configuration modal and Sentry app within GitLab](./img/configuration-modal.png)
 
 1. Fill out the resulting GitLab Configuration form with the following information:
 
    1. The GitLab URL is the base URL for your GitLab instance. If using gitlab.com, enter https://gitlab.com/.
 
-   2. Find the GitLab Group Path in your group’s GitLab page. Groups might contain subgroups and projects. You should not specify the URL to any specific project, just to a group or subgroup.
+   2. Find the GitLab Group Path in your group's GitLab page. Groups might contain subgroups and projects. You should not specify the URL to any specific project, just to a group or subgroup.
 
       ![GitLab page showing group path](./img/gitlab-groups.png)
 
@@ -52,13 +54,13 @@ Sentry owner, manager, or admin permissions and GitLab owner or maintainer permi
 
 1. In the resulting panel, click "Authorize".
 
-1. In Sentry, return to Organization Settings > **Integrations**. You’ll see a new instance of GitLab underneath the list of integrations.
+1. In Sentry, return to Organization Settings > **Integrations**. You'll see a new instance of GitLab underneath the list of integrations.
 
-1. Next to your GitLab Instance, click "Configure". _It’s important to configure to receive the full benefits of commit tracking._
+1. Next to your GitLab Instance, click "Configure". _It's important to configure to receive the full benefits of commit tracking._
 
    ![GitLab instance with connected group and highlighted configure button](./img/configure-button.png)
 
-1. On the resulting page, click "Add Repository" to select which repositories in which you’d like to begin tracking commits.
+1. On the resulting page, click "Add Repository" to select which repositories in which you'd like to begin tracking commits.
 
    ![Add repository](./img/add-repo.png)
 
@@ -157,7 +159,7 @@ For certain native platforms, the stack trace will look different. In cases like
 
 ![Highlighting where in the UI to find the file path for native stack traces](./img/code-mappings-stacktrace-native.png)
 
-If you aren’t sure, you can look at the event JSON by clicking on the `{}` button in the event header. Find the text in the frame's `filename` or `abs_path`.
+If you aren't sure, you can look at the event JSON by clicking on the `{}` button in the event header. Find the text in the frame's `filename` or `abs_path`.
 
 <Include name="common-imgs/code-mappings-event-json" />
 
@@ -220,11 +222,11 @@ For more details, see the full documentation for [Code Owners](/product/issues/o
 
 - Why am I getting a `500` response during installation or configuration?
 
-  - First, make sure you’ve allowed our IPs, which can be found [here](/security-legal-pii/security/ip-ranges/). The 500 response is coming from GitLab, so you may need to try again or double-check that your settings and permissions are correct in GitLab. You must have both owner/manager/admin permissions in Sentry as well as owner permissions in GitLab to successfully install this integration.
+  - First, make sure you've allowed our IPs, which can be found [here](/security-legal-pii/security/ip-ranges/). The 500 response is coming from GitLab, so you may need to try again or double-check that your settings and permissions are correct in GitLab. You must have both owner/manager/admin permissions in Sentry as well as owner permissions in GitLab to successfully install this integration.
 
 - Why am I seeing an "Invalid Repository Names" error?
 
-  - GitLab takes into account the whitespace before and after the `/` . On the Repositories page (Organization Settings > Repositories), you’ll notice a space (for example, "Owner / Repo" as opposed to "Owner/Repo"), which will need to be included in any command you’re running. If you are using GitLab’s [environment variables](https://docs.gitlab.com/ee/ci/variables/#debug-tracing) to pass the repository as `CI_PROJECT_PATH` in a cURL request for example, it may not include the spaces and you’ll need to hardcode the name in order for it to work.
+  - GitLab takes into account the whitespace before and after the `/` . On the Repositories page (Organization Settings > Repositories), you'll notice a space (for example, "Owner / Repo" as opposed to "Owner/Repo"), which will need to be included in any command you're running. If you are using GitLab's [environment variables](https://docs.gitlab.com/ee/ci/variables/#debug-tracing) to pass the repository as `CI_PROJECT_PATH` in a cURL request for example, it may not include the spaces and you'll need to hardcode the name in order for it to work.
 
 - Why am I always the reporter?
-  - When using the GitLab integration to create issues, the “reporter” field is populated as the person who set up the integration by default — this is not configurable.
+  - When using the GitLab integration to create issues, the "reporter" field is populated as the person who set up the integration by default — this is not configurable.

src/components/githubDomainChecker.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import {type KeyboardEvent, useState} from 'react';
+import {Button} from '@radix-ui/themes';
+
+const MAX_COMPONENTS_ON_PAGE = 100;
+
+export function GitHubDomainChecker() {
+  const [domain, setDomain] = useState('');
+  const [result, setResult] = useState<{
+    message: string;
+    type: 'github' | 'enterprise' | null;
+  }>({type: null, message: ''});
+
+  const checkDomain = () => {
+    if (!domain.trim()) {
+      setResult({type: null, message: 'Please enter a domain'});
+      return;
+    }
+
+    const cleanDomain = domain.trim().toLowerCase();
+
+    // Remove protocol if present
+    const domainWithoutProtocol = cleanDomain.replace(/^https?:\/\//, '');
+
+    // Remove trailing slash and path
+    const baseDomain = domainWithoutProtocol.split('/')[0];
+
+    if (baseDomain === 'github.com' || baseDomain === 'www.github.com') {
+      setResult({
+        type: 'github',
+        message:
+          'You should use the regular GitHub integration. This is GitHub.com, the public GitHub service.',
+      });
+    } else if (baseDomain.includes('github')) {
+      setResult({
+        type: 'enterprise',
+        message:
+          'You should use GitHub Enterprise integration. This appears to be a GitHub Enterprise Server instance.',
+      });
+    } else {
+      setResult({
+        type: 'enterprise',
+        message:
+          'You should use GitHub Enterprise integration. This appears to be a custom GitHub Enterprise Server domain.',
+      });
+    }
+  };
+
+  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      checkDomain();
+    }
+  };
+
+  const inputClassName =
+    'form-input w-full rounded-md border-[1.5px] focus:ring-2 focus:ring-accent-purple/20 border-gray-200';
+
+  // This is to avoid conflicts in case multiple instances of this component are used on the page
+  const randomCounter = Math.round(Math.random() * MAX_COMPONENTS_ON_PAGE);
+
+  return (
+    <div className="space-y-4 p-6 border border-gray-100 rounded bg-gray-50">
+      <div>
+        <h3 className="text-lg font-medium mb-2">GitHub Domain Checker</h3>
+        <p className="text-sm text-gray-600 mb-4">
+          Enter your GitHub domain below to determine whether you should use the GitHub or
+          GitHub Enterprise integration.
+        </p>
+      </div>
+
+      <div className="flex w-full gap-2">
+        <div className="flex-1">
+          <label htmlFor={`github-domain-${randomCounter}`} className="sr-only">
+            GitHub Domain
+          </label>
+          <input
+            id={`github-domain-${randomCounter}`}
+            type="text"
+            value={domain}
+            placeholder="e.g., github.com or github.yourcompany.com"
+            className={inputClassName}
+            onChange={ev => setDomain(ev.target.value)}
+            onKeyPress={handleKeyPress}
+          />
+        </div>
+        <Button type="button" size="3" onClick={checkDomain} className="rounded-md">
+          Check Domain
+        </Button>
+      </div>
+
+      {result.message && (
+        <div
+          className={`p-4 rounded-md ${
+            result.type === 'github'
+              ? 'bg-green-50 border border-green-200'
+              : result.type === 'enterprise'
+                ? 'bg-blue-50 border border-blue-200'
+                : 'bg-yellow-50 border border-yellow-200'
+          }`}
+        >
+          <div className="flex items-start">
+            <div
+              className={`flex-shrink-0 w-5 h-5 rounded-full mr-3 mt-0.5 ${
+                result.type === 'github'
+                  ? 'bg-green-500'
+                  : result.type === 'enterprise'
+                    ? 'bg-blue-500'
+                    : 'bg-yellow-500'
+              }`}
+            />
+            <div>
+              <p
+                className={`font-medium ${
+                  result.type === 'github'
+                    ? 'text-green-800'
+                    : result.type === 'enterprise'
+                      ? 'text-blue-800'
+                      : 'text-yellow-800'
+                }`}
+              >
+                {result.type === 'github'
+                  ? 'Use GitHub Integration'
+                  : result.type === 'enterprise'
+                    ? 'Use GitHub Enterprise Integration'
+                    : 'Domain Check'}
+              </p>
+              <p
+                className={`text-sm mt-1 ${
+                  result.type === 'github'
+                    ? 'text-green-700'
+                    : result.type === 'enterprise'
+                      ? 'text-blue-700'
+                      : 'text-yellow-700'
+                }`}
+              >
+                {result.message}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/mdxComponents.ts

@@ -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';
@@ -63,6 +64,7 @@ export function mdxComponents(
     ConfigValue,
     DefinitionList,
     Expandable,
+    GitHubDomainChecker,
     GuideGrid,
     JsBundleList,
     LambdaLayerDetail,