@looker/api-explorer 0.9.18 → 0.9.24

package/src/scenes/{TagScene/TagScene.tsx → MethodTagScene/MethodTagScene.tsx}

@@ -23,34 +23,27 @@
  SOFTWARE.
 
  */
-import React, { FC, useEffect, useState } from 'react'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useParams } from 'react-router-dom'
 import { Grid, ButtonToggle, ButtonItem } from '@looker/components'
-import { ApiModel } from '@looker/sdk-codegen'
-import { useParams, useHistory } from 'react-router-dom'
+import type { ApiModel } from '@looker/sdk-codegen'
 import { ApixSection, DocTitle, DocMethodSummary, Link } from '../../components'
 import { buildMethodPath } from '../../utils'
 import { getOperations } from './utils'
 
-interface TagSceneProps {
+interface MethodTagSceneProps {
   api: ApiModel
 }
 
-interface TagSceneParams {
+interface MethodTagSceneParams {
   specKey: string
   methodTag: string
 }
 
-export const TagScene: FC<TagSceneProps> = ({ api }) => {
-  const { specKey, methodTag } = useParams<TagSceneParams>()
+export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
+  const { specKey, methodTag } = useParams<MethodTagSceneParams>()
   const history = useHistory()
-  if (!(methodTag in api.tags)) {
-    history.push('/methods')
-  }
-  const methods = api.tags[methodTag]
-  const tag = Object.values(api.spec.tags!).find(
-    (tag) => tag.name === methodTag
-  )!
-  const operations = getOperations(methods)
   const [value, setValue] = useState('ALL')
 
   useEffect(() => {
@@ -58,6 +51,20 @@ export const TagScene: FC<TagSceneProps> = ({ api }) => {
     setValue('ALL')
   }, [methodTag])
 
+  const methods = api.tags[methodTag]
+  useEffect(() => {
+    if (!methods) {
+      history.push(`/${specKey}/methods`)
+    }
+  }, [history, methods])
+  if (!methods) {
+    return <></>
+  }
+  const tag = Object.values(api.spec.tags!).find(
+    (tag) => tag.name === methodTag
+  )!
+  const operations = getOperations(methods)
+
   return (
     <ApixSection>
       <DocTitle>{`${tag.name}: ${tag.description}`}</DocTitle>
@@ -73,7 +80,7 @@ export const TagScene: FC<TagSceneProps> = ({ api }) => {
       </ButtonToggle>
       {Object.values(methods).map(
         (method, index) =>
-          (value === method.httpMethod || value === 'ALL') && (
+          (value === 'ALL' || value === method.httpMethod) && (
             <Link
               key={index}
               to={buildMethodPath(specKey, tag.name, method.name)}

package/src/{components/Collapser → scenes/MethodTagScene}/index.ts

@@ -23,5 +23,4 @@
  SOFTWARE.
 
  */
-
-export { CollapserCard } from './CollapserCard'
+export { MethodTagScene } from './MethodTagScene'

package/src/scenes/{TagScene → MethodTagScene}/utils.spec.ts

@@ -26,7 +26,7 @@
 import { api } from '../../test-data'
 import { getOperations } from './utils'
 
-describe('TagScene utils', () => {
+describe('MethodTagScene utils', () => {
   test('getOperations returns a unique list of operations', () => {
     const actual = getOperations(api.tags.Query)
     expect(actual).toHaveLength(new Set(actual).size)

package/src/scenes/{TagScene → MethodTagScene}/utils.ts

@@ -23,7 +23,7 @@
  SOFTWARE.
 
  */
-import { MethodList } from '@looker/sdk-codegen'
+import type { MethodList } from '@looker/sdk-codegen'
 
 /**
  * Given a list of methods it returns a list of distinct operations

package/src/scenes/TypeScene/TypeScene.tsx

@@ -24,9 +24,11 @@
 
  */
 
-import React, { FC } from 'react'
-import { typeRefs, methodRefs, ApiModel } from '@looker/sdk-codegen'
-import { useParams } from 'react-router-dom'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import type { ApiModel } from '@looker/sdk-codegen'
+import { typeRefs, methodRefs } from '@looker/sdk-codegen'
+import { useHistory, useParams } from 'react-router-dom'
 import { Space, Box } from '@looker/components'
 
 import {
@@ -51,28 +53,38 @@ interface DocTypeParams {
 export const TypeScene: FC<DocTypeProps> = ({ api }) => {
   const { specKey, typeName } = useParams<DocTypeParams>()
   const type = api.types[typeName]
-  const typesUsed = typeRefs(api, type.customTypes)
-  const methodsUsedBy = methodRefs(api, type.methodRefs)
-  const typesUsedBy = typeRefs(api, type.parentTypes)
+  const history = useHistory()
+  const typesUsed = typeRefs(api, type?.customTypes)
+  const methodsUsedBy = methodRefs(api, type?.methodRefs)
+  const typesUsedBy = typeRefs(api, type?.parentTypes)
+  useEffect(() => {
+    if (!type) {
+      history.push(`/${specKey}/types`)
+    }
+  }, [history, specKey, type])
 
   return (
-    <ApixSection>
-      <Space>
-        <DocTitle>{type.name}</DocTitle>
-        <DocSource type={type} />
-      </Space>
-      <Box pb="xlarge">
-        <ExploreType type={type} />
-      </Box>
-      <DocReferences
-        typesUsed={typesUsed}
-        typesUsedBy={typesUsedBy}
-        methodsUsedBy={methodsUsedBy}
-        api={api}
-        specKey={specKey}
-      />
-      <DocSDKs type={type} api={api} />
-      <DocSchema object={type.schema} />
-    </ApixSection>
+    <>
+      {type && (
+        <ApixSection>
+          <Space>
+            <DocTitle>{type.name}</DocTitle>
+            <DocSource type={type} />
+          </Space>
+          <Box pb="xlarge">
+            <ExploreType api={api} type={type} />
+          </Box>
+          <DocReferences
+            typesUsed={typesUsed}
+            typesUsedBy={typesUsedBy}
+            methodsUsedBy={methodsUsedBy}
+            api={api}
+            specKey={specKey}
+          />
+          <DocSDKs type={type} api={api} />
+          <DocSchema object={type.schema} />
+        </ApixSection>
+      )}
+    </>
   )
 }

package/src/scenes/TypeTagScene/TypeTagScene.spec.tsx

@@ -0,0 +1,103 @@
+/*
+
+ 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 { Route } from 'react-router-dom'
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { api } from '../../test-data'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
+import { TypeTagScene } from './TypeTagScene'
+
+const opBtnNames = /ALL|SPECIFICATION|WRITE|REQUEST|ENUMERATED/
+
+const path = '/:specKey/types/:typeTag'
+
+describe('TypeTagScene', () => {
+  Element.prototype.scrollTo = jest.fn()
+
+  test('it renders type buttons and all methods for a given type tag', () => {
+    renderWithRouterAndReduxProvider(
+      <Route path={path}>
+        <TypeTagScene api={api} />
+      </Route>,
+      ['/3.1/types/Dashboard']
+    )
+    expect(
+      screen.getAllByRole('button', {
+        name: opBtnNames,
+      })
+    ).toHaveLength(4)
+    expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(
+      Object.keys(api.typeTags.Dashboard).length
+    )
+    expect(screen.getByText('DashboardBase').closest('a')).toHaveAttribute(
+      'href',
+      '/3.1/types/Dashboard/DashboardBase'
+    )
+  })
+
+  test('it only renders operation buttons for operations that exist under that tag', () => {
+    renderWithRouterAndReduxProvider(
+      <Route path={path}>
+        <TypeTagScene api={api} />
+      </Route>,
+      ['/3.1/types/DataAction']
+    )
+    expect(
+      screen.getAllByRole('button', {
+        name: opBtnNames,
+      })
+    ).toHaveLength(2)
+  })
+
+  test('it filters methods by operation type', async () => {
+    renderWithRouterAndReduxProvider(
+      <Route path={path}>
+        <TypeTagScene api={api} />
+      </Route>,
+      ['/3.1/types/Look']
+    )
+    expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(
+      Object.keys(api.typeTags.Look).length
+    )
+
+    expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(
+      Object.keys(api.typeTags.Look).length
+    )
+
+    /** Filter by SPECIFICATION */
+    userEvent.click(screen.getByRole('button', { name: 'SPECIFICATION' }))
+    await waitFor(() => {
+      expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(5)
+    })
+    /** Filter by REQUEST */
+    userEvent.click(screen.getByRole('button', { name: 'REQUEST' }))
+    await waitFor(() => {
+      expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(2)
+    })
+  })
+})

package/src/scenes/TypeTagScene/TypeTagScene.tsx

@@ -0,0 +1,93 @@
+/*
+
+ 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 type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { Grid, ButtonToggle, ButtonItem } from '@looker/components'
+import type { ApiModel } from '@looker/sdk-codegen'
+import { useParams, useHistory } from 'react-router-dom'
+import { ApixSection, DocTitle, DocTypeSummary, Link } from '../../components'
+import { buildTypePath } from '../../utils'
+import { getMetaTypes } from './utils'
+
+interface TypeTagSceneProps {
+  api: ApiModel
+}
+
+interface TypeTagSceneParams {
+  specKey: string
+  typeTag: string
+}
+
+export const TypeTagScene: FC<TypeTagSceneProps> = ({ api }) => {
+  const { specKey, typeTag } = useParams<TypeTagSceneParams>()
+  const history = useHistory()
+  const [value, setValue] = useState('ALL')
+
+  useEffect(() => {
+    /** Reset ButtonToggle value on route change */
+    setValue('ALL')
+  }, [typeTag])
+
+  const types = api.typeTags[typeTag]
+  useEffect(() => {
+    if (!types) {
+      history.push(`/${specKey}/types`)
+    }
+  }, [history, types])
+
+  if (!types) {
+    return <></>
+  }
+
+  const tag = Object.values(api.spec.tags!).find((tag) => tag.name === typeTag)!
+  const metaTypes = getMetaTypes(types)
+  return (
+    <ApixSection>
+      <DocTitle>{`${tag.name}: ${tag.description}`}</DocTitle>
+      <ButtonToggle mb="small" mt="xlarge" value={value} onChange={setValue}>
+        <ButtonItem key="ALL" px="large" py="xsmall">
+          ALL
+        </ButtonItem>
+        {metaTypes.map((op) => (
+          <ButtonItem key={op} px="large" py="xsmall">
+            {op}
+          </ButtonItem>
+        ))}
+      </ButtonToggle>
+      {Object.values(types).map(
+        (type, index) =>
+          (value === 'ALL' ||
+            value === type.metaType.toString().toUpperCase()) && (
+            <Link key={index} to={buildTypePath(specKey, tag.name, type.name)}>
+              <Grid columns={1} py="xsmall">
+                <DocTypeSummary key={index} type={type} />
+              </Grid>
+            </Link>
+          )
+      )}
+    </ApixSection>
+  )
+}

package/src/scenes/{TagScene → TypeTagScene}/index.ts

@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { TagScene } from './TagScene'
+export { TypeTagScene } from './TypeTagScene'

package/src/{state/reducers.ts → scenes/TypeTagScene/utils.spec.ts}

@@ -23,11 +23,12 @@
  SOFTWARE.
 
  */
-import { combineReducers } from 'redux'
-import { settingsReducer } from './settings'
-
-export const reducers = combineReducers({
-  settings: settingsReducer,
+import { api } from '../../test-data'
+import { getMetaTypes } from './utils'
+
+describe('TypeTagScene utils', () => {
+  test('getMetaTypes returns a unique list of MetaTypes', () => {
+    const actual = getMetaTypes(api.typeTags.Query)
+    expect(actual).toHaveLength(4)
+  })
 })
-
-export type RootState = ReturnType<typeof reducers>

package/src/{hooks/use_actions_hook.ts → scenes/TypeTagScene/utils.ts}

@@ -23,14 +23,17 @@
  SOFTWARE.
 
  */
-import { useMemo } from 'react'
-import { useDispatch } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import { actionCreators } from '../state/'
-
-export const useActions = () => {
-  const dispatch = useDispatch()
-  return useMemo(() => {
-    return bindActionCreators(actionCreators, dispatch)
-  }, [dispatch])
+
+import type { TypeList } from '@looker/sdk-codegen'
+
+/**
+ * Given a list of types it returns a list of distinct types
+ * @param types A list of types
+ */
+export const getMetaTypes = (types: TypeList) => {
+  const typeSet = new Set<string>()
+  Object.values(types).forEach((type) => {
+    typeSet.add(type.metaType.toString().toUpperCase())
+  })
+  return Array.from(typeSet.values())
 }

package/src/scenes/index.ts

@@ -26,4 +26,5 @@
 export { HomeScene } from './HomeScene'
 export { MethodScene } from './MethodScene'
 export { TypeScene } from './TypeScene'
-export { TagScene } from './TagScene'
+export { MethodTagScene } from './MethodTagScene'
+export { TypeTagScene } from './TypeTagScene'

package/src/state/index.ts

@@ -23,6 +23,6 @@
  SOFTWARE.
 
  */
-export * as actionCreators from './action_creators'
-export * from './settings'
 export * from './store'
+export * from './settings'
+export * from './lodes'

package/src/{reducers/search → state/lodes}/index.ts

@@ -23,5 +23,5 @@
  SOFTWARE.
 
  */
-export * from './reducer'
-export * from './actions'
+export * from './selectors'
+export * from './slice'

package/src/state/lodes/sagas.spec.ts

@@ -0,0 +1,92 @@
+/*
+
+ 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 ReduxSagaTester from 'redux-saga-tester'
+import { examples, declarations } from '../../test-data'
+import * as lodeUtils from '../../utils/lodeUtils'
+import * as sagas from './sagas'
+import { lodeActions, lodesSlice } from './slice'
+
+describe('Lode sagas', () => {
+  let sagaTester: ReduxSagaTester<any>
+
+  beforeEach(() => {
+    jest.resetAllMocks()
+    sagaTester = new ReduxSagaTester({
+      initialState: { lodes: { examples, declarations } },
+      reducers: {
+        lodes: lodesSlice.reducer,
+      },
+    })
+    sagaTester.start(sagas.saga)
+  })
+
+  describe('initSaga', () => {
+    const { initLodesAction, initLodesSuccessAction, initLodesFailureAction } =
+      lodeActions
+    const examplesLodeUrl = 'https://foo.com/examples.json'
+    const declarationsLodeUrl = 'https://foo.com/declarations.json'
+
+    test('sends initLodesSuccessAction with examples and declarations on success', async () => {
+      jest
+        .spyOn(lodeUtils, 'getLoded')
+        .mockResolvedValueOnce({ examples, declarations })
+
+      sagaTester.dispatch(
+        initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
+      )
+
+      await sagaTester.waitFor('lodes/initLodesSuccessAction')
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(
+        initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
+      )
+      expect(calledActions[1]).toEqual(
+        initLodesSuccessAction({
+          examples,
+          declarations,
+        })
+      )
+    })
+
+    test('sends initLodesFailureAction on error', async () => {
+      const error = new Error('boom')
+      jest.spyOn(lodeUtils, 'getLoded').mockRejectedValueOnce(error)
+
+      sagaTester.dispatch(
+        initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
+      )
+
+      await sagaTester.waitFor('lodes/initLodesFailureAction')
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(
+        initLodesAction({ examplesLodeUrl, declarationsLodeUrl })
+      )
+      expect(calledActions[1]).toEqual(initLodesFailureAction(error))
+    })
+  })
+})

package/src/state/{settings/reducer.ts → lodes/sagas.ts}

@@ -23,27 +23,29 @@
  SOFTWARE.
 
  */
-import { SettingsAction, SettingsActionTypes } from './actions'
-
-export interface SettingsState {
-  sdkLanguage: string
+import { call, put, takeEvery } from 'typed-redux-saga'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+import { getLoded } from '../../utils'
+import type { InitPayload } from './slice'
+import { lodeActions } from './slice'
+
+function* initSaga(action: PayloadAction<InitPayload>) {
+  const { initLodesSuccessAction, initLodesFailureAction } = lodeActions
+  try {
+    const lode = yield* call(
+      getLoded,
+      action.payload.examplesLodeUrl,
+      action.payload.declarationsLodeUrl
+    )
+    yield* put(initLodesSuccessAction(lode))
+  } catch (error: any) {
+    yield* put(initLodesFailureAction(error))
+  }
 }
 
-export const defaultSettingsState: SettingsState = Object.freeze({
-  /** The Python SDK has the most activity on GitHub */
-  sdkLanguage: 'Python',
-})
-
-export const settingsReducer = (
-  state: SettingsState = defaultSettingsState,
-  action: SettingsAction
-): SettingsState => {
-  switch (action.type) {
-    case SettingsActionTypes.SET_SDK_LANGUAGE:
-      return {
-        sdkLanguage: action.payload,
-      }
-    default:
-      return state
-  }
+export function* saga() {
+  const { initLodesAction } = lodeActions
+
+  yield* takeEvery(initLodesAction, initSaga)
 }

package/src/state/{settings/reducer.spec.ts → lodes/selectors.spec.ts}

@@ -23,19 +23,20 @@
  SOFTWARE.
 
  */
-import { SettingsActionTypes } from './actions'
-import { settingsReducer } from './reducer'
-
-describe('settingsReducer', () => {
-  test('it sets the sdk language', () => {
-    const currState = { sdkLanguage: 'Kotlin' }
-    const action = {
-      type: SettingsActionTypes.SET_SDK_LANGUAGE,
-      payload: 'TypeScript',
-    }
-    const state = settingsReducer(currState, action)
-    expect(state).toEqual({
-      sdkLanguage: 'TypeScript',
-    })
+import { createTestStore } from '../../test-utils'
+import { declarations, examples } from '../../test-data'
+import { selectDeclarationsLode, selectExamplesLode } from './selectors'
+
+const testStore = createTestStore({ lodes: { examples, declarations } })
+
+describe('Lode selectors', () => {
+  const state = testStore.getState()
+
+  test('selectExamplesLode selects', () => {
+    expect(selectExamplesLode(state)).toEqual(examples)
+  })
+
+  test('selectDeclarationsLode selects', () => {
+    expect(selectDeclarationsLode(state)).toEqual(declarations)
   })
 })

package/src/state/{settings/actions.ts → lodes/selectors.ts}

@@ -23,14 +23,12 @@
  SOFTWARE.
 
  */
-export enum SettingsActionTypes {
-  SET_SDK_LANGUAGE = 'SET_SDK_LANGUAGE',
-}
+import type { RootState } from '../store'
 
-/** Action for setting the language for SDK references */
-export interface SetSdkLanguageAction {
-  type: SettingsActionTypes.SET_SDK_LANGUAGE
-  payload: string
-}
+const selectLodeState = (state: RootState) => state.lodes
 
-export type SettingsAction = SetSdkLanguageAction
+export const selectExamplesLode = (state: RootState) =>
+  selectLodeState(state).examples
+
+export const selectDeclarationsLode = (state: RootState) =>
+  selectLodeState(state).declarations