@looker/api-explorer 0.9.21 → 0.9.26

package/src/ApiExplorer.tsx

@@ -44,14 +44,12 @@ import { funFetch, fallbackFetch, OAuthScene } from '@looker/run-it'
 import { FirstPage } from '@styled-icons/material/FirstPage'
 import { LastPage } from '@styled-icons/material/LastPage'
 
-import { SearchContext, LodeContext, defaultLodeContextValue } from './context'
-import type { IApixEnvAdaptor } from './utils'
+import type { IEnvironmentAdaptor } from '@looker/extension-utils'
 import {
-  getLoded,
-  oAuthPath,
   registerEnvAdaptor,
   unregisterEnvAdaptor,
-} from './utils'
+} from '@looker/extension-utils'
+import { oAuthPath } from './utils'
 import {
   Header,
   SideNav,
@@ -60,38 +58,39 @@ import {
   SelectorContainer,
   HEADER_TOGGLE_LABEL,
 } from './components'
-import {
-  specReducer,
-  initDefaultSpecState,
-  searchReducer,
-  defaultSearchState,
-  updateSpecApi,
-} from './reducers'
+import { specReducer, initDefaultSpecState, updateSpecApi } from './reducers'
 import { AppRouter } from './routes'
 import { apixFilesHost } from './utils/lodeUtils'
-import { useActions, useSettingsStoreState } from './state'
+import {
+  useSettingActions,
+  useSettingStoreState,
+  useLodeActions,
+  useLodesStoreState,
+} from './state'
 
 export interface ApiExplorerProps {
   specs: SpecList
-  envAdaptor: IApixEnvAdaptor
+  adaptor: IEnvironmentAdaptor
   setVersionsUrl: RunItSetter
-  exampleLodeUrl?: string
+  examplesLodeUrl?: string
   declarationsLodeUrl?: string
   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,
+  adaptor,
   setVersionsUrl,
-  exampleLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
+  examplesLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
   declarationsLodeUrl = `${apixFilesHost}/declarationsIndex.json`,
   headless = false,
 }) => {
-  const { initialized } = useSettingsStoreState()
-  const { initAction } = useActions()
+  const { initialized } = useSettingStoreState()
+  useLodesStoreState()
+  const { initLodesAction } = useLodeActions()
+  const { initSettingsAction } = useSettingActions()
   const location = useLocation()
   const oauthReturn = location.pathname === `/${oAuthPath}`
   const [specState, specDispatch] = useReducer(
@@ -99,12 +98,6 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
     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) =>
@@ -117,8 +110,9 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
   }, [])
 
   useEffect(() => {
-    registerEnvAdaptor(envAdaptor)
-    initAction()
+    registerEnvAdaptor(adaptor)
+    initSettingsAction()
+    initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
 
     return () => unregisterEnvAdaptor()
   }, [])
@@ -154,11 +148,7 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
     }
   }, [spec, location])
 
-  useEffect(() => {
-    getLoded(exampleLodeUrl, declarationsLodeUrl).then((resp) => setLode(resp))
-  }, [exampleLodeUrl, declarationsLodeUrl])
-
-  const themeOverrides = envAdaptor.themeOverrides()
+  const themeOverrides = adaptor.themeOverrides()
 
   return (
     <>
@@ -169,94 +159,86 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
         {!initialized ? (
           <Loader message="Initializing" themeOverrides={themeOverrides} />
         ) : (
-          <ErrorBoundary logError={envAdaptor.logError.bind(envAdaptor)}>
-            <LodeContext.Provider value={{ ...lode }}>
-              <SearchContext.Provider
-                value={{ searchSettings, setSearchSettings }}
-              >
-                <Page style={{ overflow: 'hidden' }}>
-                  {!headless && (
-                    <Header
+          <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%">
-                    <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}
-                        />
-                      )}
-                    </AsideBorder>
-                    {oauthReturn && <OAuthScene />}
-                    {!oauthReturn && spec.api && (
-                      <AppRouter
-                        api={spec.api}
-                        specKey={spec.key}
-                        specs={specs}
-                        toggleNavigation={toggleNavigation}
-                        envAdaptor={envAdaptor}
-                        setVersionsUrl={setVersionsUrl}
-                      />
-                    )}
-                  </Layout>
-                </Page>
-              </SearchContext.Provider>
-            </LodeContext.Provider>
+                </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>
@@ -265,11 +247,10 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
   )
 }
 
