@looker/api-explorer 0.9.55 → 0.9.57

package/src/components/ExploreType/exploreUtils.spec.tsx

@@ -24,63 +24,63 @@
 
  */
 
-import React from 'react'
-import { FieldString, IdeFileManifest } from '@looker/icons'
-import { CalendarToday } from '@styled-icons/material/CalendarToday'
-import { Code } from '@styled-icons/material/Code'
-import { Tag } from '@styled-icons/material-rounded/Tag'
-import { api40 as api } from '../../test-data'
-import { expandable, pickType, pickTypeProps, typeIcon } from './exploreUtils'
+import React from 'react';
+import { FieldString, IdeFileManifest } from '@looker/icons';
+import { CalendarToday } from '@styled-icons/material/CalendarToday';
+import { Code } from '@styled-icons/material/Code';
+import { Tag } from '@styled-icons/material-rounded/Tag';
+import { api40 as api } from '../../test-data';
+import { expandable, pickType, pickTypeProps, typeIcon } from './exploreUtils';
 
 describe('exploreUtils', () => {
   test('pickType', () => {
-    const method = api.methods.connection_tables
-    const responseType = method.primaryResponse.type
-    const type = pickType(responseType)
-    expect(type).toBeDefined()
-    expect(type.fullName).toEqual('SchemaTables')
-    const props = pickTypeProps(responseType)
-    expect(props).toBeDefined()
-    const names = Object.keys(props)
-    expect(names).toEqual(['name', 'is_default', 'tables', 'table_limit_hit'])
-  })
+    const method = api.methods.connection_tables;
+    const responseType = method.primaryResponse.type;
+    const type = pickType(responseType);
+    expect(type).toBeDefined();
+    expect(type.fullName).toEqual('SchemaTables');
+    const props = pickTypeProps(responseType);
+    expect(props).toBeDefined();
+    const names = Object.keys(props);
+    expect(names).toEqual(['name', 'is_default', 'tables', 'table_limit_hit']);
+  });
 
   test('iconType', () => {
-    const type = api.types.BoardSection
-    const actual = typeIcon(type)
-    expect(actual).toEqual({ icon: <Code />, title: 'BoardSection' })
-    const props = type.properties
+    const type = api.types.BoardSection;
+    const actual = typeIcon(type);
+    expect(actual).toEqual({ icon: <Code />, title: 'BoardSection' });
+    const props = type.properties;
     expect(typeIcon(props.can.type)).toEqual({
       icon: <IdeFileManifest />,
       title: 'Hash[boolean]',
-    })
+    });
     expect(typeIcon(props.created_at.type)).toEqual({
       icon: <CalendarToday />,
       title: 'datetime',
-    })
+    });
     expect(typeIcon(props.description.type)).toEqual({
       icon: <FieldString />,
       title: 'string',
-    })
-    const intProp = api.types.ColorStop.properties.offset
+    });
+    const intProp = api.types.ColorStop.properties.offset;
     expect(typeIcon(intProp.type)).toEqual({
       icon: <Tag />,
       title: 'int64',
-    })
-  })
+    });
+  });
 
   describe('expandable', () => {
     test('maxDepth -1 is always expandable', () => {
-      expect(expandable(20, -1)).toEqual(true)
-    })
+      expect(expandable(20, -1)).toEqual(true);
+    });
     test('maxDepth 0 is never expandable', () => {
-      expect(expandable(1, 0)).toEqual(false)
-    })
+      expect(expandable(1, 0)).toEqual(false);
+    });
     test('maxDepth 2 is expandable 2 levels deep', () => {
-      expect(expandable(0, 2)).toEqual(true)
-      expect(expandable(1, 2)).toEqual(true)
-      expect(expandable(2, 2)).toEqual(true)
-      expect(expandable(3, 2)).toEqual(false)
-    })
-  })
-})
+      expect(expandable(0, 2)).toEqual(true);
+      expect(expandable(1, 2)).toEqual(true);
+      expect(expandable(2, 2)).toEqual(true);
+      expect(expandable(3, 2)).toEqual(false);
+    });
+  });
+});

package/src/components/ExploreType/exploreUtils.tsx

@@ -24,34 +24,34 @@
 
  */
 
