chore(scm-project-creation-flow): Clearing alert channel on refetch (#119461)

Fixes: [LINEAR
TICKET](https://linear.app/getsentry/issue/VDY-130/messaging-integration-refetch-resets-providerintegration-without)

The notification picker's auto-select effect was keyed on
`providersToIntegrations`, which gets a fresh reference on every refetch
(stale time zero + refetch-on-focus), so refetches re-ran it and reset
the user's provider/integration and could strand a chosen channel. This
guards the init with a ref so it runs once after the query first
succeeds and clears the channel there; later refetches no longer rewrite
a user-selected provider, integration, or channel.

Covered by new `issueAlertNotificationOptions.spec.tsx` tests simulating
a refetch and asserting the user's selection persists, with existing
specs updated.

Author: Abdkhan14

static/app/views/projectInstall/issueAlertNotificationOptions.spec.tsx

@@ -2,12 +2,22 @@ import {GitHubIntegrationProviderFixture} from 'sentry-fixture/githubIntegration
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {OrganizationIntegrationsFixture} from 'sentry-fixture/organizationIntegrations';
 
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {
+  act,
+  render,
+  renderHookWithProviders,
+  screen,
+  userEvent,
+  waitFor,
+} from 'sentry-test/reactTestingLibrary';
 
+import {IssueAlertActionType} from 'sentry/types/alerts';
 import type {OrganizationIntegration} from 'sentry/types/integrations';
 import {
   IssueAlertNotificationOptions,
   type IssueAlertNotificationProps,
+  MultipleCheckboxOptions,
+  useCreateNotificationAction,
 } from 'sentry/views/projectInstall/issueAlertNotificationOptions';
 
 describe('MessagingIntegrationAlertRule', () => {
@@ -94,3 +104,116 @@ describe('MessagingIntegrationAlertRule', () => {
     expect(mockSetAction).toHaveBeenCalled();
   });
 });
+
+describe('useCreateNotificationAction', () => {
+  const organization = OrganizationFixture();
+
+  const slackIntegration = OrganizationIntegrationsFixture({
+    id: '1',
+    name: 'my-workspace',
+    status: 'active',
+    provider: {
+      key: 'slack',
+      slug: 'slack',
+      name: 'Slack',
+      canAdd: true,
+      canDisable: false,
+      features: [],
+      aspects: {},
+    },
+  });
+
+  function addIntegrationsResponse(body: OrganizationIntegration[]) {
+    return MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/integrations/`,
+      body,
+      match: [MockApiClient.matchQuery({integrationType: 'messaging'})],
+    });
+  }
+
+  afterEach(() => {
+    MockApiClient.clearMockResponses();
+  });
+
+  it('defaults provider and integration from the first result on load', async () => {
+    addIntegrationsResponse([slackIntegration]);
+
+    const {result} = renderHookWithProviders(() => useCreateNotificationAction(), {
+      organization,
+    });
+
+    // Initially unset while the query is pending.
+    expect(result.current.notificationProps.provider).toBeUndefined();
+
+    // After the query resolves, defaults to the first provider/integration.
+    await waitFor(() => expect(result.current.notificationProps.provider).toBe('slack'));
+    expect(result.current.notificationProps.integration?.id).toBe(slackIntegration.id);
+    expect(result.current.notificationProps.channel).toBeUndefined();
+  });
+
+  it('does not clobber a user-selected channel when the integrations list refetches', async () => {
+    const secondIntegration = OrganizationIntegrationsFixture({
+      id: '2',
+      name: 'another-workspace',
+      status: 'active',
+      provider: slackIntegration.provider,
+    });
+
+    // Initial load returns one integration.
+    addIntegrationsResponse([slackIntegration]);
+
+    const {result, rerender} = renderHookWithProviders(
+      () => useCreateNotificationAction(),
+      {organization}
+    );
+
+    await waitFor(() => expect(result.current.notificationProps.provider).toBe('slack'));
+
+    // User picks a channel.
+    act(() => {
+      result.current.notificationProps.setChannel({label: '#alerts', value: '#alerts'});
+    });
+    expect(result.current.notificationProps.channel?.value).toBe('#alerts');
+
+    // A refetch comes in with an updated list. Simulate by providing a new mock response
+    // with two integrations and re-rendering so the deps change.
+    MockApiClient.clearMockResponses();
+    addIntegrationsResponse([slackIntegration, secondIntegration]);
+    act(() => {
+      rerender();
+    });
+
+    // The run-once guard holds: provider/integration/channel are not reset.
+    expect(result.current.notificationProps.provider).toBe('slack');
+    expect(result.current.notificationProps.integration?.id).toBe(slackIntegration.id);
+    expect(result.current.notificationProps.channel?.value).toBe('#alerts');
+  });
+
+  it('resolves provider, integration, and actions from defaultActions on mount', async () => {
+    addIntegrationsResponse([slackIntegration]);
+
+    // Stable reference: the autofill effect depends on `defaultActions`, so an
+    // inline array (new ref each render) would loop render -> setState -> render.
+    const defaultActions = [
+      {
+        id: IssueAlertActionType.SLACK,
+        workspace: slackIntegration.id,
+        channel: '#eng',
+      },
+    ];
+
+    const {result} = renderHookWithProviders(
+      () => useCreateNotificationAction({actions: defaultActions}),
+      {organization}
+    );
+
+    await act(async () => {});
+
+    // Autofill effect from defaultActions sets provider, integration, and channel.
+    expect(result.current.notificationProps.provider).toBe('slack');
+    expect(result.current.notificationProps.actions).toContain(
+      MultipleCheckboxOptions.INTEGRATION
+    );
+    expect(result.current.notificationProps.channel?.value).toBe('#eng');
+  });
+});

static/app/views/projectInstall/issueAlertNotificationOptions.tsx

@@ -1,4 +1,12 @@
-import {Fragment, useCallback, useEffect, useMemo, useState, type ReactNode} from 'react';
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
 
 import {Stack} from '@sentry/scraps/layout';
 
@@ -123,7 +131,16 @@ export function useCreateNotificationAction({
     undefined
   );
   const [channel, setChannel] = useState<IntegrationChannel | undefined>(undefined);
-  const [shouldRenderSetupButton, setShouldRenderSetupButton] = useState(false);
+
+  const hasInitializedSelection = useRef(false);
+
+  // Derived rather than state so it stays in sync with the query instead of
+  // freezing at its first-success value: if the first fetch has no
+  // integrations, connecting one via SetupMessagingIntegrationButton
+  // refetches this query and should reveal the integration checkbox.
+  const shouldRenderSetupButton =
+    messagingIntegrationsQuery.isSuccess &&
+    Object.keys(providersToIntegrations).length === 0;
 
   useEffect(() => {
     // Initializes form state based on the first default action and available integrations.
@@ -145,8 +162,6 @@ export function useCreateNotificationAction({
     setProvider(matchedProviderKey);
     setIntegration(matchedIntegration);
 
-    setShouldRenderSetupButton(!matchedIntegration);
-
     const newActions =
       firstAction.id === IssueAlertActionType.NOTIFY_EMAIL
         ? [MultipleCheckboxOptions.EMAIL]
@@ -164,14 +179,24 @@ export function useCreateNotificationAction({
   }, [defaultActions, providersToIntegrations]);
 
   useEffect(() => {
-    if (messagingIntegrationsQuery.isSuccess) {
-      const providerKeys = Object.keys(providersToIntegrations);
-      const firstProvider = providerKeys[0];
-      const firstIntegration = providersToIntegrations[String(firstProvider)]?.[0];
-      setProvider(firstProvider);
-      setIntegration(firstIntegration);
-      setShouldRenderSetupButton(!firstProvider);
+    if (!messagingIntegrationsQuery.isSuccess || hasInitializedSelection.current) {
+      return;
     }
+    const providerKeys = Object.keys(providersToIntegrations);
+    const firstProvider = providerKeys[0];
+
+    // If the first fetch returned no integrations, don't mark as initialized yet.
+    // A subsequent refetch (e.g. after connecting via SetupMessagingIntegrationButton)
+    // may deliver integrations and must be allowed to auto-select provider/integration.
+    if (!firstProvider) {
+      return;
+    }
+
+    hasInitializedSelection.current = true;
+    const firstIntegration = providersToIntegrations[String(firstProvider)]?.[0];
+    setProvider(firstProvider);
+    setIntegration(firstIntegration);
+    setChannel(undefined);
   }, [messagingIntegrationsQuery.isSuccess, providersToIntegrations]);
 
   const createNotificationAction = useCallback(

static/app/views/projectInstall/messagingIntegrationAlertRule.spec.tsx

@@ -88,6 +88,21 @@ describe('MessagingIntegrationAlertRule', () => {
     expect(screen.getAllByRole('textbox')).toHaveLength(3);
   });
 
+  it('clears the channel select when channel prop becomes undefined', () => {
+    const {rerender} = render(getComponent(), {organization});
+
+    // The initial channel value label is visible.
+    expect(screen.getByText('channel')).toBeInTheDocument();
+
+    // Parent state clears channel (e.g. after provider or integration change).
+    rerender(
+      <MessagingIntegrationAlertRule {...notificationProps} channel={undefined} />
+    );
+
+    // The stale channel label must no longer be shown; the select is empty.
+    expect(screen.queryByText('channel')).not.toBeInTheDocument();
+  });
+
   it('calls setter when new integration is selected', async () => {
     render(getComponent());
     await selectEvent.select(

static/app/views/projectInstall/messagingIntegrationAlertRule.tsx

@@ -171,7 +171,7 @@ export function ChannelSelect({
       options={options}
       isLoading={isLoading}
       disabled={disabled}
-      value={value ? {label: value.label, value: value.value} : undefined}
+      value={value ? {label: value.label, value: value.value} : null}
       onChange={onChange}
       onCreateOption={onCreateOption}
       clearable