feat: closest path match for API Explorer

packages/api-explorer/src/ApiExplorer.tsx

@@ -29,14 +29,24 @@ import { useLocation } from 'react-router'
 import styled, { createGlobalStyle } from 'styled-components'
 import { Aside, ComponentsProvider, Layout, Page } from '@looker/components'
 import { SpecList } from '@looker/sdk-codegen'
-import { loadSpecApi, RunItSetter } from '@looker/run-it'
+import {
+  RunItSetter,
+  funFetch,
+  fallbackFetch,
+  OAuthScene,
+} from '@looker/run-it'
 import {
   SearchContext,
   LodeContext,
   defaultLodeContextValue,
   EnvAdaptorContext,
 } from './context'
-import { EnvAdaptorConstants, getLoded, IApixEnvAdaptor } from './utils'
+import {
+  EnvAdaptorConstants,
+  getLoded,
+  IApixEnvAdaptor,
+  oAuthPath,
+} from './utils'
 import { Header, SideNav, ErrorBoundary } from './components'
 import {
   specReducer,
@@ -70,6 +80,7 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
 }) => {
   const location = useLocation()
   const { setSdkLanguageAction } = useActions()
+  const oauthReturn = location.pathname === `/${oAuthPath}`
 
   const [specState, specDispatch] = useReducer(
     specReducer,
@@ -102,20 +113,27 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
         window.removeEventListener('message', hasNavigationToggle)
       }
     }
-  }, [])
+  }, [headless, hasNavigationToggle])
 
   useEffect(() => {
     const loadSpec = async () => {
       if (!spec.api) {
-        const newSpec = { ...spec }
-        const api = await loadSpecApi(newSpec)
-        if (api) {
-          specDispatch(updateSpecApi(spec.key, api))
+        try {
+          const newSpec = { ...spec }
+          const api = await fallbackFetch(newSpec, funFetch)
+          if (api) {
+            spec.api = api
+            specDispatch(updateSpecApi(spec.key, api))
+          }
+        } catch (error) {
+          console.error(error)
         }
       }
     }
-    loadSpec()
-  }, [spec])
+    if (!oauthReturn) {
+      loadSpec()
+    }
+  }, [spec, location])
 
   useEffect(() => {
     getLoded(exampleLodeUrl, declarationsLodeUrl).then((resp) => setLode(resp))
@@ -167,7 +185,8 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
                         />
                       </AsideBorder>
                     )}