-import React from 'react'
-import type { IconType } from '@looker/components'
-import { FieldString, IdeFileManifest, IdeParameter } from '@looker/icons'
-import { CalendarToday } from '@styled-icons/material/CalendarToday'
-import { Check } from '@styled-icons/material/Check'
-import { Code } from '@styled-icons/material/Code'
-import { Link } from '@styled-icons/material/Link'
-import { Toc } from '@styled-icons/material/Toc'
-import { VpnKey } from '@styled-icons/material/VpnKey'
-import { Tag } from '@styled-icons/material-rounded'
-import { Email } from '@styled-icons/material-outlined'
-import type { IType } from '@looker/sdk-codegen'
-import { TypeOfType, typeOfType } from '@looker/sdk-codegen'
+import React from 'react';
+import type { IconType } from '@looker/components';
+import { FieldString, IdeFileManifest, IdeParameter } from '@looker/icons';
+import { CalendarToday } from '@styled-icons/material/CalendarToday';
+import { Check } from '@styled-icons/material/Check';
+import { Code } from '@styled-icons/material/Code';
+import { Link } from '@styled-icons/material/Link';
+import { Toc } from '@styled-icons/material/Toc';
+import { VpnKey } from '@styled-icons/material/VpnKey';
+import { Tag } from '@styled-icons/material-rounded';
+import { Email } from '@styled-icons/material-outlined';
+import type { IType } from '@looker/sdk-codegen';
+import { TypeOfType, typeOfType } from '@looker/sdk-codegen';
 
 /**
  * Get the type or element type if this type is a collection
  * @param value type to pick
  */
 export const pickType = (value: IType) => {
-  const typed = typeOfType(value)
+  const typed = typeOfType(value);
   switch (typed) {
     case TypeOfType.Intrinsic:
     case TypeOfType.Complex:
-      return value
+      return value;
     default:
-      return value.elementType!
+      return value.elementType!;
   }
-}
+};
 
 /**
  * Is this an expandable node?
@@ -59,48 +59,48 @@ export const pickType = (value: IType) => {
  * @param maxDepth is the maximum depth to expanded nested types. -1 = all (default), 0 = no expansion
  */
 export const expandable = (level: number, maxDepth = -1) =>
-  maxDepth === -1 || level <= maxDepth
+  maxDepth === -1 || level <= maxDepth;
 
 /**
  * Gets the properties for the "exploring" type
  * @param value type to pick
  */
-export const pickTypeProps = (value: IType) => pickType(value).properties
+export const pickTypeProps = (value: IType) => pickType(value).properties;
 
 /**
  * Get the link prefix for the type
  * @param value type to link to
  */
 export const typeLinkPrefix = (value: IType) => {
-  const typed = typeOfType(value)
+  const typed = typeOfType(value);
   switch (typed) {
     case TypeOfType.Hash:
-      return 'Hash['
+      return 'Hash[';
     default:
-      return ''
+      return '';
   }
-}
+};
 
 /**
  * Get the link suffix for the type
  * @param value type to link to
  */
 export const typeLinkSuffix = (value: IType) => {
-  const typed = typeOfType(value)
+  const typed = typeOfType(value);
   switch (typed) {
     case TypeOfType.Array:
     case TypeOfType.DelimArray:
-      return '[]'
+      return '[]';
     case TypeOfType.Hash:
-      return ']'
+      return ']';
     default:
-      return ''
+      return '';
   }
-}
+};
 
 interface TypedIcon {
-  icon: IconType
-  title: string
+  icon: IconType;
+  title: string;
 }
 
 /**
@@ -110,39 +110,39 @@ interface TypedIcon {
 export const typeIcon = (value: IType): TypedIcon => {
   switch (value.className) {
     case 'ArrayType':
-      return { icon: <Toc />, title: value.jsonName }
+      return { icon: <Toc />, title: value.jsonName };
     case 'DelimArrayType':
-      return { icon: <Toc />, title: value.jsonName }
+      return { icon: <Toc />, title: value.jsonName };
     case 'HashType':
-      return { icon: <IdeFileManifest />, title: value.jsonName }
+      return { icon: <IdeFileManifest />, title: value.jsonName };
     case 'EnumType':
-      return { icon: <IdeParameter />, title: value.jsonName }
+      return { icon: <IdeParameter />, title: value.jsonName };
   }
 
-  const type = pickType(value)
+  const type = pickType(value);
   switch (type.jsonName) {
     case 'boolean':
-      return { icon: <Check />, title: type.jsonName }
+      return { icon: <Check />, title: type.jsonName };
     case 'int64':
     case 'integer':
     case 'float':
     case 'double':
-      return { icon: <Tag />, title: type.jsonName }
+      return { icon: <Tag />, title: type.jsonName };
     case 'string':
     case 'hostname':
     case 'uuid':
     case 'ipv4':
     case 'ipv6':
-      return { icon: <FieldString />, title: type.jsonName }
+      return { icon: <FieldString />, title: type.jsonName };
     case 'email':
-      return { icon: <Email />, title: type.jsonName }
+      return { icon: <Email />, title: type.jsonName };
     case 'password':
-      return { icon: <VpnKey />, title: type.jsonName }
+      return { icon: <VpnKey />, title: type.jsonName };
     case 'uri':
-      return { icon: <Link />, title: type.jsonName }
+      return { icon: <Link />, title: type.jsonName };
     case 'datetime':
-      return { icon: <CalendarToday />, title: type.jsonName }
+      return { icon: <CalendarToday />, title: type.jsonName };
     default:
-      return { icon: <Code />, title: type.jsonName }
+      return { icon: <Code />, title: type.jsonName };
   }
-}
+};

package/src/components/ExploreType/index.ts

@@ -24,13 +24,13 @@
 
  */
 
