@looker/api-explorer 0.9.55 → 0.9.57

package/src/scenes/DiffScene/DiffScene.tsx

@@ -24,10 +24,10 @@
 
  */
 
-import type { FC } from 'react'
-import React, { useState, useEffect } from 'react'
-import type { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen'
-import { useRouteMatch } from 'react-router-dom'
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+import type { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen';
+import { useRouteMatch } from 'react-router-dom';
 import {
   Box,
   Flex,
@@ -36,15 +36,15 @@ import {
   Label,
   Select,
   SelectMulti,
-} from '@looker/components'
-import { SyncAlt } from '@styled-icons/material/SyncAlt'
-import { useSelector } from 'react-redux'
+} from '@looker/components';
+import { SyncAlt } from '@styled-icons/material/SyncAlt';
+import { useSelector } from 'react-redux';
 
-import { ApixSection } from '../../components'
-import { selectCurrentSpec, selectSpecs } from '../../state'
-import { diffPath, getApixAdaptor, useNavigation } from '../../utils'
-import { diffSpecs, standardDiffToggles } from './diffUtils'
-import { DocDiff } from './DocDiff'
+import { ApixSection } from '../../components';
+import { selectCurrentSpec, selectSpecs } from '../../state';
+import { diffPath, getApixAdaptor, useNavigation } from '../../utils';
+import { diffSpecs, standardDiffToggles } from './diffUtils';
+import { DocDiff } from './DocDiff';
 
 const diffToggles = [
   {
@@ -71,88 +71,88 @@ const diffToggles = [
     label: 'Response',
     value: 'response',
   },
-]
+];
 
 export interface DiffSceneProps {
-  toggleNavigation: (target?: boolean) => void
+  toggleNavigation: (target?: boolean) => void;
 }
 
 const validateParam = (specs: SpecList, specKey = '') => {
-  return specs[specKey] ? specKey : ''
-}
+  return specs[specKey] ? specKey : '';
+};
 
 export const DiffScene: FC<DiffSceneProps> = ({ toggleNavigation }) => {
-  const adaptor = getApixAdaptor()
-  const { navigate } = useNavigation()
-  const spec = useSelector(selectCurrentSpec)
-  const specs = useSelector(selectSpecs)
-  const currentSpecKey = spec.key
-  const match = useRouteMatch<{ l: string; r: string }>(`/:l/${diffPath}/:r?`)
-  const l = validateParam(specs, match?.params.l)
-  const r = validateParam(specs, match?.params.r)
+  const adaptor = getApixAdaptor();
+  const { navigate } = useNavigation();
+  const spec = useSelector(selectCurrentSpec);
+  const specs = useSelector(selectSpecs);
+  const currentSpecKey = spec.key;
+  const match = useRouteMatch<{ l: string; r: string }>(`/:l/${diffPath}/:r?`);
+  const l = validateParam(specs, match?.params.l);
+  const r = validateParam(specs, match?.params.r);
 
   const options = Object.entries(specs).map(([key, spec]) => ({
     value: key,
     label: `${key} (${spec.status})`,
-  }))
+  }));
 
-  const [leftKey, setLeftKey] = useState<string>(l || currentSpecKey)
-  const [rightKey, setRightKey] = useState<string>(r || '')
-  const [leftApi, setLeftApi] = useState<ApiModel>(specs[leftKey].api!)
+  const [leftKey, setLeftKey] = useState<string>(l || currentSpecKey);
+  const [rightKey, setRightKey] = useState<string>(r || '');
+  const [leftApi, setLeftApi] = useState<ApiModel>(specs[leftKey].api!);
   const [rightApi, setRightApi] = useState<ApiModel>(() =>
     rightKey ? specs[rightKey].api! : specs[leftKey].api!
-  )
-  const [toggles, setToggles] = useState<string[]>(standardDiffToggles)
+  );
+  const [toggles, setToggles] = useState<string[]>(standardDiffToggles);
 
   useEffect(() => {
     if (r !== rightKey) {
-      setRightKey(r)
+      setRightKey(r);
     }
-  }, [r, rightKey])
+  }, [r, rightKey]);
 
   useEffect(() => {
     if (l !== leftKey) {
-      setLeftKey(l)
+      setLeftKey(l);
     }
-  }, [l, leftKey])
+  }, [l, leftKey]);
 
   useEffect(() => {
-    toggleNavigation(false)
-  }, [])
+    toggleNavigation(false);
+  }, []);
 
