@looker/api-explorer 0.9.55 → 0.9.57

package/src/components/SideNav/SideNav.tsx

@@ -24,123 +24,124 @@
 
  */
 
-import type { FC } from 'react'
-import React, { useEffect, useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import {
-  TabList,
+  Box2,
+  InputSearch,
   Tab,
+  TabList,
   TabPanel,
   TabPanels,
   useTabs,
-  InputSearch,
-  Box2,
-} from '@looker/components'
+} from '@looker/components';
 import type {
-  SpecItem,
-  ISearchResult,
   ApiModel,
+  ISearchResult,
+  SpecItem,
   TagList,
   TypeTagList,
-} from '@looker/sdk-codegen'
-import { criteriaToSet, tagTypes } from '@looker/sdk-codegen'
-import { useSelector } from 'react-redux'
-import { CopyLinkWrapper } from '@looker/run-it'
-import { useWindowSize, useNavigation } from '../../utils'
-import { HEADER_REM } from '../Header'
-import { selectSearchCriteria, selectSearchPattern } from '../../state'
-import { SideNavMethodTags } from './SideNavMethodTags'
-import { SideNavTypeTags } from './SideNavTypeTags'
-import { useDebounce, countMethods, countTypes } from './searchUtils'
-import { SearchMessage } from './SearchMessage'
+} from '@looker/sdk-codegen';
+import { criteriaToSet, tagTypes } from '@looker/sdk-codegen';
+import { useSelector } from 'react-redux';
+import { CopyLinkWrapper } from '@looker/run-it';
+import { useNavigation, useWindowSize } from '../../utils';
+import { HEADER_REM } from '../Header';
+import { selectSearchCriteria, selectSearchPattern } from '../../state';
+import { SideNavMethodTags } from './SideNavMethodTags';
+import { SideNavTypeTags } from './SideNavTypeTags';
+import { countMethods, countTypes, useDebounce } from './searchUtils';
+import { SearchMessage } from './SearchMessage';
 
 interface SideNavState {
-  tags: TagList
-  typeTags: TypeTagList
-  methodCount: number
-  typeCount: number
-  searchResults?: ISearchResult
+  tags: TagList;
+  typeTags: TypeTagList;
+  methodCount: number;
+  typeCount: number;
+  searchResults?: ISearchResult;
 }
 
 interface SideNavProps {
-  headless?: boolean
+  headless?: boolean;
   /** Current selected spec */
-  spec: SpecItem
+  spec: SpecItem;
 }
 
 export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
-  const location = useLocation()
-  const { navigate, navigateWithGlobalParams } = useNavigation()
-  const specKey = spec.key
-  const tabNames = ['methods', 'types']
-  const pathParts = location.pathname.split('/')
-  const sideNavTab = pathParts[1] === 'diff' ? pathParts[3] : pathParts[2]
-  let defaultIndex = tabNames.indexOf(sideNavTab)
+  const location = useLocation();
+  const { navigate, navigateWithGlobalParams } = useNavigation();
+  const specKey = spec.key;
+  const tabNames = ['methods', 'types'];
+  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')
+    defaultIndex = tabNames.indexOf('methods');
   }
   const onTabChange = (index: number) => {
-    const parts = location.pathname.split('/')
+    const parts = location.pathname.split('/');
     if (parts[1] === 'diff') {
       if (parts[3] !== tabNames[index]) {
-        parts[3] = tabNames[index]
-        navigateWithGlobalParams(parts.join('/'))
+        parts[3] = tabNames[index];
+        navigateWithGlobalParams(parts.join('/'));
       }
     } else {
       if (parts[2] !== tabNames[index]) {
-        parts[2] = tabNames[index]
-        navigateWithGlobalParams(parts.join('/'))
+        parts[2] = tabNames[index];
+        navigateWithGlobalParams(parts.join('/'));
       }
     }
-  }
-  const tabs = useTabs({ defaultIndex, onChange: onTabChange })
-  const searchCriteria = useSelector(selectSearchCriteria)
-  const searchPattern = useSelector(selectSearchPattern)
-  const [pattern, setSearchPattern] = useState(searchPattern)
-  const debouncedPattern = useDebounce(pattern, 250)
+  };
+  const tabs = useTabs({ defaultIndex, onChange: onTabChange });
+  const searchCriteria = useSelector(selectSearchCriteria);
+  const searchPattern = useSelector(selectSearchPattern);
+  const [pattern, setSearchPattern] = useState(searchPattern);
+  const debouncedPattern = useDebounce(pattern, 250);
   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 { tags, typeTags, methodCount, typeCount, searchResults } =
