fix(slack): show shared app installation beside custom bots

Author: TheodoreSpeaks

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

@@ -14,6 +14,7 @@ const mocks = vi.hoisted(() => ({
   refetch: vi.fn(),
   copy: vi.fn(),
   removeError: null as Error | null,
+  installError: null as Error | null,
 }))
 vi.mock('nuqs', () => ({ useQueryState: () => [null, vi.fn()] }))
 vi.mock('@/components/settings/settings-panel', () => ({
@@ -32,7 +33,12 @@ vi.mock('@/hooks/queries/slack-search', () => ({
     error: mocks.removeError,
     reset: vi.fn(),
   }),
-  useStartSlackSearchOAuth: () => ({ mutate: mocks.install, isPending: false, reset: vi.fn() }),
+  useStartSlackSearchOAuth: () => ({
+    mutate: mocks.install,
+    isPending: false,
+    error: mocks.installError,
+    reset: vi.fn(),
+  }),
 }))
 
 import { OrganizationSearchSlack } from '@/app/o/[organizationId]/settings/components/organization-search-slack'
@@ -41,6 +47,7 @@ const installation: SlackSearchInstallationView = {
   id: 'installation-1',
   credentialId: 'credential-1',
   appId: 'A1',
+  appKind: 'custom',
   teamId: 'T1',
   teamName: 'Test workspace',
   enabled: true,
@@ -57,13 +64,16 @@ beforeEach(() => {
   vi.stubGlobal('navigator', { clipboard: { writeText: mocks.copy } })
   mocks.copy.mockReset().mockResolvedValue(undefined)
   mocks.context.mockReturnValue({ organization: { id: 'org-1' }, viewer: { isAdmin: true } })
-  mocks.list.mockReturnValue({ data: { installations: [], bots: [] } })
+  mocks.list.mockReturnValue({
+    data: { sharedAppAvailable: false, installations: [], bots: [] },
+  })
   mocks.manifest.mockReturnValue({
     data: { manifest: '{}', existingApp: null, createAppUrl: 'https://api.slack.com/apps' },
     isPending: false,
     refetch: mocks.refetch,
   })
   mocks.removeError = null
+  mocks.installError = null
   container = document.createElement('div')
   document.body.appendChild(container)
   root = createRoot(container)
@@ -77,6 +87,7 @@ async function render(installed = false) {
   if (installed) {
     mocks.list.mockReturnValue({
       data: {
+        sharedAppAvailable: false,
         installations: [installation],
         bots: [{ id: 'credential-1', displayName: 'Sim Search' }],
       },
@@ -85,7 +96,8 @@ async function render(installed = false) {
   await act(async () => root.render(<OrganizationSearchSlack />))
 }
 function button(label: string) {
-  const element = Array.from(document.querySelectorAll<HTMLButtonElement>('button')).find(
+  const scope = document.querySelector('[role="dialog"]') ?? document
+  const element = Array.from(scope.querySelectorAll<HTMLButtonElement>('button')).find(
     (element) => element.textContent?.trim() === label
   )
   expect(element, label).toBeDefined()
@@ -107,6 +119,116 @@ async function action(label: string) {
 }
 
 describe('Slack Search settings and shared wizard', () => {
+  it.each([
+    { state: 'no bots', installations: [] },
+    { state: 'custom bots', installations: [installation] },
+  ])(
+    'installs the official app explicitly with $state and a custom source app',
+    async ({ installations }) => {
+      mocks.list.mockReturnValue({
+        data: { sharedAppAvailable: true, installations, bots: [] },
+      })
+      mocks.manifest.mockReturnValue({
+        data: {
+          manifest: '{}',
+          existingApp: { appId: 'A1', teamId: 'T1' },
+          sharedAppId: 'A_SHARED',
+          createAppUrl: 'https://api.slack.com/apps',
+        },
+      })
+      await render()
+      await click('Install Sim Search')
+      expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Install Sim Search')
+      expect(document.querySelectorAll('input')).toHaveLength(0)
+      expect(mocks.install).not.toHaveBeenCalled()
+      await click('Install Sim Search')
+      expect(mocks.install).toHaveBeenCalledExactlyOnceWith(
+        {
+          organizationId: 'org-1',
+          installationId: undefined,
+          name: 'Sim Search',
+          description: expect.any(String),
+          mode: 'shared',
+        },
+        expect.any(Object)
+      )
+      mocks.installError = new Error(
+        'Remove the previous Slack source configuration before switching apps; members must reconnect'
+      )
+      await render()
+      expect(document.querySelector('[role="dialog"] [role="alert"]')).toHaveTextContent(
+        'Remove the previous Slack source configuration'
+      )
+      expect(mocks.configure).not.toHaveBeenCalled()
+      expect(mocks.remove).not.toHaveBeenCalled()
+    }
+  )
+
+  it('reconnects an installed official app without offering a duplicate installation', async () => {
+    mocks.list.mockReturnValue({
+      data: {
+        sharedAppAvailable: true,
+        installations: [{ ...installation, appId: 'A_SHARED', appKind: 'shared' }],
+        bots: [{ id: 'credential-1', displayName: 'Sim Search' }],
+      },
+    })
+    mocks.manifest.mockReturnValue({ data: { sharedAppId: 'A_SHARED', existingApp: null } })
+    await render()
+    expect(container).not.toHaveTextContent('Install Sim Search')
+    await action('Reconnect')
+    await click('Install Sim Search')
+    expect(mocks.install).toHaveBeenCalledWith(
+      expect.objectContaining({ mode: 'shared', installationId: installation.id }),
+      expect.any(Object)
+    )
+  })
+
+  it('does not switch to custom setup when shared installation becomes unavailable', async () => {
+    mocks.list.mockReturnValue({
+      data: { sharedAppAvailable: true, installations: [installation], bots: [] },
+    })
+    mocks.manifest.mockReturnValue({
+      data: { sharedAppId: null, existingApp: null },
+      refetch: mocks.refetch,
+    })
+    await render()
+    await click('Install Sim Search')
+    expect(document.querySelector('[role="dialog"] [role="alert"]')).toHaveTextContent(
+      'Sim Search installation is unavailable'
+    )
+    expect(document.querySelector('[role="dialog"]')).not.toHaveTextContent('Create Slack app')
+    expect(button('Install Sim Search')).toBeDisabled()
+    expect(mocks.install).not.toHaveBeenCalled()
+    await click('Retry')
+    expect(mocks.refetch).toHaveBeenCalledOnce()
+  })
+
+  it('allows retrying shared setup after a preparation error with cached data', async () => {
+    mocks.list.mockReturnValue({
+      data: { sharedAppAvailable: true, installations: [installation], bots: [] },
+    })
+    mocks.manifest.mockReturnValue({
+      data: { sharedAppId: 'A_SHARED', existingApp: null },
+      error: new Error('Could not load Slack setup'),
+      refetch: mocks.refetch,
+    })
+    await render()
+    await click('Install Sim Search')
+    expect(document.querySelector('[role="dialog"] [role="alert"]')).toHaveTextContent(
+      'Could not load Slack setup'
+    )
+    expect(button('Install Sim Search')).toBeDisabled()
+    await click('Retry')
+    expect(mocks.refetch).toHaveBeenCalledOnce()
+    expect(mocks.install).not.toHaveBeenCalled()
+  })
+
+  it('does not show official installation when it is unavailable', async () => {
+    await render(true)
+    expect(container).not.toHaveTextContent('Install Sim Search')
+    expect(container).toHaveTextContent('Open in Slack')
+  })
+
   it('starts with one setup action and a Slack app link, with no manifest preview or form', async () => {
     await render()
     expect(container.querySelectorAll('button')).toHaveLength(1)

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

@@ -35,6 +35,7 @@ export function OrganizationSearchSlack() {
     slackSetupResultParam.parser
   )
   const [wizard, setWizard] = useState<{
+    mode?: 'custom' | 'shared'
     installationId?: string
     appId?: string
     initialName?: string
@@ -43,6 +44,10 @@ export function OrganizationSearchSlack() {
   if (!viewer.isAdmin) return null
   const busy = configure.isPending || remove.isPending
   const bots = installations.data?.bots ?? []
+  const canInstallSharedApp =
+    !installations.error &&
+    installations.data?.sharedAppAvailable &&
+    !installations.data.installations.some((installation) => installation.appKind === 'shared')
 
   return (
     <SettingsPanel>
@@ -53,7 +58,16 @@ export function OrganizationSearchSlack() {
             <Chip onClick={() => void setSetupResult(null)}>Dismiss</Chip>
           </div>
         )}
-        <SettingsSection label='Connection'>
+        <SettingsSection
+          label='Connection'
+          action={
+            canInstallSharedApp && Boolean(installations.data?.installations.length) ? (
+              <Chip variant='primary' disabled={busy} onClick={() => setWizard({ mode: 'shared' })}>
+                Install Sim Search
+              </Chip>
+            ) : undefined
+          }
+        >
           {installations.error ? (
             <SettingsQueryErrorState
               error={installations.error}
@@ -72,7 +86,10 @@ export function OrganizationSearchSlack() {
                   title='Slack'
                   description='Connect your workspace to ask questions in Slack.'
                   trailing={
-                    <Chip variant='primary' onClick={() => setWizard({})}>
+                    <Chip
+                      variant='primary'
+                      onClick={() => setWizard(canInstallSharedApp ? { mode: 'shared' } : {})}
+                    >
                       {installations.data.sharedAppAvailable ? 'Install Sim Search' : 'Set up'}
                     </Chip>
                   }
@@ -127,6 +144,7 @@ export function OrganizationSearchSlack() {
                                 disabled: busy,
                                 onSelect: () =>
                                   setWizard({
+                                    mode: installation.appKind,
                                     installationId: installation.id,
                                     appId: installation.appId,
                                     initialName: name,

apps/sim/components/integrations/slack-search-setup-wizard.tsx

@@ -20,6 +20,7 @@ import { useSlackSearchManifest, useStartSlackSearchOAuth } from '@/hooks/querie
 
 interface SlackSearchSetupWizardProps {
   organizationId: string
+  mode?: 'custom' | 'shared'
   installationId?: string
   appId?: string
   initialName?: string
@@ -29,6 +30,7 @@ interface SlackSearchSetupWizardProps {
 /** App creation, credentials, and consent are one organization-specific setup flow. */
 export function SlackSearchSetupWizard({
   organizationId,
+  mode,
   installationId,
   appId,
   initialName,
@@ -61,9 +63,12 @@ export function SlackSearchSetupWizard({
     }
   }
 
-  const shared = Boolean(
-    prepare.data?.sharedAppId && (!configuredAppId || configuredAppId === prepare.data.sharedAppId)
-  )
+  const shared = mode
+    ? mode === 'shared'
+    : Boolean(
+        prepare.data?.sharedAppId &&
+          (!configuredAppId || configuredAppId === prepare.data.sharedAppId)
+      )
 
   function installShared() {
     oauth.mutate(
@@ -153,13 +158,29 @@ export function SlackSearchSetupWizard({
           <p className='px-2 text-[var(--text-secondary)] text-sm'>
             Choose your Slack workspace and approve Sim Search.
           </p>
-          <ChipModalError>{error?.message}</ChipModalError>
+          <ChipModalError>
+            {error?.message ??
+              (!prepare.data.sharedAppId
+                ? 'Sim Search installation is unavailable. Try again.'
+                : null)}
+          </ChipModalError>
         </ChipModalBody>
         <ChipModalFooter
           onCancel={onClose}
+          secondaryActions={
+            prepare.error || !prepare.data.sharedAppId
+              ? [
+                  {
+                    label: 'Retry',
+                    onClick: () => void prepare.refetch(),
+                    disabled: prepare.isFetching,
+                  },
+                ]
+              : undefined
+          }
           primaryAction={{
             label: busy ? 'Connecting…' : 'Install Sim Search',
-            disabled: busy,
+            disabled: busy || !prepare.data.sharedAppId || Boolean(prepare.error),
             onClick: installShared,
           }}
         />