-export { ExploreType, ExploreTypeLink } from './ExploreType'
+export { ExploreType, ExploreTypeLink } from './ExploreType';
 export {
   ExploreProperty,
   ExplorePropertyNode,
   ExplorePropertyDetail,
   ExplorePropertyType,
-} from './ExploreProperty'
+} from './ExploreProperty';
 export {
   typeIcon,
   pickTypeProps,
@@ -38,4 +38,4 @@ export {
   typeLinkSuffix,
   pickType,
   expandable,
-} from './exploreUtils'
+} from './exploreUtils';

package/src/components/Header/Header.spec.tsx

@@ -23,76 +23,70 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import { act, screen, waitFor } from '@testing-library/react'
-import { codeGenerators } from '@looker/sdk-codegen'
-import userEvent from '@testing-library/user-event'
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { codeGenerators } from '@looker/sdk-codegen';
+import userEvent from '@testing-library/user-event';
 
-import { getLoadedSpecs, specs } from '../../test-data'
-import { renderWithRouterAndReduxProvider } from '../../test-utils'
-import { defaultSettingsState } from '../../state'
-import { Header } from './Header'
+import { getLoadedSpecs, specs } from '../../test-data';
+import { renderWithRouterAndReduxProvider } from '../../test-utils';
+import { defaultSettingsState } from '../../state';
+import { Header } from './Header';
 
 describe('Header', () => {
-  const hasNavigation = true
-  const toggleNavigation = () => !hasNavigation
-  const spec = getLoadedSpecs()['4.0']
+  const hasNavigation = true;
+  const toggleNavigation = () => !hasNavigation;
+  const spec = getLoadedSpecs()['4.0'];
   beforeAll(() => {
-    window.HTMLElement.prototype.scrollIntoView = jest.fn()
-  })
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  });
 
   test('it renders a title', () => {
     renderWithRouterAndReduxProvider(
       <Header spec={spec} toggleNavigation={toggleNavigation} />
-    )
+    );
     expect(screen.getByText('API Explorer').closest('a')).toHaveAttribute(
       'href',
       `/${spec.key}`
-    )
-  })
+    );
+  });
 
   test('it renders a spec selector with the correct default value and options', async () => {
     renderWithRouterAndReduxProvider(
       <Header spec={spec} toggleNavigation={toggleNavigation} />
-    )
-    const selector = screen.getByLabelText('spec selector')
-    expect(selector).toHaveValue(`${spec.key}`)
-    await act(async () => {
-      await userEvent.click(selector)
-      await waitFor(() => {
-        expect(screen.getAllByRole('option')).toHaveLength(
-          Object.keys(specs).length
-        )
-      })
-    })
-  })
+    );
+    const selector = screen.getByLabelText('spec selector');
+    expect(selector).toHaveValue(`${spec.key}`);
+    await userEvent.click(selector);
+    await waitFor(() => {
+      expect(screen.getAllByRole('option')).toHaveLength(
+        Object.keys(specs).length
+      );
+    });
+  });
 
   test('it renders an sdk language selector with the correct value and options', async () => {
     renderWithRouterAndReduxProvider(
       <Header spec={spec} toggleNavigation={toggleNavigation} />
-    )
-    const selector = screen.getByLabelText('sdk language selector')
-    expect(selector).toHaveValue(defaultSettingsState.sdkLanguage)
-    await act(async () => {
-      await userEvent.click(selector)
-      await waitFor(() => {
-        expect(screen.getAllByRole('option')).toHaveLength(
-          codeGenerators.length + 1
-        )
-      })
-    })
-  })
+    );
+    const selector = screen.getByLabelText('sdk language selector');
+    expect(selector).toHaveValue(defaultSettingsState.sdkLanguage);
+    await userEvent.click(selector);
+    expect(screen.getAllByRole('option')).toHaveLength(
+      codeGenerators.length + 1
+    );
+  });
 
   test('it renders an icon button for the differ', () => {
     renderWithRouterAndReduxProvider(
       <Header spec={spec} toggleNavigation={toggleNavigation} />
-    )
+    );
     expect(
       screen
         .getByRole('button', {
           name: 'Compare Specifications',
         })
         .closest('a')
-    ).toHaveAttribute('href', `/${spec.key}/diff`)
-  })
-})
+    ).toHaveAttribute('href', `/${spec.key}/diff`);
+  });
+});

