@looker/api-explorer 0.9.18 → 0.9.24

package/public/versions.json

@@ -21,5 +21,5 @@
     }
   ],
   "api_server_url": "https://localhost:8080",
-  "headless": true
+  "headless": false
 }

package/src/ApiExplorer.tsx

@@ -24,64 +24,80 @@
 
  */
 
-import React, { FC, useReducer, useState, useEffect, useCallback } from 'react'
+import type { FC } from 'react'
+import React, { useReducer, useState, useEffect, useCallback } from 'react'
 import { useLocation } from 'react-router'
 import styled, { createGlobalStyle } from 'styled-components'
-import { Aside, ComponentsProvider, Layout, Page } from '@looker/components'
-import { Looker40SDK, Looker31SDK } from '@looker/sdk'
-import { SpecList } from '@looker/sdk-codegen'
-import { loadSpecApi } from '@looker/run-it'
 import {
-  SearchContext,
-  LodeContext,
-  defaultLodeContextValue,
-  EnvAdaptorContext,
-} from './context'
-import { EnvAdaptorConstants, getLoded, IApixEnvAdaptor } from './utils'
-import { Header, SideNav, ErrorBoundary } from './components'
+  Aside,
+  ComponentsProvider,
+  Divider,
+  Heading,
+  IconButton,
+  Layout,
+  Page,
+  Space,
+} from '@looker/components'
+import type { SpecList } from '@looker/sdk-codegen'
+import type { RunItSetter } from '@looker/run-it'
+import { funFetch, fallbackFetch, OAuthScene } from '@looker/run-it'
+import { FirstPage } from '@styled-icons/material/FirstPage'
+import { LastPage } from '@styled-icons/material/LastPage'
+
+import type { IEnvironmentAdaptor } from '@looker/extension-utils'
+import {
+  registerEnvAdaptor,
+  unregisterEnvAdaptor,
+} from '@looker/extension-utils'
+import { oAuthPath } from './utils'
 import {
-  specReducer,
-  initDefaultSpecState,
-  searchReducer,
-  defaultSearchState,
-  updateSpecApi,
-} from './reducers'
+  Header,
+  SideNav,
+  ErrorBoundary,
+  Loader,
+  SelectorContainer,
+  HEADER_TOGGLE_LABEL,
+} from './components'
+import { specReducer, initDefaultSpecState, updateSpecApi } from './reducers'
 import { AppRouter } from './routes'
 import { apixFilesHost } from './utils/lodeUtils'
-import { useActions } from './hooks'
+import {
+  useSettingActions,
+  useSettingStoreState,
+  useLodeActions,
+  useLodesStoreState,
+} from './state'
 
 export interface ApiExplorerProps {
   specs: SpecList
-  sdk?: Looker31SDK | Looker40SDK
-  exampleLodeUrl?: string
+  adaptor: IEnvironmentAdaptor
+  setVersionsUrl: RunItSetter
+  examplesLodeUrl?: string
   declarationsLodeUrl?: string
-  envAdaptor: IApixEnvAdaptor
   headless?: boolean
 }
 
-export const BodyOverride = createGlobalStyle` html { height: 100%; overflow: hidden; } `
+const BodyOverride = createGlobalStyle` html { height: 100%; overflow: hidden; } `
 
-const ApiExplorer: FC<ApiExplorerProps> = ({
+export const ApiExplorer: FC<ApiExplorerProps> = ({
   specs,
-  envAdaptor,
-  exampleLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
+  adaptor,
+  setVersionsUrl,
+  examplesLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
   declarationsLodeUrl = `${apixFilesHost}/declarationsIndex.json`,
   headless = false,
 }) => {
+  const { initialized } = useSettingStoreState()
+  useLodesStoreState()
+  const { initLodesAction } = useLodeActions()
+  const { initSettingsAction } = useSettingActions()
   const location = useLocation()
-  const { setSdkLanguageAction } = useActions()
-
+  const oauthReturn = location.pathname === `/${oAuthPath}`
   const [specState, specDispatch] = useReducer(
     specReducer,
     initDefaultSpecState(specs, location)
   )
   const { spec } = specState
-  const [searchSettings, setSearchSettings] = useReducer(
-    searchReducer,
-    defaultSearchState
-  )
-
-  const [lode, setLode] = useState(defaultLodeContextValue)
 
   const [hasNavigation, setHasNavigation] = useState(true)
   const toggleNavigation = (target?: boolean) =>
@@ -93,6 +109,14 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
     }
   }, [])
 
