fix(slack): show setup completion as a toast

Author: TheodoreSpeaks

apps/sim/app/o/[organizationId]/settings/components/organization-search-slack.test.tsx

@@ -1,5 +1,6 @@
 /** @vitest-environment jsdom */
 import { act, type ReactNode } from 'react'
+import { ToastProvider } from '@sim/emcn'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { SlackSearchInstallationView } from '@/lib/api/contracts/knowledge/slack'
@@ -93,7 +94,13 @@ async function render(installed = false) {
       },
     })
   }
-  await act(async () => root.render(<OrganizationSearchSlack />))
+  await act(async () =>
+    root.render(
+      <ToastProvider>
+        <OrganizationSearchSlack />
+      </ToastProvider>
+    )
+  )
 }
 function button(label: string) {
   const scope = document.querySelector('[role="dialog"]') ?? document

apps/sim/app/o/[organizationId]/settings/components/organization-search-slack.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useState } from 'react'
-import { Chip, ChipConfirmModal, ChipLink, ChipModalError, ChipTag } from '@sim/emcn'
+import { useEffect, useRef, useState } from 'react'
+import { Chip, ChipConfirmModal, ChipLink, ChipModalError, ChipTag, useToast } from '@sim/emcn'
 import { useQueryState } from 'nuqs'
 import { SlackIcon } from '@/components/icons'
 import { SlackSearchSetupWizard } from '@/components/integrations/slack-search-setup-wizard'
@@ -26,6 +26,8 @@ import {
 
 /** Organization-owned Search bots are installed through the dedicated OAuth wizard. */
 export function OrganizationSearchSlack() {
+  const setupToastShown = useRef(false)
+  const { toast } = useToast()
   const { organization, viewer } = useOrganizationContext()
   const installations = useSlackSearchInstallations(viewer.isAdmin ? organization.id : undefined)
   const configure = useConfigureSlackSearch()
@@ -41,6 +43,14 @@ export function OrganizationSearchSlack() {
     initialName?: string
   } | null>(null)
   const [removeTarget, setRemoveTarget] = useState<{ id: string; name: string } | null>(null)
+
+  useEffect(() => {
+    if (!viewer.isAdmin || setupResult !== 'complete' || setupToastShown.current) return
+    setupToastShown.current = true
+    toast.success('Slack connected')
+    void setSetupResult(null)
+  }, [viewer.isAdmin, setupResult, setSetupResult, toast])
+
   if (!viewer.isAdmin) return null
   const busy = configure.isPending || remove.isPending
   const bots = installations.data?.bots ?? []
@@ -54,12 +64,6 @@ export function OrganizationSearchSlack() {
   return (
     <SettingsPanel>
       <div className='flex max-w-xl flex-col gap-4'>
-        {setupResult === 'complete' && (
-          <div role='status' className='flex items-center justify-between gap-2'>
-            <p className='text-[var(--text-body)] text-sm'>Slack is connected and ready to use.</p>
-            <Chip onClick={() => void setSetupResult(null)}>Dismiss</Chip>
-          </div>
-        )}
         <SettingsSection label='Connection'>
           {installations.error ? (
             <SettingsQueryErrorState

apps/sim/lib/credential-groups/slack-managed-users.test.ts

@@ -34,6 +34,7 @@ const shared = vi.hoisted(() => ({
   flag: vi.fn(),
 }))
 vi.mock('@/lib/core/config/env', () => ({ env: shared.env }))
+vi.mock('@/lib/core/config/env-flags', () => ({ isHosted: true }))
 vi.mock('@/lib/core/config/feature-flags', () => ({ isFeatureEnabled: shared.flag }))
 
 vi.mock('@/lib/core/config/redis', () => ({ getRedisClient: () => redis }))