fix(project-creation): Discord and MSTeams notifications should send channel id instead of name (#103146)

Contributes to
https://linear.app/getsentry/issue/TET-1369/user-confusion-when-project-creation-fails-but-succeeds

Author: priscilawebdev

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

@@ -149,12 +149,12 @@ describe('MessagingIntegrationAlertRule', () => {
       />
     );
     await selectEvent.openMenu(screen.getByLabelText('channel'));
-    expect(await screen.findByText('#alerts')).toBeInTheDocument();
-    expect(screen.getByText('#general')).toBeInTheDocument();
-    await selectEvent.select(screen.getByLabelText('channel'), '#alerts');
+    expect(await screen.findByText('#general (1)')).toBeInTheDocument();
+    expect(screen.getByText('#alerts (2)')).toBeInTheDocument();
+    await selectEvent.select(screen.getByLabelText('channel'), /#alerts/);
     expect(mockSetChannel).toHaveBeenCalledWith({
-      label: '#alerts',
-      value: '#alerts',
+      label: '#alerts (2)',
+      value: '2',
       new: false,
     });
   });
@@ -357,4 +357,35 @@ describe('MessagingIntegrationAlertRule', () => {
 
     spy.mockRestore();
   });
+
+  it('displays and sends channel id for microsoft teams', async () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/integrations/${msteamsIntegrations[0]!.id}/channels/`,
+      body: {
+        nextCursor: null,
+        results: [
+          {id: '1', name: 'general', display: '#general', type: 'text'},
+          {id: '2', name: 'alerts', display: '#alerts', type: 'text'},
+        ],
+      },
+    });
+    render(
+      <MessagingIntegrationAlertRule
+        {...{
+          ...notificationProps,
+          integration: msteamsIntegrations[0],
+          provider: 'msteams',
+        }}
+      />
+    );
+    await selectEvent.openMenu(screen.getByLabelText('channel'));
+    expect(await screen.findByText('#general (1)')).toBeInTheDocument();
+    expect(screen.getByText('#alerts (2)')).toBeInTheDocument();
+    await selectEvent.select(screen.getByLabelText('channel'), /#alerts/);
+    expect(mockSetChannel).toHaveBeenCalledWith({
+      label: '#alerts (2)',
+      value: '2',
+      new: false,
+    });
+  });
 });

static/app/views/projectInstall/messagingIntegrationAlertRule.tsx

@@ -115,10 +115,17 @@ export default function MessagingIntegrationAlertRule({
                   providerDetails[provider as keyof typeof providerDetails]?.placeholder
                 }
                 isSearchable
-                options={channels?.results.map(ch => ({
-                  label: ch.display,
-                  value: ch.display,
-                }))}
+                options={channels?.results.map(ch =>
+                  provider === 'slack'
+                    ? {
+                        label: ch.display,
+                        value: ch.display,
+                      }
+                    : {
+                        label: `${ch.display} (${ch.id})`,
+                        value: ch.id,
+                      }
+                )}
                 isLoading={isPending || validateChannel.isFetching}
                 disabled={!integration}
                 value={channel ? {label: channel.label, value: channel.value} : undefined}