@looker/api-explorer 0.9.33 → 0.9.36

package/src/ApiExplorer.tsx

@@ -91,7 +91,7 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
   const specs = useSelector(selectSpecs)
   const spec = useSelector(selectCurrentSpec)
   const { initLodesAction } = useLodeActions()
-  const { initSettingsAction } = useSettingActions()
+  const { initSettingsAction, setSearchPatternAction } = useSettingActions()
   const { initSpecsAction, setCurrentSpecAction } = useSpecActions()
 
   const location = useLocation()
@@ -123,6 +123,12 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
     }
   }, [location.pathname, spec])
 
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search)
+    const searchPattern = searchParams.get('s') || ''
+    setSearchPatternAction({ searchPattern: searchPattern! })
+  }, [location.search])
+
   useEffect(() => {
     if (headless) {
       window.addEventListener('message', hasNavigationToggle)

package/src/components/DocMarkdown/DocMarkdown.tsx

@@ -26,11 +26,11 @@
 
 import type { FC } from 'react'
 import React from 'react'
-import { useHistory } from 'react-router-dom'
 import { Markdown } from '@looker/code-editor'
 import { useSelector } from 'react-redux'
 import { getEnvAdaptor } from '@looker/extension-utils'
 import { selectSearchPattern } from '../../state'
+import { useNavigation } from '../../utils'
 import { transformURL } from './utils'
 
 interface DocMarkdownProps {
@@ -40,13 +40,13 @@ interface DocMarkdownProps {
 
 export const DocMarkdown: FC<DocMarkdownProps> = ({ source, specKey }) => {
   const searchPattern = useSelector(selectSearchPattern)
-  const history = useHistory()
+  const navigate = useNavigation()
 
   const linkClickHandler = (pathname: string, url: string) => {
     if (pathname.startsWith(`/${specKey}`)) {
-      history.push(pathname)
+      navigate(pathname)
     } else if (url.startsWith(`/${specKey}`)) {
-      history.push(url)
+      navigate(url)
     } else if (url.startsWith('https://')) {
       const adaptor = getEnvAdaptor()
       adaptor.openBrowserWindow(url)

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

@@ -41,7 +41,7 @@ jest.mock('react-router-dom', () => {
     useLocation: () => ({
       pathname: '/4.0/methods/Dashboard/dashboard',
     }),
-    useHistory: jest.fn().mockReturnValue({ push: jest.fn() }),
+    useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }),
   }
 })
 
@@ -83,6 +83,9 @@ describe('ApiSpecSelector', () => {
     })
     const button = screen.getByText('3.1')
     userEvent.click(button)
-    expect(push).toHaveBeenCalledWith('/3.1/methods/Dashboard/dashboard')
+    expect(push).toHaveBeenCalledWith({
+      pathname: '/3.1/methods/Dashboard/dashboard',
+      search: '',
+    })
   })
 })

package/src/components/SelectorContainer/ApiSpecSelector.tsx

@@ -27,9 +27,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { Select } from '@looker/components'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import type { SpecItem } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
+import { useNavigation } from '../../utils'
 
 import { selectSpecs } from '../../state'
 
@@ -38,8 +39,8 @@ interface ApiSpecSelectorProps {
 }
 
 export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({ spec }) => {
-  const history = useHistory()
   const location = useLocation()
+  const navigate = useNavigation()
   const specs = useSelector(selectSpecs)
   const options = Object.entries(specs).map(([key, spec]) => ({
     value: key,
@@ -49,7 +50,7 @@ export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({ spec }) => {
 
   const handleChange = (specKey: string) => {
     const matchPath = location.pathname.replace(`/${spec.key}`, `/${specKey}`)
-    history.push(matchPath)
+    navigate(matchPath)
   }
 
   return (

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,
@@ -44,10 +44,9 @@ import type {
 } from '@looker/sdk-codegen'
 import { criteriaToSet, tagTypes } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
-
-import { useWindowSize } from '../../utils'
+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 +67,8 @@ interface SideNavProps {
 }
 
 export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
-  const history = useHistory()
   const location = useLocation()
+  const navigate = useNavigation()
   const specKey = spec.key
   const tabNames = ['methods', 'types']
   const pathParts = location.pathname.split('/')
@@ -83,20 +82,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('/'))
+        navigate(parts.join('/'))
       }
     } else {
       if (parts[2] !== tabNames[index]) {
         parts[2] = tabNames[index]
-        history.push(parts.join('/'))
+        navigate(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,6 +109,17 @@ 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, { search: searchParams.toString() })
+    } else if (!debouncedPattern && searchParams.get('s')) {
+      searchParams.delete('s')
+      navigate(location.pathname, { search: searchParams.toString() })
+    }
+  }, [location.search, debouncedPattern])
+
   useEffect(() => {
     let results
     let newTags
@@ -118,8 +127,8 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
     let newTypeTags
     const api = spec.api || ({} as ApiModel)
 
-    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 +145,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

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

@@ -42,6 +42,7 @@ jest.mock('react-router-dom', () => {
     ...ReactRouterDOM,
     useHistory: () => ({
       push: mockHistoryPush,
+      location,
     }),
   }
 })
@@ -71,7 +72,10 @@ describe('SideNavMethods', () => {
     const firstMethod = Object.values(methods)[0].schema.summary
     expect(screen.queryByText(firstMethod)).not.toBeInTheDocument()
     userEvent.click(screen.getByText(tag))
-    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods/${tag}`)
+    expect(mockHistoryPush).toHaveBeenCalledWith({
+      pathname: `/${specKey}/methods/${tag}`,
+      search: '',
+    })
     expect(screen.getByRole('link', { name: firstMethod })).toBeInTheDocument()
     expect(screen.getAllByRole('link')).toHaveLength(
       Object.values(methods).length
@@ -93,7 +97,10 @@ describe('SideNavMethods', () => {
       Object.values(methods).length
     )
     userEvent.click(screen.getByText(tag))
-    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods`)
+    expect(mockHistoryPush).toHaveBeenCalledWith({
+      pathname: `/${specKey}/methods`,
+      search: '',
+    })
     expect(screen.queryByText(firstMethod)).not.toBeInTheDocument()
     expect(screen.queryByRole('link')).not.toBeInTheDocument()
   })

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 { useLocation, 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,21 @@ interface MethodsProps {
 
 export const SideNavMethods = styled(
   ({ className, methods, tag, specKey, defaultOpen = false }: MethodsProps) => {
+    const location = useLocation()
+    const navigate = useNavigation()
+    const searchParams = new URLSearchParams(location.search)
     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}`)
+        navigate(`/${specKey}/methods/${tag}`)
       } else {
-        history.push(`/${specKey}/methods`)
+        navigate(`/${specKey}/methods`)
       }
     }
 
@@ -84,7 +84,14 @@ export const SideNavMethods = styled(
         <ul>
           {Object.values(methods).map((method) => (
             <li key={method.name}>
-              <Link to={`${buildMethodPath(specKey, tag, method.name)}`}>
+              <Link
+                to={`${buildMethodPath(
+                  specKey,
+                  tag,
+                  method.name,
+                  searchParams.toString()
+                )}`}
+              >
                 {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 { useLocation, 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,21 @@ interface TypesProps {
 
 export const SideNavTypes = styled(
   ({ className, types, tag, specKey, defaultOpen = false }: TypesProps) => {
+    const location = useLocation()
+    const navigate = useNavigation()
+    const searchParams = new URLSearchParams(location.search)
     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 +84,14 @@ export const SideNavTypes = styled(
         <ul>
           {Object.values(types).map((type) => (
             <li key={type.name}>
-              <Link to={`${buildTypePath(specKey, tag, type.name)}`}>
+              <Link
+                to={`${buildTypePath(
+                  specKey,
+                  tag,
+                  type.name,
+                  searchParams.toString()
+                )}`}
+              >
                 {highlightHTML(searchPattern, type.name)}
               </Link>
             </li>

package/src/scenes/DiffScene/DiffScene.tsx

@@ -27,7 +27,7 @@
 import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
 import type { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen'
-import { useHistory, useRouteMatch } from 'react-router-dom'
+import { useRouteMatch } from 'react-router-dom'
 import {
   Box,
   Flex,
@@ -42,7 +42,7 @@ import { useSelector } from 'react-redux'
 
 import { ApixSection } from '../../components'
 import { selectCurrentSpec } from '../../state'
-import { diffPath, getApixAdaptor } from '../../utils'
+import { diffPath, getApixAdaptor, useNavigation } from '../../utils'
 import { diffSpecs, standardDiffToggles } from './diffUtils'
 import { DocDiff } from './DocDiff'
 
@@ -84,7 +84,7 @@ const validateParam = (specs: SpecList, specKey = '') => {
 
 export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   const adaptor = getApixAdaptor()
-  const history = useHistory()
+  const navigate = useNavigation()
   const spec = useSelector(selectCurrentSpec)
   const currentSpecKey = spec.key
   const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`)
@@ -123,14 +123,14 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   const [delta, setDelta] = useState<DiffRow[]>([])
 
   const handleLeftChange = (newLeft: string) => {
-    history.push(`/${diffPath}/${newLeft}/${rightKey}`)
+    navigate(`/${diffPath}/${newLeft}/${rightKey}`)
   }
   const handleRightChange = (newRight: string) => {
-    history.push(`/${diffPath}/${leftKey}/${newRight}`)
+    navigate(`/${diffPath}/${leftKey}/${newRight}`)
   }
 
   const handleSwitch = () => {
-    history.push(`/${diffPath}/${rightKey}/${leftKey}`)
+    navigate(`/${diffPath}/${rightKey}/${leftKey}`)
   }
 
   useEffect(() => {

package/src/scenes/DiffScene/DocDiff/DiffItem.spec.tsx

@@ -51,9 +51,10 @@ describe('DiffMethodLink', () => {
     const link = screen.getByRole('link')
     expect(link).toHaveTextContent(`${method.name} for ${specKey}`)
     fireEvent.click(link)
-    expect(pushSpy).toHaveBeenCalledWith(
-      `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`
-    )
+    expect(pushSpy).toHaveBeenCalledWith({
+      pathname: `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`,
+      search: '',
+    })
   })
 
   test('it renders missing method and does not navigate on click', () => {

package/src/scenes/DiffScene/DocDiff/DiffItem.tsx

@@ -25,7 +25,6 @@
  */
 import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
-import { useHistory } from 'react-router'
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
 import styled from 'styled-components'
 import { Accordion2, Box, Card, Grid, Heading, Link } from '@looker/components'
@@ -33,7 +32,7 @@ import type { DiffRow } from '@looker/sdk-codegen/src'
 import type { ApiModel, IMethod } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
 import { selectSdkLanguage } from '../../../state'
-import { buildMethodPath } from '../../../utils'
+import { buildMethodPath, useNavigation } from '../../../utils'
 import { DiffBanner } from './DiffBanner'
 import { differ } from './docDiffUtils'
 
@@ -60,7 +59,7 @@ export const DiffMethodLink: FC<DiffMethodLinkProps> = ({
   method,
   specKey,
 }) => {
-  const history = useHistory()
+  const navigate = useNavigation()
 
   if (!method) return <Heading as="h4">{`Missing in ${specKey}`}</Heading>
 
@@ -71,7 +70,7 @@ export const DiffMethodLink: FC<DiffMethodLinkProps> = ({
     <DiffLink
       role="link"
       onClick={() => {
-        history.push(path)
+        navigate(path)
       }}
     >{`${method.name} for ${specKey}`}</DiffLink>
   )

package/src/scenes/MethodScene/MethodScene.tsx

@@ -42,7 +42,7 @@ import { typeRefs } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
 import type { IEnvironmentAdaptor } from '@looker/extension-utils'
 
-import { getApixAdaptor } from '../../utils'
+import { getApixAdaptor, useNavigation } from '../../utils'
 import {
   ApixSection,
   DocActivityType,
@@ -78,6 +78,7 @@ const showRunIt = async (adaptor: IEnvironmentAdaptor) => {
 export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
   const adaptor = getApixAdaptor()
   const history = useHistory()
+  const navigate = useNavigation()
   const sdkLanguage = useSelector(selectSdkLanguage)
   const { specKey, methodTag, methodName } = useParams<MethodSceneParams>()
   const { value, toggle, setOn } = useToggle()
@@ -94,9 +95,9 @@ export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
       // Invalid method
       if (api.tags[methodTag]) {
         // Found tag though
-        history.push(`/${specKey}/methods/${methodTag}`)
+        navigate(`/${specKey}/methods/${methodTag}`)
       } else {
-        history.push(`/${specKey}/methods`)
+        navigate(`/${specKey}/methods`)
       }
     }
   }, [api, history, methodName, methodTag, specKey])

package/src/scenes/MethodTagScene/MethodTagScene.tsx

@@ -29,7 +29,7 @@ import { useHistory, useParams } from 'react-router-dom'
 import { Grid, ButtonToggle, ButtonItem } from '@looker/components'
 import type { ApiModel } from '@looker/sdk-codegen'
 import { ApixSection, DocTitle, DocMethodSummary, Link } from '../../components'
-import { buildMethodPath } from '../../utils'
+import { buildMethodPath, useNavigation } from '../../utils'
 import { getOperations } from './utils'
 
 interface MethodTagSceneProps {
@@ -44,6 +44,7 @@ interface MethodTagSceneParams {
 export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
   const { specKey, methodTag } = useParams<MethodTagSceneParams>()
   const history = useHistory()
+  const navigate = useNavigation()
   const [value, setValue] = useState('ALL')
 
   useEffect(() => {
@@ -54,7 +55,7 @@ export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
   const methods = api.tags[methodTag]
   useEffect(() => {
     if (!methods) {
-      history.push(`/${specKey}/methods`)
+      navigate(`/${specKey}/methods`)
     }
   }, [history, methods])
   if (!methods) {

package/src/scenes/TypeScene/TypeScene.tsx

@@ -40,6 +40,7 @@ import {
   ExploreType,
   DocSchema,
 } from '../../components'
+import { useNavigation } from '../../utils'
 
 interface DocTypeProps {
   api: ApiModel
@@ -47,19 +48,24 @@ interface DocTypeProps {
 
 interface DocTypeParams {
   specKey: string
+  typeTag: string
   typeName: string
 }
 
 export const TypeScene: FC<DocTypeProps> = ({ api }) => {
-  const { specKey, typeName } = useParams<DocTypeParams>()
+  const { specKey, typeTag, typeName } = useParams<DocTypeParams>()
   const type = api.types[typeName]
   const history = useHistory()
+  const navigate = useNavigation()
   const typesUsed = typeRefs(api, type?.customTypes)
   const methodsUsedBy = methodRefs(api, type?.methodRefs)
   const typesUsedBy = typeRefs(api, type?.parentTypes)
   useEffect(() => {
     if (!type) {
-      history.push(`/${specKey}/types`)
+      const route = api.typeTags[typeTag]
+        ? `/${specKey}/types/${typeTag}`
+        : `/${specKey}/types`
+      navigate(route)
     }
   }, [history, specKey, type])
 

package/src/scenes/TypeTagScene/TypeTagScene.tsx

@@ -27,9 +27,9 @@ import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { Grid, ButtonToggle, ButtonItem } from '@looker/components'
 import type { ApiModel } from '@looker/sdk-codegen'
-import { useParams, useHistory } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import { ApixSection, DocTitle, DocTypeSummary, Link } from '../../components'
-import { buildTypePath } from '../../utils'
+import { buildTypePath, useNavigation } from '../../utils'
 import { getMetaTypes } from './utils'
 
 interface TypeTagSceneProps {
@@ -43,7 +43,7 @@ interface TypeTagSceneParams {
 
 export const TypeTagScene: FC<TypeTagSceneProps> = ({ api }) => {
   const { specKey, typeTag } = useParams<TypeTagSceneParams>()
-  const history = useHistory()
+  const navigate = useNavigation()
   const [value, setValue] = useState('ALL')
 
   useEffect(() => {
@@ -54,9 +54,9 @@ export const TypeTagScene: FC<TypeTagSceneProps> = ({ api }) => {
   const types = api.typeTags[typeTag]
   useEffect(() => {
     if (!types) {
-      history.push(`/${specKey}/types`)
+      navigate(`/${specKey}/types`)
     }
-  }, [history, types])
+  }, [types])
 
   if (!types) {
     return <></>