+    sideNavState;
 
   const handleInputChange = (value: string) => {
-    setSearchPattern(value)
-  }
+    setSearchPattern(value);
+  };
 
   useEffect(() => {
-    const searchParams = new URLSearchParams(location.search)
+    const searchParams = new URLSearchParams(location.search);
     if (debouncedPattern && debouncedPattern !== searchParams.get('s')) {
-      searchParams.set('s', debouncedPattern)
-      navigate(location.pathname, { s: searchParams.get('s') })
+      searchParams.set('s', debouncedPattern);
+      navigate(location.pathname, { s: searchParams.get('s') });
     } else if (!debouncedPattern && searchParams.get('s')) {
-      searchParams.delete('s')
-      navigate(location.pathname, { s: null })
+      searchParams.delete('s');
+      navigate(location.pathname, { s: null });
     }
-  }, [debouncedPattern])
+  }, [debouncedPattern]);
   // Removed location.search as dep to fix bug related to
   // browser forward / backward navigation
 
   useEffect(() => {
-    let results
-    let newTags
-    let newTypes
-    let newTypeTags
-    const api = spec.api || ({} as ApiModel)
-    setSearchPattern(searchPattern)
+    let results;
+    let newTags;
+    let newTypes;
+    let newTypeTags;
+    const api = spec.api || ({} as ApiModel);
+    setSearchPattern(searchPattern);
 
     if (searchPattern && api.search) {
-      results = api.search(searchPattern, criteriaToSet(searchCriteria))
-      newTags = results.tags
-      newTypes = results.types
-      newTypeTags = tagTypes(api, results.types)
+      results = api.search(searchPattern, criteriaToSet(searchCriteria));
+      newTags = results.tags;
+      newTypes = results.types;
+      newTypeTags = tagTypes(api, results.types);
     } else {
-      newTags = api.tags || {}
-      newTypes = api.types || {}
-      newTypeTags = api.typeTags || {}
+      newTags = api.tags || {};
+      newTypes = api.types || {};
+      newTypeTags = api.typeTags || {};
     }
 
     setSideNavState({
@@ -149,19 +150,12 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
       typeCount: countTypes(newTypes),
       methodCount: countMethods(newTags),
       searchResults: results,
-    })
-  }, [searchPattern, specKey, spec, searchCriteria])
+    });
+  }, [searchPattern, specKey, spec, searchCriteria]);
 
-  useEffect(() => {
-    const { selectedIndex, onSelectTab } = tabs
-    if (defaultIndex !== selectedIndex) {
-      onSelectTab(defaultIndex)
-    }
-  }, [defaultIndex, tabs])
-
-  const size = useWindowSize()
-  const headlessOffset = headless ? 200 : 120
-  const menuH = size.height - 16 * HEADER_REM - headlessOffset
+  const size = useWindowSize();
+  const headlessOffset = headless ? 200 : 120;
+  const menuH = size.height - 16 * HEADER_REM - headlessOffset;
 
   return (
     <nav>
@@ -205,5 +199,5 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
         </TabPanel>
       </TabPanels>
     </nav>
-  )
-}
+  );
+};

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

