@looker/api-explorer 0.9.18 → 0.9.24

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,23 +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 {
-  Accordion,
-  AccordionContent,
-  AccordionDisclosure,
-  Box,
-  Card,
-  Grid,
-  Heading,
-} from '@looker/components'
-import { DiffRow } from '@looker/sdk-codegen/src'
-import { ApiModel, IMethod } from '@looker/sdk-codegen'
+import { Accordion2, Box, Card, Grid, Heading } from '@looker/components'
+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'
@@ -50,14 +43,10 @@ interface DiffMethodLinkProps {
 }
 
 const DiffLink = styled(Heading)`
-  color:${({ theme }) => theme.colors.ui5}
+  color: ${({ theme }) => theme.colors.ui5};
   cursor: pointer;
   display: block;
-  padding: ${({
-    theme: {
-      space: { xsmall, large },
-    },
-  }) => `${xsmall} ${large}`};
+  padding: ${({ theme }) => `${theme.space.xsmall} ${theme.space.large}`};
   &:hover,
   &:visited,
   &:focus,
@@ -104,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]
   )
@@ -132,35 +121,29 @@ export const DiffItem: FC<DiffItemProps> = ({
   }
 
   return (
-    <Card border="1px solid" borderColor="ui2" width="100%">
-      <Box>
-        <Accordion
-          indicatorPosition="left"
-          isOpen={isOpen}
-          toggleOpen={handleOpen}
-        >
-          <AccordionDisclosure px="small">
-            <DiffBanner item={item} method={method} />
-          </AccordionDisclosure>
-          <AccordionContent>
-            <Grid columns={2}>
-              <Box>
-                <DiffMethodLink method={leftMethod} specKey={leftKey} />
-              </Box>
-              <Box>
-                <DiffMethodLink method={rightMethod} specKey={rightKey} />
-              </Box>
-            </Grid>
-            <ReactDiffViewer
-              oldValue={leftSide}
-              newValue={rightSide}
-              splitView={true}
-              compareMethod={DiffMethod.LINES}
-              showDiffOnly={true}
-            />
-          </AccordionContent>
-        </Accordion>
-      </Box>
+    <Card border width="100%">
+      <Accordion2
+        indicatorPosition="left"
+        isOpen={isOpen}
+        toggleOpen={handleOpen}
+        label={<DiffBanner item={item} method={method} />}
+      >
+        <Grid columns={2}>
+          <Box>
+            <DiffMethodLink method={leftMethod} specKey={leftKey} />
+          </Box>
+          <Box>
+            <DiffMethodLink method={rightMethod} specKey={rightKey} />
+          </Box>
+        </Grid>
+        <ReactDiffViewer
+          oldValue={leftSide}
+          newValue={rightSide}
+          splitView={true}
+          compareMethod={DiffMethod.LINES}
+          showDiffOnly={true}
+        />
+      </Accordion2>
     </Card>
   )
 }

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,12 +35,14 @@ import {
   ExtendComponentsThemeProvider,
 } from '@looker/components'
 import { Beaker } from '@looker/icons'
-import { ThemeContext } from 'styled-components'
-import { useParams } from 'react-router-dom'
-import { RunIt, RunItContext } 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,
@@ -54,34 +57,69 @@ import {
   DocTitle,
   DocSchema,
 } from '../../components'
-import { getSelectedSdkLanguage } from '../../state'
+import { selectSdkLanguage } from '../../state'
 import { DocOperation, DocRequestBody } from './components'
-import { createInputs } from './utils'
 
-interface DocMethodProps {
+interface MethodSceneProps {
   api: ApiModel
+  adaptor: IEnvironmentAdaptor
+  setVersionsUrl: RunItSetter
 }
 
-interface DocMethodParams {
+interface MethodSceneParams {
   methodName: string
+  methodTag: string
   specKey: string
 }
 
-export const MethodScene: FC<DocMethodProps> = ({ api }) => {
-  const { sdk } = useContext(RunItContext)
-  const sdkLanguage = useSelector(getSelectedSdkLanguage)
-  const { methodName, specKey } = useParams<DocMethodParams>()
-  const { value, toggle } = useToggle()
+const showRunIt = async (adaptor: IEnvironmentAdaptor) => {
+  const data = await adaptor.localStorageGetItem(RunItFormKey)
+  return !!data
+}
+
+export const MethodScene: FC<MethodSceneProps> = ({
+  api,
+  adaptor,
+  setVersionsUrl,
+}) => {
+  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])
 
-  const { colors } = useContext(ThemeContext)
+  useEffect(() => {
+    const checkRunIt = async () => {
+      try {
+        const show = await showRunIt(adaptor)
+        if (show) {
+          setOn()
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+    checkRunIt()
+  }, [adaptor, setOn])
 
-  const RunItButton = value ? Button : ButtonOutline
   const runItToggle = (
     <RunItButton
       color={value ? 'key' : 'neutral'}
@@ -94,43 +132,50 @@ export const MethodScene: FC<DocMethodProps> = ({ api }) => {
 
   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>
-          {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 && (
+          <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 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={{
               colors: {
-                background: colors.text,
-                text: colors.background,
+                background: '#262D33',
+                key: '#8AB4F8',
+                text: '#fff',
+                link: '#8AB4F8',
+                critical: '#FF877C',
               },
             }}
           >
             <RunIt
+              adaptor={adaptor}
+              key={method.operationId}
               sdkLanguage={sdkLanguage}
               api={api}
-              inputs={createInputs(api, method)}
               method={method}
+              setVersionsUrl={setVersionsUrl}
             />
           </ExtendComponentsThemeProvider>
         </Aside>

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 { ExploreType, CollapserCard } from '../../../components'
+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']
     )