@looker/api-explorer 0.9.18 → 0.9.24

package/src/components/SideNav/SideNav.tsx

@@ -24,36 +24,45 @@
 
  */
 
-import React, { FC, useContext, useEffect, useState, Dispatch } from 'react'
+import type { FC, Dispatch } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
 import {
-  Heading,
   TabList,
   Tab,
   TabPanel,
   TabPanels,
   useTabs,
   InputSearch,
-  SpaceVertical,
 } from '@looker/components'
-import {
+import type {
   SpecItem,
   SpecList,
-  CriteriaToSet,
   ISearchResult,
   ApiModel,
+  TagList,
+  TypeTagList,
 } from '@looker/sdk-codegen'
-import { useRouteMatch } from 'react-router-dom'
+import { criteriaToSet, tagTypes } from '@looker/sdk-codegen'
+import { useSelector } from 'react-redux'
 
-import { SearchContext } from '../../context'
-import { setPattern, SpecAction } from '../../reducers'
+import type { SpecAction } from '../../reducers'
 import { useWindowSize } from '../../utils'
 import { HEADER_REM } from '../Header'
-import { SelectorContainer } from '../SelectorContainer'
-import { SideNavTags } from './SideNavTags'
-import { SideNavTypes } from './SideNavTypes'
+import { selectSearchCriteria, useSettingActions } from '../../state'
+import { SideNavMethodTags } from './SideNavMethodTags'
+import { SideNavTypeTags } from './SideNavTypeTags'
 import { useDebounce, countMethods, countTypes } from './searchUtils'
 import { SearchMessage } from './SearchMessage'
 
+interface SideNavState {
+  tags: TagList
+  typeTags: TypeTagList
+  methodCount: number
+  typeCount: number
+  searchResults?: ISearchResult
+}
+
 interface SideNavProps {
   headless?: boolean
   /** Specs to choose from */
@@ -64,34 +73,45 @@ interface SideNavProps {
   specDispatch: Dispatch<SpecAction>
 }
 
-interface SideNavParams {
-  sideNavTab: string
-}
-
-export const SideNav: FC<SideNavProps> = ({
-  headless = false,
-  specs,
-  spec,
-  specDispatch,
-}) => {
-  const api = spec.api || ({} as ApiModel)
+export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
+  const history = useHistory()
+  const location = useLocation()
   const specKey = spec.key
   const tabNames = ['methods', 'types']
-  const match = useRouteMatch<SideNavParams>(`/:specKey/:sideNavTab?`)
-  let defaultIndex = tabNames.indexOf('methods')
-  if (match && match.params.sideNavTab) {
-    defaultIndex = tabNames.indexOf(match.params.sideNavTab)
+  const pathParts = location.pathname.split('/')
+  const sideNavTab = pathParts[1] === 'diff' ? pathParts[3] : pathParts[2]
+  let defaultIndex = tabNames.indexOf(sideNavTab)
+  if (defaultIndex < 0) {
+    defaultIndex = tabNames.indexOf('methods')
+  }
+  const onTabChange = (index: number) => {
+    const parts = location.pathname.split('/')
+    if (parts[1] === 'diff') {
+      if (parts[3] !== tabNames[index]) {
+        parts[3] = tabNames[index]
+        history.push(parts.join('/'))
+      }
+    } else {
+      if (parts[2] !== tabNames[index]) {
+        parts[2] = tabNames[index]
+        history.push(parts.join('/'))
+      }
+    }
   }
-  const tabs = useTabs({ defaultIndex })
-  const { searchSettings, setSearchSettings } = useContext(SearchContext)
-  const [pattern, setSearchPattern] = useState(searchSettings.pattern)
+  const tabs = useTabs({ defaultIndex, onChange: onTabChange })
+  const searchCriteria = useSelector(selectSearchCriteria)
+  const { setSearchPatternAction } = useSettingActions()
+
+  const [pattern, setSearchPattern] = useState('')
   const debouncedPattern = useDebounce(pattern, 250)
-  const [searchResults, setSearchResults] = useState<ISearchResult>()
-  const searchCriteria = CriteriaToSet(searchSettings.criteria)
-  const [tags, setTags] = useState(api.tags || {})
-  const [types, setTypes] = useState(api.types || {})
-  const [methodCount, setMethodCount] = useState(countMethods(tags))
-  const [typeCount, setTypeCount] = useState(countTypes(types))
+  const [sideNavState, setSideNavState] = useState<SideNavState>(() => ({
+    tags: spec?.api?.tags || {},
+    typeTags: spec?.api?.typeTags || {},
+    methodCount: countMethods(spec?.api?.tags || {}),
+    typeCount: countTypes(spec?.api?.types || {}),
+    searchResults: undefined,
+  }))
+  const { tags, typeTags, methodCount, typeCount, searchResults } = sideNavState
 
   const handleInputChange = (value: string) => {
     setSearchPattern(value)
@@ -101,22 +121,43 @@ export const SideNav: FC<SideNavProps> = ({
     let results
     let newTags
     let newTypes
-    if (debouncedPattern) {
-      results = api.search(pattern, searchCriteria)
+    let newTypeTags
+    const api = spec.api || ({} as ApiModel)
+
+    if (debouncedPattern && api.search) {
+      results = api.search(pattern, criteriaToSet(searchCriteria))
       newTags = results.tags
       newTypes = results.types
+      newTypeTags = tagTypes(api, results.types)
     } else {
       newTags = api.tags || {}
       newTypes = api.types || {}
+      newTypeTags = api.typeTags || {}
     }
 
-    setTags(newTags)
-    setTypes(newTypes)
-    setMethodCount(countMethods(newTags))
-    setTypeCount(countTypes(newTypes))
-    setSearchResults(results)
-    setSearchSettings(setPattern(debouncedPattern!))
-  }, [debouncedPattern, specKey, spec])
+    setSideNavState({
+      tags: newTags,
+      typeTags: newTypeTags,
+      typeCount: countTypes(newTypes),
+      methodCount: countMethods(newTags),
+      searchResults: results,
+    })
+    setSearchPatternAction({ searchPattern: debouncedPattern })
+  }, [
+    debouncedPattern,
+    specKey,
+    spec,
+    setSearchPatternAction,
+    pattern,
+    searchCriteria,
+  ])
+
+  useEffect(() => {
+    const { selectedIndex, onSelectTab } = tabs
+    if (defaultIndex !== selectedIndex) {
+      onSelectTab(defaultIndex)
+    }
+  }, [defaultIndex, tabs])
 
   const size = useWindowSize()
   const headlessOffset = headless ? 200 : 120
@@ -124,28 +165,17 @@ export const SideNav: FC<SideNavProps> = ({
 
   return (
     <nav>
-      <SpaceVertical alignItems="center" p="large" gap="xsmall">
-        {headless && (
-          <SpaceVertical>
-            <Heading as="h5" color="key" fontWeight="bold">
-              API Documentation
-            </Heading>
-            <SelectorContainer
-              specs={specs}
-              spec={spec}
-              specDispatch={specDispatch}
-            />
-          </SpaceVertical>
-        )}
-        <InputSearch
-          aria-label="Search"
-          onChange={handleInputChange}
-          placeholder="Search"
-          value={pattern}
-          isClearable
-          changeOnSelect
-        />
-      </SpaceVertical>
+      <InputSearch
+        pl="large"
+        pr="large"
+        pb="large"
+        pt={headless ? 'u3' : 'large'}
+        aria-label="Search"
+        onChange={handleInputChange}
+        placeholder="Search"
+        value={pattern}
+        isClearable
+      />
       <SearchMessage search={searchResults} />
       <TabList {...tabs} distribute>
         <Tab>Methods ({methodCount})</Tab>
@@ -153,14 +183,18 @@ export const SideNav: FC<SideNavProps> = ({
       </TabList>
       <TabPanels {...tabs} pt="xsmall" height={`${menuH}px`} overflow="auto">
         <TabPanel>
-          <SideNavTags
+          <SideNavMethodTags
             tags={tags}
             specKey={specKey}
             defaultOpen={!!searchResults}
           />
         </TabPanel>
         <TabPanel>
-          <SideNavTypes types={types} specKey={specKey} />
+          <SideNavTypeTags
+            tags={typeTags}
+            specKey={specKey}
+            defaultOpen={!!searchResults}
+          />
         </TabPanel>
       </TabPanels>
     </nav>

package/src/components/SideNav/{SideNavTags.spec.tsx → SideNavMethodTags.spec.tsx}

@@ -29,13 +29,15 @@ import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { api } from '../../test-data'
-import { renderWithSearchAndRouter } from '../../test-utils'
-import { SideNavTags } from './SideNavTags'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
+import { SideNavMethodTags } from './SideNavMethodTags'
 
 describe('SideNavTags', () => {
   const tags = pick(api.tags, ['ApiAuth', 'Dashboard'])
   test('it renders a provided tag and its methods', () => {
-    renderWithSearchAndRouter(<SideNavTags tags={tags} specKey={'3.1'} />)
+    renderWithRouterAndReduxProvider(
+      <SideNavMethodTags tags={tags} specKey={'3.1'} />
+    )
     const tag = screen.getByText('Dashboard')
     const tagContent = 'Create Dashboard'
     expect(screen.queryByText(tagContent)).not.toBeInTheDocument()
@@ -46,7 +48,9 @@ describe('SideNavTags', () => {
   })
 
   test('tags are rendered initially collapsed and expand when clicked', () => {
-    renderWithSearchAndRouter(<SideNavTags tags={tags} specKey={'3.1'} />)
+    renderWithRouterAndReduxProvider(
+      <SideNavMethodTags tags={tags} specKey={'3.1'} />
+    )
 
     const allTags = screen.getAllByText(/ApiAuth|Dashboard/)
     expect(allTags).toHaveLength(2)
@@ -58,10 +62,8 @@ describe('SideNavTags', () => {
   })
 
   test('tag is expanded if specified in route', () => {
-    renderWithSearchAndRouter(
-      <SideNavTags tags={tags} specKey={'3.1'} />,
-      undefined,
-      undefined,
+    renderWithRouterAndReduxProvider(
+      <SideNavMethodTags tags={tags} specKey={'3.1'} />,
       ['/3.1/methods/Dashboard']
     )
 

package/src/components/SideNav/{SideNavTags.tsx → SideNavMethodTags.tsx}

@@ -24,30 +24,32 @@
 
  */
 
-import React, { FC } from 'react'
-import { TagList } from '@looker/sdk-codegen'
+import React from 'react'
+import styled from 'styled-components'
+import type { TagList } from '@looker/sdk-codegen'
 import { SideNavMethods } from './SideNavMethods'
 
 interface TagsProps {
   tags: TagList
   specKey: string
   defaultOpen?: boolean
+  className?: string
 }
 
-export const SideNavTags: FC<TagsProps> = ({
-  tags,
-  specKey,
-  defaultOpen = false,
-}) => (
-  <>
-    {Object.keys(tags).map((tag) => (
-      <SideNavMethods
-        key={tag}
-        defaultOpen={defaultOpen}
-        tag={tag}
-        methods={tags[tag]}
-        specKey={specKey}
-      />
-    ))}
-  </>
-)
+export const SideNavMethodTags = styled(
+  ({ tags, specKey, className, defaultOpen }: TagsProps) => (
+    <div className={className}>
+      {Object.keys(tags).map((tag) => (
+        <SideNavMethods
+          key={tag}
+          defaultOpen={defaultOpen}
+          tag={tag}
+          methods={tags[tag]}
+          specKey={specKey}
+        />
+      ))}
+    </div>
+  )
+)`
+  padding: 0 ${({ theme }) => theme.space.large};
+`

package/src/components/SideNav/SideNavMethods.spec.tsx

@@ -29,7 +29,10 @@ import userEvent from '@testing-library/user-event'
 import { screen } from '@testing-library/react'
 
 import { api } from '../../test-data'
-import { renderWithSearchAndRouter } from '../../test-utils'
+import {
+  createTestStore,
+  renderWithRouterAndReduxProvider,
+} from '../../test-utils'
 import { SideNavMethods } from './SideNavMethods'
 
 describe('SideNavMethods', () => {
@@ -37,7 +40,7 @@ describe('SideNavMethods', () => {
   const methods = api.tags[tag]
 
   test('it renders provided methods', () => {
-    renderWithSearchAndRouter(
+    renderWithRouterAndReduxProvider(
       <SideNavMethods methods={methods} tag={tag} specKey={'3.1'} />
     )
     userEvent.click(screen.getByText(tag))
@@ -50,14 +53,15 @@ describe('SideNavMethods', () => {
   })
 
   test('it highlights text matching search pattern in both tag and methods', () => {
-    const highlightPattern = 'dash'
-    renderWithSearchAndRouter(
+    const store = createTestStore({ settings: { searchPattern: 'dash' } })
+    renderWithRouterAndReduxProvider(
       <SideNavMethods
         methods={pick(methods, 'create_dashboard')}
         tag={tag}
         specKey={'3.1'}
       />,
-      highlightPattern
+      undefined,
+      store
     )
     userEvent.click(screen.getByText('Dash'))
     const matches = screen.getAllByText(/dash/i)

package/src/components/SideNav/SideNavMethods.tsx

@@ -24,160 +24,112 @@
 
  */
 
-import React, { FC, useContext, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
-import {
-  Accordion,
-  AccordionDisclosure,
-  AccordionContent,
-  List,
-  Heading,
-} from '@looker/components'
-import { MethodList } from '@looker/sdk-codegen'
+import { Accordion2, Heading } from '@looker/components'
+import type { MethodList } from '@looker/sdk-codegen'
+import { useSelector } from 'react-redux'
 import { useHistory, useRouteMatch } from 'react-router-dom'
+
 import { Link } from '../Link'
 import { buildMethodPath, highlightHTML } from '../../utils'
-import { SearchContext } from '../../context'
+import { selectSearchPattern } from '../../state'
 
 interface MethodsProps {
-  className?: string
-  defaultOpen?: boolean
   methods: MethodList
   tag: string
   specKey: string
+  className?: string
+  defaultOpen?: boolean
 }
 
-const SideNavMethodsLayout: FC<MethodsProps> = ({
-  className,
-  defaultOpen = false,
-  methods,
-  tag,
-  specKey,
-}) => {
-  const {
-    searchSettings: { pattern },
-  } = useContext(SearchContext)
-  const match = useRouteMatch<{ methodTag: string }>(
-    `/:specKey/methods/:methodTag/:methodName?`
-  )
-  const [isOpen, setIsOpen] = useState(defaultOpen)
-  const history = useHistory()
-
-  const handleOpen = () => {
-    const _isOpen = !isOpen
-    setIsOpen(_isOpen)
-    if (_isOpen) history.push(`/${specKey}/methods/${tag}`)
-  }
+export const SideNavMethods = styled(
+  ({ className, methods, tag, specKey, defaultOpen = false }: MethodsProps) => {
+    const searchPattern = useSelector(selectSearchPattern)
+    const match = useRouteMatch<{ methodTag: string }>(
+      `/:specKey/methods/:methodTag/:methodName?`
+    )
+    const [isOpen, setIsOpen] = useState(defaultOpen)
+    const history = useHistory()
+
+    const handleOpen = () => {
+      const _isOpen = !isOpen
+      setIsOpen(_isOpen)
+      if (_isOpen) history.push(`/${specKey}/methods/${tag}`)
+    }
 
-  useEffect(() => {
-    const status = match
-      ? defaultOpen || match.params.methodTag === tag
-      : defaultOpen
-    setIsOpen(status)
-  }, [defaultOpen])
-
-  return (
-    <Accordion
-      defaultOpen={defaultOpen}
-      isOpen={isOpen}
-      toggleOpen={handleOpen}
-      className={className}
-    >
-      <AccordionDisclosure>
-        {/* TODO: Fix highlighting. It is applied but it is somehow being overridden */}
-        <Heading as="h5">{highlightHTML(pattern, tag)}</Heading>
-      </AccordionDisclosure>
-      <AccordionContent>
-        <AutoHeightList>
+    useEffect(() => {
+      const status = match
+        ? defaultOpen || match.params.methodTag === tag
+        : defaultOpen
+      setIsOpen(status)
+    }, [defaultOpen, match, tag])
+
+    /* TODO: Fix highlighting. It is applied but it is somehow being overridden */
+    return (
+      <Accordion2
+        isOpen={isOpen}
+        toggleOpen={handleOpen}
+        className={className}
+        label={
+          <Heading as="h4" fontSize="small" py="xsmall">
+            {highlightHTML(searchPattern, tag)}
+          </Heading>
+        }
+      >
+        <ul>
           {Object.values(methods).map((method) => (
-            <SideNavLink
-              key={method.name}
-              to={`${buildMethodPath(specKey, tag, method.name)}`}
-            >
-              <li>
-                <Heading as="h5" truncate>
-                  {highlightHTML(pattern, method.summary)}
-                </Heading>
-              </li>
-            </SideNavLink>
+            <li key={method.name}>
+              <Link to={`${buildMethodPath(specKey, tag, method.name)}`}>
+                {highlightHTML(searchPattern, method.summary)}
+              </Link>
+            </li>
           ))}
-        </AutoHeightList>
-      </AccordionContent>
-    </Accordion>
-  )
-}
-
-const AutoHeightList = styled(List)`
-  height: auto;
-`
-
-const SideNavLink = styled(Link)`
-  &:hover,
-  &:focus,
-  &.active {
-    li {
-      background-color: ${({ theme }) => theme.colors.ui1};
-    }
-  }
-
-  li {
-    display: flex;
-    border-radius: ${({ theme: { radii } }) => radii.medium};
-    padding: ${({ theme }) => theme.space.xsmall};
+        </ul>
+      </Accordion2>
+    )
   }
-`
+)`
+  font-family: ${({ theme }) => theme.fonts.brand};
 
-export const SideNavMethods = styled(SideNavMethodsLayout)`
-  ${AccordionDisclosure} {
-    padding-left: ${({ theme }) => theme.space.large};
-    padding-right: ${({ theme }) => theme.space.large};
-
-    &:hover {
+  [aria-controls]:hover,
+  [aria-expanded='true'] {
+    h4,
+    svg {
       color: ${({ theme }) => theme.colors.key};
-      ${Heading} {
-        color: ${({ theme }) => theme.colors.key};
-      }
-    }
-
-    &[aria-expanded='true'] {
-      color: ${({ theme }) => theme.colors.key};
-      ${Heading} {
-        color: ${({ theme }) => theme.colors.key};
-        font-weight: ${({ theme }) => theme.fontWeights.semiBold};
-      }
     }
   }
 
-  ${AccordionContent} {
-    padding: ${({
-      theme: {
-        space: { xxsmall, large },
-      },
-    }) => `${xxsmall} ${large}`};
+  [aria-expanded='true'] h4 {
+    font-weight: ${({ theme }) => theme.fontWeights.semiBold};
   }
 
-  ${List} {
+  ul {
     border-left: dashed 1px ${({ theme }) => theme.colors.ui2};
-    padding: ${({ theme }) => theme.space.xxsmall};
-    padding-right: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    padding-left: ${({ theme }) => theme.space.xxsmall};
+    padding-top: ${({ theme }) => theme.space.xxsmall};
   }
 
-  li {
-    display: flex;
-    border-radius: ${({ theme: { radii } }) => radii.medium};
-    padding: ${({ theme }) => theme.space.xsmall};
-
-    &:hover,
-    &:focus {
-      background-color: ${({ theme }) => theme.colors.ui1};
-    }
+  [aria-current] {
+    background: ${({ theme }) => theme.colors.ui1};
+    font-weight: ${({ theme }) => theme.fontWeights.semiBold};
   }
 
-  [aria-current] {
-    background-color: ${({ theme }) => theme.colors.ui1};
+  ${Link} {
+    border-radius: ${({ theme }) => theme.radii.medium};
+    display: block;
+    overflow: hidden;
+    padding: ${({ theme }) => theme.space.xsmall};
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
-    ${Heading} {
-      font-weight: ${({ theme }) => theme.fontWeights.semiBold};
+    &:hover,
+    &:focus,
+    &.active {
+      background: ${({ theme }) => theme.colors.ui1};
     }
   }
 `