@looker/api-explorer 0.9.22 → 0.9.27

package/src/ApiExplorer.tsx

@@ -25,8 +25,7 @@
  */
 
 import type { FC } from 'react'
-import React, { useReducer, useState, useEffect, useCallback } from 'react'
-import { useLocation } from 'react-router'
+import React, { useState, useEffect, useCallback } from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 import {
   Aside,
@@ -38,64 +37,64 @@ import {
   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 { LodeContext, defaultLodeContextValue } from './context'
-import type { IApixEnvAdaptor } from './utils'
 import {
-  getLoded,
-  oAuthPath,
   registerEnvAdaptor,
   unregisterEnvAdaptor,
-} from './utils'
+} from '@looker/extension-utils'
+import { useSelector } from 'react-redux'
+import { useLocation } from 'react-router-dom'
+
+import type { IApixAdaptor } from './utils'
 import {
   Header,
   SideNav,
   ErrorBoundary,
-  Loader,
   SelectorContainer,
   HEADER_TOGGLE_LABEL,
+  Loader,
+  Banner,
 } from './components'
-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,
+  useSpecActions,
+  useSpecStoreState,
+  selectSpecs,
+  selectCurrentSpec,
+} from './state'
+import { getSpecKey, diffPath } from './utils'
 
 export interface ApiExplorerProps {
-  specs: SpecList
-  envAdaptor: IApixEnvAdaptor
-  setVersionsUrl: RunItSetter
-  exampleLodeUrl?: string
+  adaptor: IApixAdaptor
+  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> = ({
-  specs,
-  envAdaptor,
-  setVersionsUrl,
-  exampleLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
+export const ApiExplorer: FC<ApiExplorerProps> = ({
+  adaptor,
+  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 location = useLocation()
-  const oauthReturn = location.pathname === `/${oAuthPath}`
-  const [specState, specDispatch] = useReducer(
-    specReducer,
-    initDefaultSpecState(specs, location)
-  )
-  const { spec } = specState
-
-  const [lode, setLode] = useState(defaultLodeContextValue)
+  useSettingStoreState()
+  useLodesStoreState()
+  const { working, description } = useSpecStoreState()
+  const specs = useSelector(selectSpecs)
+  const spec = useSelector(selectCurrentSpec)
+  const { initLodesAction } = useLodeActions()
+  const { initSettingsAction } = useSettingActions()
+  const { initSpecsAction, setCurrentSpecAction } = useSpecActions()
 
+  const location = useLocation()
   const [hasNavigation, setHasNavigation] = useState(true)
   const toggleNavigation = (target?: boolean) =>
     setHasNavigation(target || !hasNavigation)
@@ -106,13 +105,24 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
     }
   }, [])
 
+  registerEnvAdaptor(adaptor)
+
   useEffect(() => {
-    registerEnvAdaptor(envAdaptor)
-    initAction()
+    initSettingsAction()
+    initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
 
+    const specKey = getSpecKey(location)
+    initSpecsAction({ specKey })
     return () => unregisterEnvAdaptor()
   }, [])
 
+  useEffect(() => {
+    const maybeSpec = location.pathname?.split('/')[1]
+    if (spec && maybeSpec && maybeSpec !== diffPath && maybeSpec !== spec.key) {
+      setCurrentSpecAction({ currentSpecKey: maybeSpec })
+    }
+  }, [location.pathname, spec])
+
   useEffect(() => {
     if (headless) {
       window.addEventListener('message', hasNavigationToggle)
@@ -124,31 +134,12 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
     }
   }, [headless, hasNavigationToggle])
 
-  useEffect(() => {
-    const loadSpec = async () => {
-      if (!spec.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)
-        }
-      }
-    }
-    if (!oauthReturn) {
-      loadSpec()
-    }
-  }, [spec, location])
-
-  useEffect(() => {
-    getLoded(exampleLodeUrl, declarationsLodeUrl).then((resp) => setLode(resp))
-  }, [exampleLodeUrl, declarationsLodeUrl])
+  const themeOverrides = adaptor.themeOverrides()
 
