getsentry · priscilawebdev · Oct 24, 2025 · Oct 10, 2025 · Oct 10, 2025 · Oct 10, 2025
@@ -10,12 +10,14 @@ import {
   userEvent,
   waitFor,
 } from 'sentry-test/reactTestingLibrary';
+import selectEvent from 'sentry-test/selectEvent';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import OrganizationStore from 'sentry/stores/organizationStore';
 import TeamStore from 'sentry/stores/teamStore';
 import type {Organization} from 'sentry/types/organization';
 import {CreateProject} from 'sentry/views/projectInstall/createProject';
+import * as useValidateChannelModule from 'sentry/views/projectInstall/useValidateChannel';
 
 jest.mock('sentry/actionCreators/indicator');
 
@@ -77,17 +79,24 @@ describe('CreateProject', () => {
     access: ['team:admin', 'team:write', 'team:read'],
   });
 
+  const integration = OrganizationIntegrationsFixture({
+    name: "Moo Deng's Workspace",
+  });
+
   beforeEach(() => {
     TeamStore.reset();
     TeamStore.loadUserTeams([teamNoAccess]);
 
     MockApiClient.addMockResponse({
       url: `/organizations/org-slug/integrations/?integrationType=messaging`,
-      body: [
-        OrganizationIntegrationsFixture({
-          name: "Moo Deng's Workspace",
-        }),
-      ],
+      body: [integration],
+    });
+
+    MockApiClient.addMockResponse({
+      url: `/organizations/org-slug/integrations/${integration.id}/channels/`,
+      body: {
+        results: [],
+      },
     });
   });
 
@@ -428,6 +437,102 @@ describe('CreateProject', () => {
       expect(projectCreationMockRequest).toHaveBeenCalled();
     });
 
