@looker/api-explorer 0.9.26 → 0.9.29

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

@@ -24,16 +24,16 @@
 
  */
 import React from 'react'
-import { act, screen, waitFor } from '@testing-library/react'
-import { renderWithTheme } from '@looker/components-test-utils'
+import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-
-import { specs, getLoadedSpecState } from '../../test-data'
-import { renderWithRouterAndReduxProvider } from '../../test-utils'
+import { useHistory } from 'react-router-dom'
+import { getLoadedSpecs, specs } from '../../test-data'
+import {
+  renderWithReduxProvider,
+  renderWithRouterAndReduxProvider,
+} from '../../test-utils'
 import { ApiSpecSelector } from './ApiSpecSelector'
 
-const specState = getLoadedSpecState()
-
 jest.mock('react-router-dom', () => {
   const ReactRouterDOM = jest.requireActual('react-router-dom')
   return {
@@ -41,34 +41,29 @@ jest.mock('react-router-dom', () => {
     useLocation: () => ({
       pathname: '/4.0/methods/Dashboard/dashboard',
     }),
+    useHistory: jest.fn().mockReturnValue({ push: jest.fn() }),
   }
 })
 
+// jest.mock('../../state/specs', () => ({
+//   ...(jest.requireActual('../../state/specs') as Record<string, unknown>),
+//   useSpecActions: jest
+//     .fn()
+//     .mockReturnValue({ setCurrentSpecAction: jest.fn() }),
+// }))
+
 describe('ApiSpecSelector', () => {
-  const specDispatch = jest.fn()
   Element.prototype.scrollIntoView = jest.fn()
+  const spec = getLoadedSpecs()['4.0']
 
-  test('the default spec is selected by default', () => {
-    renderWithTheme(
-      <ApiSpecSelector
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />
-    )
-
+  test('the base spec is selected by default', () => {
+    renderWithReduxProvider(<ApiSpecSelector spec={spec} />)
     const selector = screen.getByRole('textbox')
-    expect(selector).toHaveValue(`${specState.spec.key}`)
+    expect(selector).toHaveValue(`${spec.key}`)
   })
 
   test('it lists all available specs', async () => {
-    renderWithTheme(
-      <ApiSpecSelector
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />
-    )
+    renderWithReduxProvider(<ApiSpecSelector spec={spec} />)
     userEvent.click(screen.getByRole('textbox'))
     await waitFor(() => {
       expect(screen.getAllByRole('option')).toHaveLength(
@@ -77,25 +72,17 @@ describe('ApiSpecSelector', () => {
     })
   })
 
-  test('it fires a SELECT_SPEC action when another spec is selected', async () => {
-    renderWithRouterAndReduxProvider(
-      <ApiSpecSelector
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-      />
-    )
-
-    await act(async () => {
-      await userEvent.click(screen.getByRole('textbox'))
-      await userEvent.click(screen.getByRole('option', { name: '3.1 current' }))
-      await waitFor(() => {
-        expect(specDispatch).toHaveBeenCalledTimes(1)
-        expect(specDispatch).toHaveBeenCalledWith({
-          type: 'SELECT_SPEC',
-          payload: '3.1',
-        })
-      })
+  test('requests selected spec', async () => {
+    const { push } = useHistory()
+    renderWithRouterAndReduxProvider(<ApiSpecSelector spec={spec} />)
+    userEvent.click(screen.getByRole('textbox'))
+    await waitFor(() => {
+      expect(screen.getAllByRole('option')).toHaveLength(
+        Object.keys(specs).length
+      )
     })
+    const button = screen.getByText('3.1')
+    userEvent.click(button)
+    expect(push).toHaveBeenCalledWith('/3.1/methods/Dashboard/dashboard')
   })
 })

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>
+)