@looker/api-explorer 0.9.19 → 0.9.25

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

@@ -29,7 +29,7 @@ import { codeGenerators } from '@looker/sdk-codegen'
 import userEvent from '@testing-library/user-event'
 
 import { specs, specState } from '../../test-data'
-import { renderWithRouter, withReduxProvider } from '../../test-utils'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
 import { defaultSettingsState } from '../../state'
 import { SelectorContainer } from './SelectorContainer'
 
@@ -41,14 +41,12 @@ describe('SelectorContainer', () => {
   })
 
   test('it renders a spec selector with the correct default value and options', async () => {
-    renderWithRouter(
-      withReduxProvider(
-        <SelectorContainer
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <SelectorContainer
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+      />
     )
     const selector = screen.getByLabelText('spec selector')
     expect(selector).toHaveValue(`${specState.spec.key}`)
@@ -63,14 +61,12 @@ describe('SelectorContainer', () => {
   })
 
   test('it renders an sdk language selector with the correct value and options', async () => {
-    renderWithRouter(
-      withReduxProvider(
-        <SelectorContainer
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <SelectorContainer
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+      />
     )
     const selector = screen.getByLabelText('sdk language selector')
     expect(selector).toHaveValue(defaultSettingsState.sdkLanguage)
@@ -85,14 +81,12 @@ describe('SelectorContainer', () => {
   })
 
   test('it renders an icon button for the differ', () => {
-    renderWithRouter(
-      withReduxProvider(
-        <SelectorContainer
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <SelectorContainer
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+      />
     )
     expect(
       screen

package/src/components/SelectorContainer/SelectorContainer.tsx

@@ -24,17 +24,19 @@
 
  */
 
-import React, { FC, Dispatch } from 'react'
+import type { FC, Dispatch } from 'react'
+import React from 'react'
+import type { SpaceHelperProps } from '@looker/components'
 import { Space, IconButton } from '@looker/components'
 import { ChangeHistory } from '@styled-icons/material/ChangeHistory'
-import { SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { SpecList, SpecItem } from '@looker/sdk-codegen'
 import { Link } from '../Link'
-import { SpecAction } from '../../reducers'
+import type { SpecAction } from '../../reducers'
 import { diffPath } from '../../utils'
 import { SdkLanguageSelector } from './SdkLanguageSelector'
 import { ApiSpecSelector } from './ApiSpecSelector'
 
-interface SelectorContainerProps {
+interface SelectorContainerProps extends SpaceHelperProps {
   /** Specs to choose from */
   specs: SpecList
   /** Current selected spec */
@@ -52,8 +54,9 @@ export const SelectorContainer: FC<SelectorContainerProps> = ({
   specs,
   spec,
   specDispatch,
+  ...spaceProps
 }) => (
-  <Space width="auto">
+  <Space width="auto" {...spaceProps}>
     <SdkLanguageSelector />
     <ApiSpecSelector specs={specs} spec={spec} specDispatch={specDispatch} />
     <Link to={`/${diffPath}/${spec.key}/`}>

package/src/components/SideNav/SearchMessage.tsx

@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
-import { ISearchResult } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
+import type { ISearchResult } from '@looker/sdk-codegen'
 import { Heading, Icon, Flex } from '@looker/components'
 import { Error } from '@styled-icons/material/Error'
 

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

@@ -24,13 +24,13 @@
 
  */
 import React from 'react'
-import { CriteriaToSet } from '@looker/sdk-codegen'
+import { criteriaToSet } from '@looker/sdk-codegen'
 import userEvent from '@testing-library/user-event'
-import { act, screen, waitFor } from '@testing-library/react'
+import { screen, waitFor } from '@testing-library/react'
 
 import { getLoadedSpecs, specState } from '../../test-data'
-import { renderWithRouter, renderWithSearchAndRouter } from '../../test-utils'
-import { defaultSearchState } from '../../reducers'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
+import { defaultSettingsState } from '../../state'
 import { SideNav } from './SideNav'
 import { countMethods, countTypes } from './searchUtils'
 
@@ -55,7 +55,7 @@ describe('SideNav', () => {
   })
 
   test('it renders search, methods tab and types tab', () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <SideNav
         specs={specs}
         spec={specState.spec}
@@ -78,12 +78,13 @@ describe('SideNav', () => {
   })
 
   test('Methods tab is the default active tab', () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <SideNav
         specs={specs}
         spec={specState.spec}
         specDispatch={specDispatch}
-      />
+      />,
+      ['/3.1/methods']
     )
     expect(screen.getAllByText(allTagsPattern)).toHaveLength(2)
     expect(
@@ -92,15 +93,11 @@ describe('SideNav', () => {
 
     userEvent.click(screen.getByRole('tab', { name: /^Types \(\d+\)$/ }))
 
-    // eslint-disable-next-line jest-dom/prefer-in-document
-    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(0)
-    expect(screen.getAllByRole('link', { name: allTypesPattern })).toHaveLength(
-      2
-    )
+    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(2)
   })
 
   test('url determines active tab', () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <SideNav
         specs={specs}
         spec={specState.spec}
@@ -109,10 +106,7 @@ describe('SideNav', () => {
       ['/3.1/types']
     )
     // eslint-disable-next-line jest-dom/prefer-in-document
-    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(0)
-    expect(screen.getAllByRole('link', { name: allTypesPattern })).toHaveLength(
-      2
-    )
+    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(2)
   })
 })
 
@@ -121,7 +115,7 @@ describe('Search', () => {
   const specDispatch = jest.fn()
 
   test('it filters methods and types on input', async () => {
-    renderWithSearchAndRouter(
+    renderWithRouterAndReduxProvider(
       <SideNav
         specs={specs}
         spec={specState.spec}
@@ -131,28 +125,23 @@ describe('Search', () => {
     const searchPattern = 'embedsso'
     const input = screen.getByLabelText('Search')
     jest.spyOn(specState.spec.api!, 'search')
-    await act(async () => {
-      /** Pasting to avoid triggering search multiple times */
-      await userEvent.paste(input, searchPattern)
-      await waitFor(() => {
-        expect(specState.spec.api!.search).toHaveBeenCalledWith(
-          searchPattern,
-          CriteriaToSet(defaultSearchState.criteria)
+    /** Pasting to avoid triggering search multiple times */
+    await userEvent.paste(input, searchPattern)
+    await waitFor(() => {
+      expect(specState.spec.api!.search).toHaveBeenCalledWith(
+        searchPattern,
+        criteriaToSet(defaultSettingsState.searchCriteria)
+      )
+      const methods = screen.getByRole('tab', { name: 'Methods (1)' })
+      userEvent.click(methods)
+      expect(
+        screen.getByText(
+          specState.spec.api!.tags.Auth.create_sso_embed_url.summary
         )
-        const methods = screen.getByRole('tab', { name: 'Methods (1)' })
-        const types = screen.getByRole('tab', { name: 'Types (1)' })
-        userEvent.click(methods)
-        expect(
-          screen.getByText(
-            specState.spec.api!.tags.Auth.create_sso_embed_url.summary
-          )
-        ).toBeInTheDocument()
-
-        userEvent.click(types)
-        expect(
-          screen.getByText(specState.spec.api!.types.EmbedSsoParams.name)
-        ).toBeInTheDocument()
-      })
+      ).toBeInTheDocument()
+      const types = screen.getByRole('tab', { name: 'Types (1)' })
+      userEvent.click(types)
+      expect(screen.getByText('EmbedSso')).toBeInTheDocument()
     })
   })
 })

package/src/components/SideNav/SideNav.tsx

@@ -24,36 +24,45 @@
 
  */
 
-import React, { FC, useContext, useEffect, useState, Dispatch } from 'react'
+import type { FC, Dispatch } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
-  Heading,
   TabList,
   Tab,
   TabPanel,
   TabPanels,
   useTabs,
   InputSearch,
-  SpaceVertical,
 } from '@looker/components'
-import {
+import type {
   SpecItem,
   SpecList,
-  CriteriaToSet,
   ISearchResult,
   ApiModel,
+  TagList,
+  TypeTagList,
 } from '@looker/sdk-codegen'
-import { useRouteMatch } from 'react-router-dom'
+import { criteriaToSet, tagTypes } from '@looker/sdk-codegen'
+import { useSelector } from 'react-redux'
 
-import { SearchContext } from '../../context'
-import { setPattern, SpecAction } from '../../reducers'
+import type { SpecAction } from '../../reducers'
 import { useWindowSize } from '../../utils'
 import { HEADER_REM } from '../Header'
-import { SelectorContainer } from '../SelectorContainer'
-import { SideNavTags } from './SideNavTags'
-import { SideNavTypes } from './SideNavTypes'
+import { selectSearchCriteria, useSettingActions } from '../../state'
+import { SideNavMethodTags } from './SideNavMethodTags'
+import { SideNavTypeTags } from './SideNavTypeTags'
 import { useDebounce, countMethods, countTypes } from './searchUtils'
 import { SearchMessage } from './SearchMessage'
 
+interface SideNavState {
+  tags: TagList
+  typeTags: TypeTagList
+  methodCount: number
+  typeCount: number
+  searchResults?: ISearchResult
+}
+
 interface SideNavProps {
   headless?: boolean
   /** Specs to choose from */
@@ -64,34 +73,45 @@ interface SideNavProps {
   specDispatch: Dispatch<SpecAction>
 }
 
-interface SideNavParams {
-  sideNavTab: string
-}
-
-export const SideNav: FC<SideNavProps> = ({
-  headless = false,
-  specs,
-  spec,
-  specDispatch,
-}) => {
-  const api = spec.api || ({} as ApiModel)
+export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
+  const history = useHistory()
+  const location = useLocation()
   const specKey = spec.key
   const tabNames = ['methods', 'types']
-  const match = useRouteMatch<SideNavParams>(`/:specKey/:sideNavTab?`)
-  let defaultIndex = tabNames.indexOf('methods')
-  if (match && match.params.sideNavTab) {
-    defaultIndex = tabNames.indexOf(match.params.sideNavTab)
+  const pathParts = location.pathname.split('/')
+  const sideNavTab = pathParts[1] === 'diff' ? pathParts[3] : pathParts[2]
+  let defaultIndex = tabNames.indexOf(sideNavTab)
+  if (defaultIndex < 0) {
+    defaultIndex = tabNames.indexOf('methods')
+  }
+  const onTabChange = (index: number) => {
+    const parts = location.pathname.split('/')
+    if (parts[1] === 'diff') {
+      if (parts[3] !== tabNames[index]) {
+        parts[3] = tabNames[index]
+        history.push(parts.join('/'))
+      }
+    } else {
+      if (parts[2] !== tabNames[index]) {
+        parts[2] = tabNames[index]
+        history.push(parts.join('/'))
+      }
+    }
   }
-  const tabs = useTabs({ defaultIndex })
-  const { searchSettings, setSearchSettings } = useContext(SearchContext)
-  const [pattern, setSearchPattern] = useState(searchSettings.pattern)
+  const tabs = useTabs({ defaultIndex, onChange: onTabChange })
+  const searchCriteria = useSelector(selectSearchCriteria)
+  const { setSearchPatternAction } = useSettingActions()
+
+  const [pattern, setSearchPattern] = useState('')
   const debouncedPattern = useDebounce(pattern, 250)
-  const [searchResults, setSearchResults] = useState<ISearchResult>()
-  const searchCriteria = CriteriaToSet(searchSettings.criteria)
-  const [tags, setTags] = useState(api.tags || {})
-  const [types, setTypes] = useState(api.types || {})
-  const [methodCount, setMethodCount] = useState(countMethods(tags))
-  const [typeCount, setTypeCount] = useState(countTypes(types))
+  const [sideNavState, setSideNavState] = useState<SideNavState>(() => ({
+    tags: spec?.api?.tags || {},
+    typeTags: spec?.api?.typeTags || {},
+    methodCount: countMethods(spec?.api?.tags || {}),
+    typeCount: countTypes(spec?.api?.types || {}),
+    searchResults: undefined,
+  }))
+  const { tags, typeTags, methodCount, typeCount, searchResults } = sideNavState
 
   const handleInputChange = (value: string) => {
     setSearchPattern(value)
@@ -101,22 +121,43 @@ export const SideNav: FC<SideNavProps> = ({
     let results
     let newTags
     let newTypes
-    if (debouncedPattern) {
-      results = api.search(pattern, searchCriteria)
+    let newTypeTags
+    const api = spec.api || ({} as ApiModel)
+
+    if (debouncedPattern && api.search) {
+      results = api.search(pattern, criteriaToSet(searchCriteria))
       newTags = results.tags
       newTypes = results.types
+      newTypeTags = tagTypes(api, results.types)
     } else {
       newTags = api.tags || {}
       newTypes = api.types || {}
+      newTypeTags = api.typeTags || {}
     }
 
-    setTags(newTags)
-    setTypes(newTypes)
-    setMethodCount(countMethods(newTags))
-    setTypeCount(countTypes(newTypes))
-    setSearchResults(results)
-    setSearchSettings(setPattern(debouncedPattern!))
-  }, [debouncedPattern, specKey, spec])
+    setSideNavState({
+      tags: newTags,
+      typeTags: newTypeTags,
+      typeCount: countTypes(newTypes),
+      methodCount: countMethods(newTags),
+      searchResults: results,
+    })
+    setSearchPatternAction({ searchPattern: debouncedPattern })
+  }, [
+    debouncedPattern,
+    specKey,
+    spec,
+    setSearchPatternAction,
+    pattern,
+    searchCriteria,
+  ])
+
+  useEffect(() => {
+    const { selectedIndex, onSelectTab } = tabs
+    if (defaultIndex !== selectedIndex) {
+      onSelectTab(defaultIndex)
+    }
+  }, [defaultIndex, tabs])
 
   const size = useWindowSize()
   const headlessOffset = headless ? 200 : 120
@@ -124,28 +165,17 @@ export const SideNav: FC<SideNavProps> = ({
 
   return (
     <nav>
-      <SpaceVertical alignItems="center" p="large" gap="xsmall">
-        {headless && (
-          <SpaceVertical>
-            <Heading as="h5" color="key" fontWeight="bold">
-              API Documentation
-            </Heading>
-            <SelectorContainer
-              specs={specs}
-              spec={spec}
-              specDispatch={specDispatch}
-            />
-          </SpaceVertical>
-        )}
-        <InputSearch
-          aria-label="Search"
-          onChange={handleInputChange}
-          placeholder="Search"
-          value={pattern}
-          isClearable
-          changeOnSelect
-        />
-      </SpaceVertical>
+      <InputSearch
+        pl="large"
+        pr="large"
+        pb="large"
+        pt={headless ? 'u3' : 'large'}
+        aria-label="Search"
+        onChange={handleInputChange}
+        placeholder="Search"
+        value={pattern}
+        isClearable
+      />
       <SearchMessage search={searchResults} />
       <TabList {...tabs} distribute>
         <Tab>Methods ({methodCount})</Tab>
@@ -153,14 +183,18 @@ export const SideNav: FC<SideNavProps> = ({
       </TabList>
       <TabPanels {...tabs} pt="xsmall" height={`${menuH}px`} overflow="auto">
         <TabPanel>
-          <SideNavTags
+          <SideNavMethodTags
             tags={tags}
             specKey={specKey}
             defaultOpen={!!searchResults}
           />
         </TabPanel>
         <TabPanel>
-          <SideNavTypes types={types} specKey={specKey} />
+          <SideNavTypeTags
+            tags={typeTags}
+            specKey={specKey}
+            defaultOpen={!!searchResults}
+          />
         </TabPanel>
       </TabPanels>
     </nav>

package/src/components/SideNav/{SideNavTags.spec.tsx → SideNavMethodTags.spec.tsx}

@@ -29,13 +29,15 @@ import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { api } from '../../test-data'
-import { renderWithSearchAndRouter } from '../../test-utils'
-import { SideNavTags } from './SideNavTags'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
+import { SideNavMethodTags } from './SideNavMethodTags'
 
 describe('SideNavTags', () => {
   const tags = pick(api.tags, ['ApiAuth', 'Dashboard'])
   test('it renders a provided tag and its methods', () => {
-    renderWithSearchAndRouter(<SideNavTags tags={tags} specKey={'3.1'} />)
+    renderWithRouterAndReduxProvider(
+      <SideNavMethodTags tags={tags} specKey={'3.1'} />
+    )
     const tag = screen.getByText('Dashboard')
     const tagContent = 'Create Dashboard'
     expect(screen.queryByText(tagContent)).not.toBeInTheDocument()
@@ -46,7 +48,9 @@ describe('SideNavTags', () => {
   })
 
   test('tags are rendered initially collapsed and expand when clicked', () => {
-    renderWithSearchAndRouter(<SideNavTags tags={tags} specKey={'3.1'} />)
+    renderWithRouterAndReduxProvider(
+      <SideNavMethodTags tags={tags} specKey={'3.1'} />
+    )
 
     const allTags = screen.getAllByText(/ApiAuth|Dashboard/)
     expect(allTags).toHaveLength(2)
@@ -58,10 +62,8 @@ describe('SideNavTags', () => {
   })
 
   test('tag is expanded if specified in route', () => {
-    renderWithSearchAndRouter(
-      <SideNavTags tags={tags} specKey={'3.1'} />,
-      undefined,
-      undefined,
+    renderWithRouterAndReduxProvider(
+      <SideNavMethodTags tags={tags} specKey={'3.1'} />,
       ['/3.1/methods/Dashboard']
     )
 

package/src/components/SideNav/{SideNavTags.tsx → SideNavMethodTags.tsx}

@@ -26,7 +26,7 @@
 
 import React from 'react'
 import styled from 'styled-components'
-import { TagList } from '@looker/sdk-codegen'
+import type { TagList } from '@looker/sdk-codegen'
 import { SideNavMethods } from './SideNavMethods'
 
 interface TagsProps {
@@ -36,7 +36,7 @@ interface TagsProps {
   className?: string
 }
 
-export const SideNavTags = styled(
+export const SideNavMethodTags = styled(
   ({ tags, specKey, className, defaultOpen }: TagsProps) => (
     <div className={className}>
       {Object.keys(tags).map((tag) => (

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

@@ -29,7 +29,10 @@ import userEvent from '@testing-library/user-event'
 import { screen } from '@testing-library/react'
 
 import { api } from '../../test-data'
-import { renderWithSearchAndRouter } from '../../test-utils'
+import {
+  createTestStore,
+  renderWithRouterAndReduxProvider,
+} from '../../test-utils'
 import { SideNavMethods } from './SideNavMethods'
 
 describe('SideNavMethods', () => {
@@ -37,7 +40,7 @@ describe('SideNavMethods', () => {
   const methods = api.tags[tag]
 
   test('it renders provided methods', () => {
-    renderWithSearchAndRouter(
+    renderWithRouterAndReduxProvider(
       <SideNavMethods methods={methods} tag={tag} specKey={'3.1'} />
     )
     userEvent.click(screen.getByText(tag))
@@ -50,14 +53,15 @@ describe('SideNavMethods', () => {
   })
 
   test('it highlights text matching search pattern in both tag and methods', () => {
-    const highlightPattern = 'dash'
-    renderWithSearchAndRouter(
+    const store = createTestStore({ settings: { searchPattern: 'dash' } })
+    renderWithRouterAndReduxProvider(
       <SideNavMethods
         methods={pick(methods, 'create_dashboard')}
         tag={tag}
         specKey={'3.1'}
       />,
-      highlightPattern
+      undefined,
+      store
     )
     userEvent.click(screen.getByText('Dash'))
     const matches = screen.getAllByText(/dash/i)

package/src/components/SideNav/SideNavMethods.tsx

@@ -24,28 +24,28 @@
 
  */
 
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Accordion2, Heading } from '@looker/components'
-import { MethodList } from '@looker/sdk-codegen'
+import type { MethodList } from '@looker/sdk-codegen'
+import { useSelector } from 'react-redux'
 import { useHistory, useRouteMatch } from 'react-router-dom'
+
 import { Link } from '../Link'
 import { buildMethodPath, highlightHTML } from '../../utils'
-import { SearchContext } from '../../context'
+import { selectSearchPattern } from '../../state'
 
 interface MethodsProps {
-  className?: string
-  defaultOpen?: boolean
   methods: MethodList
   tag: string
   specKey: string
+  className?: string
+  defaultOpen?: boolean
 }
 
 export const SideNavMethods = styled(
-  ({ className, defaultOpen = false, methods, tag, specKey }: MethodsProps) => {
-    const {
-      searchSettings: { pattern },
-    } = useContext(SearchContext)
+  ({ className, methods, tag, specKey, defaultOpen = false }: MethodsProps) => {
+    const searchPattern = useSelector(selectSearchPattern)
     const match = useRouteMatch<{ methodTag: string }>(
       `/:specKey/methods/:methodTag/:methodName?`
     )
@@ -63,7 +63,7 @@ export const SideNavMethods = styled(
         ? defaultOpen || match.params.methodTag === tag
         : defaultOpen
       setIsOpen(status)
-    }, [defaultOpen])
+    }, [defaultOpen, match, tag])
 
     /* TODO: Fix highlighting. It is applied but it is somehow being overridden */
     return (
@@ -73,7 +73,7 @@ export const SideNavMethods = styled(
         className={className}
         label={
           <Heading as="h4" fontSize="small" py="xsmall">
-            {highlightHTML(pattern, tag)}
+            {highlightHTML(searchPattern, tag)}
           </Heading>
         }
       >
@@ -81,7 +81,7 @@ export const SideNavMethods = styled(
           {Object.values(methods).map((method) => (
             <li key={method.name}>
               <Link to={`${buildMethodPath(specKey, tag, method.name)}`}>
-                {highlightHTML(pattern, method.summary)}
+                {highlightHTML(searchPattern, method.summary)}
               </Link>
             </li>
           ))}