diff --git a/apps/web/src/api/query_keys/slack.ts b/apps/web/src/api/query_keys/slack.ts index 091acec57..8a748597c 100644 --- a/apps/web/src/api/query_keys/slack.ts +++ b/apps/web/src/api/query_keys/slack.ts @@ -1,7 +1,4 @@ -import type { - GetIntegrationResponse, - GetChannelsResponse -} from '@buster/server-shared/slack'; +import type { GetIntegrationResponse, GetChannelsResponse } from '@buster/server-shared/slack'; import { queryOptions } from '@tanstack/react-query'; export const slackGetIntegration = queryOptions({ @@ -9,10 +6,10 @@ export const slackGetIntegration = queryOptions({ }); export const slackGetChannels = queryOptions({ - queryKey: ['slack', 'channels'] + queryKey: ['slack', 'channels', 'list'] }); export const slackQueryKeys = { slackGetIntegration, slackGetChannels -}; \ No newline at end of file +}; diff --git a/apps/web/src/components/features/integrations/SlackIntegrations.tsx b/apps/web/src/components/features/integrations/SlackIntegrations.tsx index 3b157ae4d..7c2979d07 100644 --- a/apps/web/src/components/features/integrations/SlackIntegrations.tsx +++ b/apps/web/src/components/features/integrations/SlackIntegrations.tsx @@ -1,6 +1,6 @@ 'use client'; -import React from 'react'; +import React, { useMemo } from 'react'; import { SettingsCards } from '../settings/SettingsCard'; import { SlackIcon } from '@/components/ui/icons/customIcons/SlackIcon'; import { Text } from '@/components/ui/typography'; @@ -15,25 +15,34 @@ import { import { Dropdown, type DropdownItems } from '@/components/ui/dropdown'; import { LinkSlash, Refresh2 } from '@/components/ui/icons'; import { Select } from '@/components/ui/select'; +import { StatusCard } from '@/components/ui/card/StatusCard'; +import { useMemoizedFn } from '@/hooks'; export const SlackIntegrations = React.memo(() => { - const { data: slackIntegration } = useGetSlackIntegration(); + const { + data: slackIntegration, + isFetched: isFetchedSlackIntegration, + error: slackIntegrationError + } = useGetSlackIntegration(); const isConnected = slackIntegration?.connected ?? false; - return ( - , - isConnected && - ].filter(Boolean) - } - ]} - /> - ); + const cards = useMemo(() => { + const sections = [ + , + isConnected && + ].filter(Boolean); + return [{ sections }]; + }, [isConnected]); + + if (slackIntegrationError) { + return ; + } + + if (!isFetchedSlackIntegration) { + return
; + } + + return ; }); SlackIntegrations.displayName = 'SlackIntegrations'; @@ -112,6 +121,21 @@ const ConnectedSlackChannels = React.memo(() => { const channels = slackChannelsData?.channels || []; const selectedChannelId = slackIntegration?.integration?.default_channel?.id; + const items = useMemo(() => { + return channels.map((channel) => ({ + label: channel.name, + value: channel.id + })); + }, [channels]); + + const onChange = useMemoizedFn((channelId: string) => { + const channel = channels.find((channel) => channel.id === channelId); + if (!channel) return; + updateSlackIntegration({ + default_channel: channel + }); + }); + return (
@@ -125,7 +149,7 @@ const ConnectedSlackChannels = React.memo(() => { <> {isFetchedSlackChannels && (