@looker/api-explorer 0.9.36 → 0.9.37

package/src/components/SideNav/SideNavMethods.tsx

@@ -29,7 +29,7 @@ import styled from 'styled-components'
 import { Accordion2, Heading } from '@looker/components'
 import type { MethodList } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
-import { useLocation, useRouteMatch } from 'react-router-dom'
+import { useRouteMatch } from 'react-router-dom'
 import { useNavigation, highlightHTML, buildMethodPath } from '../../utils'
 import { Link } from '../Link'
 import { selectSearchPattern } from '../../state'
@@ -44,9 +44,8 @@ interface MethodsProps {
 
 export const SideNavMethods = styled(
   ({ className, methods, tag, specKey, defaultOpen = false }: MethodsProps) => {
-    const location = useLocation()
-    const navigate = useNavigation()
-    const searchParams = new URLSearchParams(location.search)
+    const { buildPathWithGlobalParams, navigateWithGlobalParams } =
+      useNavigation()
     const searchPattern = useSelector(selectSearchPattern)
     const match = useRouteMatch<{ methodTag: string }>(
       `/:specKey/methods/:methodTag/:methodName?`
@@ -56,9 +55,9 @@ export const SideNavMethods = styled(
       const _isOpen = !isOpen
       setIsOpen(_isOpen)
       if (_isOpen) {
-        navigate(`/${specKey}/methods/${tag}`)
+        navigateWithGlobalParams(`/${specKey}/methods/${tag}`)
       } else {
-        navigate(`/${specKey}/methods`)
+        navigateWithGlobalParams(`/${specKey}/methods`)
       }
     }
 
@@ -85,12 +84,9 @@ export const SideNavMethods = styled(
           {Object.values(methods).map((method) => (
             <li key={method.name}>
               <Link
-                to={`${buildMethodPath(
-                  specKey,
-                  tag,
-                  method.name,
-                  searchParams.toString()
-                )}`}
+                to={buildPathWithGlobalParams(
+                  buildMethodPath(specKey, tag, method.name)
+                )}
               >
                 {highlightHTML(searchPattern, method.summary)}
               </Link>

package/src/components/SideNav/SideNavTypes.tsx

@@ -28,7 +28,7 @@ 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 { useLocation, useRouteMatch } from 'react-router-dom'
+import { useRouteMatch } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { Link } from '../Link'
 import { highlightHTML, useNavigation, buildTypePath } from '../../utils'
@@ -44,9 +44,7 @@ interface TypesProps {
 
 export const SideNavTypes = styled(
   ({ className, types, tag, specKey, defaultOpen = false }: TypesProps) => {
-    const location = useLocation()
-    const navigate = useNavigation()
-    const searchParams = new URLSearchParams(location.search)
+    const { navigate, buildPathWithGlobalParams } = useNavigation()
     const searchPattern = useSelector(selectSearchPattern)
     const match = useRouteMatch<{ typeTag: string }>(
       `/:specKey/types/:typeTag/:typeName?`
@@ -85,12 +83,9 @@ export const SideNavTypes = styled(
           {Object.values(types).map((type) => (
             <li key={type.name}>
               <Link
-                to={`${buildTypePath(
-                  specKey,
-                  tag,
-                  type.name,
-                  searchParams.toString()
-                )}`}
+                to={buildPathWithGlobalParams(
+                  buildTypePath(specKey, tag, type.name)
+                )}
               >
                 {highlightHTML(searchPattern, type.name)}
               </Link>

package/src/components/index.ts

@@ -31,7 +31,6 @@ export { DocMarkdown } from './DocMarkdown'
 export { DocPseudo } from './DocPseudo'
 export { DocRateLimited } from './DocRateLimited'
 export { DocReferences } from './DocReferences'
-export { DocResponses } from './DocResponses'
 export { DocSDKs } from './DocSDKs'
 export { DocSdkUsage } from './DocSdkUsage'
 export { DocSource } from './DocSource'

package/src/routes/AppRouter.tsx

@@ -27,9 +27,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
-import type { ApiModel, SpecList } from '@looker/sdk-codegen'
+import type { ApiModel } from '@looker/sdk-codegen'
 
 import {
+  ErrorDetailScene,
   HomeScene,
   MethodScene,
   MethodTagScene,
@@ -41,7 +42,6 @@ import { diffPath } from '../utils'
 
 interface AppRouterProps {
   specKey: string
-  specs: SpecList
   api: ApiModel
   toggleNavigation: (target?: boolean) => void
 }
@@ -49,13 +49,15 @@ interface AppRouterProps {
 export const AppRouter: FC<AppRouterProps> = ({
   api,
   specKey,
-  specs,
   toggleNavigation,
 }) => (
   <Switch>
     <Redirect from="/" to={`/${specKey}/`} exact />
-    <Route path={`/${diffPath}/:l?/:r?`}>
-      <DiffScene specs={specs} toggleNavigation={toggleNavigation} />
+    <Route path="/:specKey/err/:statusCode/:verb/*">
+      <ErrorDetailScene api={api} />
+    </Route>
+    <Route path={`/:specKey/${diffPath}/:compareSpecKey?`}>
+      <DiffScene toggleNavigation={toggleNavigation} />
     </Route>
     <Route path="/:specKey/(methods|types)?" exact>
       <HomeScene api={api} />

package/src/scenes/DiffScene/DiffScene.tsx

@@ -41,7 +41,7 @@ import { SyncAlt } from '@styled-icons/material/SyncAlt'
 import { useSelector } from 'react-redux'
 
 import { ApixSection } from '../../components'
-import { selectCurrentSpec } from '../../state'
+import { selectCurrentSpec, selectSpecs } from '../../state'
 import { diffPath, getApixAdaptor, useNavigation } from '../../utils'
 import { diffSpecs, standardDiffToggles } from './diffUtils'
 import { DocDiff } from './DocDiff'
@@ -74,7 +74,6 @@ const diffToggles = [
 ]
 
 export interface DiffSceneProps {
-  specs: SpecList
   toggleNavigation: (target?: boolean) => void
 }
 
@@ -82,12 +81,13 @@ const validateParam = (specs: SpecList, specKey = '') => {
   return specs[specKey] ? specKey : ''
 }
 
-export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
+export const DiffScene: FC<DiffSceneProps> = ({ toggleNavigation }) => {
   const adaptor = getApixAdaptor()
-  const navigate = useNavigation()
+  const { navigate } = useNavigation()
   const spec = useSelector(selectCurrentSpec)
+  const specs = useSelector(selectSpecs)
   const currentSpecKey = spec.key
-  const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`)
+  const match = useRouteMatch<{ l: string; r: string }>(`/:l/${diffPath}/:r?`)
   const l = validateParam(specs, match?.params.l)
   const r = validateParam(specs, match?.params.r)
 
@@ -123,14 +123,14 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   const [delta, setDelta] = useState<DiffRow[]>([])
 
   const handleLeftChange = (newLeft: string) => {
-    navigate(`/${diffPath}/${newLeft}/${rightKey}`)
+    navigate(`/${newLeft}/${diffPath}/${rightKey}`)
   }
   const handleRightChange = (newRight: string) => {
-    navigate(`/${diffPath}/${leftKey}/${newRight}`)
+    navigate(`/${leftKey}/${diffPath}/${newRight}`)
   }
 
   const handleSwitch = () => {
-    navigate(`/${diffPath}/${rightKey}/${leftKey}`)
+    navigate(`/${rightKey}/${diffPath}/${leftKey}`)
   }
 
   useEffect(() => {

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

@@ -59,7 +59,7 @@ export const DiffMethodLink: FC<DiffMethodLinkProps> = ({
   method,
   specKey,
 }) => {
-  const navigate = useNavigation()
+  const { navigate } = useNavigation()
 
   if (!method) return <Heading as="h4">{`Missing in ${specKey}`}</Heading>
 

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

@@ -38,9 +38,9 @@ describe('DocDiff', () => {
   const rightKey = specs['4.0'].key
   const leftApi = specs['3.1'].api!
   const rightApi = specs['4.0'].api!
+  const delta = diffSpecs(leftApi, rightApi, standardDiffToggles)
 
   it('renders', () => {
-    const delta = diffSpecs(leftApi, rightApi, standardDiffToggles)
     renderWithReduxProvider(
       <DocDiff
         leftKey={leftKey}
@@ -61,6 +61,7 @@ describe('DocDiff', () => {
       screen.getByRole('button', { name: 'Next page of results' })
     ).toBeInTheDocument()
   })
+
   it('renders when there is no delta', () => {
     renderWithReduxProvider(
       <DocDiff
@@ -75,7 +76,6 @@ describe('DocDiff', () => {
   })
 
   it('paginates', async () => {
-    const delta = diffSpecs(leftApi, rightApi, standardDiffToggles)
     renderWithReduxProvider(
       <DocDiff
         leftKey={leftKey}
@@ -109,4 +109,75 @@ describe('DocDiff', () => {
       ).toBeInTheDocument()
     })
   })
+
+  it('paginates with correct number of entries per page', async () => {
+    const pageSize = 5
+    renderWithReduxProvider(
+      <DocDiff
+        leftKey={leftKey}
+        leftSpec={leftApi}
+        rightKey={rightKey}
+        rightSpec={rightApi}
+        delta={delta}
+        pageSize={pageSize}
+      />
+    )
+
+    for (let i = 0; i < pageSize; i++) {
+      const row = delta[i]
+      expect(screen.getByText(row.name)).toBeInTheDocument()
+      expect(screen.getByText(row.id)).toBeInTheDocument()
+      expect(
+        screen.getByText(rightApi.methods[row.name].summary)
+      ).toBeInTheDocument()
+    }
+    const notDisplayedRow = delta[pageSize]
+    expect(screen.queryByText(notDisplayedRow.name)).not.toBeInTheDocument()
+  })
+
+  it('paginates with correct total page count', async () => {
+    const pageSize = 5
+    renderWithReduxProvider(
+      <DocDiff
+        leftKey={leftKey}
+        leftSpec={leftApi}
+        rightKey={rightKey}
+        rightSpec={rightApi}
+        delta={delta}
+        pageSize={pageSize}
+      />
+    )
+    const expectedPageCount = Math.ceil(delta.length / pageSize)
+    expect(screen.getByText(`of ${expectedPageCount}`)).toBeInTheDocument()
+  })
+
+  it('final diff entry of one page does not appear in next page', async () => {
+    const pageSize = 5
+    renderWithReduxProvider(
+      <DocDiff
+        leftKey={leftKey}
+        leftSpec={leftApi}
+        rightKey={rightKey}
+        rightSpec={rightApi}
+        delta={delta}
+        pageSize={pageSize}
+      />
+    )
+    const lastPageEntry = delta[pageSize - 1]
+    expect(screen.getByText(lastPageEntry.name)).toBeInTheDocument()
+    expect(screen.getByText(lastPageEntry.id)).toBeInTheDocument()
+    expect(
+      screen.getByText(rightApi.methods[lastPageEntry.name].summary)
+    ).toBeInTheDocument()
+
+    // go to page 2
+    userEvent.click(
+      screen.getByRole('button', { name: 'Next page of results' })
+    )
+
+    await waitFor(() => {
+      expect(screen.queryByText(lastPageEntry.name)).not.toBeInTheDocument()
+      expect(screen.queryByText(lastPageEntry.id)).not.toBeInTheDocument()
+    })
+  })
 })

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

@@ -63,8 +63,8 @@ export const DocDiff: FC<DocDiffProps> = ({
 
   if (delta.length === 0) return <Text>{'No differences found'}</Text>
 
-  const pageCount = Math.round((delta.length - 1) / pageSize)
-  const pageItemData = delta.slice((page - 1) * pageSize, page * pageSize + 1)
+  const pageCount = Math.ceil(delta.length / pageSize)
+  const pageItemData = delta.slice((page - 1) * pageSize, page * pageSize)
 
   return (
     <>
@@ -76,9 +76,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, index) => (
+            {pageItemData.map((item) => (
               <DiffItem
-                key={`page-${page} item-${index}`}
+                key={item.name}
                 item={item}
                 leftKey={leftKey}
                 leftSpec={leftSpec}

package/src/scenes/ErrorDetailScene/ErrorDetailScene.tsx

@@ -0,0 +1,72 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2022 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 { Redirect, useRouteMatch } from 'react-router-dom'
+import { getEnvAdaptor } from '@looker/extension-utils'
+import { ErrorDoc } from '@looker/sdk-rtl'
+import React from 'react'
+import type { IApiModel } from '@looker/sdk-codegen'
+
+import { useNavigation } from '../../utils'
+
+interface ErrorDetailSceneProps {
+  api: IApiModel
+}
+
+/**
+ * Scene responsible for redirecting users from an error doc link to a specific
+ * method scene
+ */
+export const ErrorDetailScene = ({ api }: ErrorDetailSceneProps) => {
+  const match = useRouteMatch<{
+    specKey: string
+    statusCode: string
+    verb: string
+  }>(`/:specKey/err/:statusCode/:verb/*`)
+  const methodPath = match?.params[0]
+  const adaptor = getEnvAdaptor()
+  const errorDoc = new ErrorDoc(adaptor.sdk)
+  const restPath = errorDoc.specPath(methodPath)
+
+  const methodId = `${match?.params.verb} /${restPath}`.toLocaleLowerCase()
+  const specKey = match?.params.specKey
+  const statusCode = match?.params.statusCode
+
+  const method = Object.values(api.methods).find(
+    (method) => method.id.toLocaleLowerCase() === methodId
+  )
+
+  const methodTag = method?.schema.tags[0]
+  const methodName = method?.operationId
+
+  const { buildPathWithGlobalParams } = useNavigation()
+
+  const redirectPath = buildPathWithGlobalParams(
+    `/${specKey}/methods/${methodTag}/${methodName}`,
+    { e: statusCode }
+  )
+
+  return <Redirect to={redirectPath} />
+}

package/src/scenes/ErrorDetailScene/index.ts

@@ -0,0 +1,26 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2022 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.
+
+ */
+export { ErrorDetailScene } from './ErrorDetailScene'

package/src/scenes/MethodScene/MethodScene.tsx

@@ -25,7 +25,7 @@
  */
 
 import type { FC } from 'react'
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import {
   Aside,
   Button,
@@ -33,6 +33,7 @@ import {
   Space,
   useToggle,
   ExtendComponentsThemeProvider,
+  Span,
 } from '@looker/components'
 import { Beaker } from '@looker/icons'
 import { useHistory, useParams } from 'react-router-dom'
@@ -42,14 +43,13 @@ import { typeRefs } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
 import type { IEnvironmentAdaptor } from '@looker/extension-utils'
 
-import { getApixAdaptor, useNavigation } from '../../utils'
+import { getApixAdaptor, useNavigation, useQuery } from '../../utils'
 import {
   ApixSection,
   DocActivityType,
   DocMarkdown,
   DocRateLimited,
   DocReferences,
-  DocResponses,
   DocSDKs,
   DocSdkUsage,
   DocSource,
@@ -58,7 +58,7 @@ import {
   DocSchema,
 } from '../../components'
 import { selectSdkLanguage } from '../../state'
-import { DocOperation, DocRequestBody } from './components'
+import { DocOperation, DocRequestBody, DocResponses } from './components'
 
 interface MethodSceneProps {
   api: ApiModel
@@ -78,14 +78,16 @@ const showRunIt = async (adaptor: IEnvironmentAdaptor) => {
 export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
   const adaptor = getApixAdaptor()
   const history = useHistory()
-  const navigate = useNavigation()
+  const { navigate } = useNavigation()
   const sdkLanguage = useSelector(selectSdkLanguage)
   const { specKey, methodTag, methodName } = useParams<MethodSceneParams>()
   const { value, toggle, setOn } = useToggle()
   const [method, setMethod] = useState(api.methods[methodName])
   const seeTypes = typeRefs(api, method?.customTypes)
-
+  const query = useQuery()
+  const errorCode = query.get('e') ?? undefined
   const RunItButton = value ? Button : ButtonOutline
+  const docResponsesRef = useRef<HTMLElement>(null)
 
   useEffect(() => {
     const foundMethod = api.methods[methodName]
@@ -116,6 +118,16 @@ export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
     checkRunIt()
   }, [adaptor, setOn])
 
+  useEffect(() => {
+    if (method.responses && errorCode) {
+      if (docResponsesRef.current) {
+        window.setTimeout(() => {
+          docResponsesRef.current!.scrollIntoView()
+        }, 300)
+      }
+    }
+  }, [method])
+
   const runItToggle = (
     <RunItButton
       color={value ? 'key' : 'neutral'}
@@ -148,7 +160,9 @@ export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
           <DocRequestBody api={api} method={method} />
           <DocSdkUsage method={method} />
           <DocReferences typesUsed={seeTypes} api={api} specKey={specKey} />
-          <DocResponses api={api} responses={method.responses} />
+          <Span ref={docResponsesRef}>
+            <DocResponses api={api} method={method} errorCode={errorCode} />
+          </Span>
           <DocSchema object={method.schema} />
         </ApixSection>
       )}

package/src/{components → scenes/MethodScene/components}/DocResponses/DocResponseTypes.tsx

@@ -24,7 +24,6 @@
 
  */
 
-import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
 import { ButtonToggle, ButtonItem } from '@looker/components'
 import type {
@@ -33,10 +32,11 @@ import type {
   IMethodResponse,
 } from '@looker/sdk-codegen'
 
-import { ExploreType } from '..'
+import { ExploreType } from '../../../../components'
 
 interface DocResponseTypesProps {
   api: ApiModel
+  /** responses to render */
   responses: KeyedCollection<IMethodResponse>
 }
 
@@ -45,10 +45,7 @@ interface DocResponseTypesProps {
  * toggling media type and render the response
  * @param response
  */
-export const DocResponseTypes: FC<DocResponseTypesProps> = ({
-  api,
-  responses,
-}) => {
+export const DocResponseTypes = ({ api, responses }: DocResponseTypesProps) => {
   const mediaTypes = Object.keys(responses)
   const [selectedMediaType, setSelectedMediaType] = useState(mediaTypes[0])
   const [resps, setResps] = useState(responses)