feat(project-creation): Replace input text with select to list integration channels #101403

priscilawebdev · 2025-10-13T07:19:58Z

Problem

When creating a project and configuring notifications to send to Slack, Microsoft Teams, or Discord channels, users currently have to manually enter the channel name.
If the entered channel does not exist, project creation fails (and this is happening quite often see)

This design was originally chosen because:

Some organizations have over 1,000 channels, and

Slack’s API limits the conversations.list endpoint to a maximum of 1,000 results and does not support server-side search.

As a result, even if channels matching a prefix (e.g., discord-) exist, they may not appear in the retrieved set. This means users can type a valid channel name that is simply missing from the truncated API response, leading to failed validation and a poor user experience.

Solution

Since Slack’s API limitations remain and a search api is only available for enterprise users, we can improve our UX with the following approach:

Display up to the 1,000 channels returned by Slack’s API. Users can still manually type a channel name. If the typed channel is not in the list, by selecting it we send an API request to validate the channel, if the channel doesn't exist we display an error message.

Preview

Screen.Recording.2025-10-21.at.06.54.27.mov

closes https://linear.app/getsentry/issue/TET-1229/implement-dropdown-or-validation-for-slack-field

github-actions · 2025-10-13T07:20:19Z

🚨 Warning: This pull request contains Frontend and Backend changes!

It's discouraged to make changes to Sentry's Frontend and Backend in a single pull request. The Frontend and Backend are not atomically deployed. If the changes are interdependent of each other, they must be separated into two pull requests and be made forward or backwards compatible, such that the Backend or Frontend can be safely deployed independently.

Have questions? Please ask in the #discuss-dev-infra channel.

…egration-channels

codecov · 2025-10-13T07:32:24Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff            @@
##           master   #101403   +/-   ##
========================================
  Coverage   80.97%    80.97%           
========================================
  Files        8721      8721           
  Lines      387806    387798    -8     
  Branches    24544     24544           
========================================
- Hits       314038    314033    -5     
+ Misses      73420     73417    -3     
  Partials      348       348

…egration-channels

…nels' into priscila/feat/add-select-dropddown-for-integrations-channels

…egration-channels

…nels' into priscila/feat/add-select-dropddown-for-integrations-channels

ArthurKnaus · 2025-10-22T07:29:50Z

static/app/views/projectInstall/messagingIntegrationAlertRule.tsx

+                clearable
+                // The Slack API returns the maximum of channels, and users might not find the channel they want in the first 1000.
+                // This allows them to add a channel that is not present in the results.
+                creatable


This gives me the impression that I can create a slack channel, which is not possible, right?

its not possible, but the user can manually type a channel. I will update the comment

The comment is not the problem, the UX is

iirc, react-select exposes props which can be used to edit the prefix for the create options.
No prefix would be best imo.

maybe "Use" ? because the "+" indicates "Add" too

can't we remove the "+"?

the core component is enforcing the '+'. I hacked something for this use case, but imo we should leave it there or update the core component.

ArthurKnaus · 2025-10-22T07:35:01Z

the layout is jumping for me

Screen.Recording.2025-10-22.at.09.34.28.mov

ArthurKnaus · 2025-10-22T07:36:46Z

static/app/views/projectInstall/messagingIntegrationAlertRule.tsx

-              setChannel(e.target.value)
-            }
-          />
+          <FormField name="channel" error={validateChannel.error}>


The form field adds some additional padding on the left.

it should be good now

ArthurKnaus · 2025-10-22T07:37:55Z

static/app/views/projectInstall/useValidateChannel.ts

+      }),
+    error:
+      data?.valid === false
+        ? (data.detail ?? t('Invalid integration channel'))


What does invalid mean? Does it mean that the channel does not exist or that I don't have permissions? We should clarify that.

Good observation. In Slack, for example, the response intentionally uses the same error code (channel_not_found) in both cases as a privacy/security measure...they don’t want to reveal whether a private channel exists that a user cannot access.

In contrast, MSTeams simply returns None, so we can’t determine the difference.

Discord is the only platform that exposes this distinction.

Our API currently doesn’t indicate if an error was due to permissions. Should we add that in a follow-up, or is it overkill?

Saying "Invalid" is very abstract and I would still go with that

I would mention that it could be due to those two cases (permissions, non-existence).
But that is not blocking the PR 👍

I updated the error to be "Channel not found or restricted" 😉

priscilawebdev · 2025-10-22T08:01:28Z

the layout is jumping for me

Screen.Recording.2025-10-22.at.09.34.28.mov

Oh, I thought we had solved this in the PR , but since this is Creatable, the issue isn’t completely resolved. I’ll add a prop now, and follow up to make menuPlacement="auto" a non-changing prop.

