@looker/api-explorer 0.9.18 → 0.9.24

package/src/components/DocMethodSummary/DocMethodSummary.tsx

@@ -23,11 +23,11 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { Card, CardContent, Flex, Space, Text } from '@looker/components'
-import { IMethod } from '@looker/sdk-codegen'
-import { MethodBadge } from '@looker/run-it'
-import { ApixHeading } from '../common'
+import type { IMethod } from '@looker/sdk-codegen'
+import { MethodBadge, RunItHeading } from '@looker/run-it'
 import { DocActivityType, DocRateLimited } from '../../components'
 import { DocSummaryStatus } from './DocSummaryStatus'
 
@@ -36,7 +36,7 @@ interface DocMethodSummaryProps {
 }
 
 export const DocMethodSummary: FC<DocMethodSummaryProps> = ({ method }) => (
-  <Card maxWidth="50rem" border="1px solid" borderColor="ui2">
+  <Card maxWidth="50rem" border>
     <CardContent>
       <Space align="start" between>
         <MethodBadge
@@ -47,16 +47,16 @@ export const DocMethodSummary: FC<DocMethodSummaryProps> = ({ method }) => (
           {method.httpMethod.toUpperCase()}
         </MethodBadge>
         <Flex alignItems="start" flexDirection="column" flex="1" mx="small">
-          <ApixHeading as="h3" mb="0" pt="0">
+          <RunItHeading as="h3" mb="0" pt="0">
             {method.summary}
-          </ApixHeading>
+          </RunItHeading>
           <Space>
             <DocRateLimited method={method} />
             <DocActivityType method={method} />
           </Space>
           <Text color="subdued">{method.endpoint}</Text>
         </Flex>
-        <DocSummaryStatus method={method} />
+        <DocSummaryStatus status={method.status} />
       </Space>
     </CardContent>
   </Card>

package/src/components/DocMethodSummary/DocSummaryStatus.spec.tsx

@@ -32,14 +32,14 @@ import { DocSummaryStatus } from './DocSummaryStatus'
 
 describe('DocMethodSummaryStatus', () => {
   test.each`
-    status          | method                              | expectedLabel            | expectedContent
-    ${'beta'}       | ${api40.methods.workspace}          | ${'beta endpoint'}       | ${'This beta endpoint is under development and subject to change.'}
-    ${'stable'}     | ${api.methods.login}                | ${'stable endpoint'}     | ${'This endpoint is considered stable for this API version.'}
-    ${'deprecated'} | ${api.methods.backup_configuration} | ${'deprecated endpoint'} | ${'This endpoint has been deprecated and will be removed in the future.'}
+    status          | method                              | expectedLabel        | expectedContent
+    ${'beta'}       | ${api40.methods.workspace}          | ${'beta item'}       | ${'This beta item is under development and subject to change.'}
+    ${'stable'}     | ${api.methods.login}                | ${'stable item'}     | ${'This item is considered stable for this API version.'}
+    ${'deprecated'} | ${api.methods.backup_configuration} | ${'deprecated item'} | ${'This item has been deprecated and will be removed in the future.'}
   `(
     'it renders an icon with a tooltip containing the right content for $status endpoints',
     async ({ method, expectedLabel, expectedContent }) => {
-      renderWithTheme(<DocSummaryStatus method={method} />)
+      renderWithTheme(<DocSummaryStatus status={method.status} />)
       const icon = screen.getByLabelText(expectedLabel)
       fireEvent.mouseOver(icon)
       await waitFor(() => {

package/src/components/DocMethodSummary/DocSummaryStatus.tsx

@@ -23,18 +23,16 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { Tooltip } from '@looker/components'
-import { IMethod } from '@looker/sdk-codegen'
 
 import { pickStatus, pickTooltipContent } from './utils'
 
 interface DocSummaryStatusProps {
-  method: IMethod
+  status: string
 }
 
-export const DocSummaryStatus: FC<DocSummaryStatusProps> = ({ method }) => (
-  <Tooltip content={pickTooltipContent(method.status)}>
-    {pickStatus(method.status)}
-  </Tooltip>
+export const DocSummaryStatus: FC<DocSummaryStatusProps> = ({ status }) => (
+  <Tooltip content={pickTooltipContent(status)}>{pickStatus(status)}</Tooltip>
 )

package/src/components/DocMethodSummary/index.tsx

@@ -24,4 +24,5 @@
 
  */
 export { DocMethodSummary } from './DocMethodSummary'
+export { DocSummaryStatus } from './DocSummaryStatus'
 export { pickTooltipContent } from './utils'

package/src/components/DocMethodSummary/utils.spec.tsx

@@ -28,14 +28,14 @@ import { pickTooltipContent } from './utils'
 describe('DocMethodSummary utils', () => {
   test.each`
     status            | expected
-    ${'beta'}         | ${'This beta endpoint is under development and subject to change.'}
-    ${'experimental'} | ${'This experimental endpoint is not fully developed and may be significantly changed or completely removed in future releases.'}
-    ${'deprecated'}   | ${'This endpoint has been deprecated and will be removed in the future.'}
-    ${'stable'}       | ${'This endpoint is considered stable for this API version.'}
-    ${'undocumented'} | ${'This is an internal-only endpoint.'}
-    ${'unknown'}      | ${'This endpoint has no status associated with it.'}
+    ${'beta'}         | ${'This beta item is under development and subject to change.'}
+    ${'experimental'} | ${'This experimental item is not fully developed and may be significantly changed or completely removed in future releases.'}
+    ${'deprecated'}   | ${'This item has been deprecated and will be removed in the future.'}
+    ${'stable'}       | ${'This item is considered stable for this API version.'}
+    ${'undocumented'} | ${'This is an internal-only item.'}
+    ${'unknown'}      | ${'This item has no status associated with it.'}
   `(
-    'pickTooltipContent returns correct $status endpoint tooltip content',
+    'pickTooltipContent returns correct $status item tooltip content',
     ({ status, expected }) => {
       const actual = pickTooltipContent(status)
       expect(actual).toEqual(expected)

package/src/components/DocMethodSummary/utils.tsx

@@ -34,29 +34,23 @@ import { VisibilityOff } from '@styled-icons/material/VisibilityOff'
  * @param status Endpoint status
  */
 export const pickStatus = (status: string) => {
-  switch (status.toLocaleLowerCase()) {
+  const title = `${status.toLowerCase()} item`
+  switch (status.toLowerCase()) {
     case 'beta':
-      return <StatusBeta aria-label="beta endpoint">&beta;</StatusBeta>
+      return <StatusBeta aria-label={title}>&beta;</StatusBeta>
     case 'experimental': {
-      const title = 'experimental endpoint'
+      return <Icon title={title} aria-label={title} icon={<Beaker />} />
+    }
+    case 'alpha': {
       return <Icon title={title} aria-label={title} icon={<Beaker />} />
     }
     case 'undocumented': {
-      const title = 'undocumented endpoint'
       return <Icon title={title} aria-label={title} icon={<VisibilityOff />} />
     }
     case 'deprecated':
-      return (
-        <Status
-          aria-label="deprecated endpoint"
-          intent="critical"
-          size="small"
-        />
-      )
+      return <Status aria-label={title} intent="critical" size="small" />
     case 'stable':
-      return (
-        <Status aria-label="stable endpoint" intent="positive" size="small" />
-      )
+      return <Status aria-label={title} intent="positive" size="small" />
     default:
       return (
         <Status
@@ -69,23 +63,23 @@ export const pickStatus = (status: string) => {
 }
 
 /**
- * Returns tooltip content based on an endpoint's status
- * @param status Endpoint status
+ * Returns tooltip content based on status
+ * @param status item status
  */
 export const pickTooltipContent = (status: string) => {
-  switch (status.toLocaleLowerCase()) {
+  switch (status.toLowerCase()) {
     case 'beta':
-      return 'This beta endpoint is under development and subject to change.'
+      return 'This beta item is under development and subject to change.'
     case 'experimental':
-      return 'This experimental endpoint is not fully developed and may be significantly changed or completely removed in future releases.'
+      return 'This experimental item is not fully developed and may be significantly changed or completely removed in future releases.'
     case 'deprecated':
-      return 'This endpoint has been deprecated and will be removed in the future.'
+      return 'This item has been deprecated and will be removed in the future.'
     case 'stable':
-      return 'This endpoint is considered stable for this API version.'
+      return 'This item is considered stable for this API version.'
     case 'undocumented':
-      return 'This is an internal-only endpoint.'
+      return 'This is an internal-only item.'
     default:
-      return 'This endpoint has no status associated with it.'
+      return 'This item has no status associated with it.'
   }
 }
 

package/src/components/DocPseudo/DocParam.tsx

@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
-import { IParameter } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
+import type { IParameter } from '@looker/sdk-codegen'
 import { Tooltip } from '@looker/components'
 
 export interface DocArgProps {

package/src/components/DocPseudo/DocParams.tsx

@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import { IParameter } from '@looker/sdk-codegen'
-import React, { FC, Fragment } from 'react'
+import type { IParameter } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React, { Fragment } from 'react'
 
 import { DocParam } from './DocParam'
 

package/src/components/DocPseudo/DocPrimaryResponse.tsx

@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import { IMethodResponse } from '@looker/sdk-codegen'
-import React, { FC } from 'react'
+import type { IMethodResponse } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
 import { Tooltip } from '@looker/components'
 
 export interface DocPrimaryResponseProps {

package/src/components/DocPseudo/DocPseudo.tsx

@@ -24,9 +24,10 @@
 
  */
 
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { Code, Flex } from '@looker/components'
-import { IMethod } from '@looker/sdk-codegen'
+import type { IMethod } from '@looker/sdk-codegen'
 
 import { DocPrimaryResponse } from './DocPrimaryResponse'
 import { DocParams } from './DocParams'

package/src/components/DocRateLimited/DocRateLimited.tsx

@@ -23,9 +23,10 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { Code, Tooltip } from '@looker/components'
-import { IMethod } from '@looker/sdk-codegen'
+import type { IMethod } from '@looker/sdk-codegen'
 
 interface DocRateLimitedProps {
   method: IMethod

package/src/components/DocReferences/DocReferences.spec.tsx

@@ -27,8 +27,12 @@ import React from 'react'
 import { methodRefs, typeRefs } from '@looker/sdk-codegen'
 import { screen } from '@testing-library/react'
 
-import { renderWithSearchAndRouter } from '../../test-utils'
+import {
+  createTestStore,
+  renderWithRouterAndReduxProvider,
+} from '../../test-utils'
 import { api } from '../../test-data'
+import { buildPath } from '../../utils'
 import { DocReferences } from './DocReferences'
 
 describe('DocReferences', () => {
@@ -36,7 +40,7 @@ describe('DocReferences', () => {
     const typesUsed = typeRefs(api, api.types.DashboardElement.customTypes)
     const typesUsedBy = typeRefs(api, api.types.DashboardElement.parentTypes)
     const methodsUsedBy = methodRefs(api, api.types.DashboardElement.methodRefs)
-    renderWithSearchAndRouter(
+    renderWithRouterAndReduxProvider(
       <DocReferences
         typesUsed={typesUsed}
         typesUsedBy={typesUsedBy}
@@ -50,32 +54,39 @@ describe('DocReferences', () => {
     )
     expect(screen.getByText(typesUsed[0].name).closest('a')).toHaveAttribute(
       'href',
-      `/3.1/types/${typesUsed[0].name}`
+      buildPath(api, typesUsed[0], '3.1')
     )
 
     expect(typesUsedBy).toHaveLength(1)
     expect(typesUsedBy[0].name).toEqual('Dashboard')
     expect(screen.getByText(typesUsedBy[0].name).closest('a')).toHaveAttribute(
       'href',
-      `/3.1/types/${typesUsedBy[0].name}`
+      buildPath(api, typesUsedBy[0], '3.1')
     )
     expect(
       screen.getByText(methodsUsedBy[0].name).closest('a')
-    ).toHaveAttribute('href', `/3.1/methods/Dashboard/${methodsUsedBy[0].name}`)
+    ).toHaveAttribute('href', buildPath(api, methodsUsedBy[0], '3.1'))
   })
 
   test('it highlights text matching search pattern', () => {
     const highlightPattern = 'dash'
-    renderWithSearchAndRouter(
+    const store = createTestStore({
+      settings: { searchPattern: highlightPattern },
+    })
+    renderWithRouterAndReduxProvider(
       <DocReferences
         typesUsed={[api.types.Dashboard]}
         specKey={'3.1'}
         api={api}
       />,
-      highlightPattern
+      undefined,
+      store
     )
     const foundRef = screen.getByRole('link')
     expect(foundRef).toContainHTML('<span class="hi">Dash</span>board')
-    expect(foundRef).toHaveAttribute('href', '/3.1/types/Dashboard')
+    expect(foundRef).toHaveAttribute(
+      'href',
+      buildPath(api, api.types.Dashboard, '3.1')
+    )
   })
 })

package/src/components/DocReferences/DocReferences.tsx

@@ -24,11 +24,13 @@
 
  */
 
-import React, { FC, useContext } from 'react'
-import { ApiModel, IMethod, IType } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
+import type { ApiModel, IMethod, IType } from '@looker/sdk-codegen'
+import { CollapserCard } from '@looker/run-it'
 
-import { SearchContext } from '../../context'
-import { CollapserCard } from '../Collapser'
+import { useSelector } from 'react-redux'
+import { selectSearchPattern } from '../../state'
 import { DocReferenceItems } from './utils'
 
 interface DocReferencesProps {
@@ -49,9 +51,7 @@ export const DocReferences: FC<DocReferencesProps> = ({
   methodsUsedBy = [],
   typesUsedBy = [],
 }) => {
-  const {
-    searchSettings: { pattern },
-  } = useContext(SearchContext)
+  const searchPattern = useSelector(selectSearchPattern)
 
   if (
     typesUsed.length === 0 &&
@@ -68,21 +68,21 @@ export const DocReferences: FC<DocReferencesProps> = ({
           typesUsed,
           api,
           specKey,
-          pattern
+          searchPattern
         )}
         {DocReferenceItems(
           'Used by types:',
           typesUsedBy,
           api,
           specKey,
-          pattern
+          searchPattern
         )}
         {DocReferenceItems(
           'Used by methods:',
           methodsUsedBy,
           api,
           specKey,
-          pattern
+          searchPattern
         )}
       </>
     </CollapserCard>

package/src/components/DocReferences/utils.spec.tsx

@@ -23,19 +23,7 @@
  SOFTWARE.
 
  */
-import { api } from '../../test-data'
-import { buildPath } from './utils'
 
 describe('DocReferences utils', () => {
-  describe('buildPath', () => {
-    test('given a method it builds a method path', () => {
-      const path = buildPath(api, api.methods.create_dashboard, '3.1')
-      expect(path).toEqual('/3.1/methods/Dashboard/create_dashboard')
-    })
-
-    test('given a type it creates a type path', () => {
-      const path = buildPath(api, api.types.Dashboard, '3.1')
-      expect(path).toEqual('/3.1/types/Dashboard')
-    })
-  })
+  test.todo('<DocReferenceItems />')
 })

package/src/components/DocReferences/utils.tsx

@@ -24,45 +24,10 @@
 
  */
 import React from 'react'
-import { ApiModel, IMethod, IType, Method } from '@looker/sdk-codegen'
+import type { ApiModel, IMethod, IType } from '@looker/sdk-codegen'
 import { Link } from 'react-router-dom'
-
-import { buildMethodPath, buildTypePath, highlightHTML } from '../../utils'
-import { ApixHeading } from '../common'
-
-/**
- * Returns the tag for a given method name
- * @param api Parsed api
- * @param methodName SDK method name
- * @returns Corresponding tag
- */
-const getTag = (api: ApiModel, methodName: string) => {
-  // Find tag containing methodName
-  return Object.entries(api.tags)
-    .filter(([, methods]) => methodName in methods)
-    .map(([methodTag]) => methodTag)[0]
-}
-
-/**
- * Builds a path matching MethodScene or TypeScene route
- * @param api
- * @param item A method or type item
- * @param specKey A string to identify the spec in the url
- * @returns a method or type path
- */
-export const buildPath = (
-  api: ApiModel,
-  item: IMethod | IType,
-  specKey: string
-) => {
-  let path
-  if (item instanceof Method) {
-    path = buildMethodPath(specKey, getTag(api, item.name), item.name)
-  } else {
-    path = buildTypePath(specKey, item.name)
-  }
-  return path
-}
+import { RunItHeading } from '@looker/run-it'
+import { buildPath, highlightHTML } from '../../utils'
 
 /**
  * Renders a heading and links to all item types
@@ -78,7 +43,7 @@ export const DocReferenceItems = (
 
   return (
     <>
-      <ApixHeading as="h4">{heading}</ApixHeading>
+      <RunItHeading as="h4">{heading}</RunItHeading>
       {items.map((item, index) => (
         <span className="doc-link" key={item.name}>
           {index ? ', ' : ''}

package/src/components/DocResponses/DocResponseTypes.tsx

@@ -23,13 +23,20 @@
  SOFTWARE.
 
  */
-import React, { FC, useState, useEffect } from 'react'
+
+import type { FC } from 'react'
+import React, { useState, useEffect } from 'react'
 import { ButtonToggle, ButtonItem } from '@looker/components'
-import { KeyedCollection, IMethodResponse } from '@looker/sdk-codegen'
+import type {
+  ApiModel,
+  KeyedCollection,
+  IMethodResponse,
+} from '@looker/sdk-codegen'
 
 import { ExploreType } from '..'
 
 interface DocResponseTypesProps {
+  api: ApiModel
   responses: KeyedCollection<IMethodResponse>
 }
 
@@ -38,7 +45,10 @@ interface DocResponseTypesProps {
  * toggling media type and render the response
  * @param response
  */
-export const DocResponseTypes: FC<DocResponseTypesProps> = ({ responses }) => {
+export const DocResponseTypes: FC<DocResponseTypesProps> = ({
+  api,
+  responses,
+}) => {
   const mediaTypes = Object.keys(responses)
   const [selectedMediaType, setSelectedMediaType] = useState(mediaTypes[0])
   const [resps, setResps] = useState(responses)
@@ -47,7 +57,7 @@ export const DocResponseTypes: FC<DocResponseTypesProps> = ({ responses }) => {
     /** When new responses are passed, update the default selected media type */
     setSelectedMediaType(mediaTypes[0])
     setResps(responses)
-  }, [responses])
+  }, [responses, mediaTypes])
 
   // TODO: Account for endpoints with no responses (e.g. delete a custom cmd)
   return (
@@ -64,6 +74,7 @@ export const DocResponseTypes: FC<DocResponseTypesProps> = ({ responses }) => {
       </ButtonToggle>
       <div style={{ overflow: 'auto' }}>
         <ExploreType
+          api={api}
           key={selectedMediaType}
           type={resps[selectedMediaType].type}
           link={true}

package/src/components/DocResponses/DocResponses.spec.tsx

@@ -35,7 +35,7 @@ import { buildResponseTree } from './utils'
 describe('DocResponses', () => {
   test('it renders all response statuses and their types', async () => {
     const responses = api.methods.run_look.responses
-    renderWithRouter(<DocResponses responses={responses} />)
+    renderWithRouter(<DocResponses api={api} responses={responses} />)
 
     expect(screen.getByText('Response Models')).toBeInTheDocument()
 

package/src/components/DocResponses/DocResponses.tsx

@@ -24,22 +24,24 @@
 
  */
 
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { Tab, TabList, TabPanel, TabPanels, useTabs } from '@looker/components'
-import { IMethodResponse } from '@looker/sdk-codegen'
+import type { IMethodResponse, ApiModel } from '@looker/sdk-codegen'
 
-import { CollapserCard } from '../Collapser'
+import { CollapserCard } from '@looker/run-it'
 import { DocResponseTypes } from './DocResponseTypes'
 import { buildResponseTree } from './utils'
 
 interface DocResponsesProps {
   responses: IMethodResponse[]
+  api: ApiModel
 }
 
 /**
  * Renders a tab list and tab panels for different method response types
  */
-export const DocResponses: FC<DocResponsesProps> = ({ responses }) => {
+export const DocResponses: FC<DocResponsesProps> = ({ api, responses }) => {
   const tabs = useTabs()
 
   if (responses.length === 0) return <></>
@@ -57,7 +59,7 @@ export const DocResponses: FC<DocResponsesProps> = ({ responses }) => {
         <TabPanels {...tabs} pt="0">
           {Object.values(responseTree).map((responses, index) => (
             <TabPanel key={index}>
-              <DocResponseTypes responses={responses} />
+              <DocResponseTypes api={api} responses={responses} />
             </TabPanel>
           ))}
         </TabPanels>

package/src/components/DocResponses/utils.ts

@@ -24,7 +24,7 @@
 
  */
 
-import { IMethodResponse, KeyedCollection } from '@looker/sdk-codegen'
+import type { IMethodResponse, KeyedCollection } from '@looker/sdk-codegen'
 
 /**
  * Given an array of method responses, group them by statusCode. The value of each status code is a collection of

package/src/components/DocSDKs/DocDeclarations.tsx

@@ -24,8 +24,9 @@
 
  */
 import { Tab, TabList, TabPanel, TabPanels, useTabs } from '@looker/components'
-import { KeyedCollection } from '@looker/sdk-codegen'
-import React, { FC } from 'react'
+import type { KeyedCollection } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
 import { DocCode } from '../DocCode'
 
 interface DocDeclarationsProps {

package/src/components/DocSDKs/DocSDKs.spec.tsx

@@ -26,11 +26,11 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
 import { codeGenerators } from '@looker/sdk-codegen'
-import { Store } from 'redux'
+import type { Store } from 'redux'
 
 import { api } from '../../test-data'
-import { renderWithReduxProvider } from '../../test-utils'
-import { configureStore, RootState } from '../../state'
+import { renderWithReduxProvider, createTestStore } from '../../test-utils'
+import type { RootState } from '../../state'
 import { DocSDKs } from './DocSDKs'
 
 describe('DocSDKs', () => {
@@ -39,7 +39,12 @@ describe('DocSDKs', () => {
   const pattern = new RegExp(`${supportedLanguages.join('|')}`)
 
   beforeAll(() => {
-    store = configureStore({ settings: { sdkLanguage: 'All' } })
+    store = createTestStore({
+      settings: {
+        initialized: false,
+        sdkLanguage: 'All',
+      },
+    })
   })
 
   test.each([
@@ -60,7 +65,9 @@ describe('DocSDKs', () => {
   test.each(supportedLanguages)(
     'it can render a %s method declaration',
     (sdkLanguage) => {
-      store = configureStore({ settings: { sdkLanguage } })
+      store = createTestStore({
+        settings: { initialized: false, sdkLanguage },
+      })
       renderWithReduxProvider(
         <DocSDKs api={api} method={api.methods.run_look} />,
         store