@looker/api-explorer 0.9.26 → 0.9.27

package/src/StandaloneApiExplorer.tsx

@@ -26,19 +26,15 @@
 
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
-import {
-  RunItProvider,
-  loadSpecsFromVersions,
-  RunItConfigKey,
-  RunItNoConfig,
-  initRunItSdk,
-} from '@looker/run-it'
-import type { SpecList } from '@looker/sdk-codegen'
+import { initRunItSdk, RunItProvider } from '@looker/run-it'
+import type { OAuthConfigProvider } from '@looker/extension-utils'
+import { OAuthScene } from '@looker/extension-utils'
 import { Provider } from 'react-redux'
-import { BrowserAdaptor } from '@looker/extension-utils'
+import { useLocation } from 'react-router'
 
 import { ApiExplorer } from './ApiExplorer'
 import { store } from './state'
+import { oAuthPath, ApixAdaptor } from './utils'
 import { Loader } from './components'
 
 export interface StandaloneApiExplorerProps {
@@ -46,59 +42,48 @@ export interface StandaloneApiExplorerProps {
   versionsUrl: string
 }
 
-const browserAdaptor = new BrowserAdaptor(initRunItSdk())
-
-const loadVersions = async (current: string) => {
-  const data = await browserAdaptor.localStorageGetItem(RunItConfigKey)
-  const config = data ? JSON.parse(data) : RunItNoConfig
-  let url = config.base_url ? `${config.base_url}/versions` : current
-  let response = await loadSpecsFromVersions(url)
-  if (response.fetchResult) {
-    console.error(
-      `Reverting to ${current} due to ${url} error: ${response.fetchResult}`
-    )
-    // The stored server location has an error so default to current
-    url = current
-    response = await loadSpecsFromVersions(url)
-  }
-  return { url, response }
-}
-
 export const StandaloneApiExplorer: FC<StandaloneApiExplorerProps> = ({
   headless = false,
-  versionsUrl = '',
 }) => {
-  const [specs, setSpecs] = useState<SpecList | undefined>()
-  const [currentVersionsUrl, setCurrentVersionsUrl] =
-    useState<string>(versionsUrl)
+  const [browserAdaptor] = useState(
+    new ApixAdaptor(initRunItSdk(), window.origin)
+  )
+  const location = useLocation()
+  const oauthReturn = location.pathname === `/${oAuthPath}`
+  const sdk = browserAdaptor.sdk
+  const canLogin =
+    (sdk.authSession.settings as OAuthConfigProvider).authIsConfigured() &&
+    !sdk.authSession.isAuthenticated() &&
+    !oauthReturn
 
   useEffect(() => {
-    if (currentVersionsUrl) {
-      loadVersions(currentVersionsUrl).then((result) => {
-        setCurrentVersionsUrl(result.url)
-        const response = result.response
-        setSpecs(response.specs)
-      })
-    } else {
-      setSpecs(undefined)
+    const login = async () => await browserAdaptor.login()
+    if (canLogin) {
+      login()
     }
-  }, [versionsUrl, currentVersionsUrl])
+  }, [])
+
+  const { looker_url } = (
+    sdk.authSession.settings as OAuthConfigProvider
+  ).getStoredConfig()
 
   return (
     <Provider store={store}>
       <RunItProvider basePath="/api/4.0">
-        <>
-          {specs ? (
-            <ApiExplorer
-              specs={specs}
-              adaptor={browserAdaptor}
-              headless={headless}
-              setVersionsUrl={setCurrentVersionsUrl}
-            />
-          ) : (
-            <Loader themeOverrides={browserAdaptor.themeOverrides()} />
-          )}
-        </>
+        {canLogin ? (
+          <Loader
+            themeOverrides={browserAdaptor.themeOverrides()}
+            message={`Configuration found. Logging into ${looker_url}`}
+          />
+        ) : (
+          <>
+            {oauthReturn ? (
+              <OAuthScene adaptor={browserAdaptor} />
+            ) : (
+              <ApiExplorer adaptor={browserAdaptor} headless={headless} />
+            )}
+          </>
+        )}
       </RunItProvider>
     </Provider>
   )

package/src/components/Banner/Banner.spec.tsx

@@ -0,0 +1,99 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import React from 'react'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen, fireEvent, waitFor } from '@testing-library/react'
+import type { IEnvironmentAdaptor } from '@looker/extension-utils'
+import type { SpecList } from '@looker/sdk-codegen'
+import { Banner } from './Banner'
+
+describe('Banner', () => {
+  const specs: any = {
+    '3.1': {
+      status: 'current',
+    },
+    '4.0': {
+      status: 'beta',
+    },
+  }
+
+  test('renders with button that opens api 4.0 dev portal link in new page', async () => {
+    const adaptor: any = {
+      localStorageGetItem: jest.fn().mockReturnValue(Promise.resolve(null)),
+      isExtension: jest.fn().mockReturnValue(true),
+    }
+    renderWithTheme(
+      <Banner
+        adaptor={adaptor as IEnvironmentAdaptor}
+        specs={specs as SpecList}
+      />
+    )
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('API 4.0 moves from Beta', { exact: false })
+      ).toBeInTheDocument()
+      const link = screen.getByText('Announcement').closest('a')
+      expect(link).toHaveAttribute(
+        'href',
+        'https://developers.looker.com/api/advanced-usage/version-4-ga'
+      )
+      expect(link).toHaveAttribute('target', '_blank')
+    })
+  })
+
+  test('sets local storage value and unrenders on close button click', async () => {
+    const adaptor: any = {
+      localStorageGetItem: jest.fn().mockReturnValue(Promise.resolve(null)),
+      localStorageSetItem: jest.fn(),
+      isExtension: jest.fn().mockReturnValue(true),
+    }
+
+    renderWithTheme(
+      <Banner
+        adaptor={adaptor as IEnvironmentAdaptor}
+        specs={specs as SpecList}
+      />
+    )
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('API 4.0 moves from Beta', { exact: false })
+      ).toBeInTheDocument()
+    })
+
+    const closeButton = screen.getByText('Dismiss Inform').closest('button')
+    fireEvent.click(closeButton as HTMLButtonElement)
+
+    expect(
+      screen.queryByText('API 4.0 moves from Beta', { exact: false })
+    ).not.toBeInTheDocument()
+    expect(adaptor.localStorageSetItem).toHaveBeenCalledWith(
+      'api-40-ga-apix-banner',
+      'dismissed'
+    )
+  })
+})

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,87 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { ButtonOutline, Link, MessageBar } from '@looker/components'
+import type { IEnvironmentAdaptor } from '@looker/extension-utils'
+import type { SpecList } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React, { useState, useEffect } from 'react'
+
+const LOCAL_STORAGE_KEY = 'api-40-ga-apix-banner'
+const LOCAL_STORAGE_VALUE = 'dismissed'
+
+export interface BannerProps {
+  adaptor: IEnvironmentAdaptor
+  specs: SpecList
+}
+
+export const Banner: FC<BannerProps> = ({ adaptor, specs }) => {
+  const [isOpen, setOpen] = useState(false)
+  useEffect(onLoad, [])
+
+  if (isOpen) {
+    return (
+      <MessageBar
+        intent="inform"
+        onPrimaryClick={onClose}
+        secondaryAction={
+          <Link
+            href="https://developers.looker.com/api/advanced-usage/version-4-ga"
+            target="_blank"
+          >
+            <ButtonOutline size="small">Announcement</ButtonOutline>
+          </Link>
+        }
+      >
+        API 4.0 moves from Beta to General Availability in Looker 22.4 with
+        additions and possible breaking changes. Read the announcement to see
+        how this affects you.
+      </MessageBar>
+    )
+  } else {
+    return null
+  }
+
+  function onLoad() {
+    // Following best practice with inner async function
+    // https://github.com/facebook/react/issues/14326
+    async function innerOnLoad() {
+      // 4.0 is stable in Looker 22.4+. 4.0 is default or `current` in 22.4+.
+      // Still check for `stable` just in case new version comes along.
+      const is40Stable =
+        specs['4.0'].status === 'stable' || specs['4.0'].status === 'current'
+      const wasDismissed =
+        (await adaptor.localStorageGetItem(LOCAL_STORAGE_KEY)) ===
+        LOCAL_STORAGE_VALUE
+      setOpen(!is40Stable && !wasDismissed && adaptor.isExtension())
+    }
+    innerOnLoad()
+  }
+
+  function onClose() {
+    adaptor.localStorageSetItem(LOCAL_STORAGE_KEY, LOCAL_STORAGE_VALUE)
+    setOpen(false)
+  }
+}

