ref(integrations): Refactor useAddIntegration to accept params at call time

Move useAddIntegration from views/settings/organizationIntegrations/ to
utils/integrations/ and change the API so startFlow() accepts all params
(provider, organization, onInstall, etc.) at call time instead of at
hook init. The hook now manages its own message listener via refs, so a
single instance can launch flows for any provider without a context
provider.

This enables multi-provider UIs like dropdowns to share one hook above
the dropdown, passing the selected provider to startFlow on click.

Extract computeCenteredWindow to utils/window/ and add urlParams to
AddIntegrationParams for the installation_id case.

Refs VDY-69

Author: jaydgoss

…tionIntegrations/addIntegration.spec.tsx …/integrations/useAddIntegration.spec.tsxstatic/app/views/settings/organizationIntegrations/addIntegration.spec.tsx renamed to static/app/utils/integrations/useAddIntegration.spec.tsx static/app/views/settings/organizationIntegrations/addIntegration.spec.tsx renamed to static/app/utils/integrations/useAddIntegration.spec.tsx

@@ -8,7 +8,7 @@ import * as indicators from 'sentry/actionCreators/indicator';
 import * as pipelineModal from 'sentry/components/pipeline/modal';
 import {ConfigStore} from 'sentry/stores/configStore';
 import type {Config} from 'sentry/types/system';
-import {useAddIntegration} from 'sentry/views/settings/organizationIntegrations/addIntegration';
+import {useAddIntegration} from 'sentry/utils/integrations/useAddIntegration';
 
 describe('useAddIntegration', () => {
   const provider = GitHubIntegrationProviderFixture();
@@ -54,16 +54,16 @@ describe('useAddIntegration', () => {
     });
 
     it('opens a popup window when startFlow is called', () => {
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
       );
 
-      act(() => result.current.startFlow());
-
       expect(window.open).toHaveBeenCalledTimes(1);
       expect(jest.mocked(window.open).mock.calls[0]![0]).toBe(
         '/github-integration-setup-uri/?'
@@ -72,8 +72,10 @@ describe('useAddIntegration', () => {
     });
 
     it('includes account and modalParams in the popup URL', () => {
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
@@ -82,8 +84,6 @@ describe('useAddIntegration', () => {
         })
       );
 
-      act(() => result.current.startFlow());
-
       const calls = jest.mocked(window.open).mock.calls[0]!;
       const url = calls[0] as string;
       expect(url).toContain('account=my-account');
@@ -92,33 +92,34 @@ describe('useAddIntegration', () => {
     });
 
     it('includes urlParams passed to startFlow', () => {
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
+          urlParams: {custom_param: 'value'},
         })
       );
 
-      act(() => result.current.startFlow({custom_param: 'value'}));
-
       const url = jest.mocked(window.open).mock.calls[0]![0] as string;
       expect(url).toContain('custom_param=value');
     });
 
     it('calls onInstall when a success message is received', async () => {
       const onInstall = jest.fn();
 
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization: OrganizationFixture(),
           onInstall,
         })
       );
 
-      act(() => result.current.startFlow());
-
       const newIntegration = {
         success: true,
         data: {
@@ -137,50 +138,50 @@ describe('useAddIntegration', () => {
     it('shows a success indicator on successful installation', async () => {
       const successSpy = jest.spyOn(indicators, 'addSuccessMessage');
 
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
       );
 
-      act(() => result.current.startFlow());
-
       postMessageFromPopup(popup, {success: true, data: integration});
       await waitFor(() => expect(successSpy).toHaveBeenCalledWith('GitHub added'));
     });
 
     it('shows an error indicator when the message has success: false', async () => {
       const errorSpy = jest.spyOn(indicators, 'addErrorMessage');
 
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
       );
 
-      act(() => result.current.startFlow());
-
       postMessageFromPopup(popup, {success: false, data: {error: 'OAuth failed'}});
       await waitFor(() => expect(errorSpy).toHaveBeenCalledWith('OAuth failed'));
     });
 
     it('shows a generic error when no error message is provided', async () => {
       const errorSpy = jest.spyOn(indicators, 'addErrorMessage');
 
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
       );
 
-      act(() => result.current.startFlow());
-
       postMessageFromPopup(popup, {success: false, data: {}});
       await waitFor(() =>
         expect(errorSpy).toHaveBeenCalledWith('An unknown error occurred')
@@ -190,13 +191,7 @@ describe('useAddIntegration', () => {
     it('ignores messages from invalid origins', async () => {
       const onInstall = jest.fn();
 
-      renderHookWithProviders(() =>
-        useAddIntegration({
-          provider,
-          organization: OrganizationFixture(),
-          onInstall,
-        })
-      );
+      renderHookWithProviders(() => useAddIntegration());
 
       // jsdom's postMessage uses origin '' which won't match any valid origin
       window.postMessage({success: true, data: integration}, '*');
@@ -210,16 +205,16 @@ describe('useAddIntegration', () => {
     it('does not call onInstall when data is empty on success', async () => {
       const onInstall = jest.fn();
 
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization: OrganizationFixture(),
           onInstall,
         })
       );
 
-      act(() => result.current.startFlow());
-
       postMessageFromPopup(popup, {success: true, data: null});
 
       await act(async () => {
@@ -229,15 +224,15 @@ describe('useAddIntegration', () => {
     });
 
     it('closes the dialog on unmount', () => {
-      const {result, unmount} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result, unmount} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
       );
-
-      act(() => result.current.startFlow());
       unmount();
 
       expect(popup.close).toHaveBeenCalledTimes(1);
@@ -253,16 +248,16 @@ describe('useAddIntegration', () => {
         features: ['integration-api-pipeline-github'],
       });
 
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization,
           onInstall,
         })
       );
 
-      act(() => result.current.startFlow());
-
       expect(openPipelineModalSpy).toHaveBeenCalledWith({
         type: 'integration',
         provider: 'github',
@@ -278,16 +273,17 @@ describe('useAddIntegration', () => {
         features: ['integration-api-pipeline-github'],
       });
 
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization,
           onInstall: jest.fn(),
+          urlParams: {installation_id: '12345'},
         })
       );
 
-      act(() => result.current.startFlow({installation_id: '12345'}));
-
       expect(openPipelineModalSpy).toHaveBeenCalledWith(
         expect.objectContaining({
           initialData: {installation_id: '12345'},
@@ -303,16 +299,16 @@ describe('useAddIntegration', () => {
         features: ['integration-api-pipeline-github'],
       });
 
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization,
           onInstall: jest.fn(),
         })
       );
 
-      act(() => result.current.startFlow());
-
       expect(window.open).not.toHaveBeenCalled();
     });
 
@@ -324,16 +320,16 @@ describe('useAddIntegration', () => {
 
       const organization = OrganizationFixture({features: []});
 
-      const {result} = renderHookWithProviders(() =>
-        useAddIntegration({
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
           provider,
           organization,
           onInstall: jest.fn(),
         })
       );
 
-      act(() => result.current.startFlow());
-
       expect(openPipelineModalSpy).not.toHaveBeenCalled();
       expect(window.open).toHaveBeenCalledTimes(1);
     });