@@ -23,55 +23,55 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import pick from 'lodash/pick'
-import { screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
+import React from 'react';
+import pick from 'lodash/pick';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-import { api } from '../../test-data'
-import { renderWithRouterAndReduxProvider } from '../../test-utils'
-import { SideNavMethodTags } from './SideNavMethodTags'
+import { api } from '../../test-data';
+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', () => {
+  const tags = pick(api.tags, ['ApiAuth', 'Dashboard']);
+  test('it renders a provided tag and its methods', async () => {
     renderWithRouterAndReduxProvider(
       <SideNavMethodTags tags={tags} specKey={'4.0'} />
-    )
-    const tag = screen.getByText('Dashboard')
-    const tagContent = 'Create Dashboard'
-    expect(screen.queryByText(tagContent)).not.toBeInTheDocument()
-    userEvent.click(tag)
-    expect(screen.getByText(tagContent)).toBeInTheDocument()
-    const methods = screen.getAllByRole('link')
-    expect(methods).toHaveLength(Object.keys(tags.Dashboard).length)
-  })
+    );
+    const tag = screen.getByText('Dashboard');
+    const tagContent = 'Create Dashboard';
+    expect(screen.queryByText(tagContent)).not.toBeInTheDocument();
+    await userEvent.click(tag);
+    expect(screen.getByText(tagContent)).toBeInTheDocument();
+    const methods = screen.getAllByRole('link');
+    expect(methods).toHaveLength(Object.keys(tags.Dashboard).length);
+  });
 
-  test('tags are rendered initially collapsed and expand when clicked', () => {
+  test('tags are rendered initially collapsed and expand when clicked', async () => {
     renderWithRouterAndReduxProvider(
       <SideNavMethodTags tags={tags} specKey={'4.0'} />
-    )
+    );
 
-    const allTags = screen.getAllByText(/ApiAuth|Dashboard/)
-    expect(allTags).toHaveLength(2)
-    expect(screen.queryByText('Login')).not.toBeInTheDocument()
-    expect(screen.queryByText('Create Dashboard')).not.toBeInTheDocument()
-    userEvent.click(allTags[0])
-    expect(screen.getByText('Login')).toBeInTheDocument()
-    expect(screen.queryByText('Create Dashboard')).not.toBeInTheDocument()
-  })
+    const allTags = screen.getAllByText(/ApiAuth|Dashboard/);
+    expect(allTags).toHaveLength(2);
+    expect(screen.queryByText('Login')).not.toBeInTheDocument();
+    expect(screen.queryByText('Create Dashboard')).not.toBeInTheDocument();
+    await userEvent.click(allTags[0]);
+    expect(screen.getByText('Login')).toBeInTheDocument();
+    expect(screen.queryByText('Create Dashboard')).not.toBeInTheDocument();
+  });
 
   test('tag is expanded if specified in route', () => {
     renderWithRouterAndReduxProvider(
       <SideNavMethodTags tags={tags} specKey={'4.0'} />,
       ['/4.0/methods/Dashboard']
-    )
+    );
 
-    const allTags = screen.getAllByText(/^(ApiAuth|Dashboard)$/)
-    expect(allTags).toHaveLength(2)
-    expect(screen.queryByText('Login')).not.toBeInTheDocument()
+    const allTags = screen.getAllByText(/^(ApiAuth|Dashboard)$/);
+    expect(allTags).toHaveLength(2);
+    expect(screen.queryByText('Login')).not.toBeInTheDocument();
     expect(screen.getAllByRole('link')).toHaveLength(
       Object.keys(tags.Dashboard).length
-    )
-  })
-})
+    );
+  });
+});

package/src/components/SideNav/SideNavMethodTags.tsx

@@ -24,16 +24,16 @@
 
  */
 
