@looker/api-explorer 0.9.26 → 0.9.27

package/src/scenes/DiffScene/DocDiff/DiffItem.tsx

@@ -23,12 +23,12 @@
  SOFTWARE.
 
  */
-import type { FC, BaseSyntheticEvent } from 'react'
+import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
-import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
 import { useHistory } from 'react-router'
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
 import styled from 'styled-components'
-import { Accordion2, Box, Card, Grid, Heading } from '@looker/components'
+import { Accordion2, Box, Card, Grid, Heading, Link } from '@looker/components'
 import type { DiffRow } from '@looker/sdk-codegen/src'
 import type { ApiModel, IMethod } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
@@ -42,7 +42,7 @@ interface DiffMethodLinkProps {
   specKey: string
 }
 
-const DiffLink = styled(Heading)`
+const DiffLink = styled(Link)`
   color: ${({ theme }) => theme.colors.ui5};
   cursor: pointer;
   display: block;
@@ -61,19 +61,18 @@ export const DiffMethodLink: FC<DiffMethodLinkProps> = ({
   specKey,
 }) => {
   const history = useHistory()
+
   if (!method) return <Heading as="h4">{`Missing in ${specKey}`}</Heading>
 
-  const handleClick = (e: BaseSyntheticEvent) => {
-    e.stopPropagation()
-    const tag = method.schema.tags[0]
-    const path = `${buildMethodPath(specKey, tag, method.name)}`
-    history.push(path)
-  }
+  const tag = method.schema.tags[0]
+  const path = `${buildMethodPath(specKey, tag, method.name)}`
 
   return (
     <DiffLink
-      as="h4"
-      onClick={handleClick}
+      role="link"
+      onClick={() => {
+        history.push(path)
+      }}
     >{`${method.name} for ${specKey}`}</DiffLink>
   )
 }

package/src/scenes/DiffScene/DocDiff/DocDiff.tsx

