@looker/api-explorer 0.9.19 → 0.9.25

package/src/components/ExploreType/ExploreProperty.tsx

@@ -24,10 +24,11 @@
 
  */
 
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
+import type { IconType } from '@looker/components'
 import {
   Box,
-  IconType,
   Icon,
   Tree,
   TreeItem,
@@ -38,7 +39,7 @@ import {
 import { Done } from '@styled-icons/material/Done'
 import { Lock } from '@styled-icons/material/Lock'
 import { Remove } from '@styled-icons/material/Remove'
-import { IProperty } from '@looker/sdk-codegen'
+import type { IProperty, ApiModel } from '@looker/sdk-codegen'
 import { Markdown } from '@looker/code-editor'
 import {
   expandable,
@@ -160,17 +161,23 @@ const ExplorePropertyDescription: FC<ExplorePropertyProps> = ({ property }) =>
     />
   ) : null
 
+interface ExploreApiPropertyProps extends ExplorePropertyProps {
+  /** parsed api */
+  api: ApiModel
+}
+
 /**
  * Show the details of the property
  * @param property
  * @constructor
  */
-export const ExplorePropertyDetail: FC<ExplorePropertyProps> = ({
+export const ExplorePropertyDetail: FC<ExploreApiPropertyProps> = ({
   property,
+  api,
 }) => (
   <Space style={{ fontSize: 'small', marginLeft: '10rem' }}>
     <Box width="10rem">
-      <ExploreTypeLink type={property.type} />
+      <ExploreTypeLink type={property.type} api={api} />
     </Box>
     <Box width="5rem">
       <ExplorePropertyRequired property={property} />
@@ -188,12 +195,15 @@ export const ExplorePropertyDetail: FC<ExplorePropertyProps> = ({
  * @param property to display
  * @constructor
  */
-export const ExplorePropertyNode: FC<ExplorePropertyProps> = ({ property }) => {
+export const ExplorePropertyNode: FC<ExploreApiPropertyProps> = ({
+  property,
+  api,
+}) => {
   const legend = typeIcon(property.type)
   return (
     <TreeItem
       {...legend}
-      detail={<ExplorePropertyDetail property={property} />}
+      detail={<ExplorePropertyDetail api={api} property={property} />}
     >
       {property.jsonName}
     </TreeItem>
@@ -208,8 +218,9 @@ export const ExplorePropertyNode: FC<ExplorePropertyProps> = ({ property }) => {
  * @param openAll expands entire tree if true
  * @constructor
  */
-export const ExploreProperty: FC<ExplorePropertyProps> = ({
+export const ExploreProperty: FC<ExploreApiPropertyProps> = ({
   property,
+  api,
   level = 0,
   maxDepth = -1,
   openAll = false,
@@ -218,6 +229,7 @@ export const ExploreProperty: FC<ExplorePropertyProps> = ({
   if (!picked.intrinsic) {
     return (
       <ExplorePropertyType
+        api={api}
         property={property}
         open={false}
         level={level + 1}
@@ -226,16 +238,17 @@ export const ExploreProperty: FC<ExplorePropertyProps> = ({
       />
     )
   }
-  return <ExplorePropertyNode property={property} />
+  return <ExplorePropertyNode api={api} property={property} />
 }
 
-interface ExplorePropertyTypeProps extends ExplorePropertyProps {
+interface ExplorePropertyTypeProps extends ExploreApiPropertyProps {
   /** Open the node display immediately? */
   open?: boolean
 }
 
 export const ExplorePropertyType: FC<ExplorePropertyTypeProps> = ({
   property,
+  api,
   open = true,
   level = 0,
   maxDepth = -1,
@@ -246,7 +259,7 @@ export const ExplorePropertyType: FC<ExplorePropertyTypeProps> = ({
   const nest = expandable(level, maxDepth)
   const legend = typeIcon(type)
   if (!nest) {
-    return <ExplorePropertyNode property={property} />
+    return <ExplorePropertyNode api={api} property={property} />
   }
   return (
     <Tree
@@ -255,10 +268,11 @@ export const ExplorePropertyType: FC<ExplorePropertyTypeProps> = ({
       icon={legend.icon}
       defaultOpen={open || openAll}
       density={-3}
-      detail={<ExplorePropertyDetail property={property} />}
+      detail={<ExplorePropertyDetail api={api} property={property} />}
     >
       {Object.values(props).map((property) => (
         <ExploreProperty
+          api={api}
           key={property.fullName}
           property={property}
           level={level + 1}

package/src/components/ExploreType/ExploreType.spec.tsx

@@ -26,9 +26,9 @@
 
 import React from 'react'
 import { screen } from '@testing-library/react'
-import { MemoryRouter } from 'react-router-dom'
+
 import { api } from '../../test-data'
-import { renderWithRouter, renderWithSearchAndRouter } from '../../test-utils'
+import { renderWithRouter } from '../../test-utils'
 import { ExploreType, ExploreTypeLink } from '.'
 
 describe('ExploreType', () => {
@@ -41,7 +41,7 @@ describe('ExploreType', () => {
   const offsetExpected = 2
 
   test('expands all when openAll is true and expand defaults', () => {
-    renderWithSearchAndRouter(<ExploreType type={targetType} openAll={true} />)
+    renderWithRouter(<ExploreType api={api} type={targetType} openAll={true} />)
 
     expect(screen.getByText(targetType.jsonName)).toBeInTheDocument()
     expect(screen.queryAllByText(colors)).toHaveLength(colorsExpected)
@@ -50,8 +50,8 @@ describe('ExploreType', () => {
   })
 
   test('expands nothing if maxDepth is 0', () => {
-    renderWithSearchAndRouter(
-      <ExploreType type={targetType} openAll={true} maxDepth={0} />
+    renderWithRouter(
+      <ExploreType api={api} type={targetType} openAll={true} maxDepth={0} />
     )
 
     expect(screen.getByText(targetType.jsonName)).toBeInTheDocument()
@@ -64,8 +64,8 @@ describe('ExploreType', () => {
   })
 
   test('expands 2 levels only', () => {
-    renderWithSearchAndRouter(
-      <ExploreType type={targetType} maxDepth={2} openAll={true} />
+    renderWithRouter(
+      <ExploreType api={api} type={targetType} maxDepth={2} openAll={true} />
     )
 
     expect(screen.getByText(targetType.jsonName)).toBeInTheDocument()
@@ -79,64 +79,48 @@ describe('ExploreType', () => {
     test('recognizes 3.1', () => {
       const specKey = '3.1'
       const path = `/${specKey}/methods/foo`
-      renderWithRouter(
-        <MemoryRouter initialEntries={[path]}>
-          <ExploreTypeLink type={targetType} />
-        </MemoryRouter>
-      )
+      renderWithRouter(<ExploreTypeLink api={api} type={targetType} />, [path])
 
       const actual = screen.getByText(targetType.jsonName)
       expect(actual).toBeInTheDocument()
       expect(actual).toHaveProperty(
         'href',
-        `http://localhost/${specKey}/types/${targetType.jsonName}`
+        `http://localhost/${specKey}/types/ColorCollection/${targetType.jsonName}`
       )
     })
     test('recognizes 4.0', () => {
       const specKey = '4.0'
       const path = `/${specKey}/methods/foo`
-      renderWithRouter(
-        <MemoryRouter initialEntries={[path]}>
-          <ExploreTypeLink type={targetType} />
-        </MemoryRouter>
-      )
+      renderWithRouter(<ExploreTypeLink api={api} type={targetType} />, [path])
 
       const actual = screen.getByText(targetType.jsonName)
       expect(actual).toBeInTheDocument()
       expect(actual).toHaveProperty(
         'href',
-        `http://localhost/${specKey}/types/${targetType.jsonName}`
+        `http://localhost/${specKey}/types/ColorCollection/${targetType.jsonName}`
       )
     })
     test('recognizes anything', () => {
       const specKey = 'anything'
       const path = `/${specKey}/methods/foo`
-      renderWithRouter(
-        <MemoryRouter initialEntries={[path]}>
-          <ExploreTypeLink type={targetType} />
-        </MemoryRouter>
-      )
+      renderWithRouter(<ExploreTypeLink api={api} type={targetType} />, [path])
 
       const actual = screen.getByText(targetType.jsonName)
       expect(actual).toBeInTheDocument()
       expect(actual).toHaveProperty(
         'href',
-        `http://localhost/${specKey}/types/${targetType.jsonName}`
+        `http://localhost/${specKey}/types/ColorCollection/${targetType.jsonName}`
       )
     })
     test('ignores oauth path', () => {
       const specKey = 'oauth'
       const path = `/${specKey}/methods/foo`
-      renderWithRouter(
-        <MemoryRouter initialEntries={[path]}>
-          <ExploreTypeLink type={targetType} />
-        </MemoryRouter>
-      )
+      renderWithRouter(<ExploreTypeLink api={api} type={targetType} />, [path])
       const actual = screen.getByText(targetType.jsonName)
       expect(actual).toBeInTheDocument()
       expect(actual).toHaveProperty(
         'href',
-        `http://types/${targetType.jsonName}`
+        `http://types/ColorCollection/${targetType.jsonName}`
       )
     })
   })

package/src/components/ExploreType/ExploreType.tsx

@@ -24,13 +24,15 @@
 
  */
 
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { Code, Tree, TreeItem } from '@looker/components'
-import { IType, TypeOfType, typeOfType } from '@looker/sdk-codegen'
+import type { IType, ApiModel } from '@looker/sdk-codegen'
+import { TypeOfType, typeOfType } from '@looker/sdk-codegen'
 import { useLocation } from 'react-router'
 import { Link } from '../Link'
-import { buildTypePath } from '../../utils'
 import { getSpecKey } from '../../reducers'
+import { buildPath } from '../../utils'
 import {
   ExploreProperty,
   pickType,
@@ -42,9 +44,10 @@ import {
 
 interface ExploreTypeLinkProps {
   type: IType
+  api: ApiModel
 }
 
-export const ExploreTypeLink: FC<ExploreTypeLinkProps> = ({ type }) => {
+export const ExploreTypeLink: FC<ExploreTypeLinkProps> = ({ type, api }) => {
   const location = useLocation()
   const picked = pickType(type)
   const name = picked.name
@@ -58,7 +61,7 @@ export const ExploreTypeLink: FC<ExploreTypeLinkProps> = ({ type }) => {
   return (
     <>
       {prefix}
-      <Link key={type.fullName} to={buildTypePath(specKey, name)}>
+      <Link key={type.fullName} to={buildPath(api, type, specKey)}>
         {name}
       </Link>
       {suffix}
@@ -69,6 +72,8 @@ export const ExploreTypeLink: FC<ExploreTypeLinkProps> = ({ type }) => {
 interface ExploreTypeProps {
   /** Type to explore */
   type: IType
+  /** parsed specification */
+  api: ApiModel
   /** Open the node display immediately */
   open?: boolean
   /** Create a link to the type? */
@@ -83,6 +88,7 @@ interface ExploreTypeProps {
 
 export const ExploreType: FC<ExploreTypeProps> = ({
   type,
+  api,
   open = true,
   link = false,
   level = 0,
@@ -104,13 +110,14 @@ export const ExploreType: FC<ExploreTypeProps> = ({
           {!!type.description && (
             <TreeItem key={type.name}>{type.description}</TreeItem>
           )}
-          {link && <ExploreTypeLink type={type} />}
+          {link && <ExploreTypeLink type={type} api={api} />}
         </>
       }
     >
       {nest &&
         Object.values(props).map((property) => (
           <ExploreProperty
+            api={api}
             key={property.fullName}
             property={property}
             level={level + 1}

package/src/components/ExploreType/exploreUtils.tsx

@@ -25,7 +25,7 @@
  */
 
 import React from 'react'
-import { IconType } from '@looker/components'
+import type { IconType } from '@looker/components'
 import { FieldString, IdeFileManifest, IdeParameter } from '@looker/icons'
 import { CalendarToday } from '@styled-icons/material/CalendarToday'
 import { Check } from '@styled-icons/material/Check'
@@ -35,7 +35,8 @@ import { Toc } from '@styled-icons/material/Toc'
 import { VpnKey } from '@styled-icons/material/VpnKey'
 import { Tag } from '@styled-icons/material-rounded'
 import { Email } from '@styled-icons/material-outlined'
-import { IType, TypeOfType, typeOfType } from '@looker/sdk-codegen'
+import type { IType } from '@looker/sdk-codegen'
+import { TypeOfType, typeOfType } from '@looker/sdk-codegen'
 
 /**
  * Get the type or element type if this type is a collection

package/src/components/Header/Header.spec.tsx

@@ -29,7 +29,7 @@ import { codeGenerators } from '@looker/sdk-codegen'
 import userEvent from '@testing-library/user-event'
 
 import { specs, specState } from '../../test-data'
-import { renderWithRouter, withReduxProvider } from '../../test-utils'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
 import { defaultSettingsState } from '../../state'
 import { Header } from './Header'
 
@@ -43,15 +43,13 @@ describe('Header', () => {
   })
 
   test('it renders a title', () => {
-    renderWithRouter(
-      withReduxProvider(
-        <Header
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-          toggleNavigation={toggleNavigation}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <Header
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+        toggleNavigation={toggleNavigation}
+      />
     )
     expect(screen.getByText('API Explorer').closest('a')).toHaveAttribute(
       'href',
@@ -60,15 +58,13 @@ describe('Header', () => {
   })
 
   test('it renders a spec selector with the correct default value and options', async () => {
-    renderWithRouter(
-      withReduxProvider(
-        <Header
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-          toggleNavigation={toggleNavigation}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <Header
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+        toggleNavigation={toggleNavigation}
+      />
     )
     const selector = screen.getByLabelText('spec selector')
     expect(selector).toHaveValue(`${specState.spec.key}`)
@@ -83,15 +79,13 @@ describe('Header', () => {
   })
 
   test('it renders an sdk language selector with the correct value and options', async () => {
-    renderWithRouter(
-      withReduxProvider(
-        <Header
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-          toggleNavigation={toggleNavigation}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <Header
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+        toggleNavigation={toggleNavigation}
+      />
     )
     const selector = screen.getByLabelText('sdk language selector')
     expect(selector).toHaveValue(defaultSettingsState.sdkLanguage)
@@ -106,15 +100,13 @@ describe('Header', () => {
   })
 
   test('it renders an icon button for the differ', () => {
-    renderWithRouter(
-      withReduxProvider(
-        <Header
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-          toggleNavigation={toggleNavigation}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <Header
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+        toggleNavigation={toggleNavigation}
+      />
     )
     expect(
       screen

package/src/components/Header/Header.tsx

@@ -24,7 +24,8 @@
 
  */
 
-import React, { FC, Dispatch } from 'react'
+import type { FC, Dispatch } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import {
   Icon,
@@ -35,10 +36,10 @@ import {
 } from '@looker/components'
 import { LookerLogo } from '@looker/icons'
 import { Menu } from '@styled-icons/material/Menu'
-import { SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { SpecList, SpecItem } from '@looker/sdk-codegen'
 
 import { Link } from '../Link'
-import { SpecAction } from '../../reducers'
+import type { SpecAction } from '../../reducers'
 import { SelectorContainer } from '../SelectorContainer'
 
 interface HeaderProps {
@@ -55,6 +56,8 @@ interface HeaderProps {
 
 export const HEADER_REM = 4
 
+export const HEADER_TOGGLE_LABEL = 'Toggle Navigation'
+
 /**
  * Renders the API Explorer header
  */
@@ -77,7 +80,7 @@ export const HeaderLayout: FC<HeaderProps> = ({
         onClick={() => toggleNavigation()}
         icon={<Menu />}
         aria-label="nav toggle"
-        label="Toggle Navigation"
+        label={HEADER_TOGGLE_LABEL}
       />
 
       <Link to={`/${spec.key}`}>

package/src/components/Header/index.ts

@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { Header, HEADER_REM } from './Header'
+export { Header, HEADER_REM, HEADER_TOGGLE_LABEL } from './Header'

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

@@ -29,11 +29,21 @@ import { renderWithTheme } from '@looker/components-test-utils'
 import userEvent from '@testing-library/user-event'
 
 import { specs, getLoadedSpecState } from '../../test-data'
-import { renderWithRouter } from '../../test-utils'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
 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()
@@ -68,7 +78,7 @@ describe('ApiSpecSelector', () => {
   })
 
   test('it fires a SELECT_SPEC action when another spec is selected', async () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <ApiSpecSelector
         specs={specs}
         spec={specState.spec}

package/src/components/SelectorContainer/ApiSpecSelector.tsx

@@ -24,12 +24,14 @@
 
  */
 
-import React, { FC, Dispatch } from 'react'
+import type { FC, Dispatch } from 'react'
+import React 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'
+import type { SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { SpecAction } from '../../reducers'
+import { selectSpec } from '../../reducers'
 
 interface ApiSpecSelectorProps {
   specs: SpecList
@@ -43,6 +45,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 +54,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 (

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

@@ -27,10 +27,11 @@ import React from 'react'
 import { act, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { codeGenerators } from '@looker/sdk-codegen'
+import * as reactRedux from 'react-redux'
 
-import { defaultSettingsState } from '../../state'
+import { registerTestEnvAdaptor } from '@looker/extension-utils'
+import { defaultSettingsState, settingsSlice } from '../../state'
 import { renderWithReduxProvider } from '../../test-utils'
-import { EnvAdaptorConstants } from '../../utils'
 import { SdkLanguageSelector } from './SdkLanguageSelector'
 
 describe('SdkLanguageSelector', () => {
@@ -60,18 +61,23 @@ describe('SdkLanguageSelector', () => {
   })
 
   test('it stores the selected language in localStorage', async () => {
+    registerTestEnvAdaptor()
+    const mockDispatch = jest.fn()
+    jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch)
     renderWithReduxProvider(<SdkLanguageSelector />)
+
     const selector = screen.getByRole('textbox')
     expect(defaultSettingsState.sdkLanguage).toEqual('Python')
     expect(selector).toHaveValue('Python')
 
+    userEvent.click(selector)
     await act(async () => {
-      await userEvent.click(selector)
       await userEvent.click(screen.getByRole('option', { name: 'TypeScript' }))
-      await waitFor(() => {
-        expect(localStorage.setItem).toHaveBeenLastCalledWith(
-          EnvAdaptorConstants.LOCALSTORAGE_SDK_LANGUAGE_KEY,
-          'TypeScript'
+      await waitFor(async () => {
+        expect(mockDispatch).toHaveBeenLastCalledWith(
+          settingsSlice.actions.setSdkLanguageAction({
+            sdkLanguage: 'TypeScript',
+          })
         )
       })
     })

package/src/components/SelectorContainer/SdkLanguageSelector.tsx

@@ -23,24 +23,21 @@
  SOFTWARE.
 
  */
-import React, { FC, useContext } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { codeGenerators } from '@looker/sdk-codegen'
 import { Select } from '@looker/components'
 import { useSelector } from 'react-redux'
-import { SelectOptionProps } from '@looker/components/lib/Form/Inputs/Select'
+import type { SelectOptionProps } from '@looker/components'
 
-import { useActions } from '../../hooks'
-import { getSelectedSdkLanguage } from '../../state'
-import { EnvAdaptorContext } from '../../context'
-import { EnvAdaptorConstants } from '../../utils'
+import { useSettingActions, selectSdkLanguage } from '../../state'
 
 /**
  * Allows the user to select their preferred SDK language
  */
 export const SdkLanguageSelector: FC = () => {
-  const { setSdkLanguageAction } = useActions()
-  const selectedSdkLanguage = useSelector(getSelectedSdkLanguage)
-  const { envAdaptor } = useContext(EnvAdaptorContext)
+  const { setSdkLanguageAction } = useSettingActions()
+  const selectedSdkLanguage = useSelector(selectSdkLanguage)
 
   const allSdkLanguages: SelectOptionProps[] = codeGenerators.map((gen) => ({
     value: gen.language,
@@ -55,11 +52,7 @@ export const SdkLanguageSelector: FC = () => {
   })
 
   const handleChange = (language: string) => {
-    setSdkLanguageAction(language)
-    envAdaptor.localStorageSetItem(
-      EnvAdaptorConstants.LOCALSTORAGE_SDK_LANGUAGE_KEY,
-      language
-    )
+    setSdkLanguageAction({ sdkLanguage: language })
   }
 
   return (