@looker/api-explorer 0.9.35 → 0.9.37

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/components/SelectorContainer/utils.ts

@@ -0,0 +1,45 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2022 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import type { SelectOptionProps } from '@looker/components'
+import { allSdkLanguages, allAlias } from '../../utils'
+
+/**
+ * @returns sdk language options for render
+ */
+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 {
+      options.push(option)
+    }
+  })
+
+  return options
+}

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

@@ -29,7 +29,10 @@ import userEvent from '@testing-library/user-event'
 import { screen, waitFor } from '@testing-library/react'
 
 import { getLoadedSpecs } from '../../test-data'
-import { renderWithRouterAndReduxProvider } from '../../test-utils'
+import {
+  createTestStore,
+  renderWithRouterAndReduxProvider,
+} from '../../test-utils'
 import { defaultSettingsState } from '../../state'
 import { SideNav } from './SideNav'
 import { countMethods, countTypes } from './searchUtils'
@@ -88,14 +91,45 @@ describe('SideNav', () => {
   })
 })
 
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useHistory: () => ({
+      push: mockHistoryPush,
+      location,
+    }),
+  }
+})
+
 describe('Search', () => {
-  test('it filters methods and types on input', async () => {
-    renderWithRouterAndReduxProvider(<SideNav spec={spec} />)
+  test('inputting text in search box updates URL', async () => {
+    renderWithRouterAndReduxProvider(<SideNav spec={spec} />, ['/3.1/methods'])
     const searchPattern = 'embedsso'
     const input = screen.getByLabelText('Search')
-    jest.spyOn(spec.api!, 'search')
-    /** Pasting to avoid triggering search multiple times */
     await userEvent.paste(input, searchPattern)
+    await waitFor(() => {
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: '/3.1/methods',
+        search: `s=${searchPattern}`,
+      })
+    })
+  })
+
+  test('sets search default value from store on load', async () => {
+    const searchPattern = 'embedsso'
+    const store = createTestStore({
+      settings: { searchPattern: searchPattern },
+    })
+    jest.spyOn(spec.api!, 'search')
+    renderWithRouterAndReduxProvider(
+      <SideNav spec={spec} />,
+      ['/3.1/methods?s=embedsso'],
+      store
+    )
+    const input = screen.getByLabelText('Search')
+    expect(input).toHaveValue(searchPattern)
     await waitFor(() => {
       expect(spec.api!.search).toHaveBeenCalledWith(
         searchPattern,

package/src/components/SideNav/SideNav.tsx

@@ -26,7 +26,7 @@
 
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import {
   TabList,
   Tab,
@@ -34,6 +34,7 @@ import {
   TabPanels,
   useTabs,
   InputSearch,
+  Box2,
 } from '@looker/components'
 import type {
   SpecItem,
@@ -44,10 +45,10 @@ import type {
 } from '@looker/sdk-codegen'
 import { criteriaToSet, tagTypes } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
-
-import { useWindowSize } from '../../utils'
+import { CopyLinkWrapper } from '@looker/run-it'
+import { useWindowSize, useNavigation } from '../../utils'
 import { HEADER_REM } from '../Header'
-import { selectSearchCriteria, useSettingActions } from '../../state'
+import { selectSearchCriteria, selectSearchPattern } from '../../state'
 import { SideNavMethodTags } from './SideNavMethodTags'
 import { SideNavTypeTags } from './SideNavTypeTags'
 import { useDebounce, countMethods, countTypes } from './searchUtils'
@@ -68,8 +69,8 @@ interface SideNavProps {
 }
 
 export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
-  const history = useHistory()
   const location = useLocation()
+  const { navigate, navigateWithGlobalParams } = useNavigation()
   const specKey = spec.key
   const tabNames = ['methods', 'types']
   const pathParts = location.pathname.split('/')
@@ -83,20 +84,19 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
     if (parts[1] === 'diff') {
       if (parts[3] !== tabNames[index]) {
         parts[3] = tabNames[index]
-        history.push(parts.join('/'))
+        navigateWithGlobalParams(parts.join('/'))
       }
     } else {
       if (parts[2] !== tabNames[index]) {
         parts[2] = tabNames[index]
-        history.push(parts.join('/'))
+        navigateWithGlobalParams(parts.join('/'))
       }
     }
   }
   const tabs = useTabs({ defaultIndex, onChange: onTabChange })
   const searchCriteria = useSelector(selectSearchCriteria)
-  const { setSearchPatternAction } = useSettingActions()
-
-  const [pattern, setSearchPattern] = useState('')
+  const searchPattern = useSelector(selectSearchPattern)
+  const [pattern, setSearchPattern] = useState(searchPattern)
   const debouncedPattern = useDebounce(pattern, 250)
   const [sideNavState, setSideNavState] = useState<SideNavState>(() => ({
     tags: spec?.api?.tags || {},
@@ -111,15 +111,29 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
     setSearchPattern(value)
   }
 
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search)
+    if (debouncedPattern && debouncedPattern !== searchParams.get('s')) {
+      searchParams.set('s', debouncedPattern)
+      navigate(location.pathname, { s: searchParams.get('s') })
+    } else if (!debouncedPattern && searchParams.get('s')) {
+      searchParams.delete('s')
+      navigate(location.pathname, { s: null })
+    }
+  }, [debouncedPattern])
+  // Removed location.search as dep to fix bug related to
+  // browser forward / backward navigation
+
   useEffect(() => {
     let results
     let newTags
     let newTypes
     let newTypeTags
     const api = spec.api || ({} as ApiModel)
+    setSearchPattern(searchPattern)
 
-    if (debouncedPattern && api.search) {
-      results = api.search(pattern, criteriaToSet(searchCriteria))
+    if (searchPattern && api.search) {
+      results = api.search(searchPattern, criteriaToSet(searchCriteria))
       newTags = results.tags
       newTypes = results.types
       newTypeTags = tagTypes(api, results.types)
@@ -136,15 +150,7 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
       methodCount: countMethods(newTags),
       searchResults: results,
     })
-    setSearchPatternAction({ searchPattern: debouncedPattern })
-  }, [
-    debouncedPattern,
-    specKey,
-    spec,
-    setSearchPatternAction,
-    pattern,
-    searchCriteria,
-  ])
+  }, [searchPattern, specKey, spec, searchCriteria])
 
   useEffect(() => {
     const { selectedIndex, onSelectTab } = tabs
@@ -159,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

@@ -42,6 +42,7 @@ jest.mock('react-router-dom', () => {
     ...ReactRouterDOM,
     useHistory: () => ({
       push: mockHistoryPush,
+      location,
     }),
   }
 })
@@ -51,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} />

package/src/components/SideNav/SideNavMethods.tsx

@@ -29,10 +29,9 @@ import styled from 'styled-components'
 import { Accordion2, Heading } from '@looker/components'
 import type { MethodList } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
-import { useHistory, useRouteMatch } from 'react-router-dom'
-
+import { useRouteMatch } from 'react-router-dom'
+import { useNavigation, highlightHTML, buildMethodPath } from '../../utils'
 import { Link } from '../Link'
-import { buildMethodPath, highlightHTML } from '../../utils'
 import { selectSearchPattern } from '../../state'
 
 interface MethodsProps {
@@ -45,20 +44,20 @@ interface MethodsProps {
 
 export const SideNavMethods = styled(
   ({ className, methods, tag, specKey, defaultOpen = false }: MethodsProps) => {
+    const { buildPathWithGlobalParams, navigateWithGlobalParams } =
+      useNavigation()
     const searchPattern = useSelector(selectSearchPattern)
     const match = useRouteMatch<{ methodTag: string }>(
       `/:specKey/methods/:methodTag/:methodName?`
     )
     const [isOpen, setIsOpen] = useState(defaultOpen)
-    const history = useHistory()
-
     const handleOpen = () => {
       const _isOpen = !isOpen
       setIsOpen(_isOpen)
       if (_isOpen) {
-        history.push(`/${specKey}/methods/${tag}`)
+        navigateWithGlobalParams(`/${specKey}/methods/${tag}`)
       } else {
-        history.push(`/${specKey}/methods`)
+        navigateWithGlobalParams(`/${specKey}/methods`)
       }
     }
 
@@ -84,7 +83,11 @@ export const SideNavMethods = styled(
         <ul>
           {Object.values(methods).map((method) => (
             <li key={method.name}>
-              <Link to={`${buildMethodPath(specKey, tag, method.name)}`}>
+              <Link
+                to={buildPathWithGlobalParams(
+                  buildMethodPath(specKey, tag, method.name)
+                )}
+              >
                 {highlightHTML(searchPattern, method.summary)}
               </Link>
             </li>

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

@@ -41,6 +41,7 @@ jest.mock('react-router-dom', () => {
     ...ReactRouterDOM,
     useHistory: () => ({
       push: mockHistoryPush,
+      location,
     }),
   }
 })
@@ -63,7 +64,10 @@ describe('SideNavTypes', () => {
     )
     expect(screen.queryByText(typeTags[0])).not.toBeInTheDocument()
     userEvent.click(screen.getByText(tag))
-    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/types/${tag}`)
+    expect(mockHistoryPush).toHaveBeenCalledWith({
+      pathname: `/${specKey}/types/${tag}`,
+      search: '',
+    })
     expect(screen.getByRole('link', { name: typeTags[0] })).toBeInTheDocument()
   })
 
@@ -78,7 +82,10 @@ describe('SideNavTypes', () => {
     )
     expect(screen.getByRole('link', { name: typeTags[0] })).toBeInTheDocument()
     userEvent.click(screen.getAllByText(tag)[0])
-    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/types`)
+    expect(mockHistoryPush).toHaveBeenCalledWith({
+      pathname: `/${specKey}/types`,
+      search: '',
+    })
     expect(
       screen.queryByRole('link', { name: typeTags[0] })
     ).not.toBeInTheDocument()

package/src/components/SideNav/SideNavTypes.tsx

@@ -28,11 +28,10 @@ import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Accordion2, Heading } from '@looker/components'
 import type { TypeList } from '@looker/sdk-codegen'
-import { useHistory, useRouteMatch } from 'react-router-dom'
+import { useRouteMatch } from 'react-router-dom'
 import { useSelector } from 'react-redux'
-
 import { Link } from '../Link'
-import { buildTypePath, highlightHTML } from '../../utils'
+import { highlightHTML, useNavigation, buildTypePath } from '../../utils'
 import { selectSearchPattern } from '../../state'
 
 interface TypesProps {
@@ -45,20 +44,19 @@ interface TypesProps {
 
 export const SideNavTypes = styled(
   ({ className, types, tag, specKey, defaultOpen = false }: TypesProps) => {
+    const { navigate, buildPathWithGlobalParams } = useNavigation()
     const searchPattern = useSelector(selectSearchPattern)
     const match = useRouteMatch<{ typeTag: string }>(
       `/:specKey/types/:typeTag/:typeName?`
     )
     const [isOpen, setIsOpen] = useState(defaultOpen)
-    const history = useHistory()
-
     const handleOpen = () => {
       const _isOpen = !isOpen
       setIsOpen(_isOpen)
       if (_isOpen) {
-        history.push(`/${specKey}/types/${tag}`)
+        navigate(`/${specKey}/types/${tag}`)
       } else {
-        history.push(`/${specKey}/types`)
+        navigate(`/${specKey}/types`)
       }
     }
 
@@ -84,7 +82,11 @@ export const SideNavTypes = styled(
         <ul>
           {Object.values(types).map((type) => (
             <li key={type.name}>
-              <Link to={`${buildTypePath(specKey, tag, type.name)}`}>
+              <Link
+                to={buildPathWithGlobalParams(
+                  buildTypePath(specKey, tag, type.name)
+                )}
+              >
                 {highlightHTML(searchPattern, type.name)}
               </Link>
             </li>

package/src/components/index.ts

@@ -31,7 +31,6 @@ export { DocMarkdown } from './DocMarkdown'
 export { DocPseudo } from './DocPseudo'
 export { DocRateLimited } from './DocRateLimited'
 export { DocReferences } from './DocReferences'
-export { DocResponses } from './DocResponses'
 export { DocSDKs } from './DocSDKs'
 export { DocSdkUsage } from './DocSdkUsage'
 export { DocSource } from './DocSource'