fix(slack): make manifest copying direct and order setup steps

Author: TheodoreSpeaks

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

@@ -296,15 +296,20 @@ describe('Slack Search settings and shared wizard', () => {
     expect(mocks.install).not.toHaveBeenCalled()
   })
 
-  it('starts with one setup action and a Slack app link, with no manifest preview or form', async () => {
+  it('offers direct manifest copying and a Slack app link before collecting credentials', async () => {
     await render()
     expect(container.querySelectorAll('button')).toHaveLength(1)
     await click('Set up')
     expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Create Slack app')
     expect(document.querySelector('[role="dialog"]')).not.toHaveTextContent('Step 1')
-    expect(document.querySelector('[role="dialog"]')).not.toHaveTextContent('App manifest')
+    expect(document.querySelector('[role="dialog"]')).toHaveTextContent('App manifest')
+    expect(button('Copy manifest')).toBeDefined()
+    expect(button('Continue')).toBeDisabled()
+    await click('Copy manifest')
+    expect(mocks.copy).toHaveBeenCalledExactlyOnceWith('{}')
+    expect(button('Continue')).not.toBeDisabled()
     expect(document.querySelector('a[href="https://api.slack.com/apps"]')).toHaveTextContent(
-      'Create app'
+      'Open Slack Apps'
     )
     expect(document.querySelectorAll('input')).toHaveLength(0)
     expect(mocks.manifest).toHaveBeenCalledWith('org-1', 'Sim Search')
@@ -370,8 +375,9 @@ describe('Slack Search settings and shared wizard', () => {
         )
       } else {
         expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Create Slack app')
+        await click('Copy manifest')
         await click('Continue')
-        expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Client ID')
+        expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Bot User OAuth Token')
         expect(mocks.install).not.toHaveBeenCalled()
       }
     }
@@ -386,18 +392,14 @@ describe('Slack Search settings and shared wizard', () => {
     expect(button('Continue')).toBeDisabled()
     await click('Continue')
     expect(document.querySelector('[role="dialog"]')).not.toHaveTextContent('Client ID')
-    await click('Copy configuration')
+    await click('Copy manifest')
     expect(button('Continue')).not.toBeDisabled()
     expect(mocks.copy).toHaveBeenCalledExactlyOnceWith('{}')
     expect(document.querySelector('a[href="https://api.slack.com/apps/A1"]')).not.toBeNull()
-    expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Configuration copied')
-    expect(document.querySelector('pre')).toBeNull()
-    await click('Continue')
-    expect(
-      document.querySelectorAll('input[placeholder="Leave blank to keep the saved value"]')
-    ).toHaveLength(3)
+    expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Manifest copied')
+    expect(document.querySelector('details')).not.toHaveAttribute('open')
     await click('Continue')
-    expect(button('Connect app')).toBeDisabled()
+    expect(button('Continue')).toBeDisabled()
     await act(async () => {
       const input = document.querySelector<HTMLInputElement>('input[placeholder="xoxb-..."]')!
       Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(
@@ -406,6 +408,10 @@ describe('Slack Search settings and shared wizard', () => {
       )
       input.dispatchEvent(new Event('input', { bubbles: true }))
     })
+    await click('Continue')
+    expect(
+      document.querySelectorAll('input[placeholder="Leave blank to keep the saved value"]')
+    ).toHaveLength(3)
     await click('Connect app')
     expect(mocks.connect).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -423,12 +429,12 @@ describe('Slack Search settings and shared wizard', () => {
     mocks.copy.mockRejectedValueOnce(new Error('Clipboard access denied'))
     await render(true)
     await action('Reconnect')
-    await click('Copy configuration')
+    await click('Copy manifest')
     expect(document.querySelector('[role="alert"]')).toHaveTextContent('Allow clipboard access')
-    expect(document.querySelector('a[href="https://api.slack.com/apps/A1"]')).toBeNull()
-    expect(button('Copy configuration')).toBeDefined()
+    expect(document.querySelector('a[href="https://api.slack.com/apps/A1"]')).not.toBeNull()
+    expect(button('Copy manifest')).toBeDefined()
     expect(button('Continue')).toBeDisabled()
-    await click('Copy configuration')
+    await click('Copy manifest')
     expect(document.querySelector('[role="alert"]')).toBeNull()
     expect(document.querySelector('a[href="https://api.slack.com/apps/A1"]')).not.toBeNull()
   })
@@ -446,12 +452,81 @@ describe('Slack Search settings and shared wizard', () => {
     await render()
     await click('Set up')
     expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Update Slack app')
-    await click('Copy configuration')
+    await click('Copy manifest')
     expect(mocks.copy).toHaveBeenCalledExactlyOnceWith(
       '{"display_information":{"name":"Shared Slack app"}}'
     )
     expect(document.querySelector('a[href="https://api.slack.com/apps/A2"]')).not.toBeNull()
-    expect(document.querySelector('pre')).toBeNull()
+    expect(document.querySelector('details')).not.toHaveAttribute('open')
+  })
+
+  it('keeps the token and credentials when navigating back through setup', async () => {
+    await render()
+    await click('Set up')
+    await click('Copy manifest')
+    await click('Continue')
+    expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Install Slack app')
+    expect(button('Continue')).toBeDisabled()
+    async function fill(placeholder: string, value: string) {
+      await act(async () => {
+        const input = document.querySelector<HTMLInputElement>(
+          `input[placeholder="${placeholder}"]`
+        )!
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(
+          input,
+          value
+        )
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+      })
+    }
+    await fill('xoxb-...', 'xoxb-test-token')
+    await click('Continue')
+    expect(button('Connect app')).toBeDisabled()
+    await fill('Paste your Slack app’s client ID', 'client-id')
+    await fill('Paste your Slack app’s client secret', 'client-secret')
+    await fill('Paste your Slack app’s signing secret', 'signing-secret')
+    await click('Back')
+    expect(document.querySelector('input')).toHaveValue('xoxb-test-token')
+    await click('Back')
+    expect(button('Copy manifest')).toBeDefined()
+    await click('Continue')
+    await click('Continue')
+    expect(
+      document.querySelector('input[placeholder="Paste your Slack app’s client ID"]')
+    ).toHaveValue('client-id')
+    await click('Connect app')
+    expect(mocks.connect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        botToken: 'xoxb-test-token',
+        clientId: 'client-id',
+        clientSecret: 'client-secret',
+        signingSecret: 'signing-secret',
+      }),
+      expect.any(Object)
+    )
+  })
+
+  it('requires copying a refreshed manifest and blocks cached preparation errors', async () => {
+    await render()
+    await click('Set up')
+    await click('Copy manifest')
+    const data = { manifest: '{"display_information":{"name":"Updated"}}', existingApp: null }
+    mocks.manifest.mockReturnValue({ data })
+    await render()
+    expect(button('Continue')).toBeDisabled()
+    await click('Copy manifest')
+    expect(mocks.copy).toHaveBeenLastCalledWith(data.manifest)
+    expect(button('Continue')).not.toBeDisabled()
+    mocks.manifest.mockReturnValue({
+      data,
+      error: new Error('Manifest unavailable'),
+      refetch: mocks.refetch,
+    })
+    await render()
+    expect(button('Copy manifest')).toBeDisabled()
+    expect(button('Continue')).toBeDisabled()
+    await click('Retry')
+    expect(mocks.refetch).toHaveBeenCalledOnce()
   })
 
   it('disables the selected connection from the actions menu', async () => {

apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx

@@ -290,12 +290,12 @@ export function ConnectSlackBotModal({
       <Wizard.Step title={isReconnect ? 'Open your app in Slack' : 'Create the app in Slack'}>
         <StepCreate manifestJson={manifestJson} reconnect={isReconnect} />
       </Wizard.Step>
+      <Wizard.Step title='Install and paste your Bot Token' canAdvance={botToken.trim().length > 0}>
+        <StepToken value={botToken} onChange={setBotToken} reconnect={isReconnect} />
+      </Wizard.Step>
       <Wizard.Step title='Paste your Signing Secret' canAdvance={signingSecret.trim().length > 0}>
         <StepSecret value={signingSecret} onChange={setSigningSecret} />
       </Wizard.Step>
-      <Wizard.Step title='Install and paste your Bot Token' canAdvance={botToken.trim().length > 0}>
-        <StepToken value={botToken} onChange={setBotToken} />
-      </Wizard.Step>
       <Wizard.Step title='All set'>
         <StepDone
           searchOnly={searchOnly}
@@ -521,7 +521,7 @@ function StepCreate({ manifestJson, reconnect }: StepCreateProps) {
     <div className='space-y-4'>
       <SubStepList>
         <SubStep n={1}>
-          <div>Copy your manifest:</div>
+          <div>Copy the manifest for your selected permissions:</div>
           <div className='mt-2'>
             <SlackAppManifest manifest={manifestJson} />
           </div>
@@ -543,7 +543,12 @@ function StepCreate({ manifestJson, reconnect }: StepCreateProps) {
           workspace.
         </SubStep>
         <SubStep n={4}>
-          Paste your manifest, then click <strong>Next</strong> → <strong>Create</strong>.
+          Select <strong>JSON</strong>, paste the manifest, then click <strong>Next</strong> →{' '}
+          <strong>Create</strong>.
+        </SubStep>
+        <SubStep n={5}>
+          In <strong>App Manifest</strong>, verify the event <strong>Request URL</strong> if shown.
+          You can verify it before connecting the bot.
         </SubStep>
       </SubStepList>
     </div>
@@ -576,13 +581,22 @@ function StepSecret({ value, onChange }: SecretStepProps) {
   )
 }
 
-function StepToken({ value, onChange }: SecretStepProps) {
+function StepToken({ value, onChange, reconnect }: SecretStepProps & { reconnect: boolean }) {
   return (
     <div className='space-y-4'>
       <SubStepList>
         <SubStep n={1}>
-          In Slack, open <strong>Install App</strong> → <strong>Install to Workspace</strong> and
-          authorize.
+          {reconnect ? (
+            <>
+              Open <strong>OAuth &amp; Permissions</strong> in your existing Slack app. Reinstall
+              only if Slack requests it.
+            </>
+          ) : (
+            <>
+              In Slack, open <strong>OAuth &amp; Permissions</strong> →{' '}
+              <strong>Install to Workspace</strong> and approve access.
+            </>
+          )}
         </SubStep>
         <SubStep n={2}>
           Copy the <strong>Bot User OAuth Token</strong> (starts with <code>xoxb-</code>).

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.test.tsx

@@ -0,0 +1,105 @@
+/** @vitest-environment jsdom */
+import { act, useState } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  loading: true,
+  copy: vi.fn(),
+}))
+vi.mock('@/hooks/use-webhook-management', () => ({
+  useWebhookManagement: () => ({
+    webhookUrl: 'https://sim.test/api/webhooks/trigger/block-1',
+    isLoading: mocks.loading,
+  }),
+}))
+vi.mock('@/stores/workflows/registry/store', () => ({ useWorkflowRegistry: () => 'workflow-1' }))
+vi.mock('@/stores/workflows/subblock/store', () => ({
+  useSubBlockStore: (selector: (state: { workflowValues: object }) => unknown) =>
+    selector({ workflowValues: {} }),
+}))
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value',
+  () => ({
+    useSubBlockValue: (_blockId: string, key: string) =>
+      useState(key === 'botDisplayName' ? 'Test workflow bot' : ''),
+  })
+)
+
+import { SlackSetupWizard } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard'
+
+let root: Root
+let container: HTMLDivElement
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.stubGlobal('navigator', { clipboard: { writeText: mocks.copy } })
+  mocks.loading = true
+  mocks.copy.mockReset().mockResolvedValue(undefined)
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  container.remove()
+  vi.unstubAllGlobals()
+})
+async function render() {
+  await act(async () => root.render(<SlackSetupWizard blockId='block-1' />))
+}
+function button(name: string) {
+  const element = [...document.querySelectorAll('button')].find(
+    (button) => button.textContent?.trim() === name
+  )
+  expect(element).toBeDefined()
+  return element!
+}
+async function click(name: string) {
+  await act(async () => button(name).click())
+}
+async function fill(placeholder: string, value: string) {
+  const input = document.querySelector<HTMLInputElement>(`input[placeholder="${placeholder}"]`)!
+  await act(async () => input.focus())
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, value)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+
+it('waits for the webhook URL without requiring an early deployment, then copies the current manifest', async () => {
+  await render()
+  await click('Set up Slack app')
+  await click('Next')
+  expect(button('Copy manifest')).toBeDisabled()
+  expect(button('Next')).toBeDisabled()
+  expect(document.body).toHaveTextContent('Loading the webhook URL')
+  expect(document.body).not.toHaveTextContent('Deploy once')
+  mocks.loading = false
+  await render()
+  await click('Copy manifest')
+  const manifest = JSON.parse(mocks.copy.mock.calls[0][0])
+  expect(manifest.display_information.name).toBe('Test workflow bot')
+  expect(manifest.settings.event_subscriptions.request_url).toBe(
+    'https://sim.test/api/webhooks/trigger/block-1'
+  )
+})
+
+it('collects the token before the signing secret and retains both when going back', async () => {
+  mocks.loading = false
+  await render()
+  await click('Set up Slack app')
+  await click('Next')
+  await click('Next')
+  expect(button('Next')).toBeDisabled()
+  await fill('xoxb-...', 'xoxb-test-token')
+  await click('Next')
+  expect(button('Next')).toBeDisabled()
+  await fill('Paste your signing secret', 'test-secret')
+  await click('Back')
+  await click('Next')
+  expect(button('Next')).not.toBeDisabled()
+  await click('Next')
+  expect(document.body).toHaveTextContent('save and deploy the workflow with these credentials')
+  expect(document.body).toHaveTextContent('verify the event Request URL')
+  expect(document.body).not.toHaveTextContent('automatically')
+})