package/src/{reducers → components/Banner}/index.ts

@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export * from './spec'
+export { Banner } from './Banner'

package/src/components/DocSDKs/DocSDKs.tsx

@@ -34,11 +34,11 @@ import type {
   KeyedCollection,
   CodeGen,
 } from '@looker/sdk-codegen'
-import { Method } from '@looker/sdk-codegen'
 import { CollapserCard, getGenerators } from '@looker/run-it'
 
 import { DocCode } from '../DocCode'
 import { selectSdkLanguage } from '../../state'
+import { isMethod } from '../../utils/path'
 import { noComment } from './utils'
 import { DocDeclarations } from './DocDeclarations'
 
@@ -59,10 +59,9 @@ const getDeclarations = (
   const declarations: KeyedCollection<string> = {}
   Object.entries(generators).forEach(([language, gen]) => {
     if (sdkLanguage === 'All' || language === sdkLanguage) {
-      const code =
-        item instanceof Method
-          ? gen.declareMethod('', item as IMethod)
-          : gen.declareType('', item as IType)
+      const code = isMethod(item)
+        ? gen.declareMethod('', item as IMethod)
+        : gen.declareType('', item as IType)
       declarations[language] = code
     }
   })

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

@@ -100,28 +100,5 @@ describe('ExploreType', () => {
         `http://localhost/${specKey}/types/ColorCollection/${targetType.jsonName}`
       )
     })
