@looker/api-explorer 0.9.35 → 0.9.37

package/src/scenes/MethodScene/components/DocResponses/DocResponses.tsx

@@ -0,0 +1,103 @@
+/*
+
+ 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 React, { useEffect, useState } from 'react'
+import { Tabs2, Tab2 } from '@looker/components'
+import type { ApiModel, IMethod } from '@looker/sdk-codegen'
+import { CollapserCard } from '@looker/run-it'
+import { ErrorDoc } from '@looker/sdk-rtl'
+import {
+  apiErrorDisplayFetch,
+  ExtMarkdown,
+  getEnvAdaptor,
+} from '@looker/extension-utils'
+
+import { DocResponseTypes } from './DocResponseTypes'
+import { buildResponseTree } from './utils'
+
+interface DocResponsesProps {
+  api: ApiModel
+  method: IMethod
+  /** error code to display */
+  errorCode?: string
+}
+
+/**
+ * Renders a tab list and tab panels for different method response types
+ */
+export const DocResponses = ({ api, method, errorCode }: DocResponsesProps) => {
+  const [errorContent, setErrorContent] = useState('')
+  const responses = method.responses
+
+  const responseTree = buildResponseTree(responses)
+  const tabNames = Object.keys(responseTree)
+
+  let defaultTabId = tabNames[0]
+
+  if (errorCode) {
+    const pattern = new RegExp(`${errorCode}: \\w+`)
+    tabNames.forEach((el) => {
+      if (pattern.test(el)) {
+        defaultTabId = el
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!errorCode) return
+
+    const getErrorContent = async () => {
+      const docUrl = `/err/4.0/${errorCode}/${method.httpMethod.toLocaleLowerCase()}${
+        method.endpoint
+      }`
+      const adaptor = getEnvAdaptor()
+      const errDoc = new ErrorDoc(adaptor.sdk, apiErrorDisplayFetch)
+      const content = await errDoc.content(docUrl)
+      setErrorContent(content)
+    }
+    getErrorContent()
+  }, [errorCode])
+
+  if (responses.length === 0) return <></>
+
+  return (
+    <CollapserCard heading="Response Models" id="response models">
+      <Tabs2 defaultTabId={defaultTabId}>
+        {Object.entries(responseTree).map(([statusCode, response]) => {
+          const errorTab = errorCode && statusCode === defaultTabId
+          return (
+            <Tab2 key={statusCode} id={statusCode} label={statusCode}>
+              <DocResponseTypes api={api} responses={response} />
+              {errorContent && errorTab && (
+                <ExtMarkdown source={errorContent} />
+              )}
+            </Tab2>
+          )
+        })}
+      </Tabs2>
+    </CollapserCard>
+  )
+}

package/src/{components → scenes/MethodScene/components}/DocResponses/utils.spec.ts

@@ -23,7 +23,7 @@
  SOFTWARE.
 
  */
-import { api } from '../../test-data'
+import { api } from '../../../../test-data'
 import { buildResponseTree } from './utils'
 
 describe('DocResponses utils', () => {

package/src/scenes/MethodScene/components/index.ts

@@ -25,3 +25,4 @@
  */
 export { DocOperation } from './DocOperation'
 export { DocRequestBody } from './DocRequestBody'
+export { DocResponses } from './DocResponses'

package/src/scenes/MethodTagScene/MethodTagScene.spec.tsx

@@ -29,16 +29,28 @@ import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { api } from '../../test-data'
-import { renderWithRouter } from '../../test-utils'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
 import { MethodTagScene } from './MethodTagScene'
 
 const opBtnNames = /ALL|GET|POST|PUT|PATCH|DELETE/
 
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useHistory: () => ({
+      push: mockHistoryPush,
+      location,
+    }),
+  }
+})
+
 describe('MethodTagScene', () => {
   Element.prototype.scrollTo = jest.fn()
 
   test('it renders operation buttons and all methods for a given method tag', () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <Route path="/:specKey/methods/:methodTag">
         <MethodTagScene api={api} />
       </Route>,
@@ -62,7 +74,7 @@ describe('MethodTagScene', () => {
 
   test('it only renders operation buttons for operations that exist under that tag', () => {
     /** ApiAuth contains two POST methods and a DELETE method */
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <Route path="/:specKey/methods/:methodTag">
         <MethodTagScene api={api} />
       </Route>,
@@ -75,30 +87,29 @@ describe('MethodTagScene', () => {
     ).toHaveLength(3)
   })
 
-  test('it filters methods by operation type', async () => {
-    renderWithRouter(
+  test('it pushes filter to URL on toggle', async () => {
+    renderWithRouterAndReduxProvider(
       <Route path="/:specKey/methods/:methodTag">
         <MethodTagScene api={api} />
       </Route>,
       ['/3.1/methods/Look']
     )
-    const allLookMethods = /^\/look.*/
-    expect(screen.getAllByText(allLookMethods)).toHaveLength(7)
     /** Filter by GET operation */
     userEvent.click(screen.getByRole('button', { name: 'GET' }))
     await waitFor(() => {
-      expect(screen.getAllByText(allLookMethods)).toHaveLength(4)
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: location.pathname,
+        search: 't=get',
+      })
     })
     /** Filter by DELETE operation */
     userEvent.click(screen.getByRole('button', { name: 'DELETE' }))
     await waitFor(() => {
       // eslint-disable-next-line jest-dom/prefer-in-document
-      expect(screen.getAllByText(allLookMethods)).toHaveLength(1)
-    })
-    /** Restore original state */
-    userEvent.click(screen.getByRole('button', { name: 'ALL' }))
-    await waitFor(() => {
-      expect(screen.getAllByText(allLookMethods)).toHaveLength(7)
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: location.pathname,
+        search: 't=delete',
+      })
     })
   })
 })

package/src/scenes/MethodTagScene/MethodTagScene.tsx

@@ -28,8 +28,11 @@ import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import { Grid, ButtonToggle, ButtonItem } from '@looker/components'
 import type { ApiModel } from '@looker/sdk-codegen'
+import { useSelector } from 'react-redux'
 import { ApixSection, DocTitle, DocMethodSummary, Link } from '../../components'
-import { buildMethodPath } from '../../utils'
+import { buildMethodPath, isValidFilter, useNavigation } from '../../utils'
+import { selectTagFilter, useSettingActions } from '../../state'
+import { useTagStoreSync } from '../utils'
 import { getOperations } from './utils'
 
 interface MethodTagSceneProps {
@@ -44,17 +47,38 @@ interface MethodTagSceneParams {
 export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
   const { specKey, methodTag } = useParams<MethodTagSceneParams>()
   const history = useHistory()
-  const [value, setValue] = useState('ALL')
+  const methods = api.tags[methodTag]
+  const { navigate, buildPathWithGlobalParams, navigateWithGlobalParams } =
+    useNavigation()
+  const selectedTagFilter = useSelector(selectTagFilter)
+  const { setTagFilterAction } = useSettingActions()
+  const [tagFilter, setTagFilter] = useState(selectedTagFilter)
+  useTagStoreSync()
+
+  const handleChange = (filter: string) => {
+    navigate(location.pathname, {
+      t: filter === 'ALL' ? null : filter.toLowerCase(),
+    })
+  }
 
   useEffect(() => {
-    /** Reset ButtonToggle value on route change */
-    setValue('ALL')
-  }, [methodTag])
+    const searchParams = new URLSearchParams(location.search)
+    let verbParam = searchParams.get('t') || 'ALL'
+    verbParam = isValidFilter(location.pathname, verbParam)
+      ? verbParam.toUpperCase()
+      : 'ALL'
+    setTagFilterAction({
+      tagFilter: verbParam,
+    })
+  }, [location.search])
+
+  useEffect(() => {
+    setTagFilter(selectedTagFilter)
+  }, [selectedTagFilter])
 
-  const methods = api.tags[methodTag]
   useEffect(() => {
     if (!methods) {
-      history.push(`/${specKey}/methods`)
+      navigateWithGlobalParams(`/${specKey}/methods`)
     }
   }, [history, methods])
   if (!methods) {
@@ -68,7 +92,12 @@ export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
   return (
     <ApixSection>
       <DocTitle>{`${tag.name}: ${tag.description}`}</DocTitle>
-      <ButtonToggle mb="small" mt="xlarge" value={value} onChange={setValue}>
+      <ButtonToggle
+        mb="small"
+        mt="xlarge"
+        value={tagFilter}
+        onChange={handleChange}
+      >
         <ButtonItem key="ALL" px="large" py="xsmall">
           ALL
         </ButtonItem>
@@ -80,10 +109,13 @@ export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
       </ButtonToggle>
       {Object.values(methods).map(
         (method, index) =>
-          (value === 'ALL' || value === method.httpMethod) && (
+          (selectedTagFilter === 'ALL' ||
+            selectedTagFilter === method.httpMethod) && (
             <Link
               key={index}
-              to={buildMethodPath(specKey, tag.name, method.name)}
+              to={buildPathWithGlobalParams(
+                buildMethodPath(specKey, tag.name, method.name)
+              )}
             >
               <Grid columns={1} py="xsmall">
                 <DocMethodSummary key={index} method={method} />

package/src/scenes/TypeScene/TypeScene.tsx

@@ -40,6 +40,7 @@ import {
   ExploreType,
   DocSchema,
 } from '../../components'
+import { useNavigation } from '../../utils'
 
 interface DocTypeProps {
   api: ApiModel
@@ -47,19 +48,24 @@ interface DocTypeProps {
 
 interface DocTypeParams {
   specKey: string
+  typeTag: string
   typeName: string
 }
 
 export const TypeScene: FC<DocTypeProps> = ({ api }) => {
-  const { specKey, typeName } = useParams<DocTypeParams>()
+  const { specKey, typeTag, typeName } = useParams<DocTypeParams>()
   const type = api.types[typeName]
   const history = useHistory()
+  const { navigate } = useNavigation()
   const typesUsed = typeRefs(api, type?.customTypes)
   const methodsUsedBy = methodRefs(api, type?.methodRefs)
   const typesUsedBy = typeRefs(api, type?.parentTypes)
   useEffect(() => {
     if (!type) {
-      history.push(`/${specKey}/types`)
+      const route = api.typeTags[typeTag]
+        ? `/${specKey}/types/${typeTag}`
+        : `/${specKey}/types`
+      navigate(route)
     }
   }, [history, specKey, type])
 

package/src/scenes/TypeTagScene/TypeTagScene.spec.tsx

@@ -36,6 +36,18 @@ const opBtnNames = /ALL|SPECIFICATION|WRITE|REQUEST|ENUMERATED/
 
 const path = '/:specKey/types/:typeTag'
 
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useHistory: () => ({
+      push: mockHistoryPush,
+      location,
+    }),
+  }
+})
+
 describe('TypeTagScene', () => {
   Element.prototype.scrollTo = jest.fn()
 
@@ -74,30 +86,28 @@ describe('TypeTagScene', () => {
     ).toHaveLength(2)
   })
 
-  test('it filters methods by operation type', async () => {
+  test('it pushes filter to URL on toggle', async () => {
     renderWithRouterAndReduxProvider(
       <Route path={path}>
         <TypeTagScene api={api} />
       </Route>,
       ['/3.1/types/Look']
     )
-    expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(
-      Object.keys(api.typeTags.Look).length
-    )
-
-    expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(
-      Object.keys(api.typeTags.Look).length
-    )
-
     /** Filter by SPECIFICATION */
     userEvent.click(screen.getByRole('button', { name: 'SPECIFICATION' }))
     await waitFor(() => {
-      expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(5)
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: location.pathname,
+        search: 't=specification',
+      })
     })
     /** Filter by REQUEST */
     userEvent.click(screen.getByRole('button', { name: 'REQUEST' }))
     await waitFor(() => {
-      expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(2)
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: location.pathname,
+        search: 't=request',
+      })
     })
   })
 })

package/src/scenes/TypeTagScene/TypeTagScene.tsx

@@ -27,9 +27,12 @@ import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { Grid, ButtonToggle, ButtonItem } from '@looker/components'
 import type { ApiModel } from '@looker/sdk-codegen'
-import { useParams, useHistory } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 import { ApixSection, DocTitle, DocTypeSummary, Link } from '../../components'
-import { buildTypePath } from '../../utils'
+import { buildTypePath, isValidFilter, useNavigation } from '../../utils'
+import { selectTagFilter, useSettingActions } from '../../state'
+import { useTagStoreSync } from '../utils'
 import { getMetaTypes } from './utils'
 
 interface TypeTagSceneProps {
@@ -43,20 +46,40 @@ interface TypeTagSceneParams {
 
 export const TypeTagScene: FC<TypeTagSceneProps> = ({ api }) => {
   const { specKey, typeTag } = useParams<TypeTagSceneParams>()
-  const history = useHistory()
-  const [value, setValue] = useState('ALL')
+  const { navigate, buildPathWithGlobalParams, navigateWithGlobalParams } =
+    useNavigation()
+  const selectedTagFilter = useSelector(selectTagFilter)
+  const { setTagFilterAction } = useSettingActions()
+  const [tagFilter, setTagFilter] = useState(selectedTagFilter)
+  useTagStoreSync()
+
+  const handleChange = (filter: string) => {
+    navigate(location.pathname, {
+      t: filter === 'ALL' ? null : filter.toLowerCase(),
+    })
+  }
 
   useEffect(() => {
-    /** Reset ButtonToggle value on route change */
-    setValue('ALL')
-  }, [typeTag])
+    const searchParams = new URLSearchParams(location.search)
+    let verbParam = searchParams.get('t') || 'ALL'
+    verbParam = isValidFilter(location.pathname, verbParam)
+      ? verbParam.toUpperCase()
+      : 'ALL'
+    setTagFilterAction({
+      tagFilter: verbParam,
+    })
+  }, [location.search])
 
   const types = api.typeTags[typeTag]
   useEffect(() => {
     if (!types) {
-      history.push(`/${specKey}/types`)
+      navigateWithGlobalParams(`/${specKey}/types`)
     }
-  }, [history, types])
+  }, [types])
+
+  useEffect(() => {
+    setTagFilter(selectedTagFilter)
+  }, [selectedTagFilter])
 
   if (!types) {
     return <></>
@@ -67,7 +90,12 @@ export const TypeTagScene: FC<TypeTagSceneProps> = ({ api }) => {
   return (
     <ApixSection>
       <DocTitle>{`${tag.name}: ${tag.description}`}</DocTitle>
-      <ButtonToggle mb="small" mt="xlarge" value={value} onChange={setValue}>
+      <ButtonToggle
+        mb="small"
+        mt="xlarge"
+        value={tagFilter}
+        onChange={handleChange}
+      >
         <ButtonItem key="ALL" px="large" py="xsmall">
           ALL
         </ButtonItem>
@@ -79,9 +107,14 @@ export const TypeTagScene: FC<TypeTagSceneProps> = ({ api }) => {
       </ButtonToggle>
       {Object.values(types).map(
         (type, index) =>
-          (value === 'ALL' ||
-            value === type.metaType.toString().toUpperCase()) && (
-            <Link key={index} to={buildTypePath(specKey, tag.name, type.name)}>
+          (selectedTagFilter === 'ALL' ||
+            selectedTagFilter === type.metaType.toString().toUpperCase()) && (
+            <Link
+              key={index}
+              to={buildPathWithGlobalParams(
+                buildTypePath(specKey, tag.name, type.name)
+              )}
+            >
               <Grid columns={1} py="xsmall">
                 <DocTypeSummary key={index} type={type} />
               </Grid>

package/src/scenes/index.ts

@@ -23,6 +23,7 @@
  SOFTWARE.
 
  */
+export { ErrorDetailScene } from './ErrorDetailScene'
 export { HomeScene } from './HomeScene'
 export { MethodScene } from './MethodScene'
 export { TypeScene } from './TypeScene'

package/src/scenes/utils/hooks/index.ts

@@ -0,0 +1,27 @@
+/*
+
+ 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.
+
+ */
+
+export { useTagStoreSync } from './tagStoreSync'

package/src/scenes/utils/hooks/tagStoreSync.spec.ts

@@ -0,0 +1,102 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2022 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 { renderHook } from '@testing-library/react-hooks'
+import { useHistory } from 'react-router-dom'
+import type { Location } from 'history'
+import * as reactRedux from 'react-redux'
+import * as routerLocation from 'react-router-dom'
+import { createTestStore, withReduxProvider } from '../../../test-utils'
+import { useTagStoreSync } from './tagStoreSync'
+
+jest.mock('react-router', () => {
+  const ReactRouter = jest.requireActual('react-router')
+  return {
+    ...ReactRouter,
+    useHistory: jest.fn().mockReturnValue({ push: jest.fn(), location }),
+    useLocation: jest.fn().mockReturnValue({ pathname: '/', search: '' }),
+  }
+})
+
+describe('useTagStoreSync', () => {
+  const mockDispatch = jest.fn()
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('does nothing if uninitialized', () => {
+    const { push } = useHistory()
+    const wrapper = ({ children }: any) => withReduxProvider(children)
+    renderHook(() => useTagStoreSync(), { wrapper })
+    expect(push).not.toHaveBeenCalled()
+  })
+
+  describe.each([
+    ['methods', 'get'],
+    ['types', 'specification'],
+  ])('tag filter verb for sidenav %s tab', (tagType, verb) => {
+    test('overrides store tag filter given valid url tag filter param', () => {
+      const { push } = useHistory()
+      const store = createTestStore({
+        settings: {
+          initialized: true,
+        },
+      })
+      jest.spyOn(routerLocation, 'useLocation').mockReturnValue({
+        pathname: `/4.0/${tagType}/ApiAuth`,
+        search: `t=${verb}`,
+      } as unknown as Location)
+      jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch)
+      const wrapper = ({ children }: any) => withReduxProvider(children, store)
+      renderHook(() => useTagStoreSync(), { wrapper })
+      expect(push).not.toHaveBeenCalled()
+      expect(mockDispatch).toHaveBeenLastCalledWith({
+        payload: { tagFilter: verb.toUpperCase() },
+        type: 'settings/setTagFilterAction',
+      })
+    })
+
+    test('updates url with store tag filter given invalid url tag filter param', () => {
+      const { push } = useHistory()
+      const store = createTestStore({
+        settings: {
+          initialized: true,
+        },
+      })
+      jest.spyOn(routerLocation, 'useLocation').mockReturnValue({
+        pathname: `/4.0/${tagType}/ApiAuth`,
+        search: 't=invalid',
+      } as unknown as Location)
+      jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch)
+      const wrapper = ({ children }: any) => withReduxProvider(children, store)
+      renderHook(() => useTagStoreSync(), { wrapper })
+      expect(push).toHaveBeenCalledWith({
+        pathname: `/4.0/${tagType}/ApiAuth`,
+        search: '',
+      })
+    })
+  })
+})