update SyncButton to grab to param and append to login redirect

Author: nicholas-codecov

src/pages/SyncProviderPage/SyncButton.test.tsx

@@ -1,100 +1,100 @@
 import { act, render, screen } from '@testing-library/react'
+import qs from 'qs'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import config from 'config'
+
 import { eventTracker } from 'services/events/events'
+import { Provider } from 'shared/api/helpers'
 
 import SyncButton from './SyncButton'
 
 vi.mock('services/events/events')
 
-const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <MemoryRouter initialEntries={['/sync']}>
-    <Route path="/sync">{children}</Route>
-  </MemoryRouter>
-)
-
-describe('SyncButton', () => {
-  describe('provider is set to gh', () => {
-    it('renders sync button', () => {
-      render(<SyncButton provider="gh" />, { wrapper })
-
-      const link = screen.getByRole('link', { name: /Sync with GitHub/ })
-
-      const expectedRedirect = encodeURIComponent('http://localhost:3000/gh')
-      expect(link).toBeInTheDocument()
-      expect(link).toHaveAttribute('href', `/login/gh?to=${expectedRedirect}`)
-    })
-  })
-
-  describe('provider is set to gl', () => {
-    it('renders sync button', () => {
-      render(<SyncButton provider="gl" />, { wrapper })
-
-      const link = screen.getByRole('link', { name: /Sync with GitLab/ })
-
-      const expectedRedirect = encodeURIComponent('http://localhost:3000/gl')
-      expect(link).toBeInTheDocument()
-      expect(link).toHaveAttribute('href', `/login/gl?to=${expectedRedirect}`)
-    })
-  })
-
-  describe('provider is set to bb', () => {
-    it('renders sync button', () => {
-      render(<SyncButton provider="bb" />, { wrapper })
-
-      const link = screen.getByRole('link', { name: /Sync with Bitbucket/ })
+vi.mock('config')
+config.API_URL = 'secret-api-url'
 
-      const expectedRedirect = encodeURIComponent('http://localhost:3000/bb')
-      expect(link).toBeInTheDocument()
-      expect(link).toHaveAttribute('href', `/login/bb?to=${expectedRedirect}`)
-    })
+const { location } = window
+beforeEach(() => {
+  Object.defineProperty(window, 'location', {
+    value: { ...location, protocol: 'http:', host: 'secret-api-url' },
   })
+})
 
-  describe('provider is set to ghe', () => {
-    it('renders sync button', () => {
-      render(<SyncButton provider="ghe" />, { wrapper })
-
-      const link = screen.getByRole('link', {
-        name: /Sync with GitHub Enterprise/,
-      })
-
-      const expectedRedirect = encodeURIComponent('http://localhost:3000/ghe')
-      expect(link).toBeInTheDocument()
-      expect(link).toHaveAttribute('href', `/login/ghe?to=${expectedRedirect}`)
-    })
-  })
-
-  describe('provider is set to gle', () => {
-    it('renders sync button', () => {
-      render(<SyncButton provider="gle" />, { wrapper })
-
-      const link = screen.getByRole('link', {
-        name: /Sync with GitLab Enterprise/,
-      })
+afterEach(() => {
+  Object.defineProperty(window, 'location', { value: location })
+})
 
-      const expectedRedirect = encodeURIComponent('http://localhost:3000/gle')
-      expect(link).toBeInTheDocument()
-      expect(link).toHaveAttribute('href', `/login/gle?to=${expectedRedirect}`)
-    })
-  })
+const wrapper =
+  (initialEntries = '/sync'): React.FC<React.PropsWithChildren> =>
+  ({ children }) => (
+    <MemoryRouter initialEntries={[initialEntries]}>
+      <Route path="/sync">{children}</Route>
+    </MemoryRouter>
+  )
+
+interface Case {
+  provider: Provider
+  name: string
+  redirectTo: string
+}
+
+const cases: Case[] = [
+  {
+    provider: 'gh',
+    name: 'GitHub',
+    redirectTo: 'http://secret-api-url/gh',
+  },
+  {
+    provider: 'ghe',
+    name: 'GitHub Enterprise',
+    redirectTo: 'http://secret-api-url/ghe',
+  },
+  {
+    provider: 'gl',
+    name: 'GitLab',
+    redirectTo: 'http://secret-api-url/gl',
+  },
+  {
+    provider: 'gle',
+    name: 'GitLab Enterprise',
+    redirectTo: 'http://secret-api-url/gle',
+  },
+  {
+    provider: 'bb',
+    name: 'Bitbucket',
+    redirectTo: 'http://secret-api-url/bb',
+  },
+
+  {
+    provider: 'bbs',
+    name: 'Bitbucket Server',
+    redirectTo: 'http://secret-api-url/bbs',
+  },
+]
 
-  describe('provider is set to bbs', () => {
+describe('SyncButton', () => {
+  describe.each(cases)('$name', ({ name, provider, redirectTo }) => {
     it('renders sync button', () => {
-      render(<SyncButton provider="bbs" />, { wrapper })
+      render(<SyncButton provider={provider} />, { wrapper: wrapper() })
 
       const link = screen.getByRole('link', {
-        name: /Sync with Bitbucket Server/,
+        name: new RegExp(`Sync with ${name}`),
       })
 
-      const expectedRedirect = encodeURIComponent('http://localhost:3000/bbs')
+      const queryString = qs.stringify(
+        { to: redirectTo },
+        { addQueryPrefix: true }
+      )
+      const expectedRedirect = `secret-api-url/login/${provider}${queryString}`
       expect(link).toBeInTheDocument()
-      expect(link).toHaveAttribute('href', `/login/bbs?to=${expectedRedirect}`)
+      expect(link).toHaveAttribute('href', expectedRedirect)
     })
   })
 
   it('emits event on click', () => {
     console.error = () => {} // silence error about navigation on click
-    render(<SyncButton provider="gh" />, { wrapper })
+    render(<SyncButton provider="gh" />, { wrapper: wrapper() })
 
     const link = screen.getByRole('link', { name: /Sync with GitHub/ })
 
@@ -109,4 +109,26 @@ describe('SyncButton', () => {
       },
     })
   })
+
+  describe('when a to param is provided', () => {
+    it('appends the to param to the redirect url', () => {
+      render(<SyncButton provider="gh" />, {
+        wrapper: wrapper('/sync?to=/test'),
+      })
+
+      const redirectQueryString = qs.stringify(
+        { to: '/test' },
+        { addQueryPrefix: true }
+      )
+      const queryString = qs.stringify(
+        { to: `http://secret-api-url/gh${redirectQueryString}` },
+        { addQueryPrefix: true }
+      )
+      const link = screen.getByRole('link', { name: /Sync with GitHub/ })
+      expect(link).toHaveAttribute(
+        'href',
+        `secret-api-url/login/gh${queryString}`
+      )
+    })
+  })
 })

src/pages/SyncProviderPage/SyncButton.tsx

@@ -1,4 +1,7 @@
+import qs from 'qs'
+
 import { eventTracker } from 'services/events/events'
+import { useLocationParams } from 'services/navigation/useLocationParams'
 import { useNavLinks } from 'services/navigation/useNavLinks'
 import { Provider } from 'shared/api/helpers'
 import { loginProviderImage } from 'shared/utils/loginProviders'
@@ -10,8 +13,13 @@ interface SyncButtonProps {
 
 const SyncButton: React.FC<SyncButtonProps> = ({ provider }) => {
   const { signIn } = useNavLinks()
-  const to = `${window.location.protocol}//${window.location.host}/${provider}`
+  const { params } = useLocationParams()
+
   const providerName = providerToName(provider)
+  // @ts-expect-error useLocationParams needs to be typed
+  const queryString = qs.stringify({ to: params?.to }, { addQueryPrefix: true })
+  const to = `${window.location.protocol}//${window.location.host}/${provider}${queryString}`
+
   return (
     <div className="flex h-14 items-center rounded-sm border border-ds-gray-quaternary bg-ds-gray-primary text-left shadow">
       <a