-  const themeOverrides = envAdaptor.themeOverrides()
+  let neededSpec = location.pathname?.split('/')[1]
+  if (!neededSpec || neededSpec === diffPath) {
+    neededSpec = spec?.key
+  }
 
   return (
     <>
@@ -156,91 +147,71 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
         loadGoogleFonts={themeOverrides.loadGoogleFonts}
         themeCustomizations={themeOverrides.themeCustomizations}
       >
-        {!initialized ? (
-          <Loader message="Initializing" themeOverrides={themeOverrides} />
+        {working || !neededSpec || neededSpec !== spec.key ? (
+          <Loader message={description} 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)}>
+            <Banner adaptor={adaptor} specs={specs} />
+            <Page style={{ overflow: 'hidden' }}>
+              {!headless && (
+                <Header spec={spec} 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}
-                      specs={specs}
-                      toggleNavigation={toggleNavigation}
-                      envAdaptor={envAdaptor}
-                      setVersionsUrl={setVersionsUrl}
-                    />
+                        <IconButton
+                          size="xsmall"
+                          shape="round"
+                          icon={hasNavigation ? <FirstPage /> : <LastPage />}
+                          label={HEADER_TOGGLE_LABEL}
+                          onClick={() => toggleNavigation()}
+                        />
+                      </Space>
+                      {hasNavigation && (
+                        <>
+                          <Divider mb="u3" appearance="light" />
+                          <SelectorContainer
+                            spec={spec}
+                            ml="large"
+                            mr="large"
+                          />
+                        </>
+                      )}
+                    </>
                   )}
-                </Layout>
-              </Page>
-            </LodeContext.Provider>
+                  {hasNavigation && <SideNav headless={headless} spec={spec} />}
+                </AsideBorder>
+                <AppRouter
+                  specKey={spec.key}
+                  api={spec.api!}
+                  specs={specs}
+                  toggleNavigation={toggleNavigation}
+                />
+              </Layout>
+            </Page>
           </ErrorBoundary>
         )}
       </ComponentsProvider>
@@ -249,11 +220,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

@@ -26,21 +26,15 @@
 
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
-import {
-  RunItProvider,
-  defaultConfigurator,
-  initRunItSdk,
-  loadSpecsFromVersions,
-  RunItConfigKey,
-  RunItNoConfig,
-} from '@looker/run-it'
-import type { IAPIMethods } from '@looker/sdk-rtl'
-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 { useLocation } from 'react-router'
 
-import ApiExplorer from './ApiExplorer'
+import { ApiExplorer } from './ApiExplorer'
 import { store } from './state'
-import { StandaloneEnvAdaptor } from './utils'
+import { oAuthPath, ApixAdaptor } from './utils'
 import { Loader } from './components'
 
 export interface StandaloneApiExplorerProps {
@@ -48,65 +42,48 @@ export interface StandaloneApiExplorerProps {
   versionsUrl: string
 }
 
-const standaloneEnvAdaptor = new StandaloneEnvAdaptor()
-
-const loadVersions = async (current: string) => {
-  const data = await standaloneEnvAdaptor.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 chosenSdk: IAPIMethods = initRunItSdk(defaultConfigurator)
+  const { looker_url } = (
+    sdk.authSession.settings as OAuthConfigProvider
+  ).getStoredConfig()
 
   return (
     <Provider store={store}>
-      <RunItProvider
-        sdk={chosenSdk}
-        configurator={defaultConfigurator}
-        basePath="/api/4.0"
-      >
-        <>
-          {specs ? (
-            <ApiExplorer
-              specs={specs}
-              envAdaptor={standaloneEnvAdaptor}
-              headless={headless}
-              setVersionsUrl={setCurrentVersionsUrl}
-            />
-          ) : (
-            <Loader themeOverrides={standaloneEnvAdaptor.themeOverrides()} />
-          )}
-        </>
+      <RunItProvider basePath="/api/4.0">
+        {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/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 (