feat: http response explorer for RunIt (#800)

`ResponseExplorer` adds to the RunIt **Response** tab:

- collapsible body section
- collapsible header table
- copy to clipboard for SDK calls view via new `CodeCopy` component
- also fixes the spinner behavior for the default Response tab
- Login and Configure options are only needed for OAuth
- ConfigForm also shows OAuth client configuration information
- When `Save` is clicked on the config form, API specifications are reloaded from the configured server
- If values are filled out for **RunIt** before `Login` is clicked, when OAuth returns, **RunIt** is re-opened and the entered values are restored in the Request form
- added yarn scripts
  - `yarn dev:apix`
  - `yarn dev:xapix`

New PR because old one was blocked by CLA requirements

Co-authored-by: Bryn Ryans <bryn.ryans@looker.com> Joseph Axisa <jax@looker.com>

package.json

@@ -35,6 +35,8 @@
     "build:cjs": "lerna exec --stream 'BABEL_ENV=build_cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --no-comments'",
     "build:es": "lerna exec --stream 'BABEL_ENV=build babel src --root-mode upward --out-dir lib/esm --source-maps --extensions .ts,.tsx --no-comments'",
     "build:ts": "lerna exec --stream --sort 'tsc -b tsconfig.build.json'",
+    "dev:apix": "yarn workspace @looker/api-explorer develop",
+    "dev:xapix": "yarn workspace @looker/extension-api-explorer develop",
     "clean": "rm -Rf packages/*/lib",
     "prepublishOnly": "jest packages/sdk-rtl packages/sdk-node/test",
     "fix": "yarn lint:es --fix",

packages/api-explorer/public/versions.json

@@ -21,5 +21,5 @@
     }
   ],
   "api_server_url": "https://localhost:8080",
-  "headless": true
+  "headless": false
 }

packages/api-explorer/src/ApiExplorer.tsx

@@ -28,9 +28,8 @@ import React, { FC, useReducer, useState, useEffect, useCallback } from 'react'
 import { useLocation } from 'react-router'
 import styled, { createGlobalStyle } from 'styled-components'
 import { Aside, ComponentsProvider, Layout, Page } from '@looker/components'
-import { Looker40SDK, Looker31SDK } from '@looker/sdk'
 import { SpecList } from '@looker/sdk-codegen'