-  const [delta, setDelta] = useState<DiffRow[]>([])
+  const [delta, setDelta] = useState<DiffRow[]>([]);
 
   const handleLeftChange = (newLeft: string) => {
-    navigate(`/${newLeft}/${diffPath}/${rightKey}`)
-  }
+    navigate(`/${newLeft}/${diffPath}/${rightKey}`);
+  };
   const handleRightChange = (newRight: string) => {
-    navigate(`/${leftKey}/${diffPath}/${newRight}`)
-  }
+    navigate(`/${leftKey}/${diffPath}/${newRight}`);
+  };
 
   const handleSwitch = () => {
-    navigate(`/${rightKey}/${diffPath}/${leftKey}`)
-  }
+    navigate(`/${rightKey}/${diffPath}/${leftKey}`);
+  };
 
   useEffect(() => {
-    adaptor.fetchSpec(specs[leftKey]).then((spec) => setLeftApi(spec.api!))
-  }, [leftKey])
+    adaptor.fetchSpec(specs[leftKey]).then((spec) => setLeftApi(spec.api!));
+  }, [leftKey]);
 
   useEffect(() => {
     if (rightKey in specs) {
-      adaptor.fetchSpec(specs[rightKey]).then((spec) => setRightApi(spec.api!))
+      adaptor.fetchSpec(specs[rightKey]).then((spec) => setRightApi(spec.api!));
     }
-  }, [rightKey])
+  }, [rightKey]);
 
   useEffect(() => {
     if (leftApi && rightApi) {
-      setDelta([...diffSpecs(leftApi, rightApi, toggles)])
+      setDelta([...diffSpecs(leftApi, rightApi, toggles)]);
     }
-  }, [leftApi, rightApi, toggles])
+  }, [leftApi, rightApi, toggles]);
 
   const handleTogglesChange = (values?: string[]) => {
-    const newToggles = values || []
-    setToggles(newToggles)
-  }
+    const newToggles = values || [];
+    setToggles(newToggles);
+  };
 
   return (
     <ApixSection>
@@ -212,5 +212,5 @@ export const DiffScene: FC<DiffSceneProps> = ({ toggleNavigation }) => {
         rightSpec={rightApi}
       />
     </ApixSection>
-  )
-}
+  );
+};

package/src/scenes/DiffScene/DocDiff/DiffBanner.tsx

@@ -23,15 +23,15 @@
  SOFTWARE.
 
  */
-import type { FC } from 'react'
-import React from 'react'
-import { Grid, Flex, FlexItem, Code, Heading } from '@looker/components'
-import type { DiffRow, IMethod } from '@looker/sdk-codegen'
-import { DiffLegend } from './DiffLegend'
+import type { FC } from 'react';
+import React from 'react';
+import { Code, Flex, FlexItem, Grid, Heading } from '@looker/components';
+import type { DiffRow, IMethod } from '@looker/sdk-codegen';
+import { DiffLegend } from './DiffLegend';
 
 interface DiffBannerProps {
-  item: DiffRow
-  method: IMethod
+  item: DiffRow;
+  method: IMethod;
 }
 
 export const DiffBanner: FC<DiffBannerProps> = ({ item, method }) => (
@@ -53,4 +53,4 @@ export const DiffBanner: FC<DiffBannerProps> = ({ item, method }) => (
       <DiffLegend count={item.diffCount} />
     </Flex>
   </Grid>
-)
+);

package/src/scenes/DiffScene/DocDiff/DiffItem.spec.tsx

