feat: Change org selector add gh integration button behavior (#102680)

Followup to
https://linear.app/getsentry/issue/CCMRG-1689/redirect-the-integrated-org-link

Changes link to org integrated selection "Add GitHub organization"
button to also open GH OAuth.

Opens popout window to this link like Settings>Integration and now the
TA Preonboarding page also after above PR
<img width="1072" height="140" alt="Screenshot 2025-11-06 at 11 31
31 AM"
src="https://github.com/user-attachments/assets/7385128c-b673-430f-bdc8-e9ac2f44d9e9"
/>

Author: calvin-codecov

static/app/components/prevent/integratedOrgSelector/integratedOrgSelector.spec.tsx

@@ -1,3 +1,5 @@
+import {GitHubIntegrationProviderFixture} from 'sentry-fixture/githubIntegrationProvider';
+
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import PreventQueryParamsProvider from 'sentry/components/prevent/container/preventParamsProvider';
@@ -18,6 +20,13 @@ const mockApiCall = () => {
     method: 'GET',
     body: mockIntegrations,
   });
+  MockApiClient.addMockResponse({
+    url: `/organizations/org-slug/config/integrations/`,
+    method: 'GET',
+    body: {
+      providers: [GitHubIntegrationProviderFixture()],
+    },
+  });
 };
 
 describe('IntegratedOrgSelector', () => {

static/app/components/prevent/integratedOrgSelector/integratedOrgSelector.tsx

@@ -1,23 +1,53 @@
 import {useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 
+import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import type {SelectOption} from 'sentry/components/core/compactSelect';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
 import {Flex, Grid} from 'sentry/components/core/layout';
 import {ExternalLink} from 'sentry/components/core/link';
 import {Text} from 'sentry/components/core/text';
 import DropdownButton from 'sentry/components/dropdownButton';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {usePreventContext} from 'sentry/components/prevent/context/preventContext';
 import {integratedOrgIdToName} from 'sentry/components/prevent/utils';
 import {IconAdd, IconBuilding, IconInfo} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
+import type {IntegrationWithConfig} from 'sentry/types/integrations';
+import {useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useGetActiveIntegratedOrgs} from 'sentry/views/prevent/tests/queries/useGetActiveIntegratedOrgs';
+import AddIntegration from 'sentry/views/settings/organizationIntegrations/addIntegration';
+import type {IntegrationInformation} from 'sentry/views/settings/organizationIntegrations/integrationDetailedView';
 
 const DEFAULT_ORG_LABEL = 'Select GitHub Org';
 
 function OrgFooterMessage() {
+  const organization = useOrganization();
+
+  const handleAddIntegration = useCallback((_integration: IntegrationWithConfig) => {
+    window.location.reload();
+  }, []);
+
+  const {data: integrationInfo, isPending: isIntegrationInfoPending} =
+    useApiQuery<IntegrationInformation>(
+      [
+        `/organizations/${organization.slug}/config/integrations/`,
+        {
+          query: {
+            provider_key: 'github',
+          },
+        },
+      ],
+      {
+        staleTime: Infinity,
+        retry: false,
+      }
+    );
+
+  const provider = integrationInfo?.providers[0];
+
   return (
     <Flex gap="sm" direction="column" align="start">
       <Grid columns="max-content 1fr" gap="sm">
@@ -37,14 +67,35 @@ function OrgFooterMessage() {
           </Text>
         )}
       </Grid>
-      <LinkButton
-        href="https://github.com/apps/sentry/installations/select_target"
-        size="xs"
-        icon={<IconAdd />}
-        external
-      >
-        {t('GitHub Organization')}
-      </LinkButton>
+      {isIntegrationInfoPending ? (
+        <LoadingIndicator />
+      ) : provider ? (
+        <AddIntegration
+          provider={provider}
+          onInstall={handleAddIntegration}
+          organization={organization}
+        >
+          {openDialog => (
+            <Button
+              size="xs"
+              icon={<IconAdd />}
+              priority="default"
+              onClick={() => openDialog()}
+            >
+              {t('GitHub Organization')}
+            </Button>
+          )}
+        </AddIntegration>
+      ) : (
+        <LinkButton
+          href="https://github.com/apps/sentry/installations/select_target"
+          size="xs"
+          icon={<IconAdd />}
+          external
+        >
+          {t('GitHub Organization')}
+        </LinkButton>
+      )}
     </Flex>
   );
 }

static/app/views/prevent/index.spec.tsx

@@ -1,3 +1,4 @@
+import {GitHubIntegrationProviderFixture} from 'sentry-fixture/githubIntegrationProvider';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
@@ -15,6 +16,16 @@ describe('PreventPage', () => {
     children: [{index: true, element: <p>Test content</p>}],
   };
 
+  beforeEach(() => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/org-slug/config/integrations/`,
+      method: 'GET',
+      body: {
+        providers: [GitHubIntegrationProviderFixture()],
+      },
+    });
+  });
+
   describe('when the user has access to the feature', () => {
     it('renders the passed children', () => {
       render(<PreventPage />, {

static/app/views/prevent/tests/onboarding.spec.tsx

@@ -1,3 +1,5 @@
+import {GitHubIntegrationProviderFixture} from 'sentry-fixture/githubIntegrationProvider';
+
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {PreventContext} from 'sentry/components/prevent/context/preventContext';
@@ -9,6 +11,7 @@ jest.mock('sentry/utils/regions', () => ({
 }));
 
 const mockGetRegionData = jest.mocked(getRegionDataFromOrganization);
+const mockProvider = GitHubIntegrationProviderFixture();
 
 const mockPreventContext = {
   repository: 'test-repo',
@@ -87,6 +90,13 @@ describe('TestsOnboardingPage', () => {
       url: `/organizations/org-slug/prevent/owner/123/repository/test-repo/`,
       body: mockRepoData,
     });
+    MockApiClient.addMockResponse({
+      url: `/organizations/org-slug/config/integrations/`,
+      method: 'GET',
+      body: {
+        providers: [mockProvider],
+      },
+    });
   });
 
   afterEach(() => {

static/app/views/prevent/tests/tests.spec.tsx

@@ -1,3 +1,4 @@
+import {GitHubIntegrationProviderFixture} from 'sentry-fixture/githubIntegrationProvider';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
@@ -136,6 +137,13 @@ const mockApiCall = () => {
     method: 'GET',
     body: mockRepoData,
   });
+  MockApiClient.addMockResponse({
+    url: `/organizations/org-slug/config/integrations/`,
+    method: 'GET',
+    body: {
+      providers: [GitHubIntegrationProviderFixture()],
+    },
+  });
 };
 
 describe('CoveragePageWrapper', () => {

static/app/views/prevent/tokens/tokens.spec.tsx

@@ -1,3 +1,5 @@
+import {GitHubIntegrationProviderFixture} from 'sentry-fixture/githubIntegrationProvider';
+
 import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import PreventQueryParamsProvider from 'sentry/components/prevent/container/preventParamsProvider';
@@ -48,6 +50,13 @@ const mockApiCall = () => {
     method: 'GET',
     body: mockRepositoryTokensResponse,
   });
+  MockApiClient.addMockResponse({
+    url: `/organizations/org-slug/config/integrations/`,
+    method: 'GET',
+    body: {
+      providers: [GitHubIntegrationProviderFixture()],
+    },
+  });
 };
 
 describe('TokensPage', () => {
@@ -190,6 +199,14 @@ describe('TokensPage', () => {
         body: mockIntegrations,
       });
 
+      MockApiClient.addMockResponse({
+        url: `/organizations/org-slug/config/integrations/`,
+        method: 'GET',
+        body: {
+          providers: [GitHubIntegrationProviderFixture()],
+        },
+      });
+
       const mockTokensCall = MockApiClient.addMockResponse({
         url: `/organizations/org-slug/prevent/owner/1/repositories/tokens/`,
         method: 'GET',

static/app/views/settings/organizationIntegrations/addIntegrationButton.tsx

@@ -31,11 +31,12 @@ export function AddIntegrationButton({
   ...buttonProps
 }: AddIntegrationButtonProps) {
   const label =
-    (buttonText ?? reinstall)
+    buttonText ??
+    (reinstall
       ? t('Enable')
       : installStatus === 'Disabled'
         ? t('Reinstall')
-        : t('Add %s', provider.metadata.noun);
+        : t('Add %s', provider.metadata.noun));
 
   return (
     <Tooltip