feat: SDK language selection as URL search parameter

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

@@ -151,7 +151,7 @@ describe('Diff Scene', () => {
           page.evaluate((el) => el.innerText.match(/^[a-z_]*/)[0], resultCard)
         )
       )
-      expect(page1Methods).toHaveLength(15)
+      expect(page1Methods).toHaveLength(16)
       expect(page1Methods).toContain('delete_board_item')
     }
 
@@ -176,13 +176,15 @@ describe('Diff Scene', () => {
       const methodLink = await page.$(`${resultCardsSelector} a[role=link]`)
       expect(methodLink).not.toBeNull()
       const methodText = await page.evaluate((e) => e.innerText, methodLink)
-      expect(methodText).toMatch(`delete_board_item for 4.0`)
+      expect(methodText).toMatch(`delete_alert for 4.0`)
 
       // Click and validate destination
       await methodLink.click()
       await page.waitForSelector(`div[class*=MethodBadge]`, { timeout: 5000 })
       const compUrl = page.url()
-      expect(compUrl).toEqual(`${BASE_URL}/4.0/methods/Board/delete_board_item`)
+      expect(compUrl).toEqual(
+        `${BASE_URL}/4.0/methods/Alert/delete_alert?sdk=py`
+      )
     }
   })
 
@@ -217,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`)
+    expect(compUrl).toEqual(`${BASE_URL}/diff/3.1/4.0?sdk=py`)
 
     // Check the results
     const diffResultCards = await page.$$(resultCardsSelector)
@@ -228,7 +230,7 @@ describe('Diff Scene', () => {
       )
     )
 
-    expect(diff31to40Page1Methods).toHaveLength(15)
+    expect(diff31to40Page1Methods).toHaveLength(16)
     expect(diff31to40Page1Methods).toContain('delete_board_item')
 
     // Click the switch button
@@ -245,7 +247,7 @@ describe('Diff Scene', () => {
     await page.waitForTimeout(150)
 
     const switchUrl = page.url()
-    expect(switchUrl).toEqual(`${BASE_URL}/diff/4.0/3.1`)
+    expect(switchUrl).toEqual(`${BASE_URL}/diff/4.0/3.1?sdk=py`)
 
     // Check the results again, even though they should be the same
     const diff40to31Page1Methods = await Promise.all(
@@ -254,7 +256,7 @@ describe('Diff Scene', () => {
       )
     )
 
-    expect(diff40to31Page1Methods).toHaveLength(15)
+    expect(diff40to31Page1Methods).toHaveLength(16)
     expect(diff40to31Page1Methods).toContain('delete_board_item')
   })
 })

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

@@ -55,7 +55,7 @@ describe('API Explorer', () => {
         expect(page).toClick('h3', { text: 'Get All Dashboards' }),
       ])
       await expect(page.url()).toEqual(
-        `${v40}/methods/Dashboard/all_dashboards`
+        `${v40}/methods/Dashboard/all_dashboards?sdk=py`
       )
 
       // title
@@ -164,6 +164,9 @@ describe('API Explorer', () => {
         'Kotlin'
       )
       await expect(page).toMatchElement('h3', { text: 'Kotlin Declaration' })
+      await page.evaluate(() => {
+        localStorage.clear()
+      })
     })
 
     // This test was broken during the 4.0 GA spec changes, and needs to be fixed
@@ -255,7 +258,9 @@ describe('API Explorer', () => {
       await expect(page).toMatchElement('button', { text: 'Types (0)' })
       await expect(page).toClick('a', { text: 'Get Workspace' })
       await expect(page).toMatchElement('h2', { text: 'Get Workspace' })
-      await expect(page.url()).toEqual(`${v40}/methods/Workspace/workspace`)
+      await expect(page.url()).toEqual(
+        `${v40}/methods/Workspace/workspace?sdk=py&s=get+workspace`
+      )
     })
 
     it('searches types', async () => {
@@ -267,7 +272,9 @@ describe('API Explorer', () => {
       await expect(page).toClick('button', { text: 'Types (1)' })
       await expect(page).toClick('a', { text: 'WriteTheme' })
       await expect(page).toMatchElement('h2', { text: 'WriteTheme' })
-      await expect(page.url()).toEqual(`${v40}/types/Theme/WriteTheme`)
+      await expect(page.url()).toEqual(
+        `${v40}/types/Theme/WriteTheme?sdk=py&s=writetheme`
+      )
     })
   })
 })

packages/api-explorer/src/ApiExplorer.tsx

@@ -67,8 +67,9 @@ import {
   useSpecStoreState,
   selectSpecs,
   selectCurrentSpec,
+  selectSdkLanguage,
 } from './state'
-import { getSpecKey, diffPath } from './utils'
+import { getSpecKey, diffPath, useNavigation, getSdkLanguage } from './utils'
 
 export interface ApiExplorerProps {
   adaptor: IApixAdaptor
@@ -85,19 +86,23 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
   declarationsLodeUrl = `${apixFilesHost}/declarationsIndex.json`,
   headless = false,
 }) => {
-  useSettingStoreState()
+  const { initialized } = useSettingStoreState()
   useLodesStoreState()
   const { working, description } = useSpecStoreState()
   const specs = useSelector(selectSpecs)
   const spec = useSelector(selectCurrentSpec)
+  const selectedSdkLanguage = useSelector(selectSdkLanguage)
   const { initLodesAction } = useLodeActions()
-  const { initSettingsAction, setSearchPatternAction } = useSettingActions()
+  const { initSettingsAction, setSearchPatternAction, setSdkLanguageAction } =
+    useSettingActions()
   const { initSpecsAction, setCurrentSpecAction } = useSpecActions()
 
   const location = useLocation()
+  const navigate = useNavigation()
   const [hasNavigation, setHasNavigation] = useState(true)
   const toggleNavigation = (target?: boolean) =>
     setHasNavigation(target || !hasNavigation)
+  const searchParams = new URLSearchParams(location.search)
 
   const hasNavigationToggle = useCallback((e: MessageEvent<any>) => {
     if (e.origin === window.origin && e.data.action === 'toggle_sidebar') {
@@ -116,6 +121,24 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
     return () => unregisterEnvAdaptor()
   }, [])
 
+  useEffect(() => {
+    // reconcile local storage state with URL or vice versa
+    if (initialized) {
+      const sdk = getSdkLanguage(searchParams.get('sdk'))
+      if (sdk) {
+        // sync store with URL
+        setSdkLanguageAction({
+          sdkLanguage: sdk.alias,
+        })
+      } else {
+        // sync URL with store
+        navigate(location.pathname, {
+          sdk: selectedSdkLanguage === 'all' ? null : selectedSdkLanguage,
+        })
+      }
+    }
+  }, [initialized])
+
   useEffect(() => {
     const maybeSpec = location.pathname?.split('/')[1]
     if (spec && maybeSpec && maybeSpec !== diffPath && maybeSpec !== spec.key) {
@@ -124,9 +147,11 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
   }, [location.pathname, spec])
 
   useEffect(() => {
-    const searchParams = new URLSearchParams(location.search)
+    if (!initialized) return
     const searchPattern = searchParams.get('s') || ''
-    setSearchPatternAction({ searchPattern: searchPattern! })
+    const sdkLanguage = searchParams.get('sdk') || 'all'
+    setSearchPatternAction({ searchPattern })
+    setSdkLanguageAction({ sdkLanguage })
   }, [location.search])
 
   useEffect(() => {

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

@@ -31,6 +31,7 @@ import type { Store } from 'redux'
 import { api } from '../../test-data'
 import { renderWithReduxProvider, createTestStore } from '../../test-utils'
 import type { RootState } from '../../state'
+import { getSdkLanguage } from '../../utils'
 import { DocSDKs } from './DocSDKs'
 
 describe('DocSDKs', () => {
@@ -66,7 +67,10 @@ describe('DocSDKs', () => {
     'it can render a %s method declaration',
     (sdkLanguage) => {
       store = createTestStore({
-        settings: { initialized: false, sdkLanguage },
+        settings: {
+          initialized: false,
+          sdkLanguage: getSdkLanguage(sdkLanguage)!.alias,
+        },
       })
       renderWithReduxProvider(
         <DocSDKs api={api} method={api.methods.run_look} />,

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

@@ -38,7 +38,7 @@ import { CollapserCard, getGenerators } from '@looker/run-it'
 
 import { DocCode } from '../DocCode'
 import { selectSdkLanguage } from '../../state'
-import { isMethod } from '../../utils/path'
+import { isMethod, getSdkLanguage } from '../../utils'
 import { noComment } from './utils'
 import { DocDeclarations } from './DocDeclarations'
 
@@ -72,28 +72,29 @@ const getDeclarations = (
  * Given a method or a type, it renders its SDK declaration in all supported languages.
  */
 export const DocSDKs: FC<LanguageSDKProps> = ({ api, method, type }) => {
-  const sdkLanguage = useSelector(selectSdkLanguage)
+  const alias = useSelector(selectSdkLanguage)
+  const sdk = getSdkLanguage(alias)!
   const generators = getGenerators(api)
   const [item, setItem] = useState(method ? noComment(method) : type!)
   const [declarations, setDeclarations] = useState(
-    getDeclarations(generators, sdkLanguage, item)
+    getDeclarations(generators, sdk.language, item)
   )
-  const [header, setHeader] = useState(`${sdkLanguage} Declaration`)
+  const [header, setHeader] = useState(`${sdk.language} Declaration`)
 
   useEffect(() => {
     setItem(method ? noComment(method) : type!)
   }, [method, type])
 
   useEffect(() => {
-    const declarations = getDeclarations(generators, sdkLanguage, item)
+    const declarations = getDeclarations(generators, sdk.language, item)
     setDeclarations(declarations)
     const languages = Object.keys(declarations)
     if (languages.length > 1) {
       setHeader('Declarations')
     } else {
       setHeader(`${languages[0]} Declaration`)
     }
-  }, [sdkLanguage, item])
+  }, [sdk.language, item])
 
   return (
     <CollapserCard heading={header} id="sdk declarations">

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

@@ -42,6 +42,7 @@ import { InsertDriveFile } from '@styled-icons/material-outlined/InsertDriveFile
 import { useSelector } from 'react-redux'
 
 import { selectSdkLanguage, selectExamplesLode } from '../../state'
+import { getSdkLanguage } from '../../utils'
 import {
   exampleColumns,
   EMPTY_STRING,
@@ -61,7 +62,8 @@ interface DocSdkUsageProps {
  */
 export const DocSdkUsage: FC<DocSdkUsageProps> = ({ method }) => {
   const examples = useSelector(selectExamplesLode)
-  const sdkLanguage = useSelector(selectSdkLanguage)
+  const alias = useSelector(selectSdkLanguage)
+  const sdk = getSdkLanguage(alias)!
   const [page, setPage] = useState(1)
 
   useEffect(() => {
@@ -72,7 +74,7 @@ export const DocSdkUsage: FC<DocSdkUsageProps> = ({ method }) => {
   let languages = findExampleLanguages(examples, method.name)
   if (languages.length === 0) return <></>
 
-  languages = sortLanguagesByPreference(languages, sdkLanguage)
+  languages = sortLanguagesByPreference(languages, sdk.language)
 
   const { pageExamples, pageLimit, paginate } = prepareExampleDataTable(
     languages,

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

@@ -30,7 +30,6 @@ import userEvent from '@testing-library/user-event'
 
 import { getLoadedSpecs, specs } from '../../test-data'
 import { renderWithRouterAndReduxProvider } from '../../test-utils'
-import { defaultSettingsState } from '../../state'
 import { Header } from './Header'
 
 describe('Header', () => {
@@ -72,7 +71,7 @@ describe('Header', () => {
       <Header spec={spec} toggleNavigation={toggleNavigation} />
     )
     const selector = screen.getByLabelText('sdk language selector')
-    expect(selector).toHaveValue(defaultSettingsState.sdkLanguage)
+    expect(selector).toHaveValue('Python')
     await act(async () => {
       await userEvent.click(selector)
       await waitFor(() => {