From 282584cb718760f4d462b1d368af3237dea0b8c5 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 13 Jul 2025 14:37:53 +0000
Subject: [PATCH 1/2] Replace Select with Dropdown for Slack channel selection

Co-authored-by: natemkelley <natemkelley@gmail.com>
---
 .../integrations/SlackIntegrations.tsx        | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/features/integrations/SlackIntegrations.tsx b/apps/web/src/components/features/integrations/SlackIntegrations.tsx
index 509ab3b09..34f968871 100644
--- a/apps/web/src/components/features/integrations/SlackIntegrations.tsx
+++ b/apps/web/src/components/features/integrations/SlackIntegrations.tsx
@@ -14,8 +14,8 @@ import {
 } from '@/api/buster_rest/slack/queryRequests';
 import { Dropdown, type DropdownItems } from '@/components/ui/dropdown';
 import { LinkSlash, Refresh2 } from '@/components/ui/icons';
-import { Select } from '@/components/ui/select';
 import { useMemoizedFn } from '@/hooks';
+import pluralize from 'pluralize';
 import { StatusCard } from '@/components/ui/card/StatusCard';
 
 export const SlackIntegrations = React.memo(() => {
@@ -125,11 +125,12 @@ const ConnectedSlackChannels = React.memo(() => {
   const items = useMemo(() => {
     return channels.map((channel) => ({
       label: channel.name,
-      value: channel.id
+      value: channel.id,
+      selected: channel.id === selectedChannelId
     }));
-  }, [channels]);
+  }, [channels, selectedChannelId]);
 
-  const onChange = useMemoizedFn((channelId: string) => {
+  const onSelect = useMemoizedFn((channelId: string) => {
     const channel = channels.find((channel) => channel.id === channelId);
     if (!channel) return;
     updateSlackIntegration({
@@ -168,15 +169,20 @@ const ConnectedSlackChannels = React.memo(() => {
               </Button>
             )}
 
-            <Select
-              className="w-fit min-w-40"
+            <Dropdown
+              selectType="single"
               items={items}
-              placeholder="Select a channel"
-              value={selectedChannelId}
-              onChange={onChange}
-              search={true}
-              loading={isLoadingSlackChannels || isLoadingSlackIntegration}
-            />
+              onSelect={onSelect}
+              menuHeader="Search channels"
+              className="w-fit min-w-40"
+            >
+              <Text variant="secondary">
+                {selectedChannelId 
+                  ? `#${channels.find(c => c.id === selectedChannelId)?.name || 'Unknown channel'}`
+                  : 'Select a channel'
+                }
+              </Text>
+            </Dropdown>
           </>
         ) : (
           <div className="flex items-center space-x-2">

From a73502b047c67f2cffb26bb120f526c1cf58d814 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 14 Jul 2025 11:50:49 -0600
Subject: [PATCH 2/2] Change styling for select button

---
 .../integrations/SlackIntegrations.tsx        | 50 ++++++++++++++-----
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/features/integrations/SlackIntegrations.tsx b/apps/web/src/components/features/integrations/SlackIntegrations.tsx
index 34f968871..6e962c44b 100644
--- a/apps/web/src/components/features/integrations/SlackIntegrations.tsx
+++ b/apps/web/src/components/features/integrations/SlackIntegrations.tsx
@@ -17,13 +17,32 @@ import { LinkSlash, Refresh2 } from '@/components/ui/icons';
 import { useMemoizedFn } from '@/hooks';
 import pluralize from 'pluralize';
 import { StatusCard } from '@/components/ui/card/StatusCard';
+import type { GetChannelsResponse, GetIntegrationResponse } from '@buster/server-shared/slack';
 
 export const SlackIntegrations = React.memo(() => {
   const {
-    data: slackIntegration,
-    isFetched: isFetchedSlackIntegration,
-    error: slackIntegrationError
+    //  data: slackIntegration,
+    //  isFetched: isFetchedSlackIntegration,
+    //  error: slackIntegrationError
   } = useGetSlackIntegration();
+
+  const slackIntegration: GetIntegrationResponse = {
+    connected: true,
+    integration: {
+      id: '123',
+      team_name: 'Test Team',
+      installed_at: '2021-01-01',
+      team_domain: 'test-team',
+      last_used_at: '2021-01-01',
+      default_channel: {
+        id: '123',
+        name: 'Test Channel'
+      }
+    }
+  };
+  const slackIntegrationError = null;
+  const isFetchedSlackIntegration = true;
+
   const isConnected = slackIntegration?.connected ?? false;
 
   const cards = useMemo(() => {
@@ -117,6 +136,7 @@ const ConnectedSlackChannels = React.memo(() => {
     isFetched: isFetchedSlackChannels,
     error: slackChannelsError
   } = useGetSlackChannels();
+
   const { mutate: updateSlackIntegration } = useUpdateSlackIntegration();
 
   const channels = slackChannelsData?.channels || [];
@@ -130,6 +150,10 @@ const ConnectedSlackChannels = React.memo(() => {
     }));
   }, [channels, selectedChannelId]);
 
+  const numberOfSelectedChannels = useMemo(() => {
+    return items.filter((item) => item.selected).length;
+  }, [items]);
+
   const onSelect = useMemoizedFn((channelId: string) => {
     const channel = channels.find((channel) => channel.id === channelId);
     if (!channel) return;
@@ -170,18 +194,20 @@ const ConnectedSlackChannels = React.memo(() => {
             )}
 
             <Dropdown
-              selectType="single"
+              selectType="multiple"
               items={items}
               onSelect={onSelect}
               menuHeader="Search channels"
-              className="w-fit min-w-40"
-            >
-              <Text variant="secondary">
-                {selectedChannelId 
-                  ? `#${channels.find(c => c.id === selectedChannelId)?.name || 'Unknown channel'}`
-                  : 'Select a channel'
-                }
-              </Text>
+              className="w-fit min-w-40">
+              <Button
+                disabled={!isFetchedSlackChannels}
+                loading={showLoadingButton}
+                size={'tall'}
+                variant="default">
+                {numberOfSelectedChannels > 0
+                  ? `${numberOfSelectedChannels} ${pluralize('channel', numberOfSelectedChannels)} selected`
+                  : 'Select a channel'}
+              </Button>
             </Dropdown>
           </>
         ) : (