-import { loadSpecApi } from '@looker/run-it'
+import { loadSpecApi, RunItSetter } from '@looker/run-it'
 import {
   SearchContext,
   LodeContext,
@@ -52,10 +51,10 @@ import { useActions } from './hooks'
 
 export interface ApiExplorerProps {
   specs: SpecList
-  sdk?: Looker31SDK | Looker40SDK
+  envAdaptor: IApixEnvAdaptor
+  setVersionsUrl: RunItSetter
   exampleLodeUrl?: string
   declarationsLodeUrl?: string
-  envAdaptor: IApixEnvAdaptor
   headless?: boolean
 }
 
@@ -64,6 +63,7 @@ export const BodyOverride = createGlobalStyle` html { height: 100%; overflow: hi
 const ApiExplorer: FC<ApiExplorerProps> = ({
   specs,
   envAdaptor,
+  setVersionsUrl,
   exampleLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
   declarationsLodeUrl = `${apixFilesHost}/declarationsIndex.json`,
   headless = false,
@@ -173,6 +173,8 @@ const ApiExplorer: FC<ApiExplorerProps> = ({
                         specKey={spec.key}
                         specs={specs}
                         toggleNavigation={toggleNavigation}
+                        envAdaptor={envAdaptor}
+                        setVersionsUrl={setVersionsUrl}
                       />
                     )}
                   </Layout>

packages/api-explorer/src/StandaloneApiExplorer.tsx

@@ -54,11 +54,13 @@ export const StandaloneApiExplorer: FC<StandaloneApiExplorerProps> = ({
 }) => {
   const [specs, setSpecs] = useState<SpecList | undefined>()
   const [embedded, setEmbedded] = useState<boolean>(headless)
+  const [currentVersionsUrl, setCurrentVersionsUrl] =
+    useState<string>(versionsUrl)
 
   useEffect(() => {
-    if (versionsUrl) {
+    if (currentVersionsUrl) {
       // Load specifications from the versions url
-      loadSpecsFromVersions(versionsUrl).then((response) => {
+      loadSpecsFromVersions(currentVersionsUrl).then((response) => {
         setSpecs(response.specs)
         if ('headless' in response) {
           // headless will default to false if it's not explicitly set
@@ -68,7 +70,7 @@ export const StandaloneApiExplorer: FC<StandaloneApiExplorerProps> = ({
     } else {
       setSpecs(undefined)
     }
-  }, [versionsUrl])
+  }, [currentVersionsUrl])
 
   const chosenSdk: IAPIMethods = initRunItSdk(defaultConfigurator)
 
@@ -85,6 +87,7 @@ export const StandaloneApiExplorer: FC<StandaloneApiExplorerProps> = ({
               specs={specs}
               envAdaptor={standaloneEnvAdaptor}
               headless={embedded}
+              setVersionsUrl={setCurrentVersionsUrl}
             />
           ) : (
             <Loader themeOverrides={standaloneEnvAdaptor.themeOverrides()} />

packages/api-explorer/src/components/DocMethodSummary/DocMethodSummary.tsx

@@ -27,7 +27,7 @@ import React, { FC } from 'react'
 import { Card, CardContent, Flex, Space, Text } from '@looker/components'
 import { IMethod } from '@looker/sdk-codegen'
 import { MethodBadge } from '@looker/run-it'
-import { ApixHeading } from '../common'
+import { RunItHeading } from '../common'
 import { DocActivityType, DocRateLimited } from '../../components'
 import { DocSummaryStatus } from './DocSummaryStatus'
 
@@ -47,9 +47,9 @@ export const DocMethodSummary: FC<DocMethodSummaryProps> = ({ method }) => (
           {method.httpMethod.toUpperCase()}
         </MethodBadge>
         <Flex alignItems="start" flexDirection="column" flex="1" mx="small">
-          <ApixHeading as="h3" mb="0" pt="0">
+          <RunItHeading as="h3" mb="0" pt="0">
             {method.summary}
-          </ApixHeading>
+          </RunItHeading>
           <Space>
             <DocRateLimited method={method} />
             <DocActivityType method={method} />

packages/api-explorer/src/components/DocReferences/DocReferences.tsx

@@ -27,8 +27,8 @@
 import React, { FC, useContext } from 'react'
 import { ApiModel, IMethod, IType } from '@looker/sdk-codegen'
 
+import { CollapserCard } from '@looker/run-it'
 import { SearchContext } from '../../context'
-import { CollapserCard } from '../Collapser'
 import { DocReferenceItems } from './utils'
 
 interface DocReferencesProps {

packages/api-explorer/src/components/DocReferences/utils.tsx

@@ -28,7 +28,7 @@ import { ApiModel, IMethod, IType, Method } from '@looker/sdk-codegen'
 import { Link } from 'react-router-dom'
 
 import { buildMethodPath, buildTypePath, highlightHTML } from '../../utils'
-import { ApixHeading } from '../common'
+import { RunItHeading } from '../common'
 
 /**
  * Returns the tag for a given method name
@@ -78,7 +78,7 @@ export const DocReferenceItems = (
 
   return (
     <>
-      <ApixHeading as="h4">{heading}</ApixHeading>
+      <RunItHeading as="h4">{heading}</RunItHeading>
       {items.map((item, index) => (
         <span className="doc-link" key={item.name}>
           {index ? ', ' : ''}

packages/api-explorer/src/components/DocResponses/DocResponses.tsx

@@ -28,7 +28,7 @@ import React, { FC } from 'react'
 import { Tab, TabList, TabPanel, TabPanels, useTabs } from '@looker/components'
 import { IMethodResponse } from '@looker/sdk-codegen'
 
-import { CollapserCard } from '../Collapser'
+import { CollapserCard } from '@looker/run-it'
 import { DocResponseTypes } from './DocResponseTypes'
 import { buildResponseTree } from './utils'
 

packages/api-explorer/src/components/DocSDKs/DocSDKs.tsx

@@ -34,11 +34,10 @@ import {
   CodeGen,
   Method,
 } from '@looker/sdk-codegen'
-import { getGenerators } from '@looker/run-it'
+import { CollapserCard, getGenerators } from '@looker/run-it'
 
 import { DocCode } from '../DocCode'
 import { getSelectedSdkLanguage } from '../../state'
-import { CollapserCard } from '../Collapser'
 import { noComment } from './utils'
 import { DocDeclarations } from './DocDeclarations'
 

packages/api-explorer/src/components/DocSchema/DocSchema.tsx

@@ -27,7 +27,7 @@
 import React, { FC } from 'react'
 
 import { CodeDisplay } from '@looker/code-editor'
-import { CollapserCard } from '../Collapser'
+import { CollapserCard } from '@looker/run-it'
 
 interface DocSchemaProps {
   object: any

packages/api-explorer/src/components/DocSdkUsage/DocSdkUsage.tsx

@@ -35,11 +35,11 @@ import {
   Pagination,
 } from '@looker/components'
 import { findExampleLanguages, IMethod } from '@looker/sdk-codegen'
+import { CollapserCard } from '@looker/run-it'
 import { InsertDriveFile } from '@styled-icons/material-outlined/InsertDriveFile'
 import { useSelector } from 'react-redux'
 
 import { getSelectedSdkLanguage } from '../../state'
-import { CollapserCard } from '../Collapser'
 import { LodeContext } from '../../context'
 import {
   exampleColumns,

packages/api-explorer/src/components/DocTitle/DocTitle.tsx

@@ -25,8 +25,8 @@
  */
 
 import React, { FC } from 'react'
-import { ApixHeading } from '../common'
+import { RunItHeading } from '../common'
 
 export const DocTitle: FC = (props) => (
-  <ApixHeading fontSize="xxxlarge" {...props} />
+  <RunItHeading fontSize="xxxlarge" {...props} />
 )

packages/api-explorer/src/components/common/common.tsx

@@ -33,9 +33,9 @@ import { HEADER_REM } from '../Header'
  * Common styled components to be used across the whole library
  */
 
-export const ApixHeading = styled(Heading)``
+export const RunItHeading = styled(Heading)``
 
-ApixHeading.defaultProps = {
+RunItHeading.defaultProps = {
   mb: 'xsmall',
   pt: 'xsmall',
 }

packages/api-explorer/src/components/common/index.ts

@@ -23,5 +23,5 @@
  SOFTWARE.
 
  */
-export { ApixHeading, ApixSection } from './common'
+export { RunItHeading, ApixSection } from './common'
 export { Loader } from './Loader'

packages/api-explorer/src/components/index.ts

@@ -23,7 +23,7 @@
  SOFTWARE.
 
  */
-export { ApixHeading, ApixSection, Loader } from './common'
+export { RunItHeading, ApixSection, Loader } from './common'
 export { DocActivityType } from './DocActivityType'
 export { DocCode } from './DocCode'
 export { DocMethodSummary } from './DocMethodSummary'
@@ -40,7 +40,6 @@ export { DocTitle } from './DocTitle'
 export { Header } from './Header'
 export { SideNav } from './SideNav'
 export { ExploreType, ExploreProperty } from './ExploreType'
-export { CollapserCard } from './Collapser'
 export { DocSchema } from './DocSchema'
 export { Link } from './Link'
 export { ErrorBoundary } from './ErrorBoundary'

packages/api-explorer/src/reducers/spec/utils.ts

@@ -26,6 +26,7 @@
 
 import { SpecList } from '@looker/sdk-codegen'
 import { Location as HLocation } from 'history'
+import { OAuthSession } from '@looker/sdk-rtl'
 import { diffPath, oAuthPath } from '../../utils'
 import { SpecState } from './reducer'
 
@@ -76,7 +77,13 @@ export const getDefaultSpecKey = (specs: SpecList): string => {
  * @param specs to use to find the default spec key
  */
 export const getSpecKey = (location: AbstractLocation, specs?: SpecList) => {
-  const pathName = location.pathname
+  let pathName = location.pathname
+  if (pathName === `/${oAuthPath}`) {
+    const returnUrl = sessionStorage.getItem(OAuthSession.returnUrlKey)
+    if (returnUrl) {
+      pathName = returnUrl
+    }
+  }
   const pathNodes = pathName.split('/')
   let specKey = ''
   if (
@@ -95,7 +102,7 @@ export const getSpecKey = (location: AbstractLocation, specs?: SpecList) => {
 /**
  * Creates a default state object with the spec matching the specKey defined
  * in the url or the default criteria in getDefaultSpecKey
- * @param specs A collection of specs
+ * @param specList A collection of specs
  * @param location Standalone or extension location
  * @returns An object to be used as default state
  */

packages/api-explorer/src/routes/AppRouter.tsx

@@ -26,24 +26,28 @@
 import React, { FC, useContext } from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
 import { ApiModel, SpecList } from '@looker/sdk-codegen'
-import { OAuthScene, RunItContext } from '@looker/run-it'
+import { OAuthScene, RunItSetter, RunItContext } from '@looker/run-it'
 
 import { HomeScene, MethodScene, TagScene, TypeScene } from '../scenes'
 import { DiffScene } from '../scenes/DiffScene'
-import { diffPath, oAuthPath } from '../utils'
+import { diffPath, IApixEnvAdaptor, oAuthPath } from '../utils'
 
 interface AppRouterProps {
   api: ApiModel
   specKey: string
   specs: SpecList
   toggleNavigation: (target?: boolean) => void
+  envAdaptor: IApixEnvAdaptor
+  setVersionsUrl: RunItSetter
 }
 
 export const AppRouter: FC<AppRouterProps> = ({
   specKey,
   api,
   specs,
   toggleNavigation,
+  envAdaptor,
+  setVersionsUrl,
 }) => {
   const { sdk } = useContext(RunItContext)
   const maybeOauth = sdk && sdk.apiVersion === '4.0'
@@ -65,7 +69,11 @@ export const AppRouter: FC<AppRouterProps> = ({
         <TagScene api={api} />
       </Route>
       <Route path="/:specKey/methods/:methodTag/:methodName">
-        <MethodScene api={api} />
+        <MethodScene
+          api={api}
+          envAdaptor={envAdaptor}
+          setVersionsUrl={setVersionsUrl}
+        />
       </Route>
       <Route path="/:specKey/types/:typeName">
         <TypeScene api={api} />

packages/api-explorer/src/scenes/MethodScene/MethodScene.tsx

@@ -36,7 +36,7 @@ import {
 import { Beaker } from '@looker/icons'
 import { ThemeContext } from 'styled-components'
 import { useParams } from 'react-router-dom'
-import { RunIt, RunItContext } from '@looker/run-it'
+import { RunIt, RunItSetter, RunItContext, RunItFormKey } from '@looker/run-it'
 import { ApiModel, typeRefs } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
 
@@ -55,33 +55,44 @@ import {
   DocSchema,
 } from '../../components'
 import { getSelectedSdkLanguage } from '../../state'
+import { IApixEnvAdaptor } from '../../utils'
 import { DocOperation, DocRequestBody } from './components'
 import { createInputs } from './utils'
 
-interface DocMethodProps {
+interface MethodSceneProps {
   api: ApiModel
+  envAdaptor: IApixEnvAdaptor
+  setVersionsUrl: RunItSetter
 }
 
-interface DocMethodParams {
+interface MethodSceneParams {
   methodName: string
   specKey: string
 }
 
-export const MethodScene: FC<DocMethodProps> = ({ api }) => {
+const showRunIt = (envAdaptor: IApixEnvAdaptor) => {
+  return !!envAdaptor.localStorageGetItem(RunItFormKey)
+}
+
+export const MethodScene: FC<MethodSceneProps> = ({
+  api,
+  envAdaptor,
+  setVersionsUrl,
+}) => {
   const { sdk } = useContext(RunItContext)
   const sdkLanguage = useSelector(getSelectedSdkLanguage)
-  const { methodName, specKey } = useParams<DocMethodParams>()
-  const { value, toggle } = useToggle()
+  const { methodName, specKey } = useParams<MethodSceneParams>()
+  const { value, toggle } = useToggle(showRunIt(envAdaptor))
   const [method, setMethod] = useState(api.methods[methodName])
   const seeTypes = typeRefs(api, method.customTypes)
+  const { colors } = useContext(ThemeContext)
+
+  const RunItButton = value ? Button : ButtonOutline
 
   useEffect(() => {
     setMethod(api.methods[methodName])
   }, [api, methodName])
 
-  const { colors } = useContext(ThemeContext)
-
-  const RunItButton = value ? Button : ButtonOutline
   const runItToggle = (
     <RunItButton
       color={value ? 'key' : 'neutral'}
@@ -131,6 +142,7 @@ export const MethodScene: FC<DocMethodProps> = ({ api }) => {
               api={api}
               inputs={createInputs(api, method)}
               method={method}
+              setVersionsUrl={setVersionsUrl}
             />
           </ExtendComponentsThemeProvider>
         </Aside>

packages/api-explorer/src/scenes/MethodScene/components/DocRequestBody.tsx

@@ -25,8 +25,8 @@
  */
 import React, { FC } from 'react'
 import { IMethod } from '@looker/sdk-codegen'
-
-import { ExploreType, CollapserCard } from '../../../components'
+import { CollapserCard } from '@looker/run-it'
+import { ExploreType } from '../../../components'
 
 interface DocRequestBodyProps {
   method: IMethod