@looker/api-explorer 0.9.18 → 0.9.24

package/src/components/SideNav/SideNavTypeTags.spec.tsx

@@ -0,0 +1,79 @@
+/*
+
+ 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 pick from 'lodash/pick'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { api } from '../../test-data'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
+import { SideNavTypeTags } from './SideNavTypeTags'
+
+describe('SideNavTypeTags', () => {
+  const tags = pick(api.typeTags, ['ApiAuth', 'Dashboard'])
+  test('it renders a provided tag and its methods', () => {
+    renderWithRouterAndReduxProvider(
+      <SideNavTypeTags tags={tags} specKey={'3.1'} />
+    )
+    const tag = screen.getByText('Dashboard')
+    const tagContent = 'CreateDashboardFilter'
+    expect(screen.queryByText(tagContent)).not.toBeInTheDocument()
+    userEvent.click(tag)
+    expect(screen.getByText(tagContent)).toBeInTheDocument()
+    const methods = screen.getAllByRole('link')
+    expect(methods).toHaveLength(Object.keys(tags.Dashboard).length)
+  })
+
+  test('tags are rendered initially collapsed and expand when clicked', () => {
+    renderWithRouterAndReduxProvider(
+      <SideNavTypeTags tags={tags} specKey={'3.1'} />
+    )
+
+    const allTags = screen.getAllByText(/ApiAuth|Dashboard/)
+    expect(allTags).toHaveLength(2)
+    expect(screen.queryByText('AccessToken')).not.toBeInTheDocument()
+    expect(screen.queryByText('CreateDashboardFilter')).not.toBeInTheDocument()
+    userEvent.click(allTags[0])
+    expect(screen.getByText('AccessToken')).toBeInTheDocument()
+    expect(screen.queryByText('CreateDashboardFilter')).not.toBeInTheDocument()
+  })
+
+  test('tag is expanded if specified in route', () => {
+    const tags = pick(api.typeTags, ['ApiAuth', 'DataAction'])
+    renderWithRouterAndReduxProvider(
+      <SideNavTypeTags tags={tags} specKey={'3.1'} />,
+      ['/3.1/types/DataAction']
+    )
+
+    const allTags = screen.getAllByText(/^(ApiAuth|DataAction)$/)
+    expect(allTags).toHaveLength(2)
+    expect(screen.queryByText('AccessToken')).not.toBeInTheDocument()
+    expect(screen.getAllByRole('link')).toHaveLength(
+      Object.keys(tags.DataAction).length
+    )
+  })
+})

package/src/{context/search/SearchContext.ts → components/SideNav/SideNavTypeTags.tsx}

@@ -24,19 +24,32 @@
 
  */
 