-export const AsideBorder = styled(Aside)<{
+const AsideBorder = styled(Aside)<{
   isOpen: boolean
   headless: boolean
 }>`
   width: ${({ isOpen, headless }) =>
     isOpen ? '20rem' : headless ? '2.75rem' : '0rem'};
 `
-export default ApiExplorer

package/src/StandaloneApiExplorer.tsx

@@ -28,19 +28,17 @@ import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import {
   RunItProvider,
-  defaultConfigurator,
-  initRunItSdk,
   loadSpecsFromVersions,
   RunItConfigKey,
   RunItNoConfig,
+  initRunItSdk,
 } from '@looker/run-it'
-import type { IAPIMethods } from '@looker/sdk-rtl'
 import type { SpecList } from '@looker/sdk-codegen'
 import { Provider } from 'react-redux'
+import { BrowserAdaptor } from '@looker/extension-utils'
 
-import ApiExplorer from './ApiExplorer'
+import { ApiExplorer } from './ApiExplorer'
 import { store } from './state'
-import { StandaloneEnvAdaptor } from './utils'
 import { Loader } from './components'
 
 export interface StandaloneApiExplorerProps {
@@ -48,10 +46,10 @@ export interface StandaloneApiExplorerProps {
   versionsUrl: string
 }
 
-const standaloneEnvAdaptor = new StandaloneEnvAdaptor()
+const browserAdaptor = new BrowserAdaptor(initRunItSdk())
 
 const loadVersions = async (current: string) => {
-  const data = await standaloneEnvAdaptor.localStorageGetItem(RunItConfigKey)
+  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)
@@ -86,25 +84,19 @@ export const StandaloneApiExplorer: FC<StandaloneApiExplorerProps> = ({
     }
   }, [versionsUrl, currentVersionsUrl])
 
-  const chosenSdk: IAPIMethods = initRunItSdk(defaultConfigurator)
-
   return (
     <Provider store={store}>
-      <RunItProvider
-        sdk={chosenSdk}
-        configurator={defaultConfigurator}
-        basePath="/api/4.0"
-      >
+      <RunItProvider basePath="/api/4.0">
         <>
           {specs ? (
             <ApiExplorer
               specs={specs}
-              envAdaptor={standaloneEnvAdaptor}
+              adaptor={browserAdaptor}
               headless={headless}
               setVersionsUrl={setCurrentVersionsUrl}
             />
           ) : (
-            <Loader themeOverrides={standaloneEnvAdaptor.themeOverrides()} />
+            <Loader themeOverrides={browserAdaptor.themeOverrides()} />
           )}
         </>
       </RunItProvider>

package/src/components/DocCode/DocCode.tsx

@@ -25,10 +25,12 @@
  */
 
 import type { FC } from 'react'
-import React, { useContext } 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
@@ -36,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

@@ -25,11 +25,12 @@
  */
 
 import type { FC } from 'react'
-import React, { useContext } from 'react'
+import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { Markdown } from '@looker/code-editor'
-import { SearchContext } from '../../context'
-import { getEnvAdaptor } from '../../utils'
+import { useSelector } from 'react-redux'
+import { getEnvAdaptor } from '@looker/extension-utils'
+import { selectSearchPattern } from '../../state'
 import { transformURL } from './utils'
 
 interface DocMarkdownProps {
@@ -38,10 +39,7 @@ interface DocMarkdownProps {
 }
 
 export const DocMarkdown: FC<DocMarkdownProps> = ({ source, specKey }) => {
-  const {
-    searchSettings: { pattern },
-  } = useContext(SearchContext)
-
+  const searchPattern = useSelector(selectSearchPattern)
   const history = useHistory()
 
   const linkClickHandler = (pathname: string, url: string) => {
@@ -50,14 +48,14 @@ export const DocMarkdown: FC<DocMarkdownProps> = ({ source, specKey }) => {
     } else if (url.startsWith(`/${specKey}`)) {
       history.push(url)
     } else if (url.startsWith('https://')) {
-      const envAdaptor = getEnvAdaptor()
-      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/DocReferences/DocReferences.spec.tsx

@@ -27,7 +27,10 @@ import React from 'react'
 import { methodRefs, typeRefs } from '@looker/sdk-codegen'
 import { screen } from '@testing-library/react'
 
-import { renderWithSearchAndRouter } from '../../test-utils'
+import {
+  createTestStore,
+  renderWithRouterAndReduxProvider,
+} from '../../test-utils'
 import { api } from '../../test-data'
 import { buildPath } from '../../utils'
 import { DocReferences } from './DocReferences'
@@ -37,7 +40,7 @@ describe('DocReferences', () => {
     const typesUsed = typeRefs(api, api.types.DashboardElement.customTypes)
     const typesUsedBy = typeRefs(api, api.types.DashboardElement.parentTypes)
     const methodsUsedBy = methodRefs(api, api.types.DashboardElement.methodRefs)
-    renderWithSearchAndRouter(
+    renderWithRouterAndReduxProvider(
       <DocReferences
         typesUsed={typesUsed}
         typesUsedBy={typesUsedBy}
@@ -67,13 +70,17 @@ describe('DocReferences', () => {
 
   test('it highlights text matching search pattern', () => {
     const highlightPattern = 'dash'
-    renderWithSearchAndRouter(
+    const store = createTestStore({
+      settings: { searchPattern: highlightPattern },
+    })
+    renderWithRouterAndReduxProvider(
       <DocReferences
         typesUsed={[api.types.Dashboard]}
         specKey={'3.1'}
         api={api}
       />,
-      highlightPattern
+      undefined,
+      store
     )
     const foundRef = screen.getByRole('link')
     expect(foundRef).toContainHTML('<span class="hi">Dash</span>board')

package/src/components/DocReferences/DocReferences.tsx

@@ -25,11 +25,12 @@
  */
 
 import type { FC } from 'react'
-import React, { useContext } from 'react'
+import React from 'react'
 import type { ApiModel, IMethod, IType } from '@looker/sdk-codegen'
-
 import { CollapserCard } from '@looker/run-it'
-import { SearchContext } from '../../context'
+
+import { useSelector } from 'react-redux'
+import { selectSearchPattern } from '../../state'
 import { DocReferenceItems } from './utils'
 
 interface DocReferencesProps {
@@ -50,9 +51,7 @@ export const DocReferences: FC<DocReferencesProps> = ({
   methodsUsedBy = [],
   typesUsedBy = [],
 }) => {
-  const {
-    searchSettings: { pattern },
-  } = useContext(SearchContext)
+  const searchPattern = useSelector(selectSearchPattern)
 
   if (
     typesUsed.length === 0 &&
@@ -69,21 +68,21 @@ export const DocReferences: FC<DocReferencesProps> = ({
           typesUsed,
           api,
           specKey,
-          pattern
+          searchPattern
         )}
         {DocReferenceItems(
           'Used by types:',
           typesUsedBy,
           api,
           specKey,
-          pattern
+          searchPattern
         )}
         {DocReferenceItems(
           'Used by methods:',
           methodsUsedBy,
           api,
           specKey,
-          pattern
+          searchPattern
         )}
       </>
     </CollapserCard>

package/src/components/DocSdkUsage/DocSdkUsage.spec.tsx

@@ -27,7 +27,7 @@ import React from 'react'
 import { screen } from '@testing-library/react'
 import { findExampleLanguages } from '@looker/sdk-codegen'
 
-import { renderWithReduxProviderAndLode } from '../../test-utils'
+import { renderWithLode } from '../../test-utils'
 import { api, examples } from '../../test-data'
 import { DocSdkUsage } from './DocSdkUsage'
 import {
@@ -47,7 +47,7 @@ describe('DocSdkUsage', () => {
       method.operationId,
       1
     )
-    renderWithReduxProviderAndLode(<DocSdkUsage method={method} />, examples)
+    renderWithLode(<DocSdkUsage method={method} />, examples)
     expect(screen.getAllByRole('link')).toHaveLength(PER_PAGE_COUNT)
 
     expect(

package/src/components/DocSdkUsage/DocSdkUsage.tsx

@@ -24,7 +24,7 @@
 
  */
 import type { FC } from 'react'
-import React, { useContext, useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   Box,
   Card,
@@ -41,8 +41,7 @@ import { CollapserCard } from '@looker/run-it'
 import { InsertDriveFile } from '@styled-icons/material-outlined/InsertDriveFile'
 import { useSelector } from 'react-redux'
 
-import { selectSdkLanguage } from '../../state'
-import { LodeContext } from '../../context'
+import { selectSdkLanguage, selectExamplesLode } from '../../state'
 import {
   exampleColumns,
   EMPTY_STRING,
@@ -61,15 +60,16 @@ interface DocSdkUsageProps {
  *  links to the source files
  */
 export const DocSdkUsage: FC<DocSdkUsageProps> = ({ method }) => {
-  const { examples } = useContext(LodeContext)
+  const examples = useSelector(selectExamplesLode)
   const sdkLanguage = useSelector(selectSdkLanguage)
-  let languages = findExampleLanguages(examples, method.name)
   const [page, setPage] = useState(1)
 
   useEffect(() => {
     setPage(1)
   }, [method])
 
+  if (!examples) return <></>
+  let languages = findExampleLanguages(examples, method.name)
   if (languages.length === 0) return <></>
 
   languages = sortLanguagesByPreference(languages, sdkLanguage)