@@ -23,48 +23,48 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import { Router } from 'react-router'
-import type { MemoryHistory } from 'history'
-import { createMemoryHistory } from 'history'
-import { renderWithTheme } from '@looker/components-test-utils'
-import { screen, fireEvent } from '@testing-library/react'
-import { api } from '../../../test-data'
-import { DiffMethodLink } from './DiffItem'
+import React from 'react';
+import { Router } from 'react-router';
+import type { MemoryHistory } from 'history';
+import { createMemoryHistory } from 'history';
+import { renderWithTheme } from '@looker/components-test-utils';
+import { fireEvent, screen } from '@testing-library/react';
+import { api } from '../../../test-data';
+import { DiffMethodLink } from './DiffItem';
 
 describe('DiffMethodLink', () => {
-  const method = api.methods.create_dashboard
-  const specKey = '4.0'
-  let history: MemoryHistory
+  const method = api.methods.create_dashboard;
+  const specKey = '4.0';
+  let history: MemoryHistory;
 
   beforeEach(() => {
-    history = createMemoryHistory()
-  })
+    history = createMemoryHistory();
+  });
 
   test('it renders method and navigates on click', () => {
-    const pushSpy = jest.spyOn(history, 'push')
+    const pushSpy = jest.spyOn(history, 'push');
     renderWithTheme(
       <Router history={history}>
         <DiffMethodLink method={method} specKey={specKey} />
       </Router>
-    )
-    const link = screen.getByRole('link')
-    expect(link).toHaveTextContent(`${method.name} for ${specKey}`)
-    fireEvent.click(link)
+    );
+    const link = screen.getByRole('link');
+    expect(link).toHaveTextContent(`${method.name} for ${specKey}`);
+    fireEvent.click(link);
     expect(pushSpy).toHaveBeenCalledWith({
       pathname: `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`,
       search: '',
-    })
-  })
+    });
+  });
 
   test('it renders missing method and does not navigate on click', () => {
     renderWithTheme(
       <Router history={history}>
         <DiffMethodLink method={undefined} specKey={specKey} />
       </Router>
-    )
-    const s = `Missing in ${specKey}`
-    expect(screen.getByText(s)).toBeInTheDocument()
-    expect(screen.queryByRole('link')).not.toBeInTheDocument()
-  })
-})
+    );
+    const s = `Missing in ${specKey}`;
+    expect(screen.getByText(s)).toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+});

package/src/scenes/DiffScene/DocDiff/DiffItem.tsx

@@ -23,22 +23,22 @@
  SOFTWARE.
 
  */
-import type { FC } from 'react'
-import React, { useState, useEffect } from 'react'
-import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
-import styled from 'styled-components'
-import { Accordion2, Box, Card, Grid, Heading, Link } from '@looker/components'
-import type { DiffRow } from '@looker/sdk-codegen/src'
-import type { ApiModel, IMethod } from '@looker/sdk-codegen'
-import { useSelector } from 'react-redux'
-import { selectSdkLanguage } from '../../../state'
-import { buildMethodPath, useNavigation } from '../../../utils'
-import { DiffBanner } from './DiffBanner'
-import { differ } from './docDiffUtils'
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
+import styled from 'styled-components';
+import { Accordion2, Box, Card, Grid, Heading, Link } from '@looker/components';
+import type { DiffRow } from '@looker/sdk-codegen/src';
+import type { ApiModel, IMethod } from '@looker/sdk-codegen';
+import { useSelector } from 'react-redux';
+import { selectSdkLanguage } from '../../../state';
+import { buildMethodPath, useNavigation } from '../../../utils';
+import { DiffBanner } from './DiffBanner';
+import { differ } from './docDiffUtils';
 
 interface DiffMethodLinkProps {
-  method: IMethod | undefined
-  specKey: string
+  method: IMethod | undefined;
+  specKey: string;
 }
 
 const DiffLink = styled(Link)`
@@ -53,35 +53,35 @@ const DiffLink = styled(Link)`
     color: ${({ theme }) => theme.colors.key};
     cursor: pointer;
   }