-                    {spec.api && (
+                    {oauthReturn && <OAuthScene />}
+                    {!oauthReturn && spec.api && (
                       <AppRouter
                         api={spec.api}
                         specKey={spec.key}

packages/api-explorer/src/components/SelectorContainer/ApiSpecSelector.spec.tsx

@@ -34,6 +34,16 @@ import { ApiSpecSelector } from './ApiSpecSelector'
 
 const specState = getLoadedSpecState()
 
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useLocation: () => ({
+      pathname: '/4.0/methods/Dashboard/dashboard',
+    }),
+  }
+})
+
 describe('ApiSpecSelector', () => {
   const specDispatch = jest.fn()
   Element.prototype.scrollIntoView = jest.fn()

packages/api-explorer/src/components/SelectorContainer/ApiSpecSelector.tsx

@@ -26,7 +26,7 @@
 
 import React, { FC, Dispatch } from 'react'
 import { Select } from '@looker/components'
-import { useHistory } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 
 import { SpecList, SpecItem } from '@looker/sdk-codegen'
 import { SpecAction, selectSpec } from '../../reducers'
@@ -43,6 +43,7 @@ export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({
   specDispatch,
 }) => {
   const history = useHistory()
+  const location = useLocation()
   const options = Object.entries(specs).map(([key, spec]) => ({
     value: key,
     label: key,
@@ -51,7 +52,8 @@ export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({
 
   const handleChange = (specKey: string) => {
     specDispatch(selectSpec(specKey))
-    history.push(`/${specKey}`)
+    const matchPath = location.pathname.replace(`/${spec.key}`, `/${specKey}`)
+    history.push(matchPath)
   }
 
   return (

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

@@ -101,7 +101,7 @@ export const SideNav: FC<SideNavProps> = ({
     let results
     let newTags
     let newTypes
-    if (debouncedPattern) {
+    if (debouncedPattern && api.search) {
       results = api.search(pattern, searchCriteria)
       newTags = results.tags
       newTypes = results.types

packages/api-explorer/src/routes/AppRouter.tsx

@@ -23,14 +23,14 @@
  SOFTWARE.
 
  */
-import React, { FC, useContext } from 'react'
+import React, { FC } from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
 import { ApiModel, SpecList } from '@looker/sdk-codegen'
-import { OAuthScene, RunItSetter, RunItContext } from '@looker/run-it'
+import { RunItSetter } from '@looker/run-it'
 
 import { HomeScene, MethodScene, TagScene, TypeScene } from '../scenes'
 import { DiffScene } from '../scenes/DiffScene'
-import { diffPath, IApixEnvAdaptor, oAuthPath } from '../utils'
+import { diffPath, IApixEnvAdaptor } from '../utils'
 
 interface AppRouterProps {
   api: ApiModel
@@ -49,16 +49,9 @@ export const AppRouter: FC<AppRouterProps> = ({
   envAdaptor,
   setVersionsUrl,
 }) => {
-  const { sdk } = useContext(RunItContext)
-  const maybeOauth = sdk && sdk.apiVersion === '4.0'
   return (
     <Switch>
       <Redirect from="/" to={`/${specKey}/`} exact />
-      {maybeOauth && (
-        <Route path={`/${oAuthPath}`}>
-          <OAuthScene />
-        </Route>
-      )}
       <Route path={`/${diffPath}/:l?/:r?`}>
         <DiffScene specs={specs} toggleNavigation={toggleNavigation} />
       </Route>

packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx

@@ -25,7 +25,7 @@
  */
 
 import React, { FC, useState, useEffect } from 'react'
-import { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen'
+import { ApiModel, DiffRow, SpecList, SpecItem } from '@looker/sdk-codegen'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import {
   Box,
@@ -37,17 +37,13 @@ import {
   SelectMulti,
 } from '@looker/components'
 import { SyncAlt } from '@styled-icons/material/SyncAlt'
+import { fallbackFetch, funFetch } from '@looker/run-it'
 import { getDefaultSpecKey } from '../../reducers/spec/utils'
 import { diffPath } from '../../utils'
 import { ApixSection } from '../../components'
 import { diffSpecs, standardDiffToggles } from './diffUtils'
 import { DocDiff } from './DocDiff'
 
-export interface DiffSceneProps {
-  specs: SpecList
-  toggleNavigation: (target?: boolean) => void
-}
-
 /**
  * Pick the left key, or default spec
  * @param specs to pick from
@@ -97,6 +93,11 @@ const diffToggles = [
   },
 ]
 
+export interface DiffSceneProps {
+  specs: SpecList
+  toggleNavigation: (target?: boolean) => void
+}
+
 export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   const history = useHistory()
   const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`)
@@ -120,7 +121,7 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   }, [])
 
   const computeDelta = (left: string, right: string, toggles: string[]) => {
-    if (left && right) {
+    if (left && right && specs[left].api && specs[right].api) {
       return diffSpecs(specs[left].api!, specs[right].api!, toggles)
     }
     return []
@@ -129,12 +130,36 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
     computeDelta(leftKey, rightKey, toggles)
   )
 
-  const compareKeys = (left: string, right: string) => {
+  const loadSpec = async (
+    specs: SpecList,
+    key: string,
+    setter: (spec: SpecItem) => void
+  ) => {
+    const spec = specs[key]
+    if (!spec.api) {
+      try {
+        const newSpec = { ...spec }
+        const api = await fallbackFetch(newSpec, funFetch)
+        if (api) {
+          spec.api = api
+          setter(spec)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  }
+
+  const compareKeys = async (left: string, right: string) => {
     if (left !== leftKey || right !== rightKey) {
       history.push(`/${diffPath}/${left}/${right}`)
     }
-    setLeftApi(specs[left].api!)
-    setRightApi(specs[right].api!)
+    if (!specs[left].api) {
+      await loadSpec(specs, leftKey, (spec) => setLeftApi(spec.api!))
+    }
+    if (!specs[right].api) {
+      await loadSpec(specs, rightKey, (spec) => setRightApi(spec.api!))
+    }
     setDelta([...computeDelta(left, right, toggles)])
   }
 

packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx

@@ -34,7 +34,7 @@ import {
   ExtendComponentsThemeProvider,
 } from '@looker/components'
 import { Beaker } from '@looker/icons'
-import { useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import { RunIt, RunItSetter, RunItContext, RunItFormKey } from '@looker/run-it'
 import { ApiModel, typeRefs } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
@@ -66,6 +66,7 @@ interface MethodSceneProps {
 
 interface MethodSceneParams {
   methodName: string
+  methodTag: string
   specKey: string
 }
 
@@ -79,25 +80,37 @@ export const MethodScene: FC<MethodSceneProps> = ({
   envAdaptor,
   setVersionsUrl,
 }) => {
+  const history = useHistory()
   const { sdk } = useContext(RunItContext)
   const sdkLanguage = useSelector(getSelectedSdkLanguage)
-  const { methodName, specKey } = useParams<MethodSceneParams>()
+  const { specKey, methodTag, methodName } = useParams<MethodSceneParams>()
   const { value, toggle, setOn } = useToggle()
   const [method, setMethod] = useState(api.methods[methodName])
-  const seeTypes = typeRefs(api, method.customTypes)
+  const seeTypes = typeRefs(api, method?.customTypes)
 
   const RunItButton = value ? Button : ButtonOutline
 
   useEffect(() => {
-    setMethod(api.methods[methodName])
-  }, [api, methodName])
+    const foundMethod = api.methods[methodName]
+    if (foundMethod) {
+      setMethod(api.methods[methodName])
+    } else {
+      // Invalid method
+      if (api.tags[methodTag]) {
+        // Found tag though
+        history.push(`/${specKey}/methods/${methodTag}`)
+      } else {
+        history.push(`/${specKey}/methods`)
+      }
+    }
+  }, [api, history, methodName, specKey])
 
   useEffect(() => {
     const checkRunIt = async () => {
       const show = await showRunIt(envAdaptor)
       if (show) setOn()
     }
-    checkRunIt()
+    checkRunIt().catch((error) => console.error(error))
   }, [envAdaptor, setOn])
 
   const runItToggle = (
@@ -112,28 +125,30 @@ export const MethodScene: FC<MethodSceneProps> = ({
 
   return (
     <>
-      <ApixSection>
-        <Space between>
-          <Space>
-            <DocTitle>{method.summary}</DocTitle>
-            <DocSource method={method} />
+      {method && (
+        <ApixSection>
+          <Space between>
+            <Space>
+              <DocTitle>{method.summary}</DocTitle>
+              <DocSource method={method} />
+            </Space>
+            {runItToggle}
+          </Space>
+          <Space mb="large" gap="small">
+            <DocStatus method={method} />
+            <DocActivityType method={method} />
+            <DocRateLimited method={method} />
           </Space>
-          {runItToggle}
-        </Space>
-        <Space mb="large" gap="small">
-          <DocStatus method={method} />
-          <DocActivityType method={method} />
-          <DocRateLimited method={method} />
-        </Space>
-        <DocOperation method={method} />
-        <DocMarkdown source={method.description} specKey={specKey} />
-        <DocSDKs api={api} method={method} />
-        <DocRequestBody method={method} />
-        <DocSdkUsage method={method} />
-        <DocReferences typesUsed={seeTypes} api={api} specKey={specKey} />
-        <DocResponses responses={method.responses} />
-        <DocSchema object={method.schema} />
-      </ApixSection>
+          <DocOperation method={method} />
+          <DocMarkdown source={method.description} specKey={specKey} />
+          <DocSDKs api={api} method={method} />
+          <DocRequestBody method={method} />
+          <DocSdkUsage method={method} />
+          <DocReferences typesUsed={seeTypes} api={api} specKey={specKey} />
+          <DocResponses responses={method.responses} />
+          <DocSchema object={method.schema} />
+        </ApixSection>
+      )}
       {sdk && value && (
         <Aside width="50rem">
           <ExtendComponentsThemeProvider