@looker/api-explorer 0.9.26 → 0.9.27

package/src/components/SelectorContainer/ApiSpecSelector.tsx

@@ -24,28 +24,23 @@
 
  */
 
-import type { FC, Dispatch } from 'react'
+import type { FC } from 'react'
 import React from 'react'
 import { Select } from '@looker/components'
 import { useHistory, useLocation } from 'react-router-dom'
+import type { SpecItem } from '@looker/sdk-codegen'
+import { useSelector } from 'react-redux'
 
-import type { SpecList, SpecItem } from '@looker/sdk-codegen'
-import type { SpecAction } from '../../reducers'
-import { selectSpec } from '../../reducers'
+import { selectSpecs } from '../../state'
 
 interface ApiSpecSelectorProps {
-  specs: SpecList
   spec: SpecItem
-  specDispatch: Dispatch<SpecAction>
 }
 
-export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({
-  specs,
-  spec,
-  specDispatch,
-}) => {
+export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({ spec }) => {
   const history = useHistory()
   const location = useLocation()
+  const specs = useSelector(selectSpecs)
   const options = Object.entries(specs).map(([key, spec]) => ({
     value: key,
     label: key,
@@ -53,7 +48,6 @@ export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({
   }))
 
   const handleChange = (specKey: string) => {
-    specDispatch(selectSpec(specKey))
     const matchPath = location.pathname.replace(`/${spec.key}`, `/${specKey}`)
     history.push(matchPath)
   }

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

@@ -28,28 +28,21 @@ import { act, screen, waitFor } from '@testing-library/react'
 import { codeGenerators } from '@looker/sdk-codegen'
 import userEvent from '@testing-library/user-event'
 
-import { specs, specState } from '../../test-data'
+import { getLoadedSpecs, specs } from '../../test-data'
 import { renderWithRouterAndReduxProvider } from '../../test-utils'
 import { defaultSettingsState } from '../../state'
 import { SelectorContainer } from './SelectorContainer'
 
 describe('SelectorContainer', () => {
-  const specDispatch = jest.fn()
-
+  const spec = getLoadedSpecs()['4.0']
   beforeAll(() => {
     window.HTMLElement.prototype.scrollIntoView = jest.fn()
   })
 
   test('it renders a spec selector with the correct default value and options', async () => {
-    renderWithRouterAndReduxProvider(
-      <SelectorContainer
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />
-    )
+    renderWithRouterAndReduxProvider(<SelectorContainer spec={spec} />)
     const selector = screen.getByLabelText('spec selector')
-    expect(selector).toHaveValue(`${specState.spec.key}`)
+    expect(selector).toHaveValue(`${spec.key}`)
     await act(async () => {
       await userEvent.click(selector)
       await waitFor(() => {
@@ -61,13 +54,7 @@ describe('SelectorContainer', () => {
   })
 
   test('it renders an sdk language selector with the correct value and options', async () => {
-    renderWithRouterAndReduxProvider(
-      <SelectorContainer
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />
-    )
+    renderWithRouterAndReduxProvider(<SelectorContainer spec={spec} />)
     const selector = screen.getByLabelText('sdk language selector')
     expect(selector).toHaveValue(defaultSettingsState.sdkLanguage)
     await act(async () => {
@@ -81,19 +68,13 @@ describe('SelectorContainer', () => {
   })
 
   test('it renders an icon button for the differ', () => {
-    renderWithRouterAndReduxProvider(
-      <SelectorContainer
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />
-    )
+    renderWithRouterAndReduxProvider(<SelectorContainer spec={spec} />)
     expect(
       screen
         .getByRole('button', {
           name: 'Compare Specifications',
         })
         .closest('a')
-    ).toHaveAttribute('href', `/diff/${specState.spec.key}/`)
+    ).toHaveAttribute('href', `/diff/${spec.key}/`)
   })
 })

package/src/components/SelectorContainer/SelectorContainer.tsx

@@ -24,25 +24,21 @@
 
  */
 
-import type { FC, Dispatch } from 'react'
+import type { FC } 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 type { SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { SpecItem } from '@looker/sdk-codegen'
+
 import { Link } from '../Link'
-import type { SpecAction } from '../../reducers'
 import { diffPath } from '../../utils'
 import { SdkLanguageSelector } from './SdkLanguageSelector'
 import { ApiSpecSelector } from './ApiSpecSelector'
 
 interface SelectorContainerProps extends SpaceHelperProps {
-  /** Specs to choose from */
-  specs: SpecList
   /** Current selected spec */
   spec: SpecItem
-  /** Spec state setter */
-  specDispatch: Dispatch<SpecAction>
 }
 
 export const HEADER_REM = 4
@@ -51,14 +47,12 @@ export const HEADER_REM = 4
  * Renders a container for selectors
  */
 export const SelectorContainer: FC<SelectorContainerProps> = ({
-  specs,
   spec,
-  specDispatch,
   ...spaceProps
 }) => (
   <Space width="auto" {...spaceProps}>
     <SdkLanguageSelector />
-    <ApiSpecSelector specs={specs} spec={spec} specDispatch={specDispatch} />
+    <ApiSpecSelector spec={spec} />
     <Link to={`/${diffPath}/${spec.key}/`}>
       <IconButton
         toggle

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

@@ -28,15 +28,15 @@ import { criteriaToSet } from '@looker/sdk-codegen'
 import userEvent from '@testing-library/user-event'
 import { screen, waitFor } from '@testing-library/react'
 
-import { getLoadedSpecs, specState } from '../../test-data'
+import { getLoadedSpecs } from '../../test-data'
 import { renderWithRouterAndReduxProvider } from '../../test-utils'
 import { defaultSettingsState } from '../../state'
 import { SideNav } from './SideNav'
 import { countMethods, countTypes } from './searchUtils'
 
+const spec = getLoadedSpecs()['4.0']
+
 describe('SideNav', () => {
-  const specs = getLoadedSpecs()
-  const specDispatch = jest.fn()
   const allTagsPattern = /^(Auth|ApiAuth)$/
   const allTypesPattern = /^(WriteDashboard|WriteQuery)$/
 
@@ -55,13 +55,7 @@ describe('SideNav', () => {
   })
 
   test('it renders search, methods tab and types tab', () => {
-    renderWithRouterAndReduxProvider(
-      <SideNav
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />
-    )
+    renderWithRouterAndReduxProvider(<SideNav spec={spec} />)
     const search = screen.getByLabelText('Search')
     expect(search).toHaveProperty('placeholder', 'Search')
     const tabs = screen.getAllByRole('tab', {
@@ -69,23 +63,14 @@ describe('SideNav', () => {
     })
     expect(tabs).toHaveLength(2)
     expect(tabs[0]).toHaveTextContent(
-      `Methods (${countMethods(specState.spec.api!.tags)})`
+      `Methods (${countMethods(spec.api!.tags)})`
     )
 
-    expect(tabs[1]).toHaveTextContent(
-      `Types (${countTypes(specState.spec.api!.types)})`
-    )
+    expect(tabs[1]).toHaveTextContent(`Types (${countTypes(spec.api!.types)})`)
   })
 
   test('Methods tab is the default active tab', () => {
-    renderWithRouterAndReduxProvider(
-      <SideNav
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />,
-      ['/3.1/methods']
-    )
+    renderWithRouterAndReduxProvider(<SideNav spec={spec} />, ['/3.1/methods'])
     expect(screen.getAllByText(allTagsPattern)).toHaveLength(2)
     expect(
       screen.queryAllByRole('link', { name: allTypesPattern })
@@ -97,47 +82,29 @@ describe('SideNav', () => {
   })
 
   test('url determines active tab', () => {
-    renderWithRouterAndReduxProvider(
-      <SideNav
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />,
-      ['/3.1/types']
-    )
+    renderWithRouterAndReduxProvider(<SideNav spec={spec} />, ['/3.1/types'])
     // eslint-disable-next-line jest-dom/prefer-in-document
     expect(screen.queryAllByText(allTagsPattern)).toHaveLength(2)
   })
 })
 
 describe('Search', () => {
-  const specs = getLoadedSpecs()
-  const specDispatch = jest.fn()
-
   test('it filters methods and types on input', async () => {
-    renderWithRouterAndReduxProvider(
-      <SideNav
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />
-    )
+    renderWithRouterAndReduxProvider(<SideNav spec={spec} />)
     const searchPattern = 'embedsso'
     const input = screen.getByLabelText('Search')
-    jest.spyOn(specState.spec.api!, 'search')
+    jest.spyOn(spec.api!, 'search')
     /** Pasting to avoid triggering search multiple times */
     await userEvent.paste(input, searchPattern)
     await waitFor(() => {
-      expect(specState.spec.api!.search).toHaveBeenCalledWith(
+      expect(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
-        )
+        screen.getByText(spec.api!.tags.Auth.create_sso_embed_url.summary)
       ).toBeInTheDocument()
       const types = screen.getByRole('tab', { name: 'Types (1)' })
       userEvent.click(types)

package/src/components/SideNav/SideNav.tsx

@@ -24,7 +24,7 @@
 
  */
 
-import type { FC, Dispatch } from 'react'
+import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import {
@@ -37,7 +37,6 @@ import {
 } from '@looker/components'
 import type {
   SpecItem,
-  SpecList,
   ISearchResult,
   ApiModel,
   TagList,
@@ -46,7 +45,6 @@ import type {
 import { criteriaToSet, tagTypes } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
 
-import type { SpecAction } from '../../reducers'
 import { useWindowSize } from '../../utils'
 import { HEADER_REM } from '../Header'
 import { selectSearchCriteria, useSettingActions } from '../../state'
@@ -65,12 +63,8 @@ interface SideNavState {
 
 interface SideNavProps {
   headless?: boolean
-  /** Specs to choose from */
-  specs: SpecList
   /** Current selected spec */
   spec: SpecItem
-  /** Spec state setter */
-  specDispatch: Dispatch<SpecAction>
 }
 
 export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {

package/src/components/index.ts

@@ -45,3 +45,4 @@ export { DocTypeSummary } from './DocTypeSummary'
 export { Link } from './Link'
 export { ErrorBoundary } from './ErrorBoundary'
 export { SelectorContainer } from './SelectorContainer'
+export { Banner } from './Banner'

package/src/index.ts

@@ -27,3 +27,4 @@ export * from './ApiExplorer'
 export * from './StandaloneApiExplorer'
 export * from './components'
 export * from './state'
+export * from './utils'

package/src/routes/AppRouter.tsx

@@ -28,8 +28,6 @@ import type { FC } from 'react'
 import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
 import type { ApiModel, SpecList } from '@looker/sdk-codegen'
-import type { RunItSetter } from '@looker/run-it'
-import type { IEnvironmentAdaptor } from '@looker/extension-utils'
 
 import {
   HomeScene,
@@ -42,47 +40,37 @@ import { DiffScene } from '../scenes/DiffScene'
 import { diffPath } from '../utils'
 
 interface AppRouterProps {
-  api: ApiModel
   specKey: string
   specs: SpecList
+  api: ApiModel
   toggleNavigation: (target?: boolean) => void
-  adaptor: IEnvironmentAdaptor
-  setVersionsUrl: RunItSetter
 }
 
 export const AppRouter: FC<AppRouterProps> = ({
-  specKey,
   api,
+  specKey,
   specs,
   toggleNavigation,
-  adaptor,
-  setVersionsUrl,
-}) => {
-  return (
-    <Switch>
-      <Redirect from="/" to={`/${specKey}/`} exact />
-      <Route path={`/${diffPath}/:l?/:r?`}>
-        <DiffScene specs={specs} toggleNavigation={toggleNavigation} />
-      </Route>
-      <Route path="/:specKey/(methods|types)?" exact>
-        <HomeScene api={api} />
-      </Route>
-      <Route path="/:specKey/methods/:methodTag" exact>
-        <MethodTagScene api={api} />
-      </Route>
-      <Route path="/:specKey/methods/:methodTag/:methodName">
-        <MethodScene
-          api={api}
-          adaptor={adaptor}
-          setVersionsUrl={setVersionsUrl}
-        />
-      </Route>
-      <Route path="/:specKey/types/:typeTag" exact>
-        <TypeTagScene api={api} />
-      </Route>
-      <Route path="/:specKey/types/:typeTag/:typeName">
-        <TypeScene api={api} />
-      </Route>
-    </Switch>
-  )
-}
+}) => (
+  <Switch>
+    <Redirect from="/" to={`/${specKey}/`} exact />
+    <Route path={`/${diffPath}/:l?/:r?`}>
+      <DiffScene specs={specs} toggleNavigation={toggleNavigation} />
+    </Route>
+    <Route path="/:specKey/(methods|types)?" exact>
+      <HomeScene api={api} />
+    </Route>
+    <Route path="/:specKey/methods/:methodTag" exact>
+      <MethodTagScene api={api} />
+    </Route>
+    <Route path="/:specKey/methods/:methodTag/:methodName">
+      <MethodScene api={api} />
+    </Route>
+    <Route path="/:specKey/types/:typeTag" exact>
+      <TypeTagScene api={api} />
+    </Route>
+    <Route path="/:specKey/types/:typeTag/:typeName">
+      <TypeScene api={api} />
+    </Route>
+  </Switch>
+)

package/src/scenes/DiffScene/DiffScene.tsx

@@ -26,7 +26,7 @@
 
 import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
-import type { ApiModel, DiffRow, SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import {
   Box,
@@ -38,35 +38,14 @@ 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 { useSelector } from 'react-redux'
+
 import { ApixSection } from '../../components'
+import { selectCurrentSpec } from '../../state'
+import { diffPath, getApixAdaptor } from '../../utils'
 import { diffSpecs, standardDiffToggles } from './diffUtils'
 import { DocDiff } from './DocDiff'
 
-/**
- * Pick the left key, or default spec
- * @param specs to pick from
- * @param leftKey spec key that may or may not have a value
- */
-const pickLeft = (specs: SpecList, leftKey: string) => {
-  if (leftKey) return leftKey
-  return getDefaultSpecKey(specs)
-}
-
-/**
- * Pick the right key, or "other" spec
- * @param specs to pick from
- * @param rightKey spec key from url path
- * @param leftKey spec key from url path
- */
-const pickRight = (specs: SpecList, rightKey: string, leftKey: string) => {
-  if (rightKey) return rightKey
-  if (!leftKey) leftKey = getDefaultSpecKey(specs)
-  return Object.keys(specs).find((k) => k !== leftKey) || ''
-}
-
 const diffToggles = [
   {
     label: 'Missing',
@@ -104,7 +83,10 @@ const validateParam = (specs: SpecList, specKey = '') => {
 }
 
 export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
+  const adaptor = getApixAdaptor()
   const history = useHistory()
+  const spec = useSelector(selectCurrentSpec)
+  const currentSpecKey = spec.key
   const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`)
   const l = validateParam(specs, match?.params.l)
   const r = validateParam(specs, match?.params.r)
@@ -114,83 +96,62 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
     label: `${key} (${spec.status})`,
   }))
 
-  const [leftKey, setLeftKey] = useState<string>(pickLeft(specs, l))
-  const [rightKey, setRightKey] = useState<string>(pickRight(specs, r, leftKey))
+  const [leftKey, setLeftKey] = useState<string>(l || currentSpecKey)
+  const [rightKey, setRightKey] = useState<string>(r || '')
   const [leftApi, setLeftApi] = useState<ApiModel>(specs[leftKey].api!)
-  const [rightApi, setRightApi] = useState<ApiModel>(
+  const [rightApi, setRightApi] = useState<ApiModel>(() =>
     rightKey ? specs[rightKey].api! : specs[leftKey].api!
   )
   const [toggles, setToggles] = useState<string[]>(standardDiffToggles)
 
   useEffect(() => {
-    toggleNavigation(false)
-  }, [])
-
-  const computeDelta = (left: string, right: string, toggles: string[]) => {
-    if (left && right && specs[left].api && specs[right].api) {
-      return diffSpecs(specs[left].api!, specs[right].api!, toggles)
+    if (r !== rightKey) {
+      setRightKey(r)
     }
-    return []
-  }
-  const [delta, setDelta] = useState<DiffRow[]>(
-    computeDelta(leftKey, rightKey, toggles)
-  )
+  }, [r, rightKey])
 
-  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)
-      }
+  useEffect(() => {
+    if (l !== leftKey) {
+      setLeftKey(l)
     }
-  }
+  }, [l, leftKey])
 
-  const compareKeys = async (left: string, right: string) => {
-    if (left !== leftKey || right !== rightKey) {
-      history.push(`/${diffPath}/${left}/${right}`)
-    }
-    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)])
-  }
+  useEffect(() => {
+    toggleNavigation(false)
+  }, [])
+
+  const [delta, setDelta] = useState<DiffRow[]>([])
 
   const handleLeftChange = (newLeft: string) => {
-    setLeftKey(newLeft)
+    history.push(`/${diffPath}/${newLeft}/${rightKey}`)
+  }
+  const handleRightChange = (newRight: string) => {
+    history.push(`/${diffPath}/${leftKey}/${newRight}`)
   }
 
-  const handleTogglesChange = (values?: string[]) => {
-    const newToggles = values || []
-    setToggles(newToggles)
-    setDelta([...computeDelta(leftKey, rightKey, newToggles)])
+  const handleSwitch = () => {
+    history.push(`/${diffPath}/${rightKey}/${leftKey}`)
   }
 
   useEffect(() => {
-    compareKeys(leftKey, rightKey)
-  }, [leftKey, rightKey])
+    adaptor.fetchSpec(specs[leftKey]).then((spec) => setLeftApi(spec.api!))
+  }, [leftKey])
 
-  const handleRightChange = (newRight: string) => {
-    setRightKey(newRight)
-  }
+  useEffect(() => {
+    if (rightKey in specs) {
+      adaptor.fetchSpec(specs[rightKey]).then((spec) => setRightApi(spec.api!))
+    }
+  }, [rightKey])
 
-  const handleSwitch = () => {
-    const currLeftKey = leftKey
-    setLeftKey(rightKey)
-    setRightKey(currLeftKey)
+  useEffect(() => {
+    if (leftApi && rightApi) {
+      setDelta([...diffSpecs(leftApi, rightApi, toggles)])
+    }
+  }, [leftApi, rightApi, toggles])
+
+  const handleTogglesChange = (values?: string[]) => {
+    const newToggles = values || []
+    setToggles(newToggles)
   }
 
   return (
@@ -211,6 +172,7 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
           <IconButton
             label="switch"
             size="small"
+            disabled={!leftKey || !rightKey}
             icon={<SyncAlt />}
             mt="medium"
             onClick={handleSwitch}
@@ -221,6 +183,7 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
               mt="xxsmall"
               id="compare"
               name="Right Version"
+              placeholder="Select a comparison..."
               value={rightKey}
               options={options}
               onChange={handleRightChange}

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

@@ -28,8 +28,7 @@ import { Router } from 'react-router'
 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'
+import { screen, fireEvent } from '@testing-library/react'
 import { api } from '../../../test-data'
 import { DiffMethodLink } from './DiffItem'
 
@@ -37,27 +36,24 @@ describe('DiffMethodLink', () => {
   const method = api.methods.create_dashboard
   const specKey = '4.0'
   let history: MemoryHistory
-  let pushSpy: jasmine.Spy
 
   beforeEach(() => {
     history = createMemoryHistory()
-    pushSpy = spyOn(history, 'push')
   })
 
   test('it renders method and navigates on click', () => {
+    const pushSpy = jest.spyOn(history, 'push')
     renderWithTheme(
       <Router history={history}>
         <DiffMethodLink method={method} specKey={specKey} />
       </Router>
     )
-    const s = `${method.name} for ${specKey}`
-    expect(screen.getByText(s)).toBeInTheDocument()
-    userEvent.click(screen.getByText(s))
-    act(() => {
-      expect(pushSpy).toHaveBeenCalledWith(
-        `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`
-      )
-    })
+    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}`
+    )
   })
 
   test('it renders missing method and does not navigate on click', () => {
@@ -68,9 +64,6 @@ describe('DiffMethodLink', () => {
     )
     const s = `Missing in ${specKey}`
     expect(screen.getByText(s)).toBeInTheDocument()
-    userEvent.click(screen.getByText(s))
-    act(() => {
-      expect(pushSpy).not.toHaveBeenCalled()
-    })
+    expect(screen.queryByRole('link')).not.toBeInTheDocument()
   })
 })