package/src/components/Header/Header.tsx

@@ -24,34 +24,34 @@
 
  */
 
-import type { FC } from 'react'
-import React from 'react'
-import styled from 'styled-components'
+import type { FC } from 'react';
+import React from 'react';
+import styled from 'styled-components';
 import {
+  Heading,
   Icon,
-  Space,
   IconButton,
-  Heading,
   Header as SemanticHeader,
-} from '@looker/components'
-import { LookerLogo } from '@looker/icons'
-import { Menu } from '@styled-icons/material/Menu'
-import type { SpecItem } from '@looker/sdk-codegen'
+  Space,
+} from '@looker/components';
+import { LookerLogo } from '@looker/icons';
+import { Menu } from '@styled-icons/material/Menu';
+import type { SpecItem } from '@looker/sdk-codegen';
 
-import { Link } from '../Link'
-import { SelectorContainer } from '../SelectorContainer'
+import { Link } from '../Link';
+import { SelectorContainer } from '../SelectorContainer';
 
 interface HeaderProps {
   /** Current selected spec */
-  spec: SpecItem
+  spec: SpecItem;
   /** Nav state setter */
-  toggleNavigation: (target?: boolean) => void
-  className?: string
+  toggleNavigation: (target?: boolean) => void;
+  className?: string;
 }
 
-export const HEADER_REM = 4
+export const HEADER_REM = 4;
 
-export const HEADER_TOGGLE_LABEL = 'Toggle Navigation'
+export const HEADER_TOGGLE_LABEL = 'Toggle Navigation';
 
 /**
  * Renders the API Explorer header
@@ -90,8 +90,8 @@ export const HeaderLayout: FC<HeaderProps> = ({
     </Space>
     <SelectorContainer spec={spec} />
   </SemanticHeader>
-)
+);
 
 export const Header = styled(HeaderLayout)`
   border-bottom: 1px solid ${({ theme }) => theme.colors.ui2};
-`
+`;

package/src/components/Header/index.ts

@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { Header, HEADER_REM, HEADER_TOGGLE_LABEL } from './Header'
+export { Header, HEADER_REM, HEADER_TOGGLE_LABEL } from './Header';

package/src/components/Link/Link.tsx

@@ -24,8 +24,8 @@
 
  */
 
-import { NavLink } from 'react-router-dom'
-import styled from 'styled-components'
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
 
 export const Link = styled(NavLink)`
   text-decoration: none;
@@ -37,4 +37,4 @@ export const Link = styled(NavLink)`
   &.active {
     color: inherit;
   }
-`
+`;

package/src/components/Link/index.ts

@@ -24,4 +24,4 @@
 
  */
 
-export { Link } from './Link'
+export { Link } from './Link';

package/src/components/SelectorContainer/ApiSpecSelector.spec.tsx