-import { createContext, Dispatch } from 'react'
-import { SearchState, SearchAction, defaultSearchState } from '../../reducers'
-
-interface SearchContextProps {
-  searchSettings: SearchState
-  setSearchSettings: Dispatch<SearchAction>
-}
-
-export const defaultSearchContextValue: SearchContextProps = {
-  searchSettings: defaultSearchState,
-  setSearchSettings: () => undefined,
+import React from 'react'
+import styled from 'styled-components'
+import type { TypeTagList } from '@looker/sdk-codegen'
+import { SideNavTypes } from './SideNavTypes'
+
+interface TypeTagsProps {
+  tags: TypeTagList
+  specKey: string
+  defaultOpen?: boolean
+  className?: string
 }
 
-export const SearchContext = createContext<SearchContextProps>(
-  defaultSearchContextValue
-)
+export const SideNavTypeTags = styled(
+  ({ tags, specKey, className, defaultOpen }: TypeTagsProps) => (
+    <div className={className}>
+      {Object.keys(tags).map((tag) => (
+        <SideNavTypes
+          key={tag}
+          defaultOpen={defaultOpen}
+          types={tags[tag]}
+          tag={tag}
+          specKey={specKey}
+        />
+      ))}
+    </div>
+  )
+)`
+  padding: 0 ${({ theme }) => theme.space.large};
+`

package/src/components/SideNav/SideNavTypes.spec.tsx

@@ -27,32 +27,39 @@ import React from 'react'
 import { screen } from '@testing-library/react'
 
 import { api } from '../../test-data'
-import { renderWithSearchAndRouter } from '../../test-utils'
+import {
+  createTestStore,
+  renderWithRouterAndReduxProvider,
+} from '../../test-utils'
 import { SideNavTypes } from './SideNavTypes'
 
 describe('SideNavTypes', () => {
   test('it renders provided types', () => {
-    renderWithSearchAndRouter(
+    renderWithRouterAndReduxProvider(
       <SideNavTypes
         specKey={'3.1'}
         types={{
           Dashboard: api.types.Dashboard,
         }}
+        tag="Dashboard"
       />
     )
-    const dashboardType = screen.getByRole('link')
-    expect(dashboardType).toHaveAttribute('href', '/3.1/types/Dashboard')
+    const h4 = screen.getByRole('heading', { level: 4 })
+    expect(h4).toHaveTextContent('Dashboard')
   })
 
   test('it highlights text matching search pattern', () => {
-    renderWithSearchAndRouter(
+    const store = createTestStore({ settings: { searchPattern: 'dash' } })
+    renderWithRouterAndReduxProvider(
       <SideNavTypes
         specKey={'3.1'}
         types={{
           Dashboard: api.types.Dashboard,
         }}
+        tag="Dashboard"
       />,
-      'dash'
+      undefined,
+      store
     )
     const match = screen.getByText(/dash/i)
     expect(match).toContainHTML('<span class="hi">Dash</span>')

package/src/components/SideNav/SideNavTypes.tsx

@@ -24,61 +24,112 @@
 
  */
 
-import React, { FC, useContext } from 'react'
-import { Heading } from '@looker/components'
-import { TypeList, IntrinsicType } from '@looker/sdk-codegen'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
+import { Accordion2, Heading } from '@looker/components'
+import type { TypeList } from '@looker/sdk-codegen'
+import { useHistory, useRouteMatch } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+
 import { Link } from '../Link'
 import { buildTypePath, highlightHTML } from '../../utils'
-import { SearchContext } from '../../context'
+import { selectSearchPattern } from '../../state'
 
-interface TypeProps {
-  specKey: string
+interface TypesProps {
   types: TypeList
+  tag: string
+  specKey: string
+  className?: string
+  defaultOpen?: boolean
 }
 
-export const SideNavTypes: FC<TypeProps> = ({ types, specKey }) => {
-  const {
-    searchSettings: { pattern },
-  } = useContext(SearchContext)
-
-  return (
-    <>
-      {Object.values(types)
-        .filter((type) => !(type instanceof IntrinsicType))
-        .map((type) => (
-          <SideNavLink
-            key={type.name}
-            to={`${buildTypePath(specKey, type.name)}`}
-          >
-            <Heading as="h5" truncate>
-              {highlightHTML(pattern, type.name)}
-            </Heading>
-          </SideNavLink>
-        ))}
-    </>
-  )
-}
+export const SideNavTypes = styled(
+  ({ className, types, tag, specKey, defaultOpen = false }: TypesProps) => {
+    const searchPattern = useSelector(selectSearchPattern)
+    const match = useRouteMatch<{ typeTag: string }>(
+      `/:specKey/types/:typeTag/:typeName?`
+    )
+    const [isOpen, setIsOpen] = useState(defaultOpen)
+    const history = useHistory()
 
-const SideNavLink = styled(Link)`
-  display: block;
-  padding: ${({
-    theme: {
-      space: { xsmall, large },
-    },
-  }) => `${xsmall} ${large}`};
-
-  &:hover,
-  &:focus {
-    ${Heading} {
-      color: ${({ theme }) => theme.colors.key};
+    const handleOpen = () => {
+      const _isOpen = !isOpen
+      setIsOpen(_isOpen)
+      if (_isOpen) history.push(`/${specKey}/types/${tag}`)
     }
+
+    useEffect(() => {
+      const status = match
+        ? defaultOpen || match.params.typeTag === tag
+        : defaultOpen
+      setIsOpen(status)
+    }, [defaultOpen])
+
+    /* TODO: Fix highlighting. It is applied but it is somehow being overridden */
+    return (
+      <Accordion2
+        isOpen={isOpen}
+        toggleOpen={handleOpen}
+        className={className}
+        label={
+          <Heading as="h4" fontSize="small" py="xsmall">
+            {highlightHTML(searchPattern, tag)}
+          </Heading>
+        }
+      >
+        <ul>
+          {Object.values(types).map((type) => (
+            <li key={type.name}>
+              <Link to={`${buildTypePath(specKey, tag, type.name)}`}>
+                {highlightHTML(searchPattern, type.name)}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </Accordion2>
+    )
   }
+)`
+  font-family: ${({ theme }) => theme.fonts.brand};
 
-  &.active {
-    ${Heading} {
+  [aria-controls]:hover,
+  [aria-expanded='true'] {
+    h4,
+    svg {
       color: ${({ theme }) => theme.colors.key};
-      font-weight: ${({ theme }) => theme.fontWeights.semiBold};
+    }
+  }
+
+  [aria-expanded='true'] h4 {
+    font-weight: ${({ theme }) => theme.fontWeights.semiBold};
+  }
+
+  ul {
+    border-left: dashed 1px ${({ theme }) => theme.colors.ui2};
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    padding-left: ${({ theme }) => theme.space.xxsmall};
+    padding-top: ${({ theme }) => theme.space.xxsmall};
+  }
+
+  [aria-current] {
+    background: ${({ theme }) => theme.colors.ui1};
+    font-weight: ${({ theme }) => theme.fontWeights.semiBold};
+  }
+
+  ${Link} {
+    border-radius: ${({ theme }) => theme.radii.medium};
+    display: block;
+    overflow: hidden;
+    padding: ${({ theme }) => theme.space.xsmall};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus,
+    &.active {
+      background: ${({ theme }) => theme.colors.ui1};
     }
   }
 `

package/src/components/SideNav/{searchUtils.tsx → searchUtils.ts}

@@ -25,10 +25,10 @@
  */
 
 import { useState, useEffect } from 'react'
-import { TagList, TypeList } from '@looker/sdk-codegen'
+import type { TagList, TypeList } from '@looker/sdk-codegen'
 
-export const useDebounce = (value: any, delay: number) => {
-  const [debouncedValue, setDebouncedValue] = useState()
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState(value)
   useEffect(() => {
     // Update debounced value only once delay has been elapsed
     const handler = setTimeout(() => {

package/src/components/common/Loader.tsx

@@ -23,7 +23,8 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import {
   ComponentsProvider,
   Flex,
@@ -31,7 +32,7 @@ import {
   Heading,
   ProgressCircular,
 } from '@looker/components'
-import { ThemeOverrides } from '../../utils'
+import type { ThemeOverrides } from '@looker/extension-utils'
 
 export interface LoaderProps {
   themeOverrides: ThemeOverrides

package/src/components/common/common.tsx

@@ -23,23 +23,13 @@
  SOFTWARE.
 
  */
-import React, { useEffect, FC } from 'react'
-import styled from 'styled-components'
-import { Heading, Section, SectionProps } from '@looker/components'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import type { SectionProps } from '@looker/components'
+import { Section } from '@looker/components'
 import { useWindowSize } from '../../utils'
 import { HEADER_REM } from '../Header'
 
-/**
- * Common styled components to be used across the whole library
- */
-
-export const ApixHeading = styled(Heading)``
-
-ApixHeading.defaultProps = {
-  mb: 'xsmall',
-  pt: 'xsmall',
-}
-
 export const REM_TO_PX = 16
 
 /**
@@ -58,7 +48,7 @@ export const ApixSection: FC<SectionProps> = (props: any) => {
       {...props}
       id="top"
       p="xxlarge"
-      style={{ height: `${sectionH}px`, overflow: 'auto' }}
+      style={{ height: `${sectionH}px`, overflow: 'auto', borderTop: '0px' }}
     />
   )
 }

package/src/components/common/index.ts

@@ -23,5 +23,5 @@
  SOFTWARE.
 
  */
-export { ApixHeading, ApixSection } from './common'
-export { Loader } from './Loader'
+export * from './common'
+export * from './Loader'

package/src/components/index.ts

@@ -23,10 +23,10 @@
  SOFTWARE.
 
  */
-export { ApixHeading, ApixSection, Loader } from './common'
+export { ApixSection, Loader } from './common'
 export { DocActivityType } from './DocActivityType'
 export { DocCode } from './DocCode'
-export { DocMethodSummary } from './DocMethodSummary'
+export { DocMethodSummary, DocSummaryStatus } from './DocMethodSummary'
 export { DocMarkdown } from './DocMarkdown'
 export { DocPseudo } from './DocPseudo'
 export { DocRateLimited } from './DocRateLimited'
@@ -37,10 +37,11 @@ export { DocSdkUsage } from './DocSdkUsage'
 export { DocSource } from './DocSource'
 export { DocStatus } from './DocStatus'
 export { DocTitle } from './DocTitle'
-export { Header } from './Header'
+export { Header, HEADER_TOGGLE_LABEL } from './Header'
 export { SideNav } from './SideNav'
 export { ExploreType, ExploreProperty } from './ExploreType'
-export { CollapserCard } from './Collapser'
 export { DocSchema } from './DocSchema'
+export { DocTypeSummary } from './DocTypeSummary'
 export { Link } from './Link'
 export { ErrorBoundary } from './ErrorBoundary'
+export { SelectorContainer } from './SelectorContainer'

package/src/{context/lode/index.ts → index.ts}

@@ -23,4 +23,7 @@
  SOFTWARE.
 
  */
-export { defaultLodeContextValue, LodeContext } from './LodeContext'
+export * from './ApiExplorer'
+export * from './StandaloneApiExplorer'
+export * from './components'
+export * from './state'

package/src/reducers/index.ts

@@ -24,4 +24,3 @@
 
  */
 export * from './spec'
-export * from './search'

package/src/reducers/spec/actions.ts

@@ -24,7 +24,7 @@
 
  */
 
-import { ApiModel } from '@looker/sdk-codegen'
+import type { ApiModel } from '@looker/sdk-codegen'
 
 export enum Actions {
   SELECT_SPEC = 'SELECT_SPEC',

package/src/reducers/spec/reducer.spec.ts

@@ -26,7 +26,8 @@
 import { ApiModel } from '@looker/sdk-codegen'
 
 import { specs } from '../../test-data'
-import { specReducer, initDefaultSpecState, Actions, SelectSpecAction } from '.'
+import type { SelectSpecAction } from '.'
+import { specReducer, initDefaultSpecState, Actions } from '.'
 
 describe('Spec Reducer', () => {
   test('it selects a spec', () => {

package/src/reducers/spec/reducer.ts

@@ -24,9 +24,11 @@
 
  */
 
-import { ApiModel, SpecItem, SpecList } from '@looker/sdk-codegen'
-import { ApiUpdatePayload } from './actions'
-import { SpecAction, Actions } from '.'
+import type { SpecItem, SpecList } from '@looker/sdk-codegen'
+import { ApiModel } from '@looker/sdk-codegen'
+import type { ApiUpdatePayload } from './actions'
+import type { SpecAction } from '.'
+import { Actions } from '.'
 
 export interface SpecState {
   specList: SpecList

package/src/reducers/spec/utils.spec.ts

@@ -23,7 +23,7 @@
  SOFTWARE.
 
  */
-import { SpecList } from '@looker/sdk-codegen'
+import type { SpecList } from '@looker/sdk-codegen'
 import omit from 'lodash/omit'
 
 import { specs } from '../../test-data'

package/src/reducers/spec/utils.ts

@@ -24,10 +24,11 @@
 
  */
 
-import { SpecList } from '@looker/sdk-codegen'
-import { Location as HLocation } from 'history'
+import type { SpecList } from '@looker/sdk-codegen'
+import type { Location as HLocation } from 'history'
+import { OAuthSession } from '@looker/sdk-rtl'
 import { diffPath, oAuthPath } from '../../utils'
-import { SpecState } from './reducer'
+import type { SpecState } from './reducer'
 
 export type AbstractLocation = HLocation | Location
 
@@ -76,7 +77,13 @@ export const getDefaultSpecKey = (specs: SpecList): string => {
  * @param specs to use to find the default spec key
  */
 export const getSpecKey = (location: AbstractLocation, specs?: SpecList) => {
-  const pathName = location.pathname
+  let pathName = location.pathname
+  if (pathName === `/${oAuthPath}`) {
+    const returnUrl = sessionStorage.getItem(OAuthSession.returnUrlKey)
+    if (returnUrl) {
+      pathName = returnUrl
+    }
+  }
   const pathNodes = pathName.split('/')
   let specKey = ''
   if (
@@ -95,7 +102,7 @@ export const getSpecKey = (location: AbstractLocation, specs?: SpecList) => {
 /**
  * Creates a default state object with the spec matching the specKey defined
  * in the url or the default criteria in getDefaultSpecKey
- * @param specs A collection of specs
+ * @param specList A collection of specs
  * @param location Standalone or extension location
  * @returns An object to be used as default state
  */
@@ -104,8 +111,13 @@ export const initDefaultSpecState = (
   location: AbstractLocation
 ): SpecState => {
   const specKey = getSpecKey(location, specList)
+  // Handle bad spec in the URL. Fall back to 4.0
+  let spec = specList[specKey]
+  if (!spec) {
+    spec = specList['4.0']
+  }
   return {
     specList,
-    spec: specList[specKey],
+    spec,
   }
 }

package/src/routes/AppRouter.tsx

@@ -23,20 +23,31 @@
  SOFTWARE.
 
  */
-import React, { FC, useContext } from 'react'
+
+import type { FC } from 'react'
+import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
-import { ApiModel, SpecList } from '@looker/sdk-codegen'
-import { OAuthScene, RunItContext } from '@looker/run-it'
+import type { ApiModel, SpecList } from '@looker/sdk-codegen'
+import type { RunItSetter } from '@looker/run-it'
+import type { IEnvironmentAdaptor } from '@looker/extension-utils'
 
-import { HomeScene, MethodScene, TagScene, TypeScene } from '../scenes'
+import {
+  HomeScene,
+  MethodScene,
+  MethodTagScene,
+  TypeScene,
+  TypeTagScene,
+} from '../scenes'
 import { DiffScene } from '../scenes/DiffScene'
-import { diffPath, oAuthPath } from '../utils'
+import { diffPath } from '../utils'
 
 interface AppRouterProps {
   api: ApiModel
   specKey: string
   specs: SpecList
   toggleNavigation: (target?: boolean) => void
+  adaptor: IEnvironmentAdaptor
+  setVersionsUrl: RunItSetter
 }
 
 export const AppRouter: FC<AppRouterProps> = ({
@@ -44,17 +55,12 @@ export const AppRouter: FC<AppRouterProps> = ({
   api,
   specs,
   toggleNavigation,
+  adaptor,
+  setVersionsUrl,
 }) => {
-  const { sdk } = useContext(RunItContext)
-  const maybeOauth = sdk && sdk.apiVersion === '4.0'
   return (
     <Switch>
       <Redirect from="/" to={`/${specKey}/`} exact />
-      {maybeOauth && (
-        <Route path={`/${oAuthPath}`}>
-          <OAuthScene />
-        </Route>
-      )}
       <Route path={`/${diffPath}/:l?/:r?`}>
         <DiffScene specs={specs} toggleNavigation={toggleNavigation} />
       </Route>
@@ -62,12 +68,19 @@ export const AppRouter: FC<AppRouterProps> = ({
         <HomeScene api={api} />
       </Route>
       <Route path="/:specKey/methods/:methodTag" exact>
-        <TagScene api={api} />
+        <MethodTagScene api={api} />
       </Route>
       <Route path="/:specKey/methods/:methodTag/:methodName">
-        <MethodScene api={api} />
+        <MethodScene
+          api={api}
+          adaptor={adaptor}
+          setVersionsUrl={setVersionsUrl}
+        />
+      </Route>
+      <Route path="/:specKey/types/:typeTag" exact>
+        <TypeTagScene api={api} />
       </Route>
-      <Route path="/:specKey/types/:typeName">
+      <Route path="/:specKey/types/:typeTag/:typeName">
         <TypeScene api={api} />
       </Route>
     </Switch>