+  useEffect(() => {
+    registerEnvAdaptor(adaptor)
+    initSettingsAction()
+    initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
+
+    return () => unregisterEnvAdaptor()
+  }, [])
+
   useEffect(() => {
     if (headless) {
       window.addEventListener('message', hasNavigationToggle)
@@ -102,94 +126,131 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
         window.removeEventListener('message', hasNavigationToggle)
       }
     }
-  }, [])
+  }, [headless, hasNavigationToggle])
 
   useEffect(() => {
     const loadSpec = async () => {
       if (!spec.api) {
-        const newSpec = { ...spec }
-        const api = await loadSpecApi(newSpec)
-        if (api) {
-          specDispatch(updateSpecApi(spec.key, api))
+        try {
+          const newSpec = { ...spec }
+          const api = await fallbackFetch(newSpec, funFetch)
+          if (api) {
+            spec.api = api
+            specDispatch(updateSpecApi(spec.key, api))
+          }
+        } catch (error) {
+          console.error(error)
         }
       }
     }
-    loadSpec()
-  }, [spec])
-
-  useEffect(() => {
-    getLoded(exampleLodeUrl, declarationsLodeUrl).then((resp) => setLode(resp))
-  }, [exampleLodeUrl, declarationsLodeUrl])
-
-  useEffect(() => {
-    const initSdkLanguage = async () => {
-      const resp = await envAdaptor.localStorageGetItem(
-        EnvAdaptorConstants.LOCALSTORAGE_SDK_LANGUAGE_KEY
-      )
-      if (resp) {
-        setSdkLanguageAction(resp)
-      }
+    if (!oauthReturn) {
+      loadSpec()
     }
-    initSdkLanguage()
-  }, [envAdaptor, setSdkLanguageAction])
+  }, [spec, location])
 
