@looker/api-explorer 0.9.18 → 0.9.24

package/src/components/DocSDKs/DocSDKs.tsx

@@ -24,21 +24,21 @@
 
  */
 
-import React, { FC, useState, useEffect } from 'react'
+import type { FC } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import {
+import type {
   IMethod,
   IType,
   ApiModel,
   KeyedCollection,
   CodeGen,
-  Method,
 } from '@looker/sdk-codegen'
-import { getGenerators } from '@looker/run-it'
+import { Method } from '@looker/sdk-codegen'
+import { CollapserCard, getGenerators } from '@looker/run-it'
 
 import { DocCode } from '../DocCode'
-import { getSelectedSdkLanguage } from '../../state'
-import { CollapserCard } from '../Collapser'
+import { selectSdkLanguage } from '../../state'
 import { noComment } from './utils'
 import { DocDeclarations } from './DocDeclarations'
 
@@ -73,7 +73,7 @@ const getDeclarations = (
  * Given a method or a type, it renders its SDK declaration in all supported languages.
  */
 export const DocSDKs: FC<LanguageSDKProps> = ({ api, method, type }) => {
-  const sdkLanguage = useSelector(getSelectedSdkLanguage)
+  const sdkLanguage = useSelector(selectSdkLanguage)
   const generators = getGenerators(api)
   const [item, setItem] = useState(method ? noComment(method) : type!)
   const [declarations, setDeclarations] = useState(

package/src/components/DocSDKs/utils.ts

@@ -23,7 +23,7 @@
  SOFTWARE.
 
  */
-import { IMethod } from '@looker/sdk-codegen'
+import type { IMethod } from '@looker/sdk-codegen'
 import clone from 'lodash/clone'
 
 /**

package/src/components/DocSchema/DocSchema.tsx

@@ -24,10 +24,11 @@
 
  */
 
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 
 import { CodeDisplay } from '@looker/code-editor'
-import { CollapserCard } from '../Collapser'
+import { CollapserCard } from '@looker/run-it'
 
 interface DocSchemaProps {
   object: any

package/src/components/DocSdkUsage/DocSdkExampleCell.tsx

@@ -23,7 +23,8 @@
  SOFTWARE.
 
  */
-import React, { FC, PropsWithChildren } from 'react'
+import type { FC, PropsWithChildren } from 'react'
+import React from 'react'
 import { DataTableCell, Span } from '@looker/components'
 
 import { getTableItemBottomBorder } from './utils'

package/src/components/DocSdkUsage/DocSdkUsage.spec.tsx

@@ -27,7 +27,7 @@ import React from 'react'
 import { screen } from '@testing-library/react'
 import { findExampleLanguages } from '@looker/sdk-codegen'
 
-import { renderWithReduxProviderAndLode } from '../../test-utils'
+import { renderWithLode } from '../../test-utils'
 import { api, examples } from '../../test-data'
 import { DocSdkUsage } from './DocSdkUsage'
 import {
@@ -47,7 +47,7 @@ describe('DocSdkUsage', () => {
       method.operationId,
       1
     )
-    renderWithReduxProviderAndLode(<DocSdkUsage method={method} />, examples)
+    renderWithLode(<DocSdkUsage method={method} />, examples)
     expect(screen.getAllByRole('link')).toHaveLength(PER_PAGE_COUNT)
 
     expect(

package/src/components/DocSdkUsage/DocSdkUsage.tsx

@@ -23,7 +23,8 @@
  SOFTWARE.
 
  */
-import React, { FC, useContext, useState, useEffect } from 'react'
+import type { FC } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   Box,
   Card,
@@ -34,13 +35,13 @@ import {
   Space,
   Pagination,
 } from '@looker/components'
-import { findExampleLanguages, IMethod } from '@looker/sdk-codegen'
+import type { IMethod } from '@looker/sdk-codegen'
+import { findExampleLanguages } from '@looker/sdk-codegen'
+import { CollapserCard } from '@looker/run-it'
 import { InsertDriveFile } from '@styled-icons/material-outlined/InsertDriveFile'
 import { useSelector } from 'react-redux'
 
-import { getSelectedSdkLanguage } from '../../state'
-import { CollapserCard } from '../Collapser'
-import { LodeContext } from '../../context'
+import { selectSdkLanguage, selectExamplesLode } from '../../state'
 import {
   exampleColumns,
   EMPTY_STRING,
@@ -59,15 +60,16 @@ interface DocSdkUsageProps {
  *  links to the source files
  */
 export const DocSdkUsage: FC<DocSdkUsageProps> = ({ method }) => {
-  const { examples } = useContext(LodeContext)
-  const sdkLanguage = useSelector(getSelectedSdkLanguage)
-  let languages = findExampleLanguages(examples, method.name)
+  const examples = useSelector(selectExamplesLode)
+  const sdkLanguage = useSelector(selectSdkLanguage)
   const [page, setPage] = useState(1)
 
   useEffect(() => {
     setPage(1)
   }, [method])
 
+  if (!examples) return <></>
+  let languages = findExampleLanguages(examples, method.name)
   if (languages.length === 0) return <></>
 
   languages = sortLanguagesByPreference(languages, sdkLanguage)

package/src/components/DocSdkUsage/utils.ts

@@ -24,8 +24,10 @@
 
  */
 
-import { findExamples, IExampleMine } from '@looker/sdk-codegen'
-import { DataTableColumns, theme } from '@looker/components'
+import type { IExampleMine } from '@looker/sdk-codegen'
+import { findExamples } from '@looker/sdk-codegen'
+import type { DataTableColumns } from '@looker/components'
+import { theme } from '@looker/components'
 
 export const PER_PAGE_COUNT = 10
 

package/src/components/DocSource/DocSource.spec.tsx

@@ -25,7 +25,8 @@
  */
 import React from 'react'
 import { screen, waitFor } from '@testing-library/react'
-import { IDeclarationMine, permaLink } from '@looker/sdk-codegen'
+import type { IDeclarationMine } from '@looker/sdk-codegen'
+import { permaLink } from '@looker/sdk-codegen'
 import userEvent from '@testing-library/user-event'
 import { api } from '../../test-data'
 import { renderWithLode } from '../../test-utils'

package/src/components/DocSource/DocSource.tsx

@@ -23,12 +23,15 @@
  SOFTWARE.
 
  */
-import React, { FC, useContext } from 'react'
-import { findDeclaration, IMethod, IType } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
+import type { IMethod, IType } from '@looker/sdk-codegen'
+import { findDeclaration } from '@looker/sdk-codegen'
 import { Icon, Link, Tooltip } from '@looker/components'
 import { IdeFileDocument } from '@looker/icons'
+import { useSelector } from 'react-redux'
 
-import { LodeContext } from '../../context'
+import { selectDeclarationsLode } from '../../state'
 
 interface DocSourceProps {
   method?: IMethod
@@ -36,7 +39,7 @@ interface DocSourceProps {
 }
 
 export const DocSource: FC<DocSourceProps> = ({ method, type }) => {
-  const { declarations } = useContext(LodeContext)
+  const declarations = useSelector(selectDeclarationsLode)
   let sourceLink
   let declaration
   if (declarations) {

package/src/components/DocStatus/DocStatus.spec.tsx

@@ -37,7 +37,7 @@ describe('DocStatus', () => {
     fireEvent.mouseOver(badge)
     await waitFor(() => {
       expect(screen.getByRole('tooltip')).toHaveTextContent(
-        'This beta endpoint is under development and subject to change.'
+        'This beta item is under development and subject to change.'
       )
     })
   })

package/src/components/DocStatus/DocStatus.tsx

@@ -23,10 +23,11 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { Tooltip } from '@looker/components'
 import { MethodBadge } from '@looker/run-it'
-import { IMethod } from '@looker/sdk-codegen'
+import type { IMethod } from '@looker/sdk-codegen'
 
 import { pickTooltipContent } from '../DocMethodSummary'
 

package/src/components/DocTitle/DocTitle.tsx

@@ -24,9 +24,10 @@
 
  */
 
-import React, { FC } from 'react'
-import { ApixHeading } from '../common'
+import type { FC } from 'react'
+import React from 'react'
+import { RunItHeading } from '@looker/run-it'
 
 export const DocTitle: FC = (props) => (
-  <ApixHeading fontSize="xxxlarge" {...props} />
+  <RunItHeading fontSize="xxxlarge" {...props} />
 )

package/src/{state/settings/action_creators.spec.ts → components/DocTypeSummary/DocTypeSummary.spec.tsx}

@@ -23,15 +23,20 @@
  SOFTWARE.
 
  */
-import { SettingsActionTypes } from './actions'
-import { setSdkLanguageAction } from './action_creators'
-
-describe('Settings reducer action creators', () => {
-  test('setSdkLanguageAction returns a SET_SDK_LANGUAGE action option with provided values', () => {
-    const action = setSdkLanguageAction('TypeScript')
-    expect(action).toEqual({
-      type: SettingsActionTypes.SET_SDK_LANGUAGE,
-      payload: 'TypeScript',
-    })
+import React from 'react'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
+
+import { api } from '../../test-data'
+import { DocTypeSummary } from './DocTypeSummary'
+
+describe('DocTypeSummary', () => {
+  test('it renders a type summary', async () => {
+    const type = api.types.Dashboard
+    renderWithTheme(<DocTypeSummary type={type} />)
+    expect(
+      screen.getByText(type.metaType.toString().toLocaleUpperCase())
+    ).toBeInTheDocument()
+    expect(screen.getByText(type.jsonName)).toBeInTheDocument()
   })
 })

package/src/components/DocTypeSummary/DocTypeSummary.tsx

@@ -0,0 +1,64 @@
+/*
+
+ 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 from 'react'
+import { Card, CardContent, Flex, Space } from '@looker/components'
+import type { IType } from '@looker/sdk-codegen'
+import { MethodBadge, RunItHeading } from '@looker/run-it'
+import { DocSummaryStatus } from '../../components'
+
+interface DocTypeSummaryProps {
+  type: IType
+}
+
+const typeDescription = (type: IType) => {
+  if (type.description) return type.description
+  return `${Object.entries(type.properties).length} properties`
+}
+
+export const DocTypeSummary: FC<DocTypeSummaryProps> = ({ type }) => (
+  <Card maxWidth="50rem" border>
+    <CardContent>
+      <Space align="start" between>
+        <MethodBadge
+          type={type.metaType.toString()}
+          textAlign="center"
+          minWidth="3.7625rem"
+        >
+          {type.metaType.toString().toUpperCase()}
+        </MethodBadge>
+        <Flex alignItems="start" flexDirection="column" flex="1" mx="small">
+          <RunItHeading as="h3" mb="0" pt="0">
+            {type.title || type.jsonName}
+          </RunItHeading>
+          <Space>{typeDescription(type)}</Space>
+        </Flex>
+        <DocSummaryStatus status={type.status} />
+      </Space>
+    </CardContent>
+  </Card>
+)

package/src/{state/action_creators.ts → components/DocTypeSummary/index.tsx}

@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export * from './settings/action_creators'
+export { DocTypeSummary } from './DocTypeSummary'

package/src/components/ErrorBoundary/ErrorBoundary.spec.tsx

@@ -25,6 +25,8 @@
  */
 import { renderWithTheme } from '@looker/components-test-utils'
 import React from 'react'
+import { screen } from '@testing-library/react'
+
 import { ErrorBoundary } from './ErrorBoundary'
 
 const ErrorComp = ({ text }: { text: string }) => {
@@ -37,7 +39,7 @@ const ErrorComp = ({ text }: { text: string }) => {
 
 describe('ErrorBoundary', () => {
   const header = 'Uh oh! Something went wrong!'
-  const actionMessage = 'Try refreshing the page the correct the problem.'
+  const actionMessage = 'Try refreshing the page to correct the problem.'
   const childText = 'Sweet Child'
 
   beforeEach(() => {
@@ -46,27 +48,27 @@ describe('ErrorBoundary', () => {
 
   it('should render child component', () => {
     const logError = jest.fn()
-    const { getByText, queryByText } = renderWithTheme(
+    renderWithTheme(
       <ErrorBoundary logError={logError}>
         <div>{childText}</div>
       </ErrorBoundary>
     )
-    expect(queryByText(header)).not.toBeInTheDocument()
-    expect(queryByText(actionMessage)).not.toBeInTheDocument()
-    expect(getByText(childText)).toBeVisible()
+    expect(screen.queryByText(header)).not.toBeInTheDocument()
+    expect(screen.queryByText(actionMessage)).not.toBeInTheDocument()
+    expect(screen.getByText(childText)).toBeVisible()
     expect(logError).not.toHaveBeenCalled()
   })
 
   it('should render error detail on error', () => {
     const logError = jest.fn()
-    const { getByText, queryByText } = renderWithTheme(
+    renderWithTheme(
       <ErrorBoundary logError={logError}>
         <ErrorComp text={childText} />
       </ErrorBoundary>
     )
-    expect(queryByText(childText)).not.toBeInTheDocument()
-    expect(getByText(header)).toBeVisible()
-    expect(getByText(actionMessage)).toBeVisible()
+    expect(screen.queryByText(childText)).not.toBeInTheDocument()
+    expect(screen.getByText(header)).toBeVisible()
+    expect(screen.getByText(actionMessage)).toBeVisible()
     expect(logError).toHaveBeenCalled()
   })
 })

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -63,7 +63,7 @@ export class ErrorBoundary extends Component<
       return (
         <SomethingWentWrong
           header="Uh oh! Something went wrong!"
-          actionMessage="Try refreshing the page the correct the problem."
+          actionMessage="Try refreshing the page to correct the problem."
         />
       )
     }

package/src/components/ErrorBoundary/components/SomethingWentWrong/SomethingWentWrong.spec.tsx

@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import { renderWithTheme } from '@looker/components-test-utils'
 import React from 'react'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
 import { SomethingWentWrong } from './SomethingWentWrong'
 
 const getMockedComponent = (propOverrides = {}) => {
@@ -43,7 +44,7 @@ describe('SomethingWentWrong', () => {
     const actionMessage = 'User please do this action. It might help'
     const altText = '500 error graphic'
 
-    const { getByText, getByAltText } = renderWithTheme(
+    renderWithTheme(
       getMockedComponent({
         header,
         actionMessage,
@@ -51,8 +52,8 @@ describe('SomethingWentWrong', () => {
       })
     )
 
-    expect(getByText(header)).toBeVisible()
-    expect(getByText(actionMessage)).toBeVisible()
-    expect(getByAltText(altText)).toBeVisible()
+    expect(screen.getByText(header)).toBeVisible()
+    expect(screen.getByText(actionMessage)).toBeVisible()
+    expect(screen.getByTitle(altText)).toBeInTheDocument()
   })
 })