@looker/api-explorer 0.9.36 → 0.9.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@looker/api-explorer",
-  "version": "0.9.36",
+  "version": "0.9.37",
   "description": "Looker API Explorer",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
@@ -32,12 +32,13 @@
     "deploy-dev-portal": "rm -f ../../../developer-portal/static/apix/dist/*.js* && cp -R ./dist/*.js* ../../../developer-portal/static/apix/dist"
   },
   "devDependencies": {
-    "@looker/components-test-utils": "^1.5.5",
-    "@looker/sdk-codegen-scripts": "^21.4.2",
-    "@looker/sdk-node": "^22.10.1",
+    "@looker/components-test-utils": "^1.5.26",
+    "@looker/sdk-codegen-scripts": "^21.4.3",
+    "@looker/sdk-node": "^22.12.1",
     "@styled-icons/styled-icon": "^10.6.3",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^12.6.0",
     "@types/expect-puppeteer": "^4.4.6",
     "@types/jest-environment-puppeteer": "^4.4.1",
@@ -67,17 +68,16 @@
     "webpack-merge": "^5.7.3"
   },
   "dependencies": {
-    "@looker/code-editor": "^0.1.23",
-    "@looker/components": "^2.8.1",
-    "@looker/components-date": "^2.4.1",
-    "@looker/design-tokens": "^2.7.1",
-    "@looker/extension-utils": "^0.1.13",
+    "@looker/code-editor": "^0.1.24",
+    "@looker/components": "^3.0.8",
+    "@looker/design-tokens": "^2.7.21",
+    "@looker/extension-utils": "^0.1.14",
     "@looker/icons": "^1.5.3",
     "@looker/redux": "0.0.0",
-    "@looker/run-it": "^0.9.36",
-    "@looker/sdk": "^22.10.1",
-    "@looker/sdk-codegen": "^21.7.0",
-    "@looker/sdk-rtl": "^21.3.4",
+    "@looker/run-it": "^0.9.37",
+    "@looker/sdk": "^22.12.1",
+    "@looker/sdk-codegen": "^21.7.1",
+    "@looker/sdk-rtl": "^21.4.0",
     "@reduxjs/toolkit": "^1.6.2",
     "@styled-icons/material": "^10.28.0",
     "@styled-icons/material-outlined": "^10.28.0",
@@ -96,5 +96,5 @@
     "ts-jest": "^26.2.0",
     "typed-redux-saga": "^1.3.1"
   },
-  "gitHead": "a3eb0fd43de195627b1723faae1eba7c70fd43fb"
+  "gitHead": "028fb6cd1f84c23fd10d42041f3d572f4f724195"
 }

package/src/ApiExplorer.tsx

@@ -60,15 +60,15 @@ import { AppRouter } from './routes'
 import { apixFilesHost } from './utils/lodeUtils'
 import {
   useSettingActions,
-  useSettingStoreState,
   useLodeActions,
   useLodesStoreState,
   useSpecActions,
   useSpecStoreState,
   selectSpecs,
   selectCurrentSpec,
+  useSettingStoreState,
 } from './state'