+    it('should disable submit button when channel validation fails and integration is selected', async () => {
+      renderFrameworkModalMockRequests({
+        organization,
+        teamSlug: teamWithAccess.slug,
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/integrations/${integration.id}/channel-validate/`,
+        body: {valid: false, detail: 'Channel not found'},
+      });
+
+      render(<CreateProject />, {organization});
+
+      await userEvent.click(screen.getByTestId('platform-apple-ios'));
+      expect(screen.getByRole('button', {name: 'Create Project'})).toBeEnabled();
+      await userEvent.click(
+        screen.getByRole('checkbox', {
+          name: /Notify via integration/,
+        })
+      );
+      await selectEvent.create(screen.getByLabelText('channel'), '#custom-channel', {
+        waitForElement: false,
+        createOptionText: '#custom-channel',
+      });
+      expect(await screen.findByText('Channel not found')).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Create Project'})).toBeDisabled();
+      await userEvent.hover(screen.getByRole('button', {name: 'Create Project'}));
+      expect(await screen.findByText('Channel not found')).toBeInTheDocument();
+      await userEvent.click(screen.getByLabelText('Clear choices'));
+      await userEvent.hover(screen.getByRole('button', {name: 'Create Project'}));
+      expect(
+        await screen.findByText(/provide an integration channel/)
+      ).toBeInTheDocument();
+    });
+
+    it('should NOT disable submit button when channel validation fails but integration is unchecked', async () => {
+      renderFrameworkModalMockRequests({
+        organization,
+        teamSlug: teamWithAccess.slug,
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/integrations/${integration.id}/channel-validate/`,
+        body: {valid: false, detail: 'Channel not found'},
+      });
+
+      render(<CreateProject />, {organization});
+
+      await userEvent.click(screen.getByTestId('platform-apple-ios'));
+      await userEvent.click(
+        screen.getByRole('checkbox', {
+          name: /Notify via integration/,
+        })
+      );
+      await selectEvent.create(screen.getByLabelText('channel'), '#custom-channel', {
+        waitForElement: false,
+        createOptionText: '#custom-channel',
+      });
+      expect(await screen.findByText('Channel not found')).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Create Project'})).toBeDisabled();
+      await userEvent.click(
+        screen.getByRole('checkbox', {
+          name: /Notify via integration/,
+        })
+      );
+      await waitFor(() => {
+        expect(screen.getByRole('button', {name: 'Create Project'})).toBeEnabled();
+      });
+    });
+
+    it('should show validating tooltip and disable button while validating channel', async () => {
+      renderFrameworkModalMockRequests({
+        organization,
+        teamSlug: teamWithAccess.slug,
+      });
+
+      jest.spyOn(useValidateChannelModule, 'useValidateChannel').mockReturnValue({
+        isFetching: true,
+        clear: jest.fn(),
+        error: undefined,
+      });
+
+      render(<CreateProject />, {organization});
+      await userEvent.click(screen.getByTestId('platform-apple-ios'));
+      await userEvent.click(
+        screen.getByRole('checkbox', {
+          name: /Notify via integration/,
+        })
+      );
+      expect(screen.getByRole('button', {name: 'Create Project'})).toBeDisabled();
+      await userEvent.hover(screen.getByRole('button', {name: 'Create Project'}));
+      expect(
+        await screen.findByText(/Validating integration channel/)
+      ).toBeInTheDocument();
+    });
+
     it('should create an issue alert rule by default', async () => {
       const {projectCreationMockRequest} = renderFrameworkModalMockRequests({
         organization,

@@ -45,6 +45,7 @@ import {useTeams} from 'sentry/utils/useTeams';
 import {
   MultipleCheckboxOptions,
   useCreateNotificationAction,
+  type IntegrationChannel,
 } from 'sentry/views/projectInstall/issueAlertNotificationOptions';
 import type {
   AlertRuleOptions,
@@ -53,6 +54,7 @@ import type {
 import IssueAlertOptions, {
   getRequestDataFragment,
 } from 'sentry/views/projectInstall/issueAlertOptions';
+import {useValidateChannel} from 'sentry/views/projectInstall/useValidateChannel';
 import {makeProjectsPathname} from 'sentry/views/projects/pathname';
 
 type FormData = {
@@ -82,7 +84,7 @@ function getMissingValues({
   isOrgMemberWithNoAccess: boolean;
   notificationProps: {
     actions?: string[];
-    channel?: string;
+    channel?: IntegrationChannel;
   };
   projectName: string;
   team: string | undefined;
@@ -130,6 +132,7 @@ function getSubmitTooltipText({
   if (isMissingPlatform) {
     return t('Please select a platform');
   }
+
   return t('Please select a team');
 }
 
@@ -141,6 +144,7 @@ export function CreateProject() {
   const location = useLocation();
   const canUserCreateProject = useCanCreateProject();
   const createProjectAndRules = useCreateProjectAndRules();
+
   const {teams} = useTeams();
   const accessTeams = teams.filter((team: Team) => team.access.includes('team:admin'));
   const referrer = decodeScalar(location.query.referrer);
@@ -163,6 +167,12 @@ export function CreateProject() {
     createNotificationActionParam
   );
 
+  const validateChannel = useValidateChannel({
+    channel: notificationProps.channel,
+    integrationId: notificationProps.integration?.id,
+    enabled: false,
+  });
+
   const defaultTeam = accessTeams?.[0]?.slug;
 
   const initialData: FormData = useMemo(() => {
@@ -204,18 +214,26 @@ export function CreateProject() {
     platform: formData.platform,
   });
 
+  const isNotifyingViaIntegration =
+    alertRuleConfig.shouldCreateRule &&
+    notificationProps.actions?.includes(MultipleCheckboxOptions.INTEGRATION);
+
   const formErrorCount = [
     missingValues.isMissingPlatform,
     missingValues.isMissingTeam,
     missingValues.isMissingProjectName,
     missingValues.isMissingAlertThreshold,
     missingValues.isMissingMessagingIntegrationChannel,
+    isNotifyingViaIntegration && validateChannel.error,
   ].filter(value => value).length;
 
-  const submitTooltipText = getSubmitTooltipText({
-    ...missingValues,
-    formErrorCount,
-  });
+  const submitTooltipText =
+    isNotifyingViaIntegration && validateChannel.error
+      ? validateChannel.error
+      : getSubmitTooltipText({
+          ...missingValues,
+          formErrorCount,
+        });
 
   const updateFormData = useCallback(
     <K extends keyof FormData>(field: K, value: FormData[K]) => {
@@ -557,16 +575,25 @@ export function CreateProject() {
               <Tooltip
                 title={
                   canUserCreateProject
-                    ? submitTooltipText
+                    ? isNotifyingViaIntegration && validateChannel.isFetching
+                      ? t('Validating integration channel\u2026')
+                      : submitTooltipText
                     : t('You do not have permission to create projects')
                 }
-                disabled={formErrorCount === 0 && canUserCreateProject}
+                disabled={
+                  formErrorCount === 0 &&
+                  canUserCreateProject &&
+                  !(isNotifyingViaIntegration && validateChannel.isFetching)
+                }
               >
                 <Button
                   data-test-id="create-project"
                   priority="primary"
                   disabled={!(canUserCreateProject && formErrorCount === 0)}
-                  busy={createProjectAndRules.isPending}
+                  busy={
+                    createProjectAndRules.isPending ||
+                    (isNotifyingViaIntegration && validateChannel.isFetching)
+                  }
                   onClick={() => debounceHandleProjectCreation(formData)}
                 >
                   {t('Create Project')}

@@ -16,7 +16,10 @@ describe('MessagingIntegrationAlertRule', () => {
 
   const notificationProps: IssueAlertNotificationProps = {
     actions: [],
-    channel: 'channel',
+    channel: {
+      label: 'channel',
+      value: 'channel',
+    },
     integration: undefined,
     provider: 'slack',
     providersToIntegrations: {},

@@ -63,18 +63,24 @@ export const enum MultipleCheckboxOptions {
   INTEGRATION = 'integration',
 }
 
+export type IntegrationChannel = {
+  label: string;
+  value: string;
+  new?: boolean;
+};
+
 export type IssueAlertNotificationProps = {
   actions: MultipleCheckboxOptions[];
-  channel: string | undefined;
   integration: OrganizationIntegration | undefined;
   provider: string | undefined;
   providersToIntegrations: Record<string, OrganizationIntegration[]>;
   querySuccess: boolean;
   setActions: (action: MultipleCheckboxOptions[]) => void;
-  setChannel: (channel: string | undefined) => void;
+  setChannel: (channel?: IntegrationChannel) => void;
   setIntegration: (integration: OrganizationIntegration | undefined) => void;
   setProvider: (provider: string | undefined) => void;
   shouldRenderSetupButton: boolean;
+  channel?: IntegrationChannel;
 };
 
 export function useCreateNotificationAction({
@@ -109,7 +115,7 @@ export function useCreateNotificationAction({
   const [integration, setIntegration] = useState<OrganizationIntegration | undefined>(
     undefined
   );
-  const [channel, setChannel] = useState<string | undefined>(undefined);
+  const [channel, setChannel] = useState<IntegrationChannel | undefined>(undefined);
   const [shouldRenderSetupButton, setShouldRenderSetupButton] = useState<boolean>(false);
 
   useEffect(() => {
@@ -143,7 +149,10 @@ export function useCreateNotificationAction({
 
     if (firstAction.channel) {
       // eslint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
-      setChannel(firstAction.channel);
+      setChannel({
+        label: firstAction.channel,
+        value: firstAction.channel,
+      });
     }
   }, [defaultActions, providersToIntegrations]);
 
@@ -180,23 +189,23 @@ export function useCreateNotificationAction({
           integrationAction = {
             id: IssueAlertActionType.SLACK,
             workspace: integration?.id,
-            channel,
+            channel: channel?.value,
           };
 
           break;
         case 'discord':
           integrationAction = {
             id: IssueAlertActionType.DISCORD,
             server: integration?.id,
-            channel_id: channel,
+            channel_id: channel?.value,
           };
 
           break;
         case 'msteams':
           integrationAction = {
             id: IssueAlertActionType.MS_TEAMS,
             team: integration?.id,
-            channel,
+            channel: channel?.value,
           };
           break;
         default:

@@ -11,7 +11,10 @@ import IssueAlertOptions, {
 describe('IssueAlertOptions', () => {
   const notificationProps: IssueAlertNotificationProps = {
     actions: [],
-    channel: 'channel',
+    channel: {
+      label: 'channel',
+      value: 'channel',
+    },
     integration: OrganizationIntegrationsFixture(),
     provider: 'slack',
     providersToIntegrations: {},