-`
+`;
 
 export const DiffMethodLink: FC<DiffMethodLinkProps> = ({
   method,
   specKey,
 }) => {
-  const { navigate } = useNavigation()
+  const { navigate } = useNavigation();
 
-  if (!method) return <Heading as="h4">{`Missing in ${specKey}`}</Heading>
+  if (!method) return <Heading as="h4">{`Missing in ${specKey}`}</Heading>;
 
-  const tag = method.schema.tags[0]
-  const path = `${buildMethodPath(specKey, tag, method.name)}`
+  const tag = method.schema.tags[0];
+  const path = `${buildMethodPath(specKey, tag, method.name)}`;
 
   return (
     <DiffLink
       role="link"
       onClick={() => {
-        navigate(path)
+        navigate(path);
       }}
     >{`${method.name} for ${specKey}`}</DiffLink>
-  )
-}
+  );
+};
 
 interface DiffItemProps {
-  item: DiffRow
-  leftKey: string
-  rightKey: string
-  leftSpec: ApiModel
-  rightSpec: ApiModel
+  item: DiffRow;
+  leftKey: string;
+  rightKey: string;
+  leftSpec: ApiModel;
+  rightSpec: ApiModel;
 }
 
 export const DiffItem: FC<DiffItemProps> = ({
@@ -91,32 +91,32 @@ export const DiffItem: FC<DiffItemProps> = ({
   rightKey,
   rightSpec,
 }) => {
-  const selectedSdkLanguage = useSelector(selectSdkLanguage)
+  const selectedSdkLanguage = useSelector(selectSdkLanguage);
   const [leftMethod, setLeftMethod] = useState<IMethod | undefined>(
     leftSpec.methods[item.name]
-  )
+  );
   const [rightMethod, setRightMethod] = useState<IMethod | undefined>(
     rightSpec.methods[item.name]
-  )
-  const [method, setMethod] = useState<IMethod>((leftMethod || rightMethod)!)
-  const [isOpen, setIsOpen] = useState(false)
-  const [leftSide, setLeftSide] = useState<string>('')
-  const [rightSide, setRightSide] = useState<string>('')
+  );
+  const [method, setMethod] = useState<IMethod>((leftMethod || rightMethod)!);
+  const [isOpen, setIsOpen] = useState(false);
+  const [leftSide, setLeftSide] = useState<string>('');
+  const [rightSide, setRightSide] = useState<string>('');
 
   useEffect(() => {
-    const { lhs, rhs } = differ(item, leftSpec, rightSpec, selectedSdkLanguage)
-    const lMethod = leftSpec.methods[item.name]
-    const rMethod = rightSpec.methods[item.name]
-    setLeftMethod(lMethod)
-    setRightMethod(rMethod)
-    setMethod((lMethod || rMethod)!)
-    setLeftSide(lhs)
-    setRightSide(rhs)
-  }, [leftSpec, rightSpec, isOpen, selectedSdkLanguage])
+    const { lhs, rhs } = differ(item, leftSpec, rightSpec, selectedSdkLanguage);
+    const lMethod = leftSpec.methods[item.name];
+    const rMethod = rightSpec.methods[item.name];
+    setLeftMethod(lMethod);
+    setRightMethod(rMethod);
+    setMethod((lMethod || rMethod)!);
+    setLeftSide(lhs);
+    setRightSide(rhs);
+  }, [leftSpec, rightSpec, isOpen, selectedSdkLanguage]);
 
   const handleOpen = () => {
-    setIsOpen(!isOpen)
-  }
+    setIsOpen(!isOpen);
+  };
 
   return (
     <Card border width="100%">
@@ -143,5 +143,5 @@ export const DiffItem: FC<DiffItemProps> = ({
         />
       </Accordion2>
     </Card>
-  )
-}
+  );
+};

package/src/scenes/DiffScene/DocDiff/DiffLegend.tsx

@@ -23,16 +23,16 @@
  SOFTWARE.
 
  */
