@looker/api-explorer 0.9.19 → 0.9.25

package/src/scenes/DiffScene/DiffScene.tsx

@@ -24,8 +24,9 @@
 
  */
 
-import React, { FC, useState, useEffect } from 'react'
-import { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React, { useState, useEffect } from 'react'
+import type { ApiModel, DiffRow, SpecList, SpecItem } from '@looker/sdk-codegen'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import {
   Box,
@@ -37,17 +38,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,11 +94,21 @@ const diffToggles = [
   },
 ]
 
+export interface DiffSceneProps {
+  specs: SpecList
+  toggleNavigation: (target?: boolean) => void
+}
+
+const validateParam = (specs: SpecList, specKey = '') => {
+  return specs[specKey] ? specKey : ''
+}
+
 export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   const history = useHistory()
   const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`)
-  const l = match?.params.l || ''
-  const r = match?.params.r || ''
+  const l = validateParam(specs, match?.params.l)
+  const r = validateParam(specs, match?.params.r)
+
   const options = Object.entries(specs).map(([key, spec]) => ({
     value: key,
     label: `${key} (${spec.status})`,
@@ -120,7 +127,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 +136,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)])
   }
 

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

@@ -23,9 +23,10 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { Grid, Flex, FlexItem, Code, Heading } from '@looker/components'
-import { DiffRow, IMethod } from '@looker/sdk-codegen'
+import type { DiffRow, IMethod } from '@looker/sdk-codegen'
 import { DiffLegend } from './DiffLegend'
 
 interface DiffBannerProps {

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

@@ -25,7 +25,8 @@
  */
 import React from 'react'
 import { Router } from 'react-router'
-import { createMemoryHistory, MemoryHistory } from 'history'
+import type { MemoryHistory } from 'history'
+import { createMemoryHistory } from 'history'
 import { renderWithTheme } from '@looker/components-test-utils'
 import userEvent from '@testing-library/user-event'
 import { act, screen } from '@testing-library/react'

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

@@ -23,15 +23,16 @@
  SOFTWARE.
 
  */
-import React, { FC, useState, useEffect, BaseSyntheticEvent } from 'react'
+import type { FC, BaseSyntheticEvent } from 'react'
+import React, { useState, useEffect } from 'react'
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
 import { useHistory } from 'react-router'
 import styled from 'styled-components'
 import { Accordion2, Box, Card, Grid, Heading } from '@looker/components'
-import { DiffRow } from '@looker/sdk-codegen/src'
-import { ApiModel, IMethod } from '@looker/sdk-codegen'
+import type { DiffRow } from '@looker/sdk-codegen/src'
+import type { ApiModel, IMethod } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
-import { getSelectedSdkLanguage } from '../../../state'
+import { selectSdkLanguage } from '../../../state'
 import { buildMethodPath } from '../../../utils'
 import { DiffBanner } from './DiffBanner'
 import { differ } from './docDiffUtils'
@@ -92,7 +93,7 @@ export const DiffItem: FC<DiffItemProps> = ({
   rightKey,
   rightSpec,
 }) => {
-  const selectedSdkLanguage = useSelector(getSelectedSdkLanguage)
+  const selectedSdkLanguage = useSelector(selectSdkLanguage)
   const [leftMethod, setLeftMethod] = useState<IMethod | undefined>(
     leftSpec.methods[item.name]
   )

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

@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
-import { DiffCount } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
+import type { DiffCount } from '@looker/sdk-codegen'
 import { Code, Flex, Icon, Space } from '@looker/components'
 import { Add } from '@styled-icons/material/Add'
 import { ChangeHistory } from '@styled-icons/material/ChangeHistory'

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

@@ -23,7 +23,7 @@
  SOFTWARE.
 
  */
-import { ApiModel, DiffRow } from '@looker/sdk-codegen'
+import type { ApiModel, DiffRow } from '@looker/sdk-codegen'
 import {
   Flex,
   Heading,
@@ -32,7 +32,8 @@ import {
   SpaceVertical,
   Text,
 } from '@looker/components'
-import React, { FC, useState } from 'react'
+import type { FC } from 'react'
+import React, { useState } from 'react'
 import { DiffItem } from './DiffItem'
 
 export interface DocDiffProps {

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

@@ -24,13 +24,8 @@
 
  */
 
-import {
-  ApiModel,
-  DiffRow,
-  getCodeGenerator,
-  ICodeGen,
-  PseudoGen,
-} from '@looker/sdk-codegen'
+import type { ApiModel, DiffRow, ICodeGen } from '@looker/sdk-codegen'
+import { getCodeGenerator, PseudoGen } from '@looker/sdk-codegen'
 
 export const diffText = (
   row: DiffRow,

package/src/scenes/DiffScene/diffUtils.spec.ts

@@ -24,7 +24,8 @@
 
  */
 
-import { DiffRow, startCount } from '@looker/sdk-codegen'
+import type { DiffRow } from '@looker/sdk-codegen'
+import { startCount } from '@looker/sdk-codegen'
 import { api, api40 } from '../../test-data'
 import { diffToSpec } from './diffUtils'
 

package/src/scenes/DiffScene/diffUtils.ts

@@ -25,8 +25,7 @@
  */
 
 import cloneDeep from 'lodash/cloneDeep'
-import {
-  compareSpecs,
+import type {
   DiffFilter,
   DiffRow,
   IApiModel,
@@ -34,6 +33,7 @@ import {
   MethodList,
   TagList,
 } from '@looker/sdk-codegen'
+import { compareSpecs } from '@looker/sdk-codegen'
 
 export const allDiffToggles = [
   'missing',

package/src/scenes/HomeScene/HomeScene.tsx

@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import { ApiModel } from '@looker/sdk-codegen'
-import React, { FC } from 'react'
+import type { ApiModel } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
 import { useParams } from 'react-router-dom'
 import { ApixSection, DocMarkdown, DocTitle } from '../../components'
 

package/src/scenes/MethodScene/MethodScene.tsx

@@ -24,7 +24,8 @@
 
  */
 
-import React, { FC, useContext, useState, useEffect } from 'react'
+import type { FC } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   Aside,
   Button,
@@ -34,11 +35,14 @@ import {
   ExtendComponentsThemeProvider,
 } from '@looker/components'
 import { Beaker } from '@looker/icons'
-import { useParams } from 'react-router-dom'
-import { RunIt, RunItSetter, RunItContext, RunItFormKey } from '@looker/run-it'
-import { ApiModel, typeRefs } from '@looker/sdk-codegen'
+import { useHistory, useParams } from 'react-router-dom'
+import type { RunItSetter } from '@looker/run-it'
+import { RunIt, RunItFormKey } from '@looker/run-it'
+import type { ApiModel } from '@looker/sdk-codegen'
+import { typeRefs } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
 
+import type { IEnvironmentAdaptor } from '@looker/extension-utils'
 import {
   ApixSection,
   DocActivityType,
@@ -53,52 +57,68 @@ import {
   DocTitle,
   DocSchema,
 } from '../../components'
-import { getSelectedSdkLanguage } from '../../state'
-import { IApixEnvAdaptor } from '../../utils'
+import { selectSdkLanguage } from '../../state'
 import { DocOperation, DocRequestBody } from './components'
-import { createInputs } from './utils'
 
 interface MethodSceneProps {
   api: ApiModel
-  envAdaptor: IApixEnvAdaptor
+  adaptor: IEnvironmentAdaptor
   setVersionsUrl: RunItSetter
 }
 
 interface MethodSceneParams {
   methodName: string
+  methodTag: string
   specKey: string
 }
 
-const showRunIt = async (envAdaptor: IApixEnvAdaptor) => {
-  const data = await envAdaptor.localStorageGetItem(RunItFormKey)
+const showRunIt = async (adaptor: IEnvironmentAdaptor) => {
+  const data = await adaptor.localStorageGetItem(RunItFormKey)
   return !!data
 }
 
 export const MethodScene: FC<MethodSceneProps> = ({
   api,
-  envAdaptor,
+  adaptor,
   setVersionsUrl,
 }) => {
-  const { sdk } = useContext(RunItContext)
-  const sdkLanguage = useSelector(getSelectedSdkLanguage)
-  const { methodName, specKey } = useParams<MethodSceneParams>()
+  const history = useHistory()
+  const sdkLanguage = useSelector(selectSdkLanguage)
+  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, methodTag, specKey])
 
   useEffect(() => {
     const checkRunIt = async () => {
-      const show = await showRunIt(envAdaptor)
-      if (show) setOn()
+      try {
+        const show = await showRunIt(adaptor)
+        if (show) {
+          setOn()
+        }
+      } catch (error) {
+        console.error(error)
+      }
     }
     checkRunIt()
-  }, [envAdaptor, setOn])
+  }, [adaptor, setOn])
 
   const runItToggle = (
     <RunItButton
@@ -112,29 +132,31 @@ 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>
-      {sdk && value && (
+          <DocOperation method={method} />
+          <DocMarkdown source={method.description} specKey={specKey} />
+          <DocSDKs api={api} method={method} />
+          <DocRequestBody api={api} method={method} />
+          <DocSdkUsage method={method} />
+          <DocReferences typesUsed={seeTypes} api={api} specKey={specKey} />
+          <DocResponses api={api} responses={method.responses} />
+          <DocSchema object={method.schema} />
+        </ApixSection>
+      )}
+      {value && (
         <Aside width="50rem">
           <ExtendComponentsThemeProvider
             themeCustomizations={{
@@ -148,9 +170,10 @@ export const MethodScene: FC<MethodSceneProps> = ({
             }}
           >
             <RunIt
+              adaptor={adaptor}
+              key={method.operationId}
               sdkLanguage={sdkLanguage}
               api={api}
-              inputs={createInputs(api, method)}
               method={method}
               setVersionsUrl={setVersionsUrl}
             />

package/src/scenes/MethodScene/components/DocOperation.tsx

@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
-import { IMethod } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
+import type { IMethod } from '@looker/sdk-codegen'
 import { Code, Flex, SpaceVertical, Text } from '@looker/components'
 import { MethodBadge } from '@looker/run-it'
 

package/src/scenes/MethodScene/components/DocRequestBody.spec.tsx

@@ -34,7 +34,7 @@ import { DocRequestBody } from './DocRequestBody'
 describe('DocRequestBody', () => {
   test('it shows Request body for a method with a body type', () => {
     const method = api.methods.create_dashboard
-    renderWithTheme(<DocRequestBody method={method} />)
+    renderWithTheme(<DocRequestBody api={api} method={method} />)
     expect(
       screen.getByText('Request body', { exact: false })
     ).toBeInTheDocument()
@@ -42,7 +42,7 @@ describe('DocRequestBody', () => {
 
   test('it skips Request body for a method without a body type', () => {
     const method = api.methods.dashboard
-    renderWithTheme(<DocRequestBody method={method} />)
+    renderWithTheme(<DocRequestBody api={api} method={method} />)
     expect(
       screen.queryByText('Request body', { exact: false })
     ).not.toBeInTheDocument()

package/src/scenes/MethodScene/components/DocRequestBody.tsx

@@ -23,20 +23,22 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
-import { IMethod } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
+import type { ApiModel, IMethod } from '@looker/sdk-codegen'
 import { CollapserCard } from '@looker/run-it'
 import { ExploreType } from '../../../components'
 
 interface DocRequestBodyProps {
   method: IMethod
+  api: ApiModel
 }
 
 /**
  * If a method has request body parameters, display them
  * @param method to document
  */
-export const DocRequestBody: FC<DocRequestBodyProps> = ({ method }) => {
+export const DocRequestBody: FC<DocRequestBodyProps> = ({ method, api }) => {
   const bodies = method.bodyParams
   if (bodies.length === 0) return <></>
   const header = bodies.length > 1 ? 'Request bodies' : 'Request body'
@@ -46,6 +48,7 @@ export const DocRequestBody: FC<DocRequestBodyProps> = ({ method }) => {
       <>
         {bodies.map((body) => (
           <ExploreType
+            api={api}
             type={body.type}
             open={false}
             key={`body.${body.name}`}

package/src/scenes/{TagScene/TagScene.spec.tsx → MethodTagScene/MethodTagScene.spec.tsx}

@@ -30,17 +30,17 @@ import userEvent from '@testing-library/user-event'
 
 import { api } from '../../test-data'
 import { renderWithRouter } from '../../test-utils'
-import { TagScene } from './TagScene'
+import { MethodTagScene } from './MethodTagScene'
 
 const opBtnNames = /ALL|GET|POST|PUT|PATCH|DELETE/
 
-describe('TagScene', () => {
+describe('MethodTagScene', () => {
   Element.prototype.scrollTo = jest.fn()
 
   test('it renders operation buttons and all methods for a given method tag', () => {
     renderWithRouter(
       <Route path="/:specKey/methods/:methodTag">
-        <TagScene api={api} />
+        <MethodTagScene api={api} />
       </Route>,
       ['/3.1/methods/ColorCollection']
     )
@@ -64,7 +64,7 @@ describe('TagScene', () => {
     /** ApiAuth contains two POST methods and a DELETE method */
     renderWithRouter(
       <Route path="/:specKey/methods/:methodTag">
-        <TagScene api={api} />
+        <MethodTagScene api={api} />
       </Route>,
       ['/3.1/methods/ApiAuth']
     )
@@ -78,7 +78,7 @@ describe('TagScene', () => {
   test('it filters methods by operation type', async () => {
     renderWithRouter(
       <Route path="/:specKey/methods/:methodTag">
-        <TagScene api={api} />
+        <MethodTagScene api={api} />
       </Route>,
       ['/3.1/methods/Look']
     )

package/src/scenes/{TagScene/TagScene.tsx → MethodTagScene/MethodTagScene.tsx}

@@ -23,34 +23,27 @@
  SOFTWARE.
 
  */
-import React, { FC, useEffect, useState } from 'react'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useParams } from 'react-router-dom'
 import { Grid, ButtonToggle, ButtonItem } from '@looker/components'
-import { ApiModel } from '@looker/sdk-codegen'
-import { useParams, useHistory } from 'react-router-dom'
+import type { ApiModel } from '@looker/sdk-codegen'
 import { ApixSection, DocTitle, DocMethodSummary, Link } from '../../components'
 import { buildMethodPath } from '../../utils'
 import { getOperations } from './utils'
 
-interface TagSceneProps {
+interface MethodTagSceneProps {
   api: ApiModel
 }
 
-interface TagSceneParams {
+interface MethodTagSceneParams {
   specKey: string
   methodTag: string
 }
 
-export const TagScene: FC<TagSceneProps> = ({ api }) => {
-  const { specKey, methodTag } = useParams<TagSceneParams>()
+export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
+  const { specKey, methodTag } = useParams<MethodTagSceneParams>()
   const history = useHistory()
-  if (!(methodTag in api.tags)) {
-    history.push('/methods')
-  }
-  const methods = api.tags[methodTag]
-  const tag = Object.values(api.spec.tags!).find(
-    (tag) => tag.name === methodTag
-  )!
-  const operations = getOperations(methods)
   const [value, setValue] = useState('ALL')
 
   useEffect(() => {
@@ -58,6 +51,20 @@ export const TagScene: FC<TagSceneProps> = ({ api }) => {
     setValue('ALL')
   }, [methodTag])
 
+  const methods = api.tags[methodTag]
+  useEffect(() => {
+    if (!methods) {
+      history.push(`/${specKey}/methods`)
+    }
+  }, [history, methods])
+  if (!methods) {
+    return <></>
+  }
+  const tag = Object.values(api.spec.tags!).find(
+    (tag) => tag.name === methodTag
+  )!
+  const operations = getOperations(methods)
+
   return (
     <ApixSection>
       <DocTitle>{`${tag.name}: ${tag.description}`}</DocTitle>
@@ -73,7 +80,7 @@ export const TagScene: FC<TagSceneProps> = ({ api }) => {
       </ButtonToggle>
       {Object.values(methods).map(
         (method, index) =>
-          (value === method.httpMethod || value === 'ALL') && (
+          (value === 'ALL' || value === method.httpMethod) && (
             <Link
               key={index}
               to={buildMethodPath(specKey, tag.name, method.name)}

package/src/{hooks → scenes/MethodTagScene}/index.ts

@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { useActions } from './use_actions_hook'
+export { MethodTagScene } from './MethodTagScene'

package/src/scenes/{TagScene → MethodTagScene}/utils.spec.ts

@@ -26,7 +26,7 @@
 import { api } from '../../test-data'
 import { getOperations } from './utils'
 
-describe('TagScene utils', () => {
+describe('MethodTagScene utils', () => {
   test('getOperations returns a unique list of operations', () => {
     const actual = getOperations(api.tags.Query)
     expect(actual).toHaveLength(new Set(actual).size)

package/src/scenes/{TagScene → MethodTagScene}/utils.ts

@@ -23,7 +23,7 @@
  SOFTWARE.
 
  */
-import { MethodList } from '@looker/sdk-codegen'
+import type { MethodList } from '@looker/sdk-codegen'
 
 /**
  * Given a list of methods it returns a list of distinct operations