…ts (#102067) Recently, we decided to introduce the prop menuPlacement="auto" as the default behavior for ReactSelect ([see](#100658)). However, I noticed through the [PR](#101403 (comment)) that this default was not being applied when the component was a CreatableSelect. This PR fixes that issue, making `menuPlacement="auto"` the default for all select components.

priscilawebdev added 4 commits October 10, 2025 07:25

feat(integration): Add new endpoint to list channels

4397a7a

fix test

16769df

fix tests

280d89c

fix type issue

6739e23

github-actions bot added Scope: Frontend Automatically applied to PRs that change frontend components Scope: Backend Automatically applied to PRs that change backend components labels Oct 13, 2025

vercel bot deployed to Preview October 13, 2025 07:21 View deployment

Merge branch 'master' into priscila/feat/add-new-endpoint-to-list-int…

6f28480

…egration-channels

feedback

adec286

vercel bot deployed to Preview October 13, 2025 11:16 View deployment

priscilawebdev added 2 commits October 13, 2025 13:33

fix types

fb40b9a

Merge branch 'master' into priscila/feat/add-new-endpoint-to-list-int…

ba2245d

…egration-channels

vercel bot deployed to Preview October 13, 2025 11:39 View deployment

add int channels to silo url patterns

cfc551c

vercel bot deployed to Preview October 13, 2025 12:15 View deployment

feat(project-creation): Replace input text with select to list channels

981ee3c

priscilawebdev force-pushed the priscila/feat/add-select-dropddown-for-integrations-channels branch from c08b7b0 to 981ee3c Compare October 14, 2025 04:41

🛠️ apply pre-commit fixes

9609715

vercel bot deployed to Preview October 14, 2025 04:45 View deployment

priscilawebdev added 2 commits October 14, 2025 07:00

cursor feedback

1488f2a

Merge branch 'priscila/feat/add-new-endpoint-to-list-integration-chan…

9405bbe

…nels' into priscila/feat/add-select-dropddown-for-integrations-channels

priscilawebdev removed the Scope: Backend Automatically applied to PRs that change backend components label Oct 14, 2025

vercel bot deployed to Preview October 14, 2025 05:03 View deployment

priscilawebdev added 3 commits October 14, 2025 07:41

fix integration initialization

f016f7f

Merge branch 'master' into priscila/feat/add-new-endpoint-to-list-int…

f1fadad

…egration-channels

Merge branch 'priscila/feat/add-new-endpoint-to-list-integration-chan…

c41c910

…nels' into priscila/feat/add-select-dropddown-for-integrations-channels

vercel bot deployed to Preview October 14, 2025 05:45 View deployment

fix x

59e57b0

vercel bot deployed to Preview October 21, 2025 11:17 View deployment

This comment was marked as outdated.

Sign in to view

cursor feedback

b2ec59b

vercel bot deployed to Preview October 21, 2025 11:21 View deployment

fix ts errors

91e3e72

vercel bot deployed to Preview October 21, 2025 11:27 View deployment

ArthurKnaus reviewed Oct 22, 2025

View reviewed changes

feedback

dfc98cd

vercel bot deployed to Preview October 22, 2025 08:29 View deployment

fix test

a158e10

vercel bot deployed to Preview October 22, 2025 08:46 View deployment

This comment was marked as outdated.

Sign in to view

priscilawebdev requested review from ArthurKnaus and GabeVillalobos and removed request for ArthurKnaus October 22, 2025 08:49

fix another test

e87dca6

ArthurKnaus approved these changes Oct 22, 2025

View reviewed changes

vercel bot deployed to Preview October 22, 2025 08:55 View deployment

update error message

2dcf341

vercel bot deployed to Preview October 22, 2025 09:01 View deployment

GabeVillalobos approved these changes Oct 23, 2025

View reviewed changes

priscilawebdev merged commit c03e335 into master Oct 24, 2025
48 checks passed

priscilawebdev deleted the priscila/feat/add-select-dropddown-for-integrations-channels branch October 24, 2025 04:52

priscilawebdev mentioned this pull request Oct 24, 2025

feat(select): Introduce 'menuPlacement=auto' by default for all selects #102067

Merged

Uh oh!

Uh oh!

feat(project-creation): Replace input text with select to list integration channels #101403

feat(project-creation): Replace input text with select to list integration channels #101403

Uh oh!

Conversation

priscilawebdev commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 13, 2025

Uh oh!

codecov bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

This comment was marked as outdated.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

priscilawebdev Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArthurKnaus commented Oct 22, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

priscilawebdev commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

priscilawebdev commented Oct 13, 2025 •

edited

Loading

codecov bot commented Oct 13, 2025 •

edited

Loading

priscilawebdev Oct 22, 2025 •

edited

Loading

priscilawebdev commented Oct 22, 2025 •

edited

Loading