-import type { FC } from 'react'
-import React from 'react'
-import type { DiffCount } from '@looker/sdk-codegen'
-import { Code, Flex, Icon, Space } from '@looker/components'
-import { Add } from '@styled-icons/material/Add'
-import { ChangeHistory } from '@styled-icons/material/ChangeHistory'
-import { Remove } from '@styled-icons/material/Remove'
+import type { FC } from 'react';
+import React from 'react';
+import type { DiffCount } from '@looker/sdk-codegen';
+import { Code, Flex, Icon, Space } from '@looker/components';
+import { Add } from '@styled-icons/material/Add';
+import { ChangeHistory } from '@styled-icons/material/ChangeHistory';
+import { Remove } from '@styled-icons/material/Remove';
 
 interface DiffLegendProps {
-  count: DiffCount
+  count: DiffCount;
 }
 
 export const DiffLegend: FC<DiffLegendProps> = ({ count }) => {
@@ -63,5 +63,5 @@ export const DiffLegend: FC<DiffLegendProps> = ({ count }) => {
         </Space>
       )}
     </Flex>
-  )
-}
+  );
+};

package/src/scenes/DiffScene/DocDiff/DocDiff.spec.tsx

@@ -23,22 +23,22 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import { screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-import { getLoadedSpecs } from '../../../test-data'
-import { diffSpecs, standardDiffToggles } from '../diffUtils'
-import { renderWithReduxProvider } from '../../../test-utils'
-import { DocDiff } from './DocDiff'
+import { getLoadedSpecs } from '../../../test-data';
+import { diffSpecs, standardDiffToggles } from '../diffUtils';
+import { renderWithReduxProvider } from '../../../test-utils';
+import { DocDiff } from './DocDiff';
 
 describe.skip('DocDiff', () => {
-  const specs = getLoadedSpecs()
-  const leftKey = specs['3.1'].key
-  const rightKey = specs['4.0'].key
-  const leftApi = specs['3.1'].api!
-  const rightApi = specs['4.0'].api!
-  const delta = diffSpecs(leftApi, rightApi, standardDiffToggles)
+  const specs = getLoadedSpecs();
+  const leftKey = specs['3.1'].key;
+  const rightKey = specs['4.0'].key;
+  const leftApi = specs['3.1'].api!;
+  const rightApi = specs['4.0'].api!;
+  const delta = diffSpecs(leftApi, rightApi, standardDiffToggles);
 
   it('renders', () => {
     renderWithReduxProvider(
@@ -50,17 +50,17 @@ describe.skip('DocDiff', () => {
         delta={delta}
         pageSize={1}
       />
-    )
+    );
     expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
       `${delta.length} differences between ${leftKey} and ${rightKey}`
-    )
+    );
     expect(
       screen.getByRole('button', { name: 'Previous page of results' })
-    ).toBeInTheDocument()
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: 'Next page of results' })
-    ).toBeInTheDocument()
-  })
+    ).toBeInTheDocument();
+  });
 
   it('renders when there is no delta', () => {
     renderWithReduxProvider(
@@ -71,9 +71,9 @@ describe.skip('DocDiff', () => {
         rightSpec={rightApi}
         delta={[]}
       />
-    )
-    expect(screen.getByText('No differences found')).toBeInTheDocument()
-  })
+    );
+    expect(screen.getByText('No differences found')).toBeInTheDocument();
+  });
 
   it('paginates', async () => {
     renderWithReduxProvider(
@@ -85,33 +85,31 @@ describe.skip('DocDiff', () => {
         delta={delta}
         pageSize={1}
       />
-    )
+    );
 
     // page 1
-    const row1 = delta[0]
-    expect(screen.getByText(row1.name)).toBeInTheDocument()
-    expect(screen.getByText(row1.id)).toBeInTheDocument()
+    const row1 = delta[0];
+    expect(screen.getByText(row1.name)).toBeInTheDocument();
+    expect(screen.getByText(row1.id)).toBeInTheDocument();
     expect(
       screen.getByText(rightApi.methods[row1.name].summary)
-    ).toBeInTheDocument()
+    ).toBeInTheDocument();
 
     // go to page 2
-    userEvent.click(
+    await userEvent.click(
       screen.getByRole('button', { name: 'Next page of results' })
-    )
+    );
 
-    await waitFor(() => {
-      const row2 = delta[1]
-      expect(screen.getByText(row2.name)).toBeInTheDocument()
-      expect(screen.getByText(row2.id)).toBeInTheDocument()
-      expect(
-        screen.getByText(rightApi.methods[row2.name].summary)
-      ).toBeInTheDocument()
-    })
-  })
+    const row2 = delta[1];
+    expect(screen.getByText(row2.name)).toBeInTheDocument();
+    expect(screen.getByText(row2.id)).toBeInTheDocument();
+    expect(
+      screen.getByText(rightApi.methods[row2.name].summary)
+    ).toBeInTheDocument();
+  });
 
   it('paginates with correct number of entries per page', async () => {
-    const pageSize = 5
+    const pageSize = 5;
     renderWithReduxProvider(
       <DocDiff
         leftKey={leftKey}
@@ -121,22 +119,22 @@ describe.skip('DocDiff', () => {
         delta={delta}
         pageSize={pageSize}
       />
-    )
+    );
 
     for (let i = 0; i < pageSize; i++) {
-      const row = delta[i]
-      expect(screen.getByText(row.name)).toBeInTheDocument()
-      expect(screen.getByText(row.id)).toBeInTheDocument()
+      const row = delta[i];
+      expect(screen.getByText(row.name)).toBeInTheDocument();
+      expect(screen.getByText(row.id)).toBeInTheDocument();
       expect(
         screen.getByText(rightApi.methods[row.name].summary)
-      ).toBeInTheDocument()
+      ).toBeInTheDocument();
     }
-    const notDisplayedRow = delta[pageSize]
-    expect(screen.queryByText(notDisplayedRow.name)).not.toBeInTheDocument()
-  })
+    const notDisplayedRow = delta[pageSize];
+    expect(screen.queryByText(notDisplayedRow.name)).not.toBeInTheDocument();
+  });
 
   it('paginates with correct total page count', async () => {
-    const pageSize = 5
+    const pageSize = 5;
     renderWithReduxProvider(
       <DocDiff
         leftKey={leftKey}
@@ -146,13 +144,13 @@ describe.skip('DocDiff', () => {
         delta={delta}
         pageSize={pageSize}
       />
-    )
-    const expectedPageCount = Math.ceil(delta.length / pageSize)
-    expect(screen.getByText(`of ${expectedPageCount}`)).toBeInTheDocument()
-  })
+    );
+    const expectedPageCount = Math.ceil(delta.length / pageSize);
+    expect(screen.getByText(`of ${expectedPageCount}`)).toBeInTheDocument();
+  });
 
   it('final diff entry of one page does not appear in next page', async () => {
-    const pageSize = 5
+    const pageSize = 5;
     renderWithReduxProvider(
       <DocDiff
         leftKey={leftKey}
@@ -162,22 +160,20 @@ describe.skip('DocDiff', () => {
         delta={delta}
         pageSize={pageSize}
       />
-    )
-    const lastPageEntry = delta[pageSize - 1]
-    expect(screen.getByText(lastPageEntry.name)).toBeInTheDocument()
-    expect(screen.getByText(lastPageEntry.id)).toBeInTheDocument()
+    );
+    const lastPageEntry = delta[pageSize - 1];
+    expect(screen.getByText(lastPageEntry.name)).toBeInTheDocument();
+    expect(screen.getByText(lastPageEntry.id)).toBeInTheDocument();
     expect(
       screen.getByText(rightApi.methods[lastPageEntry.name].summary)
-    ).toBeInTheDocument()
+    ).toBeInTheDocument();
 
     // go to page 2
-    userEvent.click(
+    await userEvent.click(
       screen.getByRole('button', { name: 'Next page of results' })
-    )
-
-    await waitFor(() => {
-      expect(screen.queryByText(lastPageEntry.name)).not.toBeInTheDocument()
-      expect(screen.queryByText(lastPageEntry.id)).not.toBeInTheDocument()
-    })
-  })
-})
+    );
+
+    expect(screen.queryByText(lastPageEntry.name)).not.toBeInTheDocument();
+    expect(screen.queryByText(lastPageEntry.id)).not.toBeInTheDocument();
+  });
+});