-    test('recognizes anything', () => {
-      const specKey = 'anything'
-      const path = `/${specKey}/methods/foo`
-      renderWithRouter(<ExploreTypeLink api={api} type={targetType} />, [path])
-
-      const actual = screen.getByText(targetType.jsonName)
-      expect(actual).toBeInTheDocument()
-      expect(actual).toHaveProperty(
-        'href',
-        `http://localhost/${specKey}/types/ColorCollection/${targetType.jsonName}`
-      )
-    })
-    test('ignores oauth path', () => {
-      const specKey = 'oauth'
-      const path = `/${specKey}/methods/foo`
-      renderWithRouter(<ExploreTypeLink api={api} type={targetType} />, [path])
-      const actual = screen.getByText(targetType.jsonName)
-      expect(actual).toBeInTheDocument()
-      expect(actual).toHaveProperty(
-        'href',
-        `http://types/ColorCollection/${targetType.jsonName}`
-      )
-    })
   })
 })

package/src/components/ExploreType/ExploreType.tsx

@@ -29,9 +29,9 @@ import React from 'react'
 import { Code, Tree, TreeItem } from '@looker/components'
 import type { IType, ApiModel } from '@looker/sdk-codegen'
 import { TypeOfType, typeOfType } from '@looker/sdk-codegen'
-import { useLocation } from 'react-router'
+import { useRouteMatch } from 'react-router-dom'
+
 import { Link } from '../Link'
