ref(integrations): Convert AddIntegration to useAddIntegration hook (#112278)

Replace the class-based AddIntegration render prop component with a
useAddIntegration hook. This modernizes the integration setup flow to
use hooks and prepares for the API-driven pipeline modal by adding
feature-flag-gated support for opening a React pipeline modal instead
of the legacy Django popup window.

- Convert AddIntegration class component to useAddIntegration hook
- Refactor AddIntegrationButton to use the hook directly
- Add API pipeline feature flag support for github and gitlab providers
- Rewrite tests to use renderHookWithProviders with comprehensive
  coverage for both legacy and API pipeline flows

---------

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

Author: 2 people

static/app/views/integrationOrganizationLink/index.tsx

@@ -31,7 +31,7 @@ import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useParams} from 'sentry/utils/useParams';
 import RouteError from 'sentry/views/routeError';
-import {AddIntegration} from 'sentry/views/settings/organizationIntegrations/addIntegration';
+import {useAddIntegration} from 'sentry/views/settings/organizationIntegrations/addIntegration';
 import {IntegrationLayout} from 'sentry/views/settings/organizationIntegrations/detailedView/integrationLayout';
 
 interface GitHubIntegrationInstallation {
@@ -228,37 +228,19 @@ export default function IntegrationOrganizationLink() {
 
     const {IntegrationFeatures} = getIntegrationFeatureGate();
 
-    // Github uses a different installation flow with the installationId as a parameter
-    // We have to wrap our installation button with AddIntegration so we can get the
-    // addIntegrationWithInstallationId callback.
-    // if we don't have an installationId, we need to use the finishInstallation callback.
     return (
       <IntegrationFeatures organization={organization} features={featuresComponents}>
         {({disabled, disabledReason}) => (
-          <AddIntegration
+          <AddIntegrationButton
             provider={provider}
-            onInstall={onInstallWithInstallationId}
             organization={organization}
-          >
-            {addIntegrationWithInstallationId => (
-              <ButtonWrapper>
-                <Button
-                  priority="primary"
-                  disabled={!hasAccess || disabled}
-                  onClick={() =>
-                    installationId
-                      ? addIntegrationWithInstallationId({
-                          installation_id: installationId,
-                        })
-                      : finishInstallation()
-                  }
-                >
-                  {t('Install %s', provider.name)}
-                </Button>
-                {disabled && <IntegrationLayout.DisabledNotice reason={disabledReason} />}
-              </ButtonWrapper>
-            )}
-          </AddIntegration>
+            onInstall={onInstallWithInstallationId}
+            installationId={installationId}
+            hasAccess={hasAccess}
+            disabled={disabled}
+            disabledReason={disabledReason}
+            finishInstallation={finishInstallation}
+          />
         )}
       </IntegrationFeatures>
     );
@@ -420,6 +402,45 @@ export default function IntegrationOrganizationLink() {
   );
 }
 
+function AddIntegrationButton({
+  provider,
+  organization,
+  onInstall,
+  installationId,
+  hasAccess,
+  disabled,
+  disabledReason,
+  finishInstallation,
+}: {
+  disabled: boolean;
+  disabledReason: React.ReactNode;
+  finishInstallation: () => void;
+  hasAccess: boolean | undefined;
+  onInstall: (data: Integration) => void;
+  organization: Organization;
+  provider: IntegrationProvider;
+  installationId?: string;
+}) {
+  const {startFlow} = useAddIntegration({provider, organization, onInstall});
+
+  return (
+    <ButtonWrapper>
+      <Button
+        priority="primary"
+        disabled={!hasAccess || disabled}
+        onClick={() =>
+          installationId
+            ? startFlow({installation_id: installationId})
+            : finishInstallation()
+        }
+      >
+        {t('Install %s', provider.name)}
+      </Button>
+      {disabled && <IntegrationLayout.DisabledNotice reason={disabledReason} />}
+    </ButtonWrapper>
+  );
+}
+
 const InstallLink = styled('pre')`
   margin-bottom: 0;
   background: #fbe3e1;