feat: change diff scene route (#1159)

from /diff/:specKey/:compareSpecKey to /:specKey/diff/:compareSpecKey in
order for it to follow the same pattern as all other routes

packages/api-explorer/e2e/diffScene.spec.ts

@@ -44,8 +44,9 @@ describe('Diff Scene', () => {
     await jestPuppeteer.resetBrowser()
     await page.setDefaultNavigationTimeout(120000)
   })
-  it('loads the default scene (/diff/3.1)', async () => {
-    await goToPage(`${BASE_URL}/diff/3.1`)
+
+  it('loads the default scene (/3.1/diff)', async () => {
+    await goToPage(`${BASE_URL}/3.1/diff`)
     const body = await page.$('body')
 
     // "Base" input element
@@ -106,9 +107,8 @@ describe('Diff Scene', () => {
     }
   })
 
-  it('loads a comparison scene (/diff/3.1/4.0) and navigates from it', async () => {
-    await goToPage(`${BASE_URL}/diff/3.1/4.0`)
-
+  it('loads a comparison scene (/3.1/diff/4.0) and navigates from it', async () => {
+    await goToPage(`${BASE_URL}/3.1/diff/4.0`)
     // "Base" input element
     {
       const baseInputElement = await page.$(baseInputSelector)
@@ -189,7 +189,7 @@ describe('Diff Scene', () => {
   })
 
   it('updates when a comparison is chosen or switched', async () => {
-    await goToPage(`${BASE_URL}/diff/3.1`)
+    await goToPage(`${BASE_URL}/3.1/diff`)
 
     // "Base" input element
     const baseInputElement = await page.$(baseInputSelector)
@@ -219,7 +219,7 @@ describe('Diff Scene', () => {
     // Check the URL
     // Would like to do this earlier, but not sure what to wait on
     const compUrl = page.url()
-    expect(compUrl).toEqual(`${BASE_URL}/diff/3.1/4.0?sdk=py`)
+    expect(compUrl).toEqual(`${BASE_URL}/3.1/diff/4.0?sdk=py`)
 
     // Check the results
     const diffResultCards = await page.$$(resultCardsSelector)
@@ -247,7 +247,7 @@ describe('Diff Scene', () => {
     await page.waitForTimeout(150)
 
     const switchUrl = page.url()
-    expect(switchUrl).toEqual(`${BASE_URL}/diff/4.0/3.1?sdk=py`)
+    expect(switchUrl).toEqual(`${BASE_URL}/4.0/diff/3.1?sdk=py`)
 
     // Check the results again, even though they should be the same
     const diff40to31Page1Methods = await Promise.all(

packages/api-explorer/e2e/e2e.spec.ts

@@ -40,17 +40,16 @@ describe('API Explorer', () => {
     await page.setDefaultNavigationTimeout(120000)
   })
 
+  afterEach(async () => {
+    await page.evaluate(() => {
+      localStorage.clear()
+    })
+  })
   describe('general', () => {
     beforeEach(async () => {
       await goToPage(v40)
     })
 
-    afterEach(async () => {
-      await page.evaluate(() => {
-        localStorage.clear()
-      })
-    })
-
     it('renders a method page', async () => {
       await Promise.all([
         page.waitForNavigation(),

packages/api-explorer/src/ApiExplorer.tsx

@@ -68,7 +68,7 @@ import {
   selectCurrentSpec,
   useSettingStoreState,
 } from './state'
-import { getSpecKey, diffPath, findSdk, useGlobalStoreSync } from './utils'
+import { getSpecKey, findSdk, useGlobalStoreSync } from './utils'
 
 export interface ApiExplorerProps {
   adaptor: IApixAdaptor
@@ -120,7 +120,7 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
 
   useEffect(() => {
     const maybeSpec = location.pathname?.split('/')[1]
-    if (spec && maybeSpec && maybeSpec !== diffPath && maybeSpec !== spec.key) {
+    if (spec && maybeSpec && maybeSpec !== spec.key) {
       setCurrentSpecAction({ currentSpecKey: maybeSpec })
     }
   }, [location.pathname, spec])
@@ -149,7 +149,7 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
   const themeOverrides = adaptor.themeOverrides()
 
   let neededSpec = location.pathname?.split('/')[1]
-  if (!neededSpec || neededSpec === diffPath) {
+  if (!neededSpec) {
     neededSpec = spec?.key
   }
 
@@ -219,7 +219,6 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
                 <AppRouter
                   specKey={spec.key}
                   api={spec.api!}
-                  specs={specs}
                   toggleNavigation={toggleNavigation}
                 />
               </Layout>

packages/api-explorer/src/components/Header/Header.spec.tsx

@@ -93,6 +93,6 @@ describe('Header', () => {
           name: 'Compare Specifications',
         })
         .closest('a')
-    ).toHaveAttribute('href', `/diff/${spec.key}/`)
+    ).toHaveAttribute('href', `/${spec.key}/diff`)
   })
 })

packages/api-explorer/src/components/SelectorContainer/SelectorContainer.spec.tsx

@@ -75,6 +75,6 @@ describe('SelectorContainer', () => {
           name: 'Compare Specifications',
         })
         .closest('a')
-    ).toHaveAttribute('href', `/diff/${spec.key}/`)
+    ).toHaveAttribute('href', `/${spec.key}/diff`)
   })
 })

packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx

@@ -55,7 +55,7 @@ export const SelectorContainer: FC<SelectorContainerProps> = ({
     <Space width="auto" {...spaceProps}>
       <SdkLanguageSelector />
       <ApiSpecSelector spec={spec} />
-      <Link to={buildPathWithGlobalParams(`/${diffPath}/${spec.key}/`)}>
+      <Link to={buildPathWithGlobalParams(`/${spec.key}/${diffPath}`)}>
         <IconButton
           toggle
           label="Compare Specifications"

packages/api-explorer/src/routes/AppRouter.tsx

@@ -27,7 +27,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
-import type { ApiModel, SpecList } from '@looker/sdk-codegen'
+import type { ApiModel } from '@looker/sdk-codegen'
 
 import {
   HomeScene,
@@ -41,21 +41,19 @@ import { diffPath } from '../utils'
 
 interface AppRouterProps {
   specKey: string
-  specs: SpecList
   api: ApiModel
   toggleNavigation: (target?: boolean) => void
 }
 
 export const AppRouter: FC<AppRouterProps> = ({
   api,
   specKey,
-  specs,
   toggleNavigation,
 }) => (
   <Switch>
     <Redirect from="/" to={`/${specKey}/`} exact />
-    <Route path={`/${diffPath}/:l?/:r?`}>
-      <DiffScene specs={specs} toggleNavigation={toggleNavigation} />
+    <Route path={`/:specKey/${diffPath}/:compareSpecKey?`}>
+      <DiffScene toggleNavigation={toggleNavigation} />
     </Route>
     <Route path="/:specKey/(methods|types)?" exact>
       <HomeScene api={api} />

packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx

@@ -41,7 +41,7 @@ import { SyncAlt } from '@styled-icons/material/SyncAlt'
 import { useSelector } from 'react-redux'
 
 import { ApixSection } from '../../components'
-import { selectCurrentSpec } from '../../state'
+import { selectCurrentSpec, selectSpecs } from '../../state'
 import { diffPath, getApixAdaptor, useNavigation } from '../../utils'
 import { diffSpecs, standardDiffToggles } from './diffUtils'
 import { DocDiff } from './DocDiff'
@@ -74,20 +74,20 @@ const diffToggles = [
 ]
 
 export interface DiffSceneProps {
-  specs: SpecList
   toggleNavigation: (target?: boolean) => void
 }
 
 const validateParam = (specs: SpecList, specKey = '') => {
   return specs[specKey] ? specKey : ''
 }
 
-export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
+export const DiffScene: FC<DiffSceneProps> = ({ toggleNavigation }) => {
   const adaptor = getApixAdaptor()
   const { navigate } = useNavigation()
   const spec = useSelector(selectCurrentSpec)
+  const specs = useSelector(selectSpecs)
   const currentSpecKey = spec.key
-  const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`)
+  const match = useRouteMatch<{ l: string; r: string }>(`/:l/${diffPath}/:r?`)
   const l = validateParam(specs, match?.params.l)
   const r = validateParam(specs, match?.params.r)
 
@@ -123,14 +123,14 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   const [delta, setDelta] = useState<DiffRow[]>([])
 
   const handleLeftChange = (newLeft: string) => {
-    navigate(`/${diffPath}/${newLeft}/${rightKey}`)
+    navigate(`/${newLeft}/${diffPath}/${rightKey}`)
   }
   const handleRightChange = (newRight: string) => {
-    navigate(`/${diffPath}/${leftKey}/${newRight}`)
+    navigate(`/${leftKey}/${diffPath}/${newRight}`)
   }
 
   const handleSwitch = () => {
-    navigate(`/${diffPath}/${rightKey}/${leftKey}`)
+    navigate(`/${rightKey}/${diffPath}/${leftKey}`)
   }
 
   useEffect(() => {