@looker/api-explorer 0.9.22 → 0.9.24

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 { 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,
@@ -63,29 +61,36 @@ import {
 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(
@@ -94,8 +99,6 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
   )
   const { spec } = specState
 
-  const [lode, setLode] = useState(defaultLodeContextValue)
-
   const [hasNavigation, setHasNavigation] = useState(true)
   const toggleNavigation = (target?: boolean) =>
     setHasNavigation(target || !hasNavigation)
@@ -107,8 +110,9 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
   }, [])
 
   useEffect(() => {
-    registerEnvAdaptor(envAdaptor)
-    initAction()
+    registerEnvAdaptor(adaptor)
+    initSettingsAction()
+    initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
 
     return () => unregisterEnvAdaptor()
   }, [])
@@ -144,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 (
     <>
@@ -159,88 +159,86 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
         {!initialized ? (
           <Loader message="Initializing" themeOverrides={themeOverrides} />
         ) : (
-          <ErrorBoundary logError={envAdaptor.logError.bind(envAdaptor)}>
-            <LodeContext.Provider value={{ ...lode }}>
-              <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>
+          <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 && (
-                          <>
-                            <Divider mb="u3" appearance="light" />
-                            <SelectorContainer
-                              ml="large"
-                              mr="large"
-                              specs={specs}
-                              spec={spec}
-                              specDispatch={specDispatch}
-                            />
-                          </>
+                          <Heading
+                            as="h2"
+                            fontSize="xsmall"
+                            fontWeight="bold"
+                            color="text2"
+                          >
+                            API DOCUMENTATION
+                          </Heading>
                         )}
-                      </>
-                    )}
-                    {hasNavigation && (
-                      <SideNav
-                        headless={headless}
-                        specs={specs}
-                        spec={spec}
-                        specDispatch={specDispatch}
-                      />
-                    )}
-                  </AsideBorder>
-                  {oauthReturn && <OAuthScene />}
-                  {!oauthReturn && spec.api && (
-                    <AppRouter
-                      api={spec.api}
-                      specKey={spec.key}
+                        <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}
-                      toggleNavigation={toggleNavigation}
-                      envAdaptor={envAdaptor}
-                      setVersionsUrl={setVersionsUrl}
+                      spec={spec}
+                      specDispatch={specDispatch}
                     />
                   )}
-                </Layout>
-              </Page>
-            </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>
@@ -249,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/DocMarkdown/DocMarkdown.tsx

@@ -29,7 +29,7 @@ import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { Markdown } from '@looker/code-editor'
 import { useSelector } from 'react-redux'
-import { getEnvAdaptor } from '../../utils'
+import { getEnvAdaptor } from '@looker/extension-utils'
 import { selectSearchPattern } from '../../state'
 import { transformURL } from './utils'
 
@@ -48,8 +48,8 @@ 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 (

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)

package/src/components/DocSource/DocSource.tsx

@@ -24,13 +24,14 @@
 
  */
 import type { FC } from 'react'
-import React, { useContext } from 'react'
+import React from 'react'
 import type { IMethod, IType } from '@looker/sdk-codegen'
 import { findDeclaration } from '@looker/sdk-codegen'
 import { Icon, Link, Tooltip } from '@looker/components'
 import { IdeFileDocument } from '@looker/icons'
+import { useSelector } from 'react-redux'
 
-import { LodeContext } from '../../context'
+import { selectDeclarationsLode } from '../../state'
 
 interface DocSourceProps {
   method?: IMethod
@@ -38,7 +39,7 @@ interface DocSourceProps {
 }
 
 export const DocSource: FC<DocSourceProps> = ({ method, type }) => {
-  const { declarations } = useContext(LodeContext)
+  const declarations = useSelector(selectDeclarationsLode)
   let sourceLink
   let declaration
   if (declarations) {

package/src/components/ErrorBoundary/components/SomethingWentWrong/SomethingWentWrong.spec.tsx

@@ -54,6 +54,6 @@ describe('SomethingWentWrong', () => {
 
     expect(screen.getByText(header)).toBeVisible()
     expect(screen.getByText(actionMessage)).toBeVisible()
-    expect(screen.getByAltText(altText)).toBeVisible()
+    expect(screen.getByTitle(altText)).toBeInTheDocument()
   })
 })