-import React from 'react'
-import styled from 'styled-components'
-import type { TagList } from '@looker/sdk-codegen'
-import { SideNavMethods } from './SideNavMethods'
+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
+  tags: TagList;
+  specKey: string;
+  defaultOpen?: boolean;
+  className?: string;
 }
 
 export const SideNavMethodTags = styled(
@@ -52,4 +52,4 @@ export const SideNavMethodTags = styled(
   )
 )`
   padding: 0 ${({ theme }) => theme.space.large};
-`
+`;

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

@@ -23,67 +23,67 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import pick from 'lodash/pick'
-import userEvent from '@testing-library/user-event'
-import { screen } from '@testing-library/react'
+import React from 'react';
+import pick from 'lodash/pick';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
 
-import { api } from '../../test-data'
+import { api } from '../../test-data';
 import {
   createTestStore,
   renderWithRouterAndReduxProvider,
-} from '../../test-utils'
-import { SideNavMethods } from './SideNavMethods'
+} from '../../test-utils';
+import { SideNavMethods } from './SideNavMethods';
 
-const mockHistoryPush = jest.fn()
+const mockHistoryPush = jest.fn();
 jest.mock('react-router-dom', () => {
-  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  const ReactRouterDOM = jest.requireActual('react-router-dom');
   return {
     ...ReactRouterDOM,
     useHistory: () => ({
       push: mockHistoryPush,
       location: globalThis.location,
     }),
-  }
-})
+  };
+});
 
 describe('SideNavMethods', () => {
-  const tag = 'Dashboard'
-  const methods = api.tags[tag]
-  const specKey = '4.0'
+  const tag = 'Dashboard';
+  const methods = api.tags[tag];
+  const specKey = '4.0';
 
   beforeEach(() => {
-    jest.clearAllMocks()
-  })
+    jest.clearAllMocks();
+  });
 
-  test('it renders provided methods', () => {
+  test('it renders provided methods', async () => {
     renderWithRouterAndReduxProvider(
       <SideNavMethods methods={methods} tag={tag} specKey={specKey} />
-    )
-    userEvent.click(screen.getByText(tag))
-    const sideNavItems = screen.getAllByRole('link')
-    expect(sideNavItems).toHaveLength(Object.keys(methods).length)
+    );
+    await userEvent.click(screen.getByText(tag));
+    const sideNavItems = screen.getAllByRole('link');
+    expect(sideNavItems).toHaveLength(Object.keys(methods).length);
     expect(sideNavItems[0]).toHaveAttribute(
       'href',
       `/${specKey}/methods/${tag}/${Object.values(methods)[0].name}`
-    )
-  })
+    );
+  });
 
-  test('tag expands and displays methods after clicked', () => {
+  test('tag expands and displays methods after clicked', async () => {
     renderWithRouterAndReduxProvider(
       <SideNavMethods methods={methods} tag={tag} specKey={specKey} />
-    )
-    const firstMethod = Object.values(methods)[0].schema.summary
-    expect(screen.queryByText(firstMethod)).not.toBeInTheDocument()
-    userEvent.click(screen.getByText(tag))
-    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods/${tag}`)
-    expect(screen.getByRole('link', { name: firstMethod })).toBeInTheDocument()
+    );
+    const firstMethod = Object.values(methods)[0].schema.summary;
+    expect(screen.queryByText(firstMethod)).not.toBeInTheDocument();
+    await userEvent.click(screen.getByText(tag));
+    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods/${tag}`);
+    expect(screen.getByRole('link', { name: firstMethod })).toBeInTheDocument();
     expect(screen.getAllByRole('link')).toHaveLength(
       Object.values(methods).length
-    )
-  })
+    );
+  });
 
-  test('expanded tag closes when clicked', () => {
+  test('expanded tag closes when clicked', async () => {
     renderWithRouterAndReduxProvider(
       <SideNavMethods
         methods={methods}
@@ -91,20 +91,20 @@ describe('SideNavMethods', () => {
         specKey={specKey}
         defaultOpen={true}
       />
-    )
-    const firstMethod = Object.values(methods)[0].schema.summary
-    expect(screen.getByRole('link', { name: firstMethod })).toBeInTheDocument()
+    );
+    const firstMethod = Object.values(methods)[0].schema.summary;
+    expect(screen.getByRole('link', { name: firstMethod })).toBeInTheDocument();
     expect(screen.getAllByRole('link')).toHaveLength(
       Object.values(methods).length
-    )
-    userEvent.click(screen.getByText(tag))
-    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods`)
-    expect(screen.queryByText(firstMethod)).not.toBeInTheDocument()
-    expect(screen.queryByRole('link')).not.toBeInTheDocument()
-  })
+    );
+    await userEvent.click(screen.getByText(tag));
+    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods`);
+    expect(screen.queryByText(firstMethod)).not.toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
 
-  test('it highlights text matching search pattern in both tag and methods', () => {
-    const store = createTestStore({ settings: { searchPattern: 'dash' } })
+  test('it highlights text matching search pattern in both tag and methods', async () => {
+    const store = createTestStore({ settings: { searchPattern: 'dash' } });
     renderWithRouterAndReduxProvider(
       <SideNavMethods
         methods={pick(methods, 'create_dashboard')}
@@ -113,12 +113,12 @@ describe('SideNavMethods', () => {
       />,
       undefined,
       store
-    )
-    userEvent.click(screen.getByText('Dash'))
-    const matches = screen.getAllByText(/dash/i)
-    expect(matches).toHaveLength(2)
+    );
+    await userEvent.click(screen.getByText('Dash'));
+    const matches = screen.getAllByText(/dash/i);
+    expect(matches).toHaveLength(2);
     matches.forEach((match) => {
-      expect(match).toContainHTML('<span class="hi">Dash</span>')
-    })
-  })
-})
+      expect(match).toContainHTML('<span class="hi">Dash</span>');
+    });
+  });
+});

package/src/components/SideNav/SideNavMethods.tsx

@@ -24,49 +24,49 @@
 
  */
 
-import React, { useEffect, useState } from 'react'
-import styled from 'styled-components'
-import { Accordion2, Heading } from '@looker/components'
-import type { MethodList } from '@looker/sdk-codegen'
-import { useSelector } from 'react-redux'
-import { useRouteMatch } from 'react-router-dom'
-import { useNavigation, highlightHTML, buildMethodPath } from '../../utils'
-import { Link } from '../Link'
-import { selectSearchPattern } from '../../state'
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Accordion2, Heading } from '@looker/components';
+import type { MethodList } from '@looker/sdk-codegen';
+import { useSelector } from 'react-redux';
+import { useRouteMatch } from 'react-router-dom';
+import { buildMethodPath, highlightHTML, useNavigation } from '../../utils';
+import { Link } from '../Link';
+import { selectSearchPattern } from '../../state';
 
 interface MethodsProps {
-  methods: MethodList
-  tag: string
-  specKey: string
-  className?: string
-  defaultOpen?: boolean
+  methods: MethodList;
+  tag: string;
+  specKey: string;
+  className?: string;
+  defaultOpen?: boolean;
 }
 
 export const SideNavMethods = styled(
   ({ className, methods, tag, specKey, defaultOpen = false }: MethodsProps) => {
     const { buildPathWithGlobalParams, navigateWithGlobalParams } =
-      useNavigation()
-    const searchPattern = useSelector(selectSearchPattern)
+      useNavigation();
+    const searchPattern = useSelector(selectSearchPattern);
     const match = useRouteMatch<{ methodTag: string }>(
       `/:specKey/methods/:methodTag/:methodName?`
-    )
-    const [isOpen, setIsOpen] = useState(defaultOpen)
+    );
+    const [isOpen, setIsOpen] = useState(defaultOpen);
     const handleOpen = () => {
-      const _isOpen = !isOpen
-      setIsOpen(_isOpen)
+      const _isOpen = !isOpen;
+      setIsOpen(_isOpen);
       if (_isOpen) {
-        navigateWithGlobalParams(`/${specKey}/methods/${tag}`)
+        navigateWithGlobalParams(`/${specKey}/methods/${tag}`);
       } else {
-        navigateWithGlobalParams(`/${specKey}/methods`)
+        navigateWithGlobalParams(`/${specKey}/methods`);
       }
-    }
+    };
 
     useEffect(() => {
       const status = match
         ? defaultOpen || match.params.methodTag === tag
-        : defaultOpen
-      setIsOpen(status)
-    }, [defaultOpen])
+        : defaultOpen;
+      setIsOpen(status);
+    }, [defaultOpen]);
 
     /* TODO: Fix highlighting. It is applied but it is somehow being overridden */
     return (
@@ -94,7 +94,7 @@ export const SideNavMethods = styled(
           ))}
         </ul>
       </Accordion2>
-    )
+    );
   }
 )`
   font-family: ${({ theme }) => theme.fonts.brand};
@@ -139,4 +139,4 @@ export const SideNavMethods = styled(
       background: ${({ theme }) => theme.colors.ui1};
     }
   }
-`
+`;