@@ -23,19 +23,19 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import { screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { useHistory } from 'react-router-dom'
-import { getLoadedSpecs, specs } from '../../test-data'
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useHistory } from 'react-router-dom';
+import { getLoadedSpecs, specs } from '../../test-data';
 import {
   renderWithReduxProvider,
   renderWithRouterAndReduxProvider,
-} from '../../test-utils'
-import { ApiSpecSelector } from './ApiSpecSelector'
+} from '../../test-utils';
+import { ApiSpecSelector } from './ApiSpecSelector';
 
 jest.mock('react-router-dom', () => {
-  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  const ReactRouterDOM = jest.requireActual('react-router-dom');
   return {
     ...ReactRouterDOM,
     useLocation: () => ({
@@ -44,8 +44,8 @@ jest.mock('react-router-dom', () => {
     useHistory: jest
       .fn()
       .mockReturnValue({ push: jest.fn(), location: globalThis.location }),
-  }
-})
+  };
+});
 
 // jest.mock('../../state/specs', () => ({
 //   ...(jest.requireActual('../../state/specs') as Record<string, unknown>),
@@ -55,39 +55,39 @@ jest.mock('react-router-dom', () => {
 // }))
 
 describe('ApiSpecSelector', () => {
-  Element.prototype.scrollIntoView = jest.fn()
-  const spec = getLoadedSpecs()['4.0']
+  Element.prototype.scrollIntoView = jest.fn();
+  const spec = getLoadedSpecs()['4.0'];
 
   test('the base spec is selected by default', () => {
-    renderWithReduxProvider(<ApiSpecSelector spec={spec} />)
-    const selector = screen.getByRole('textbox')
-    expect(selector).toHaveValue(`${spec.key}`)
-  })
+    renderWithReduxProvider(<ApiSpecSelector spec={spec} />);
+    const selector = screen.getByRole('textbox');
+    expect(selector).toHaveValue(`${spec.key}`);
+  });
 
   test('it lists all available specs', async () => {
-    renderWithReduxProvider(<ApiSpecSelector spec={spec} />)
-    userEvent.click(screen.getByRole('textbox'))
+    renderWithReduxProvider(<ApiSpecSelector spec={spec} />);
+    userEvent.click(screen.getByRole('textbox'));
     await waitFor(() => {
       expect(screen.getAllByRole('option')).toHaveLength(
         Object.keys(specs).length
-      )
-    })
-  })
+      );
+    });
+  });
 
   test.skip('requests selected spec', async () => {
-    const { push } = useHistory()
-    renderWithRouterAndReduxProvider(<ApiSpecSelector spec={spec} />)
-    userEvent.click(screen.getByRole('textbox'))
+    const { push } = useHistory();
+    renderWithRouterAndReduxProvider(<ApiSpecSelector spec={spec} />);
+    userEvent.click(screen.getByRole('textbox'));
     await waitFor(() => {
       expect(screen.getAllByRole('option')).toHaveLength(
         Object.keys(specs).length
-      )
-    })
-    const button = screen.getByText('4.0')
-    userEvent.click(button)
+      );
+    });
+    const button = screen.getByText('4.0');
+    userEvent.click(button);
     expect(push).toHaveBeenCalledWith({
       pathname: '/4.0/methods/Dashboard/dashboard',
       search: '',
-    })
-  })
-})
+    });
+  });
+});

package/src/components/SelectorContainer/ApiSpecSelector.tsx

@@ -24,34 +24,34 @@
 
  */
 
-import type { FC } from 'react'
-import React from 'react'
-import { Select } from '@looker/components'
-import { useLocation } from 'react-router-dom'
-import type { SpecItem } from '@looker/sdk-codegen'
-import { useSelector } from 'react-redux'
-import { useNavigation } from '../../utils'
+import type { FC } from 'react';
+import React from 'react';
+import { Select } from '@looker/components';
+import { useLocation } from 'react-router-dom';
+import type { SpecItem } from '@looker/sdk-codegen';
+import { useSelector } from 'react-redux';
+import { useNavigation } from '../../utils';
 
-import { selectSpecs } from '../../state'
+import { selectSpecs } from '../../state';
 
 interface ApiSpecSelectorProps {
-  spec: SpecItem
+  spec: SpecItem;
 }
 
 export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({ spec }) => {
-  const location = useLocation()
-  const { navigate } = useNavigation()
-  const specs = useSelector(selectSpecs)
+  const location = useLocation();
+  const { navigate } = useNavigation();
+  const specs = useSelector(selectSpecs);
   const options = Object.entries(specs).map(([key, spec]) => ({
     value: key,
     label: key,
     description: spec.status,
-  }))
+  }));
 
   const handleChange = (specKey: string) => {
-    const matchPath = location.pathname.replace(`/${spec.key}`, `/${specKey}`)
-    navigate(matchPath)
-  }
+    const matchPath = location.pathname.replace(`/${spec.key}`, `/${specKey}`);
+    navigate(matchPath);
+  };
 
   return (
     <Select
@@ -61,5 +61,5 @@ export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({ spec }) => {
       options={options}
       onChange={handleChange}
     />
-  )
-}
+  );
+};