@@ -80,9 +80,9 @@ export const DocDiff: FC<DocDiffProps> = ({
             <Heading as="h2">{`${delta.length} differences between ${leftKey} and ${rightKey}`}</Heading>
           </Space>
           <SpaceVertical mt="large" gap="xxsmall">
-            {pageItemData.map((item) => (
+            {pageItemData.map((item, index) => (
               <DiffItem
-                key={item.id}
+                key={index}
                 item={item}
                 leftKey={leftKey}
                 leftSpec={leftSpec}

package/src/scenes/MethodScene/MethodScene.tsx

@@ -36,13 +36,13 @@ import {
 } from '@looker/components'
 import { Beaker } from '@looker/icons'
 import { useHistory, useParams } from 'react-router-dom'
-import type { RunItSetter } from '@looker/run-it'
 import { RunIt, RunItFormKey } from '@looker/run-it'
 import type { ApiModel } from '@looker/sdk-codegen'
 import { typeRefs } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
-
 import type { IEnvironmentAdaptor } from '@looker/extension-utils'
+
+import { getApixAdaptor } from '../../utils'
 import {
   ApixSection,
   DocActivityType,
@@ -62,8 +62,6 @@ import { DocOperation, DocRequestBody } from './components'
 
 interface MethodSceneProps {
   api: ApiModel
-  adaptor: IEnvironmentAdaptor
-  setVersionsUrl: RunItSetter
 }
 
 interface MethodSceneParams {
@@ -77,11 +75,8 @@ const showRunIt = async (adaptor: IEnvironmentAdaptor) => {
   return !!data
 }
 
-export const MethodScene: FC<MethodSceneProps> = ({
-  api,
-  adaptor,
-  setVersionsUrl,
-}) => {
+export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
+  const adaptor = getApixAdaptor()
   const history = useHistory()
   const sdkLanguage = useSelector(selectSdkLanguage)
   const { specKey, methodTag, methodName } = useParams<MethodSceneParams>()
@@ -175,7 +170,6 @@ export const MethodScene: FC<MethodSceneProps> = ({
               sdkLanguage={sdkLanguage}
               api={api}
               method={method}
-              setVersionsUrl={setVersionsUrl}
             />
           </ExtendComponentsThemeProvider>
         </Aside>

package/src/state/index.ts

@@ -26,3 +26,4 @@
 export * from './store'
 export * from './settings'
 export * from './lodes'
+export * from './specs'

package/src/{reducers/spec → state/specs}/index.ts

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

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

@@ -0,0 +1,135 @@
+/*
+
+ 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 { registerTestEnvAdaptor } from '@looker/extension-utils'
+import { initRunItSdk } from '@looker/run-it'
+import cloneDeep from 'lodash/cloneDeep'
+import { ApixAdaptor } from '../../utils'
+
+import { getLoadedSpecs } from '../../test-data'
+import { specActions, specsSlice } from './slice'
+import * as sagas from './sagas'
+
+describe('Specs Sagas', () => {
+  let sagaTester: ReduxSagaTester<any>
+  const adaptor = new ApixAdaptor(initRunItSdk(), '')
+  registerTestEnvAdaptor(adaptor)
+  const specState = getLoadedSpecs()
+  const mockError = new Error('boom')
+
+  beforeEach(() => {
+    jest.resetAllMocks()
+    sagaTester = new ReduxSagaTester({
+      initialState: { specs: { specs: specState } },
+      reducers: {
+        specs: specsSlice.reducer,
+      },
+    })
+    sagaTester.start(sagas.saga)
+  })
+
+  describe('initSaga', () => {
+    const { initSpecsAction, initSpecsFailureAction, initSpecsSuccessAction } =
+      specActions
+
+    it('sends initSpecsFailureAction on error', async () => {
+      jest.spyOn(adaptor, 'fetchSpecList').mockRejectedValueOnce(mockError)
+
+      sagaTester.dispatch(initSpecsAction({ specKey: null }))
+      await sagaTester.waitFor('specs/initSpecsFailureAction')
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(initSpecsAction({ specKey: null }))
+      expect(calledActions[1]).toEqual(initSpecsFailureAction(mockError))
+    })
+
+    it('sends initSpecsSuccessAction on success', async () => {
+      // fetchSpecList returns the test specs
+      jest
+        .spyOn(adaptor, 'fetchSpecList')
+        .mockResolvedValueOnce(cloneDeep(specState))
+
+      const currentSpec = specState['3.1']
+      jest.spyOn(adaptor, 'fetchSpec').mockResolvedValueOnce(currentSpec!)
+
+      // expected state is all the specs with the current spec containing the ApiModel
+      const expected = cloneDeep(specState)
+      expected[currentSpec.key] = currentSpec
+
+      sagaTester.dispatch(initSpecsAction({ specKey: null }))
+      await sagaTester.waitFor('specs/initSpecsSuccessAction')
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(initSpecsAction({ specKey: null }))
+      expect(calledActions[1]).toEqual(
+        initSpecsSuccessAction({
+          specs: expected,
+          currentSpecKey: currentSpec.key,
+        })
+      )
+    })
+  })
+
+  describe('setCurrentSpecSaga', () => {
+    const {
+      setCurrentSpecAction,
+      setCurrentSpecSuccessAction,
+      setCurrentSpecFailureAction,
+    } = specActions
+    const spec = specState['4.0']
+
+    it('sends setCurrentSpecSuccessAction on success', async () => {
+      jest.spyOn(adaptor, 'fetchSpec').mockResolvedValueOnce(spec)
+
+      sagaTester.dispatch(setCurrentSpecAction({ currentSpecKey: spec.key }))
+      await sagaTester.waitFor('specs/setCurrentSpecAction')
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(
+        setCurrentSpecAction({ currentSpecKey: spec.key })
+      )
+      expect(calledActions[1]).toEqual(
+        setCurrentSpecSuccessAction({
+          api: spec.api!,
+          currentSpecKey: spec.key,
+        })
+      )
+    })
+
+    it('sends setCurrentSpecFailureAction on failure', async () => {
+      jest.spyOn(adaptor, 'fetchSpec').mockRejectedValueOnce(mockError)
+
+      sagaTester.dispatch(setCurrentSpecAction({ currentSpecKey: spec.key }))
+      await sagaTester.waitFor('specs/setCurrentSpecAction')
+      const calledActions = sagaTester.getCalledActions()
+      expect(calledActions).toHaveLength(2)
+      expect(calledActions[0]).toEqual(
+        setCurrentSpecAction({ currentSpecKey: spec.key })
+      )
+      expect(calledActions[1]).toEqual(setCurrentSpecFailureAction(mockError))
+    })
+  })
+})

package/src/state/specs/sagas.ts

@@ -0,0 +1,81 @@
+/*
+
+ 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 { SpecItem, SpecList } from '@looker/sdk-codegen'
+import { call, put, takeEvery, select } from 'typed-redux-saga'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+import { getApixAdaptor } from '../../utils'
+import type { RootState } from '../store'
+import type { InitSpecsAction, SetCurrentSpecAction } from './slice'
+import { specActions } from './slice'
+
+function* initSaga(action: PayloadAction<InitSpecsAction>) {
+  const { initSpecsSuccessAction, initSpecsFailureAction } = specActions
+  const adaptor = getApixAdaptor()
+
+  try {
+    const specs: SpecList = yield* call([adaptor, 'fetchSpecList'])
+    let currentSpecKey = action.payload.specKey
+    if (!currentSpecKey) {
+      currentSpecKey = Object.values(specs).find(
+        (spec) => spec.status === 'current'
+      )!.key
+    }
+    const spec = yield* call([adaptor, 'fetchSpec'], specs[currentSpecKey])
+    specs[currentSpecKey] = spec
+    yield* put(initSpecsSuccessAction({ specs, currentSpecKey }))
+  } catch (error: any) {
+    yield* put(initSpecsFailureAction(new Error(error.message)))
+  }
+}
+
+function* setCurrentSpecSaga(action: PayloadAction<SetCurrentSpecAction>) {
+  const { setCurrentSpecSuccessAction, setCurrentSpecFailureAction } =
+    specActions
+  const adaptor = getApixAdaptor()
+  const spec: SpecItem = yield* select(
+    (state: RootState) => state.specs.specs[action.payload.currentSpecKey]
+  )
+
+  try {
+    const newSpec = yield* call([adaptor, 'fetchSpec'], spec)
+    yield* put(
+      setCurrentSpecSuccessAction({
+        api: newSpec.api!,
+        currentSpecKey: action.payload.currentSpecKey,
+      })
+    )
+  } catch (error: any) {
+    yield put(setCurrentSpecFailureAction(new Error(error.message)))
+  }
+}
+
+export function* saga() {
+  const { initSpecsAction, setCurrentSpecAction } = specActions
+
+  yield* takeEvery(initSpecsAction, initSaga)
+  yield* takeEvery(setCurrentSpecAction, setCurrentSpecSaga)
+}

package/src/{reducers/spec/actions.spec.ts → state/specs/selectors.ts}

@@ -23,14 +23,15 @@
  SOFTWARE.
 
  */
-import { selectSpec } from './actions'
-
-describe('Spec reducer actions', () => {
-  test('returns a SELECT_SPEC action object with provided values', () => {
-    const action = selectSpec('3.1')
-    expect(action).toEqual({
-      type: 'SELECT_SPEC',
-      payload: '3.1',
-    })
-  })
-})
+import type { SpecItem } from '@looker/sdk-codegen'
+
+import type { RootState } from '../store'
+
+const selectSpecsState = (state: RootState) => state.specs
+
+export const selectSpecs = (state: RootState) => selectSpecsState(state).specs
+
+export const selectCurrentSpec = (state: RootState): SpecItem => {
+  const specState = selectSpecsState(state)
+  return specState.specs[specState.currentSpecKey]
+}

package/src/state/specs/slice.ts

@@ -0,0 +1,109 @@
+/*
+
+ 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 { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
+import type { ApiModel, SpecList } from '@looker/sdk-codegen'
+import { createSliceHooks } from '@looker/redux'
+
+import { saga } from './sagas'
+
+export interface SpecState {
+  specs: SpecList
+  currentSpecKey: string
+  error?: Error
+  working: boolean
+  description?: string
+}
+
+export const defaultSpecsState: SpecState = {
+  specs: {},
+  currentSpecKey: '',
+  working: true,
+  description: undefined,
+}
+
+export interface InitSpecsAction {
+  specKey: string | null
+}
+
+export interface InitSpecsSuccessPayload {
+  specs: SpecList
+  currentSpecKey: string
+}
+
+export interface SetCurrentSpecAction {
+  currentSpecKey: string
+}
+
+interface SetCurrentSpecSuccessAction {
+  api: ApiModel
+  currentSpecKey: string
+}
+
+export const specsSlice = createSlice({
+  name: 'specs',
+  initialState: defaultSpecsState,
+  reducers: {
+    initSpecsAction(state, _action: PayloadAction<InitSpecsAction>) {
+      state.working = true
+      state.description = 'Fetching specifications...'
+    },
+    initSpecsSuccessAction(
+      state,
+      action: PayloadAction<InitSpecsSuccessPayload>
+    ) {
+      state.specs = action.payload.specs
+      state.currentSpecKey = action.payload.currentSpecKey
+      state.working = false
+      state.description = undefined
+    },
+    initSpecsFailureAction(state, action: PayloadAction<Error>) {
+      state.working = false
+      state.error = action.payload
+    },
+    setCurrentSpecAction(state, action: PayloadAction<SetCurrentSpecAction>) {
+      state.working = true
+      state.description = `Fetching API ${action.payload.currentSpecKey} spec`
+    },
+    setCurrentSpecSuccessAction(
+      state,
+      action: PayloadAction<SetCurrentSpecSuccessAction>
+    ) {
+      state.currentSpecKey = action.payload.currentSpecKey
+      state.specs[state.currentSpecKey].api = action.payload.api
+      state.description = undefined
+      state.working = false
+    },
+    setCurrentSpecFailureAction(state, action: PayloadAction<Error>) {
+      state.working = false
+      state.error = action.payload
+    },
+  },
+})
+
+export const specActions = specsSlice.actions
+export const { useActions: useSpecActions, useStoreState: useSpecStoreState } =
+  createSliceHooks(specsSlice, saga)

package/src/state/store.ts

@@ -24,24 +24,82 @@
 
  */
 import { createStore } from '@looker/redux'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import type { Action } from 'redux'
+import map from 'lodash/map'
+import type { SpecList } from '@looker/sdk-codegen'
 
 import type { SettingState } from './settings'
 import { defaultSettingsState, settingsSlice } from './settings'
 import type { LodesState } from './lodes'
 import { lodesSlice, defaultLodesState } from './lodes'
+import type { SpecState, InitSpecsSuccessPayload } from './specs'
+import { defaultSpecsState, specsSlice } from './specs'
+
+const isInitSuccessAction = (
+  action: any
+): action is PayloadAction<InitSpecsSuccessPayload> => !!action.payload?.specs
+
+const actionSanitizer = <A extends Partial<Action>>(
+  action: A,
+  _id: number
+): A => {
+  if (isInitSuccessAction(action)) {
+    action = {
+      ...action,
+      payload: {
+        ...action.payload,
+        specs: sanitizeSpecs(action.payload.specs),
+      },
+    }
+  }
+  return action
+}
+
+const stateSanitizer = <S extends Partial<RootState>>(
+  state: S,
+  _index: number
+): S => {
+  if (state.specs) {
+    return {
+      ...state,
+      specs: {
+        ...state.specs,
+        specs: sanitizeSpecs(state.specs.specs),
+      },
+    }
+  }
+  return state
+}
+
+const sanitizeSpecs = (specList: SpecList) =>
+  map(specList, (spec) => ({
+    ...spec,
+    api: spec.api ? '<api>' : undefined,
+    specContent: spec.specContent ? '<specContent>' : undefined,
+  })) as unknown as SpecList
+
+const devTools =
+  process.env.NODE_ENV !== 'production'
+    ? { actionSanitizer, stateSanitizer }
+    : false
 
 export const store = createStore({
+  devTools,
   preloadedState: {
     settings: defaultSettingsState,
     lodes: defaultLodesState,
+    specs: defaultSpecsState,
   },
   reducer: {
     settings: settingsSlice.reducer,
     lodes: lodesSlice.reducer,
+    specs: specsSlice.reducer,
   },
 })
 
 export interface RootState {
   settings: SettingState
   lodes: LodesState
+  specs: SpecState
 }

package/src/test-data/index.ts

@@ -23,13 +23,6 @@
  SOFTWARE.
 
  */
-export {
-  api,
-  api40,
-  specs,
-  specState,
-  getLoadedSpecs,
-  getLoadedSpecState,
-} from './specs'
+export * from './specs'
 export { examples } from './examples'
 export * from './declarations'

package/src/test-data/specs.ts

@@ -25,8 +25,8 @@
  */
 import type { SpecList } from '@looker/sdk-codegen'
 import { ApiModel } from '@looker/sdk-codegen'
-
-import { initDefaultSpecState } from '../reducers'
+import type { SpecState } from '../state'
+import { defaultSpecsState } from '../state'
 
 export const specs: SpecList = {
   '3.1': {
@@ -47,8 +47,6 @@ export const specs: SpecList = {
   },
 }
 
-export const specState = initDefaultSpecState(specs, window.location)
-
 export const api = ApiModel.fromJson(specs['3.1'].specContent)
 export const api40 = ApiModel.fromJson(specs['4.0'].specContent)
 
@@ -59,5 +57,7 @@ export const getLoadedSpecs = () => {
   return loadedSpecs
 }
 
-export const getLoadedSpecState = () =>
-  initDefaultSpecState(getLoadedSpecs(), window.location)
+export const specState: SpecState = {
+  ...defaultSpecsState,
+  specs: getLoadedSpecs(),
+}

package/src/test-utils/redux.tsx

@@ -34,19 +34,21 @@ import { createStore } from '@looker/redux'
 import { BrowserAdaptor, registerEnvAdaptor } from '@looker/extension-utils'
 import { initRunItSdk } from '@looker/run-it'
 
-import type { LodesState, RootState, SettingState } from '../state'
+import type { LodesState, RootState, SettingState, SpecState } from '../state'
 import {
   settingsSlice,
   defaultLodesState,
   defaultSettingsState,
-  store as defaultStore,
   lodesSlice,
+  defaultSpecsState,
+  specsSlice,
 } from '../state'
+import { specState } from '../test-data'
 import { renderWithRouter } from './router'
 
 export const withReduxProvider = (
   consumers: ReactElement<any>,
-  store: Store<RootState> = defaultStore
+  store: Store<RootState> = createTestStore()
 ) => {
   registerEnvAdaptor(new BrowserAdaptor(initRunItSdk()))
   return <Provider store={store}>{consumers}</Provider>
@@ -69,6 +71,7 @@ export const renderWithRouterAndReduxProvider = (
 export const preloadedState: RootState = {
   settings: defaultSettingsState,
   lodes: defaultLodesState,
+  specs: defaultSpecsState,
 }
 
 type DeepPartial<T> = {
@@ -86,6 +89,14 @@ export const createTestStore = (overrides?: DeepPartial<RootState>) =>
         ...defaultLodesState,
         ...overrides?.lodes,
       } as LodesState,
+      specs: {
+        ...specState,
+        ...overrides?.specs,
+      } as SpecState,
+    },
+    reducer: {
+      settings: settingsSlice.reducer,
+      lodes: lodesSlice.reducer,
+      specs: specsSlice.reducer,
     },
-    reducer: { settings: settingsSlice.reducer, lodes: lodesSlice.reducer },
   })