-import { getSpecKey } from '../../reducers'
 import { buildPath } from '../../utils'
 import {
   ExploreProperty,
@@ -48,7 +48,8 @@ interface ExploreTypeLinkProps {
 }
 
 export const ExploreTypeLink: FC<ExploreTypeLinkProps> = ({ type, api }) => {
-  const location = useLocation()
+  const match = useRouteMatch<{ specKey: string }>('/:specKey')
+  const specKey = match?.params.specKey
   const picked = pickType(type)
   const name = picked.name
   const prefix = typeLinkPrefix(type)
@@ -56,12 +57,10 @@ export const ExploreTypeLink: FC<ExploreTypeLinkProps> = ({ type, api }) => {
   const typed = typeOfType(picked)
   if (typed === TypeOfType.Intrinsic)
     return <Code fontSize="small">{type.jsonName}</Code>
-
-  const specKey = getSpecKey(location)
   return (
     <>
       {prefix}
-      <Link key={type.fullName} to={buildPath(api, type, specKey)}>
+      <Link key={type.fullName} to={buildPath(api, type, specKey!)}>
         {name}
       </Link>
       {suffix}

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

@@ -42,7 +42,7 @@ describe('exploreUtils', () => {
     const props = pickTypeProps(responseType)
     expect(props).toBeDefined()
     const names = Object.keys(props)
-    expect(names).toEqual(['name', 'is_default', 'tables'])
+    expect(names).toEqual(['name', 'is_default', 'tables', 'table_limit_hit'])
   })
 
   test('iconType', () => {

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

@@ -28,46 +28,35 @@ 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 { Header } from './Header'
 
 describe('Header', () => {
-  const specDispatch = jest.fn()
   const hasNavigation = true
   const toggleNavigation = () => !hasNavigation
-
+  const spec = getLoadedSpecs()['4.0']
   beforeAll(() => {
     window.HTMLElement.prototype.scrollIntoView = jest.fn()
   })
 
   test('it renders a title', () => {
     renderWithRouterAndReduxProvider(
-      <Header
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-        toggleNavigation={toggleNavigation}
-      />
+      <Header spec={spec} toggleNavigation={toggleNavigation} />
     )
     expect(screen.getByText('API Explorer').closest('a')).toHaveAttribute(
       'href',
-      `/${specState.spec.key}`
+      `/${spec.key}`
     )
   })
 
   test('it renders a spec selector with the correct default value and options', async () => {
     renderWithRouterAndReduxProvider(
-      <Header
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-        toggleNavigation={toggleNavigation}
-      />
+      <Header spec={spec} toggleNavigation={toggleNavigation} />
     )
     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(() => {
@@ -80,12 +69,7 @@ describe('Header', () => {
 
   test('it renders an sdk language selector with the correct value and options', async () => {
     renderWithRouterAndReduxProvider(
-      <Header
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-        toggleNavigation={toggleNavigation}
-      />
+      <Header spec={spec} toggleNavigation={toggleNavigation} />
     )
     const selector = screen.getByLabelText('sdk language selector')
     expect(selector).toHaveValue(defaultSettingsState.sdkLanguage)
@@ -101,12 +85,7 @@ describe('Header', () => {
 
   test('it renders an icon button for the differ', () => {
     renderWithRouterAndReduxProvider(
-      <Header
-        specs={specs}
-        spec={specState.spec}
-        specDispatch={specDispatch}
-        toggleNavigation={toggleNavigation}
-      />
+      <Header spec={spec} toggleNavigation={toggleNavigation} />
     )
     expect(
       screen
@@ -114,6 +93,6 @@ describe('Header', () => {
           name: 'Compare Specifications',
         })
         .closest('a')
-    ).toHaveAttribute('href', `/diff/${specState.spec.key}/`)
+    ).toHaveAttribute('href', `/diff/${spec.key}/`)
   })
 })

package/src/components/Header/Header.tsx

@@ -24,7 +24,7 @@
 
  */
 
-import type { FC, Dispatch } from 'react'
+import type { FC } from 'react'
 import React from 'react'
 import styled from 'styled-components'
 import {
@@ -36,19 +36,14 @@ import {
 } from '@looker/components'
 import { LookerLogo } from '@looker/icons'
 import { Menu } from '@styled-icons/material/Menu'
-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 { SelectorContainer } from '../SelectorContainer'
 
 interface HeaderProps {
-  /** Specs to choose from */
-  specs: SpecList
   /** Current selected spec */
   spec: SpecItem
-  /** Spec state setter */
-  specDispatch: Dispatch<SpecAction>
   /** Nav state setter */
   toggleNavigation: (target?: boolean) => void
   className?: string
@@ -63,9 +58,7 @@ export const HEADER_TOGGLE_LABEL = 'Toggle Navigation'
  */
 export const HeaderLayout: FC<HeaderProps> = ({
   className,
-  specs,
   spec,
-  specDispatch,
   toggleNavigation,
 }) => (
   <SemanticHeader
@@ -95,7 +88,7 @@ export const HeaderLayout: FC<HeaderProps> = ({
         </Space>
       </Link>
     </Space>
-    <SelectorContainer specs={specs} spec={spec} specDispatch={specDispatch} />
+    <SelectorContainer spec={spec} />
   </SemanticHeader>
 )
 

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')
   })
 })