@looker/api-explorer 0.9.26 → 0.9.29

package/src/scenes/DiffScene/DiffScene.tsx

@@ -26,7 +26,7 @@
 
 import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
-import type { ApiModel, DiffRow, SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import {
   Box,
@@ -38,35 +38,14 @@ import {
   SelectMulti,
 } from '@looker/components'
 import { SyncAlt } from '@styled-icons/material/SyncAlt'
-import { fallbackFetch, funFetch } from '@looker/run-it'
-import { getDefaultSpecKey } from '../../reducers/spec/utils'
-import { diffPath } from '../../utils'
+import { useSelector } from 'react-redux'
+
 import { ApixSection } from '../../components'
+import { selectCurrentSpec } from '../../state'
+import { diffPath, getApixAdaptor } from '../../utils'
 import { diffSpecs, standardDiffToggles } from './diffUtils'
 import { DocDiff } from './DocDiff'
 
-/**
- * Pick the left key, or default spec
- * @param specs to pick from
- * @param leftKey spec key that may or may not have a value
- */
-const pickLeft = (specs: SpecList, leftKey: string) => {
-  if (leftKey) return leftKey
-  return getDefaultSpecKey(specs)
-}
-
-/**
- * Pick the right key, or "other" spec
- * @param specs to pick from
- * @param rightKey spec key from url path
- * @param leftKey spec key from url path
- */
-const pickRight = (specs: SpecList, rightKey: string, leftKey: string) => {
-  if (rightKey) return rightKey
-  if (!leftKey) leftKey = getDefaultSpecKey(specs)
-  return Object.keys(specs).find((k) => k !== leftKey) || ''
-}
-
 const diffToggles = [
   {
     label: 'Missing',
@@ -104,7 +83,10 @@ const validateParam = (specs: SpecList, specKey = '') => {
 }
 
 export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
+  const adaptor = getApixAdaptor()
   const history = useHistory()
+  const spec = useSelector(selectCurrentSpec)
+  const currentSpecKey = spec.key
   const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`)
   const l = validateParam(specs, match?.params.l)
   const r = validateParam(specs, match?.params.r)
@@ -114,83 +96,62 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
     label: `${key} (${spec.status})`,
   }))
 
-  const [leftKey, setLeftKey] = useState<string>(pickLeft(specs, l))
-  const [rightKey, setRightKey] = useState<string>(pickRight(specs, r, leftKey))
+  const [leftKey, setLeftKey] = useState<string>(l || currentSpecKey)
+  const [rightKey, setRightKey] = useState<string>(r || '')
   const [leftApi, setLeftApi] = useState<ApiModel>(specs[leftKey].api!)
-  const [rightApi, setRightApi] = useState<ApiModel>(
+  const [rightApi, setRightApi] = useState<ApiModel>(() =>
     rightKey ? specs[rightKey].api! : specs[leftKey].api!
   )
   const [toggles, setToggles] = useState<string[]>(standardDiffToggles)
 
   useEffect(() => {
-    toggleNavigation(false)
-  }, [])
-
-  const computeDelta = (left: string, right: string, toggles: string[]) => {
-    if (left && right && specs[left].api && specs[right].api) {
-      return diffSpecs(specs[left].api!, specs[right].api!, toggles)
+    if (r !== rightKey) {
+      setRightKey(r)
     }
-    return []
-  }
-  const [delta, setDelta] = useState<DiffRow[]>(
-    computeDelta(leftKey, rightKey, toggles)
-  )
+  }, [r, rightKey])
 
-  const loadSpec = async (
-    specs: SpecList,
-    key: string,
-    setter: (spec: SpecItem) => void
-  ) => {
-    const spec = specs[key]
-    if (!spec.api) {
-      try {
-        const newSpec = { ...spec }
-        const api = await fallbackFetch(newSpec, funFetch)
-        if (api) {
-          spec.api = api
-          setter(spec)
-        }
-      } catch (error) {
-        console.error(error)
-      }
+  useEffect(() => {
+    if (l !== leftKey) {
+      setLeftKey(l)
     }
-  }
+  }, [l, leftKey])
 
-  const compareKeys = async (left: string, right: string) => {
-    if (left !== leftKey || right !== rightKey) {
-      history.push(`/${diffPath}/${left}/${right}`)
-    }
-    if (!specs[left].api) {
-      await loadSpec(specs, leftKey, (spec) => setLeftApi(spec.api!))
-    }
-    if (!specs[right].api) {
-      await loadSpec(specs, rightKey, (spec) => setRightApi(spec.api!))
-    }
-    setDelta([...computeDelta(left, right, toggles)])
-  }
+  useEffect(() => {
+    toggleNavigation(false)
+  }, [])
+
+  const [delta, setDelta] = useState<DiffRow[]>([])
 
   const handleLeftChange = (newLeft: string) => {
-    setLeftKey(newLeft)
+    history.push(`/${diffPath}/${newLeft}/${rightKey}`)
+  }
+  const handleRightChange = (newRight: string) => {
+    history.push(`/${diffPath}/${leftKey}/${newRight}`)
   }
 
-  const handleTogglesChange = (values?: string[]) => {
-    const newToggles = values || []
-    setToggles(newToggles)
-    setDelta([...computeDelta(leftKey, rightKey, newToggles)])
+  const handleSwitch = () => {
+    history.push(`/${diffPath}/${rightKey}/${leftKey}`)
   }
 
   useEffect(() => {
-    compareKeys(leftKey, rightKey)
-  }, [leftKey, rightKey])
+    adaptor.fetchSpec(specs[leftKey]).then((spec) => setLeftApi(spec.api!))
+  }, [leftKey])
 
-  const handleRightChange = (newRight: string) => {
-    setRightKey(newRight)
-  }
+  useEffect(() => {
+    if (rightKey in specs) {
+      adaptor.fetchSpec(specs[rightKey]).then((spec) => setRightApi(spec.api!))
+    }
+  }, [rightKey])
 
-  const handleSwitch = () => {
-    const currLeftKey = leftKey
-    setLeftKey(rightKey)
-    setRightKey(currLeftKey)
+  useEffect(() => {
+    if (leftApi && rightApi) {
+      setDelta([...diffSpecs(leftApi, rightApi, toggles)])
+    }
+  }, [leftApi, rightApi, toggles])
+
+  const handleTogglesChange = (values?: string[]) => {
+    const newToggles = values || []
+    setToggles(newToggles)
   }
 
   return (
@@ -211,6 +172,7 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
           <IconButton
             label="switch"
             size="small"
+            disabled={!leftKey || !rightKey}
             icon={<SyncAlt />}
             mt="medium"
             onClick={handleSwitch}
@@ -221,6 +183,7 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
               mt="xxsmall"
               id="compare"
               name="Right Version"
+              placeholder="Select a comparison..."
               value={rightKey}
               options={options}
               onChange={handleRightChange}

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

@@ -28,8 +28,7 @@ import { Router } from 'react-router'
 import type { MemoryHistory } from 'history'
 import { createMemoryHistory } from 'history'
 import { renderWithTheme } from '@looker/components-test-utils'
-import userEvent from '@testing-library/user-event'
-import { act, screen } from '@testing-library/react'
+import { screen, fireEvent } from '@testing-library/react'
 import { api } from '../../../test-data'
 import { DiffMethodLink } from './DiffItem'
 
@@ -37,27 +36,24 @@ describe('DiffMethodLink', () => {
   const method = api.methods.create_dashboard
   const specKey = '4.0'
   let history: MemoryHistory
-  let pushSpy: jasmine.Spy
 
   beforeEach(() => {
     history = createMemoryHistory()
-    pushSpy = spyOn(history, 'push')
   })
 
   test('it renders method and navigates on click', () => {
+    const pushSpy = jest.spyOn(history, 'push')
     renderWithTheme(
       <Router history={history}>
         <DiffMethodLink method={method} specKey={specKey} />
       </Router>
     )
-    const s = `${method.name} for ${specKey}`
-    expect(screen.getByText(s)).toBeInTheDocument()
-    userEvent.click(screen.getByText(s))
-    act(() => {
-      expect(pushSpy).toHaveBeenCalledWith(
-        `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`
-      )
-    })
+    const link = screen.getByRole('link')
+    expect(link).toHaveTextContent(`${method.name} for ${specKey}`)
+    fireEvent.click(link)
+    expect(pushSpy).toHaveBeenCalledWith(
+      `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`
+    )
   })
 
   test('it renders missing method and does not navigate on click', () => {
@@ -68,9 +64,6 @@ describe('DiffMethodLink', () => {
     )
     const s = `Missing in ${specKey}`
     expect(screen.getByText(s)).toBeInTheDocument()
-    userEvent.click(screen.getByText(s))
-    act(() => {
-      expect(pushSpy).not.toHaveBeenCalled()
-    })
+    expect(screen.queryByRole('link')).not.toBeInTheDocument()
   })
 })

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]
+}