-import { getSpecKey, diffPath } from './utils'
+import { getSpecKey, findSdk, useGlobalStoreSync } from './utils'
 
 export interface ApiExplorerProps {
   adaptor: IApixAdaptor
@@ -85,16 +85,18 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
   declarationsLodeUrl = `${apixFilesHost}/declarationsIndex.json`,
   headless = false,
 }) => {
-  useSettingStoreState()
   useLodesStoreState()
   const { working, description } = useSpecStoreState()
   const specs = useSelector(selectSpecs)
   const spec = useSelector(selectCurrentSpec)
   const { initLodesAction } = useLodeActions()
-  const { initSettingsAction, setSearchPatternAction } = useSettingActions()
+  const { initialized } = useSettingStoreState()
+  const { initSettingsAction, setSearchPatternAction, setSdkLanguageAction } =
+    useSettingActions()
   const { initSpecsAction, setCurrentSpecAction } = useSpecActions()
 
   const location = useLocation()
+  useGlobalStoreSync()
   const [hasNavigation, setHasNavigation] = useState(true)
   const toggleNavigation = (target?: boolean) =>
     setHasNavigation(target || !hasNavigation)
@@ -118,15 +120,19 @@ 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])
 
   useEffect(() => {
+    if (!initialized) return
     const searchParams = new URLSearchParams(location.search)
     const searchPattern = searchParams.get('s') || ''
-    setSearchPatternAction({ searchPattern: searchPattern! })
+    const sdkParam = searchParams.get('sdk') || 'all'
+    const { language: sdkLanguage } = findSdk(sdkParam)
+    setSearchPatternAction({ searchPattern })
+    setSdkLanguageAction({ sdkLanguage })
   }, [location.search])
 
   useEffect(() => {
@@ -143,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
   }
 
@@ -213,7 +219,6 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
                 <AppRouter
                   specKey={spec.key}
                   api={spec.api!}
-                  specs={specs}
                   toggleNavigation={toggleNavigation}
                 />
               </Layout>

package/src/components/DocMarkdown/DocMarkdown.tsx

@@ -40,7 +40,7 @@ interface DocMarkdownProps {
 
 export const DocMarkdown: FC<DocMarkdownProps> = ({ source, specKey }) => {
   const searchPattern = useSelector(selectSearchPattern)
-  const navigate = useNavigation()
+  const { navigate } = useNavigation()
 
   const linkClickHandler = (pathname: string, url: string) => {
     if (pathname.startsWith(`/${specKey}`)) {

package/src/components/DocSDKs/DocDeclarations.tsx

@@ -23,10 +23,10 @@
  SOFTWARE.
 
  */
-import { Tab, TabList, TabPanel, TabPanels, useTabs } from '@looker/components'
+import React from 'react'
+import { Tab2, Tabs2 } from '@looker/components'
 import type { KeyedCollection } from '@looker/sdk-codegen'
 import type { FC } from 'react'
-import React from 'react'
 import { DocCode } from '../DocCode'
 
 interface DocDeclarationsProps {
@@ -37,23 +37,12 @@ interface DocDeclarationsProps {
  * Renders all provided declarations
  * @param declarations A collection of SDK declarations in various languages
  */
-export const DocDeclarations: FC<DocDeclarationsProps> = ({ declarations }) => {
-  const tabs = useTabs()
-
-  return (
-    <>
-      <TabList {...tabs}>
-        {Object.keys(declarations).map((language) => (
-          <Tab key={language}>{language}</Tab>
-        ))}
-      </TabList>
-      <TabPanels {...tabs} pt="0">
-        {Object.entries(declarations).map(([language, code]) => (
-          <TabPanel key={language}>
-            <DocCode language={language} code={code} />
-          </TabPanel>
-        ))}
-      </TabPanels>
-    </>
-  )
-}
+export const DocDeclarations: FC<DocDeclarationsProps> = ({ declarations }) => (
+  <Tabs2>
+    {Object.entries(declarations).map(([language, code]) => (
+      <Tab2 key={language} id={language} label={language}>
+        <DocCode code={code} language={language} />
+      </Tab2>
+    ))}
+  </Tabs2>
+)

package/src/components/DocSDKs/DocSDKs.spec.tsx

@@ -66,7 +66,10 @@ describe('DocSDKs', () => {
     'it can render a %s method declaration',
     (sdkLanguage) => {
       store = createTestStore({
-        settings: { initialized: false, sdkLanguage },
+        settings: {
+          initialized: false,
+          sdkLanguage: sdkLanguage,
+        },
       })
       renderWithReduxProvider(
         <DocSDKs api={api} method={api.methods.run_look} />,

package/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`)
   })
 })

package/src/components/SelectorContainer/ApiSpecSelector.tsx

@@ -40,7 +40,7 @@ interface ApiSpecSelectorProps {
 
 export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({ spec }) => {
   const location = useLocation()
-  const navigate = useNavigation()
+  const { navigate } = useNavigation()
   const specs = useSelector(selectSpecs)
   const options = Object.entries(specs).map(([key, spec]) => ({
     value: key,

package/src/components/SelectorContainer/SdkLanguageSelector.spec.tsx

@@ -24,61 +24,88 @@
 
  */
 import React from 'react'
-import { act, screen, waitFor } from '@testing-library/react'
+import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { codeGenerators } from '@looker/sdk-codegen'
-import * as reactRedux from 'react-redux'
-
-import { registerTestEnvAdaptor } from '@looker/extension-utils'
-import { defaultSettingsState, settingsSlice } from '../../state'
-import { renderWithReduxProvider } from '../../test-utils'
+import {
+  createTestStore,
+  renderWithRouterAndReduxProvider,
+} from '../../test-utils'
+import { findSdk } from '../../utils'
+import { languages } from '../../test-data'
+import { defaultSettingsState } from '../../state'
 import { SdkLanguageSelector } from './SdkLanguageSelector'
 
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useHistory: () => ({
+      push: mockHistoryPush,
+      location,
+    }),
+  }
+})
 describe('SdkLanguageSelector', () => {
   window.HTMLElement.prototype.scrollIntoView = jest.fn()
+  const store = createTestStore({ settings: { initialized: true } })
 
   beforeEach(() => {
     localStorage.clear()
   })
 
-  test('it has the correct default language selected', () => {
-    renderWithReduxProvider(<SdkLanguageSelector />)
+  test('it has the correct default language selected', async () => {
+    renderWithRouterAndReduxProvider(<SdkLanguageSelector />, undefined, store)
     expect(screen.getByRole('textbox')).toHaveValue(
       defaultSettingsState.sdkLanguage
     )
   })
 
   test('it lists all available languages and "All" as options', async () => {
-    renderWithReduxProvider(<SdkLanguageSelector />)
-    await act(async () => {
-      await userEvent.click(screen.getByRole('textbox'))
-      await waitFor(() => {
-        expect(screen.getAllByRole('option')).toHaveLength(
-          codeGenerators.length + 1
-        )
+    renderWithRouterAndReduxProvider(<SdkLanguageSelector />, undefined, store)
+    userEvent.click(screen.getByRole('textbox'))
+    await waitFor(() => {
+      expect(screen.getAllByRole('option')).toHaveLength(
+        codeGenerators.length + 1
+      )
+      languages.forEach((language) => {
+        expect(
+          screen.getByRole('option', { name: language })
+        ).toBeInTheDocument()
       })
     })
   })
 
-  test('it stores the selected language in localStorage', async () => {
-    registerTestEnvAdaptor()
-    const mockDispatch = jest.fn()
-    jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch)
-    renderWithReduxProvider(<SdkLanguageSelector />)
-
-    const selector = screen.getByRole('textbox')
-    expect(defaultSettingsState.sdkLanguage).toEqual('Python')
-    expect(selector).toHaveValue('Python')
-
-    userEvent.click(selector)
-    await act(async () => {
-      await userEvent.click(screen.getByRole('option', { name: 'TypeScript' }))
+  test.each(languages.filter((l) => l !== 'All'))(
+    'choosing `%s` pushes its alias to url',
+    async (language) => {
+      renderWithRouterAndReduxProvider(
+        <SdkLanguageSelector />,
+        undefined,
+        store
+      )
+      const selector = screen.getByRole('textbox')
+      userEvent.click(selector)
       await waitFor(async () => {
-        expect(mockDispatch).toHaveBeenLastCalledWith(
-          settingsSlice.actions.setSdkLanguageAction({
-            sdkLanguage: 'TypeScript',
-          })
-        )
+        await userEvent.click(screen.getByRole('option', { name: language }))
+        const sdk = findSdk(language)
+        expect(mockHistoryPush).toHaveBeenLastCalledWith({
+          pathname: location.pathname,
+          search: `sdk=${sdk.alias}`,
+        })
+      })
+    }
+  )
+
+  test("choosing 'All' removes sdk parameter from the url", async () => {
+    renderWithRouterAndReduxProvider(<SdkLanguageSelector />, undefined, store)
+    userEvent.click(screen.getByRole('textbox'))
+    await waitFor(async () => {
+      await userEvent.click(screen.getByRole('option', { name: 'All' }))
+      expect(mockHistoryPush).toHaveBeenLastCalledWith({
+        pathname: location.pathname,
+        search: '',
       })
     })
   })

package/src/components/SelectorContainer/SdkLanguageSelector.tsx

@@ -24,43 +24,36 @@
 
  */
 import type { FC } from 'react'
-import React from 'react'
-import { codeGenerators } from '@looker/sdk-codegen'
+import React, { useEffect, useState } from 'react'
 import { Select } from '@looker/components'
 import { useSelector } from 'react-redux'
-import type { SelectOptionProps } from '@looker/components'
-
-import { useSettingActions, selectSdkLanguage } from '../../state'
+import { selectSdkLanguage } from '../../state'
+import { allAlias, useNavigation } from '../../utils'
+import { allSdkLanguageOptions } from './utils'
 
 /**
  * Allows the user to select their preferred SDK language
  */
 export const SdkLanguageSelector: FC = () => {
-  const { setSdkLanguageAction } = useSettingActions()
+  const { navigate } = useNavigation()
   const selectedSdkLanguage = useSelector(selectSdkLanguage)
+  const [language, setLanguage] = useState(selectedSdkLanguage)
+  const options = allSdkLanguageOptions()
 
-  const allSdkLanguages: SelectOptionProps[] = codeGenerators.map((gen) => ({
-    value: gen.language,
-  }))
-
-  allSdkLanguages.push({
-    options: [
-      {
-        value: 'All',
-      },
-    ],
-  })
-
-  const handleChange = (language: string) => {
-    setSdkLanguageAction({ sdkLanguage: language })
+  const handleChange = (alias: string) => {
+    navigate(location.pathname, { sdk: alias === allAlias ? null : alias })
   }
 
+  useEffect(() => {
+    setLanguage(selectedSdkLanguage)
+  }, [selectedSdkLanguage])
+
   return (
     <Select
       aria-label="sdk language selector"
-      value={selectedSdkLanguage}
+      value={language}
       onChange={handleChange}
-      options={allSdkLanguages}
+      options={options}
     />
   )
 }

package/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`)
   })
 })

package/src/components/SelectorContainer/SelectorContainer.tsx

@@ -32,7 +32,7 @@ import { ChangeHistory } from '@styled-icons/material/ChangeHistory'
 import type { SpecItem } from '@looker/sdk-codegen'
 
 import { Link } from '../Link'
-import { diffPath } from '../../utils'
+import { diffPath, useNavigation } from '../../utils'
 import { SdkLanguageSelector } from './SdkLanguageSelector'
 import { ApiSpecSelector } from './ApiSpecSelector'
 
@@ -49,17 +49,20 @@ export const HEADER_REM = 4
 export const SelectorContainer: FC<SelectorContainerProps> = ({
   spec,
   ...spaceProps
-}) => (
-  <Space width="auto" {...spaceProps}>
-    <SdkLanguageSelector />
-    <ApiSpecSelector spec={spec} />
-    <Link to={`/${diffPath}/${spec.key}/`}>
-      <IconButton
-        toggle
-        label="Compare Specifications"
-        icon={<ChangeHistory />}
-        size="small"
-      />
-    </Link>
-  </Space>
-)
+}) => {
+  const { buildPathWithGlobalParams } = useNavigation()
+  return (
+    <Space width="auto" {...spaceProps}>
+      <SdkLanguageSelector />
+      <ApiSpecSelector spec={spec} />
+      <Link to={buildPathWithGlobalParams(`/${spec.key}/${diffPath}`)}>
+        <IconButton
+          toggle
+          label="Compare Specifications"
+          icon={<ChangeHistory />}
+          size="small"
+        />
+      </Link>
+    </Space>
+  )
+}

package/src/{utils/hooks.ts → components/SelectorContainer/utils.ts}

@@ -23,31 +23,23 @@
  SOFTWARE.
 
  */
-import { useHistory } from 'react-router-dom'
+import type { SelectOptionProps } from '@looker/components'
+import { allSdkLanguages, allAlias } from '../../utils'
 
 /**
- * Hook for navigating to given route with specified query params
- *
- * @param path Pathname to navigate to
- * @param queryParams Hash of query param name/value pairs to include in the destination url
+ * @returns sdk language options for render
  */
-
-export const useNavigation = () => {
-  const history = useHistory()
-
-  const navigate = (path: string, queryParams?: { search?: string } | null) => {
-    if (queryParams === undefined) {
-      // if params passed in is undefined, maintain existing parameters in the URL
-      const curParams = new URLSearchParams(history.location.search)
-      history.push({ pathname: path, search: curParams.toString() })
-    } else if (queryParams === null || Object.keys(queryParams).length === 0) {
-      // if params passed in is null or empty, remove all parameters from the URL
-      history.push({ pathname: path })
+export const allSdkLanguageOptions = (): SelectOptionProps[] => {
+  const options = [] as SelectOptionProps[]
+  const languages = allSdkLanguages()
+  Object.entries(languages).forEach(([alias, language]) => {
+    const option = { value: alias, label: language }
+    if (alias === allAlias) {
+      options.push({ options: [option] })
     } else {
-      // if we have new parameters passed in, push them to the URL
-      history.push({ pathname: path, search: queryParams.search })
+      options.push(option)
     }
-  }
+  })
 
-  return navigate
+  return options
 }

package/src/components/SideNav/SideNav.tsx

@@ -34,6 +34,7 @@ import {
   TabPanels,
   useTabs,
   InputSearch,
+  Box2,
 } from '@looker/components'
 import type {
   SpecItem,
@@ -44,6 +45,7 @@ import type {
 } from '@looker/sdk-codegen'
 import { criteriaToSet, tagTypes } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
+import { CopyLinkWrapper } from '@looker/run-it'
 import { useWindowSize, useNavigation } from '../../utils'
 import { HEADER_REM } from '../Header'
 import { selectSearchCriteria, selectSearchPattern } from '../../state'
@@ -68,7 +70,7 @@ interface SideNavProps {
 
 export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
   const location = useLocation()
-  const navigate = useNavigation()
+  const { navigate, navigateWithGlobalParams } = useNavigation()
   const specKey = spec.key
   const tabNames = ['methods', 'types']
   const pathParts = location.pathname.split('/')
@@ -82,12 +84,12 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
     if (parts[1] === 'diff') {
       if (parts[3] !== tabNames[index]) {
         parts[3] = tabNames[index]
-        navigate(parts.join('/'))
+        navigateWithGlobalParams(parts.join('/'))
       }
     } else {
       if (parts[2] !== tabNames[index]) {
         parts[2] = tabNames[index]
-        navigate(parts.join('/'))
+        navigateWithGlobalParams(parts.join('/'))
       }
     }
   }
@@ -113,12 +115,14 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
     const searchParams = new URLSearchParams(location.search)
     if (debouncedPattern && debouncedPattern !== searchParams.get('s')) {
       searchParams.set('s', debouncedPattern)
-      navigate(location.pathname, { search: searchParams.toString() })
+      navigate(location.pathname, { s: searchParams.get('s') })
     } else if (!debouncedPattern && searchParams.get('s')) {
       searchParams.delete('s')
-      navigate(location.pathname, { search: searchParams.toString() })
+      navigate(location.pathname, { s: null })
     }
-  }, [location.search, debouncedPattern])
+  }, [debouncedPattern])
+  // Removed location.search as dep to fix bug related to
+  // browser forward / backward navigation
 
   useEffect(() => {
     let results
@@ -126,6 +130,7 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
     let newTypes
     let newTypeTags
     const api = spec.api || ({} as ApiModel)
+    setSearchPattern(searchPattern)
 
     if (searchPattern && api.search) {
       results = api.search(searchPattern, criteriaToSet(searchCriteria))
@@ -160,18 +165,25 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
 
   return (
     <nav>
-      <InputSearch
+      <Box2
         pl="large"
         pr="large"
         pb="large"
         pt={headless ? 'u3' : 'large'}
-        aria-label="Search"
-        onChange={handleInputChange}
-        placeholder="Search"
-        value={pattern}
-        isClearable
-      />
-      <SearchMessage search={searchResults} />
+        position={'relative'}
+        width={'100%'}
+      >
+        <CopyLinkWrapper visible={!!pattern}>
+          <InputSearch
+            aria-label="Search"
+            onChange={handleInputChange}
+            placeholder="Search"
+            value={pattern}
+            isClearable
+          />
+        </CopyLinkWrapper>
+        <SearchMessage search={searchResults} />
+      </Box2>
       <TabList {...tabs} distribute>
         <Tab>Methods ({methodCount})</Tab>
         <Tab>Types ({typeCount})</Tab>

package/src/components/SideNav/SideNavMethods.spec.tsx

@@ -52,6 +52,10 @@ describe('SideNavMethods', () => {
   const methods = api.tags[tag]
   const specKey = '3.1'
 
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   test('it renders provided methods', () => {
     renderWithRouterAndReduxProvider(
       <SideNavMethods methods={methods} tag={tag} specKey={specKey} />
@@ -72,10 +76,7 @@ describe('SideNavMethods', () => {
     const firstMethod = Object.values(methods)[0].schema.summary
     expect(screen.queryByText(firstMethod)).not.toBeInTheDocument()
     userEvent.click(screen.getByText(tag))
-    expect(mockHistoryPush).toHaveBeenCalledWith({
-      pathname: `/${specKey}/methods/${tag}`,
-      search: '',
-    })
+    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods/${tag}`)
     expect(screen.getByRole('link', { name: firstMethod })).toBeInTheDocument()
     expect(screen.getAllByRole('link')).toHaveLength(
       Object.values(methods).length
@@ -97,10 +98,7 @@ describe('SideNavMethods', () => {
       Object.values(methods).length
     )
     userEvent.click(screen.getByText(tag))
-    expect(mockHistoryPush).toHaveBeenCalledWith({
-      pathname: `/${specKey}/methods`,
-      search: '',
-    })
+    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods`)
     expect(screen.queryByText(firstMethod)).not.toBeInTheDocument()
     expect(screen.queryByRole('link')).not.toBeInTheDocument()
   })