-  const { loadGoogleFonts, themeCustomizations } = envAdaptor.themeOverrides()
+  const themeOverrides = adaptor.themeOverrides()
 
   return (
     <>
       <ComponentsProvider
-        loadGoogleFonts={loadGoogleFonts}
-        themeCustomizations={themeCustomizations}
+        loadGoogleFonts={themeOverrides.loadGoogleFonts}
+        themeCustomizations={themeOverrides.themeCustomizations}
       >
-        <ErrorBoundary logError={envAdaptor.logError.bind(envAdaptor)}>
-          <EnvAdaptorContext.Provider value={{ envAdaptor }}>
-            <LodeContext.Provider value={{ ...lode }}>
-              <SearchContext.Provider
-                value={{ searchSettings, setSearchSettings }}
-              >
-                <Page style={{ overflow: 'hidden' }}>
-                  {!headless && (
-                    <Header
+        {!initialized ? (
+          <Loader message="Initializing" themeOverrides={themeOverrides} />
+        ) : (
+          <ErrorBoundary logError={adaptor.logError.bind(adaptor)}>
+            <Page style={{ overflow: 'hidden' }}>
+              {!headless && (
+                <Header
+                  specs={specs}
+                  spec={spec}
+                  specDispatch={specDispatch}
+                  toggleNavigation={toggleNavigation}
+                />
+              )}
+              <Layout hasAside height="100%">
+                <AsideBorder
+                  borderRight
+                  isOpen={hasNavigation}
+                  headless={headless}
+                >
+                  {headless && (
+                    <>
+                      <Space
+                        alignItems="center"
+                        py="u3"
+                        px={hasNavigation ? 'u5' : '0'}
+                        justifyContent={
+                          hasNavigation ? 'space-between' : 'center'
+                        }
+                      >
+                        {hasNavigation && (
+                          <Heading
+                            as="h2"
+                            fontSize="xsmall"
+                            fontWeight="bold"
+                            color="text2"
+                          >
+                            API DOCUMENTATION
+                          </Heading>
+                        )}
+                        <IconButton
+                          size="xsmall"
+                          shape="round"
+                          icon={hasNavigation ? <FirstPage /> : <LastPage />}
+                          label={HEADER_TOGGLE_LABEL}
+                          onClick={() => toggleNavigation()}
+                        />
+                      </Space>
+                      {hasNavigation && (
+                        <>
+                          <Divider mb="u3" appearance="light" />
+                          <SelectorContainer
+                            ml="large"
+                            mr="large"
+                            specs={specs}
+                            spec={spec}
+                            specDispatch={specDispatch}
+                          />
+                        </>
+                      )}
+                    </>
+                  )}
+                  {hasNavigation && (
+                    <SideNav
+                      headless={headless}
                       specs={specs}
                       spec={spec}
                       specDispatch={specDispatch}
-                      toggleNavigation={toggleNavigation}
                     />
                   )}
-                  <Layout hasAside height="100%">
-                    {hasNavigation && (
-                      <AsideBorder pt="large" width="20rem">
-                        <SideNav
-                          headless={headless}
-                          specs={specs}
-                          spec={spec}
-                          specDispatch={specDispatch}
-                        />
-                      </AsideBorder>
-                    )}
-                    {spec.api && (
-                      <AppRouter
-                        api={spec.api}
-                        specKey={spec.key}
-                        specs={specs}
-                        toggleNavigation={toggleNavigation}
-                      />
-                    )}
-                  </Layout>
-                </Page>
-              </SearchContext.Provider>
-            </LodeContext.Provider>
-          </EnvAdaptorContext.Provider>
-        </ErrorBoundary>
+                </AsideBorder>
+                {oauthReturn && <OAuthScene />}
+                {!oauthReturn && spec.api && (
+                  <AppRouter
+                    api={spec.api}
+                    specKey={spec.key}
+                    specs={specs}
+                    toggleNavigation={toggleNavigation}
+                    adaptor={adaptor}
+                    setVersionsUrl={setVersionsUrl}
+                  />
+                )}
+              </Layout>
+            </Page>
+          </ErrorBoundary>
+        )}
       </ComponentsProvider>
       {!headless && <BodyOverride />}
     </>
   )
 }
 
-/* Border support for `Aside` coming in @looker/components very soon */
-export const AsideBorder = styled(Aside)`
-  border-right: 1px solid ${({ theme }) => theme.colors.ui2};
+const AsideBorder = styled(Aside)<{
+  isOpen: boolean
+  headless: boolean
+}>`
+  width: ${({ isOpen, headless }) =>
+    isOpen ? '20rem' : headless ? '2.75rem' : '0rem'};
 `
-
-export default ApiExplorer

package/src/{index.tsx → App.tsx}

@@ -47,7 +47,7 @@ const versionsUrl = new URL(
 
 ReactDOM.render(
   <Router basename={basename}>
-    <StandaloneApiExplorer versionsUrl={versionsUrl} headless={basename} />
+    <StandaloneApiExplorer versionsUrl={versionsUrl} headless={!!basename} />
     <BodyReset />
   </Router>,
   document.getElementById('container')

package/src/StandaloneApiExplorer.tsx

@@ -24,20 +24,21 @@
 
  */
 
-import React, { FC, useEffect, useState } from 'react'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   RunItProvider,
-  defaultConfigurator,
-  initRunItSdk,
   loadSpecsFromVersions,
+  RunItConfigKey,
+  RunItNoConfig,
+  initRunItSdk,
 } from '@looker/run-it'
-import { IAPIMethods } from '@looker/sdk-rtl'
-import { SpecList } from '@looker/sdk-codegen'
+import type { SpecList } from '@looker/sdk-codegen'
 import { Provider } from 'react-redux'
+import { BrowserAdaptor } from '@looker/extension-utils'
 
-import ApiExplorer from './ApiExplorer'
-import { configureStore } from './state'
-import { StandaloneEnvAdaptor } from './utils'
+import { ApiExplorer } from './ApiExplorer'
+import { store } from './state'
 import { Loader } from './components'
 
 export interface StandaloneApiExplorerProps {
@@ -45,49 +46,57 @@ export interface StandaloneApiExplorerProps {
   versionsUrl: string
 }
 
-const standaloneEnvAdaptor = new StandaloneEnvAdaptor()
-const store = configureStore()
+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 [embedded, setEmbedded] = useState<boolean>(headless)
+  const [currentVersionsUrl, setCurrentVersionsUrl] =
+    useState<string>(versionsUrl)
 
   useEffect(() => {
-    if (versionsUrl) {
-      // Load specifications from the versions url
-      loadSpecsFromVersions(versionsUrl).then((response) => {
+    if (currentVersionsUrl) {
+      loadVersions(currentVersionsUrl).then((result) => {
+        setCurrentVersionsUrl(result.url)
+        const response = result.response
         setSpecs(response.specs)
-        if ('headless' in response) {
-          // headless will default to false if it's not explicitly set
-          setEmbedded(response.headless)
-        }
       })
     } else {
       setSpecs(undefined)
     }
-  }, [versionsUrl])
-
-  const chosenSdk: IAPIMethods = initRunItSdk(defaultConfigurator)
+  }, [versionsUrl, currentVersionsUrl])
 
   return (
     <Provider store={store}>
-      <RunItProvider
-        sdk={chosenSdk}
-        configurator={defaultConfigurator}
-        basePath="/api/4.0"
-      >
+      <RunItProvider basePath="/api/4.0">
         <>
           {specs ? (
             <ApiExplorer
               specs={specs}
-              envAdaptor={standaloneEnvAdaptor}
-              headless={embedded}
+              adaptor={browserAdaptor}
+              headless={headless}
+              setVersionsUrl={setCurrentVersionsUrl}
             />
           ) : (
-            <Loader themeOverrides={standaloneEnvAdaptor.themeOverrides()} />
+            <Loader themeOverrides={browserAdaptor.themeOverrides()} />
           )}
         </>
       </RunItProvider>

package/src/components/DocActivityType/DocActivityType.tsx

@@ -23,9 +23,10 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { Code, Tooltip, Badge } from '@looker/components'
-import { IMethod } from '@looker/sdk-codegen'
+import type { IMethod } from '@looker/sdk-codegen'
 
 interface DocActivityTypeProps {
   method: IMethod

package/src/components/DocCode/DocCode.tsx

@@ -24,10 +24,13 @@
 
  */
 
-import React, { FC, useContext } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { findGenerator } from '@looker/sdk-codegen'
 import { CodeDisplay } from '@looker/code-editor'
-import { SearchContext } from '../../context/search'
+import { useSelector } from 'react-redux'
+
+import { selectSearchPattern } from '../../state'
 
 interface DocCodeProps {
   code: string
@@ -35,11 +38,9 @@ interface DocCodeProps {
 }
 
 export const DocCode: FC<DocCodeProps> = ({ code, language = 'json' }) => {
+  const searchPattern = useSelector(selectSearchPattern)
   const gen = findGenerator(language)
   if (gen) language = gen.language.toLocaleLowerCase()
-  const {
-    searchSettings: { pattern },
-  } = useContext(SearchContext)
 
-  return <CodeDisplay language={language} code={code} pattern={pattern} />
+  return <CodeDisplay language={language} code={code} pattern={searchPattern} />
 }

package/src/components/DocMarkdown/DocMarkdown.spec.tsx

@@ -26,14 +26,13 @@
 
 import React from 'react'
 import { screen } from '@testing-library/react'
-import { renderWithTheme } from '@looker/components-test-utils'
+import { createTestStore, renderWithReduxProvider } from '../../test-utils'
 
-import { renderWithSearch } from '../../test-utils'
 import { DocMarkdown } from './DocMarkdown'
 
 describe('DocMarkdown', () => {
   test('it renders markdown', () => {
-    renderWithSearch(
+    renderWithReduxProvider(
       <DocMarkdown
         source={
           '# Markdown Component \n Renders markdown using [ReactMarkdown](https://github.com/rexxars/react-markdown)'
@@ -54,7 +53,7 @@ describe('DocMarkdown', () => {
   test('it remaps hashbang urls found in markdown input', () => {
     const input =
       'A link to the [create_dashboard](#!/Dashboard/create_dashboard) endpoint'
-    renderWithTheme(<DocMarkdown source={input} specKey={'3.1'} />)
+    renderWithReduxProvider(<DocMarkdown source={input} specKey={'3.1'} />)
     expect(screen.getByText(/A link to the/)).toBeInTheDocument()
     expect(screen.getByText('create_dashboard')).toHaveAttribute(
       'href',
@@ -63,7 +62,7 @@ describe('DocMarkdown', () => {
   })
 
   test('it leaves external urls untouched', () => {
-    renderWithSearch(
+    renderWithReduxProvider(
       <DocMarkdown
         source={'[external_link](https://www.foo.com)'}
         specKey={'3.1'}
@@ -77,12 +76,15 @@ describe('DocMarkdown', () => {
 
   test('it highlights text matching search pattern', () => {
     const highlightPattern = 'spec'
-    renderWithSearch(
+    const store = createTestStore({
+      settings: { searchPattern: highlightPattern },
+    })
+    renderWithReduxProvider(
       <DocMarkdown
         source={'An API Explorer to explore your OpenAPI spec'}
         specKey={'3.1'}
       />,
-      highlightPattern
+      store
     )
     const mark = screen.getByText(highlightPattern)
     expect(mark.tagName).toEqual('MARK')
@@ -90,14 +92,17 @@ describe('DocMarkdown', () => {
 
   test('it only highlights search matches in the display text of link', () => {
     const highlightPattern = 'dashboard'
-    renderWithSearch(
+    const store = createTestStore({
+      settings: { searchPattern: highlightPattern },
+    })
+    renderWithReduxProvider(
       <DocMarkdown
         source={
           'An inline styled link with matching text in both the link text and the href: [create_dashboard](/3.1/methods/Dashboard/create_dashboard)'
         }
         specKey={'3.1'}
       />,
-      highlightPattern
+      store
     )
     const link = screen.getByRole('link')
     expect(link).toHaveAttribute(
@@ -110,7 +115,7 @@ describe('DocMarkdown', () => {
   test('it renders code blocks', () => {
     const code =
       '```\nAuthorization: token 4QDkCyCtZzYgj4C2p2cj3csJH7zqS5RzKs2kTnG4\n```'
-    renderWithTheme(<DocMarkdown source={code} specKey={'3.1'} />)
+    renderWithReduxProvider(<DocMarkdown source={code} specKey={'3.1'} />)
     expect(
       screen.getByText(
         'Authorization: token 4QDkCyCtZzYgj4C2p2cj3csJH7zqS5RzKs2kTnG4'
@@ -120,7 +125,7 @@ describe('DocMarkdown', () => {
 
   test('it renders inline code', () => {
     const markdown = 'Some text with code: `const noop = () => null`'
-    renderWithTheme(<DocMarkdown source={markdown} specKey={'3.1'} />)
+    renderWithReduxProvider(<DocMarkdown source={markdown} specKey={'3.1'} />)
     expect(screen.getByText('const noop = () => null')).toBeInTheDocument()
   })
 })

package/src/components/DocMarkdown/DocMarkdown.tsx

@@ -24,10 +24,13 @@
 
  */
 
-import React, { FC, useContext } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { Markdown } from '@looker/code-editor'
-import { EnvAdaptorContext, SearchContext } from '../../context'
+import { useSelector } from 'react-redux'
+import { getEnvAdaptor } from '@looker/extension-utils'
+import { selectSearchPattern } from '../../state'
 import { transformURL } from './utils'
 
 interface DocMarkdownProps {
@@ -36,24 +39,23 @@ interface DocMarkdownProps {
 }
 
 export const DocMarkdown: FC<DocMarkdownProps> = ({ source, specKey }) => {
-  const { envAdaptor } = useContext(EnvAdaptorContext)
-  const {
-    searchSettings: { pattern },
-  } = useContext(SearchContext)
-
+  const searchPattern = useSelector(selectSearchPattern)
   const history = useHistory()
 
   const linkClickHandler = (pathname: string, url: string) => {
     if (pathname.startsWith(`/${specKey}`)) {
       history.push(pathname)
+    } else if (url.startsWith(`/${specKey}`)) {
+      history.push(url)
     } else if (url.startsWith('https://')) {
-      envAdaptor.openBrowserWindow(url)
+      const adaptor = getEnvAdaptor()
+      adaptor.openBrowserWindow(url)
     }
   }
   return (
     <Markdown
       source={source}
-      pattern={pattern}
+      pattern={searchPattern}
       linkClickHandler={linkClickHandler}
       transformLinkUri={transformURL.bind(null, specKey)}
     />

package/src/components/DocMethodSummary/DocMethodSummary.spec.tsx

@@ -40,10 +40,10 @@ describe('DocMethodSummary', () => {
     expect(screen.getByText(method.summary)).toBeInTheDocument()
     expect(screen.getByText(method.endpoint)).toBeInTheDocument()
     await waitFor(() => {
-      const statusIcon = screen.getByLabelText('stable endpoint')
+      const statusIcon = screen.getByLabelText('stable item')
       fireEvent.mouseOver(statusIcon)
       expect(screen.getByRole('tooltip')).toHaveTextContent(
-        'This endpoint is considered stable for this API version.'
+        'This item is considered stable for this API version.'
       )
     })
     expect(screen.getByText('db_query')).toBeInTheDocument()