fix(slack-search): preserve existing app configuration updates

Author: TheodoreSpeaks

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

@@ -12,6 +12,7 @@ const mocks = vi.hoisted(() => ({
   remove: vi.fn(),
   install: vi.fn(),
   refetch: vi.fn(),
+  copy: vi.fn(),
   removeError: null as Error | null,
 }))
 vi.mock('nuqs', () => ({ useQueryState: () => [null, vi.fn()] }))
@@ -53,6 +54,8 @@ let container: HTMLDivElement
 beforeEach(() => {
   vi.clearAllMocks()
   vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  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.manifest.mockReturnValue({
@@ -138,7 +141,11 @@ describe('Slack Search settings and shared wizard', () => {
     expect(container.textContent).toContain('Enabled')
     await action('Reconnect')
     expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Reconnect Slack Search')
+    await click('Copy app configuration')
+    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.querySelector('[role="dialog"]')).toHaveTextContent('Leave fields blank')
     await click('Continue')
@@ -154,6 +161,40 @@ describe('Slack Search settings and shared wizard', () => {
     expect(mocks.install.mock.calls[0][0]).not.toHaveProperty('clientSecret')
   })
 
+  it('keeps the update action available when clipboard access fails', async () => {
+    mocks.copy.mockRejectedValueOnce(new Error('Clipboard access denied'))
+    await render(true)
+    await action('Reconnect')
+    await click('Copy app configuration')
+    expect(document.querySelector('[role="alert"]')).toHaveTextContent('Allow clipboard access')
+    expect(document.querySelector('a[href="https://api.slack.com/apps/A1"]')).toBeNull()
+    expect(button('Copy app configuration')).toBeDefined()
+    await click('Copy app configuration')
+    expect(document.querySelector('[role="alert"]')).toBeNull()
+    expect(document.querySelector('a[href="https://api.slack.com/apps/A1"]')).not.toBeNull()
+  })
+
+  it('offers the same configuration update for an app shared with Slack sources', async () => {
+    mocks.manifest.mockReturnValue({
+      data: {
+        manifest: '{"display_information":{"name":"Shared Slack app"}}',
+        existingApp: { appId: 'A2' },
+        createAppUrl: 'https://api.slack.com/apps',
+      },
+      isPending: false,
+      refetch: mocks.refetch,
+    })
+    await render()
+    await click('Set up')
+    expect(document.querySelector('[role="dialog"]')).toHaveTextContent('Update your Slack app')
+    await click('Copy app configuration')
+    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()
+  })
+
   it('disables the selected connection from the actions menu', async () => {
     await render(true)
     await action('Disable')

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

@@ -10,6 +10,7 @@ import {
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  writeTextToClipboard,
 } from '@sim/emcn'
 import { SlackIcon } from '@/components/icons'
 import {
@@ -42,11 +43,26 @@ export function SlackSearchSetupWizard({
   const [clientId, setClientId] = useState('')
   const [clientSecret, setClientSecret] = useState('')
   const [signingSecret, setSigningSecret] = useState('')
-  const error = prepare.error ?? oauth.error
+  const [configurationCopied, setConfigurationCopied] = useState(false)
+  const [copyError, setCopyError] = useState<Error | null>(null)
+  const error = prepare.error ?? oauth.error ?? copyError
   const busy = oauth.isPending
   const stepNumber = step === 'manifest' ? 1 : step === 'credentials' ? 2 : 3
   const configuredAppId = appId ?? prepare.data?.existingApp?.appId
 
+  async function copyConfiguration() {
+    if (!prepare.data) throw new Error('Slack app configuration is not ready')
+    setCopyError(null)
+    try {
+      await writeTextToClipboard(prepare.data.manifest)
+      setConfigurationCopied(true)
+    } catch {
+      setCopyError(
+        new Error('Could not copy the app configuration. Allow clipboard access and try again.')
+      )
+    }
+  }
+
   function advance() {
     if (step === 'manifest') {
       setStep('credentials')
@@ -102,19 +118,30 @@ export function SlackSearchSetupWizard({
         {step === 'manifest' && prepare.data && (
           <ChipModalField
             type='custom'
-            title={installationId ? 'Update your Slack app' : 'Create your Slack app'}
+            title={configuredAppId ? 'Update your Slack app' : 'Create your Slack app'}
+            hint={
+              configuredAppId
+                ? configurationCopied
+                  ? 'Configuration copied. In Slack, open App Manifest, select JSON, replace the configuration, and save your changes before continuing.'
+                  : 'Copy the updated configuration, then open your app in Slack to apply it.'
+                : undefined
+            }
           >
-            <ChipLink
-              href={
-                configuredAppId
-                  ? `https://api.slack.com/apps/${encodeURIComponent(configuredAppId)}`
-                  : prepare.data.createAppUrl
-              }
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              {configuredAppId ? 'Open Slack app settings' : 'Create app in Slack'}
-            </ChipLink>
+            {configuredAppId && !configurationCopied ? (
+              <Chip onClick={() => void copyConfiguration()}>Copy app configuration</Chip>
+            ) : (
+              <ChipLink
+                href={
+                  configuredAppId
+                    ? `https://api.slack.com/apps/${encodeURIComponent(configuredAppId)}`
+                    : prepare.data.createAppUrl
+                }
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                {configuredAppId ? 'Open Slack app settings' : 'Create app in Slack'}
+              </ChipLink>
+            )}
           </ChipModalField>
         )}
         {step === 'credentials' && (