feat: show full request url in RunIt response

The Response tab now shows the full request URL, not including the request body (which can't be included in this scenario)

Author: jkaster

packages/run-it/src/RunIt.tsx

@@ -35,6 +35,7 @@ import {
   useTabs,
 } from '@looker/components'
 import type { ApiModel, IMethod } from '@looker/sdk-codegen'
+import type { BaseTransport } from '@looker/sdk-rtl'
 import type { ResponseContent } from './components'
 import {
   RequestForm,
@@ -51,11 +52,11 @@ import {
   initRequestContent,
   createRequestParams,
   runRequest,
-  pathify,
   sdkNeedsConfig,
   prepareInputs,
   sdkNeedsAuth,
   createInputs,
+  requestUrl,
 } from './utils'
 import type { RunItSetter } from '.'
 import { runItNoSet, RunItContext } from '.'
@@ -126,6 +127,7 @@ export const RunIt: FC<RunItProps> = ({
     initRequestContent(configurator, inputs)
   )
   const [activePathParams, setActivePathParams] = useState({})
+  const [activeQueryParams, setActiveQueryParams] = useState({})
   const [loading, setLoading] = useState(false)
   const [responseContent, setResponseContent] =
     useState<ResponseContent>(undefined)
@@ -173,6 +175,7 @@ export const RunIt: FC<RunItProps> = ({
       }
     }
     setActivePathParams(pathParams)
+    setActiveQueryParams(queryParams)
     tabs.onSelectTab(1)
     if (sdk) {
       setLoading(true)
@@ -240,12 +243,24 @@ export const RunIt: FC<RunItProps> = ({
         <TabPanel key="response">
           <Loading
             loading={loading}
-            message={`${httpMethod} ${pathify(endpoint, activePathParams)}`}
+            message={`${httpMethod} ${requestUrl(
+              sdk.authSession.transport as BaseTransport,
+              basePath,
+              endpoint,
+              activePathParams,
+              activeQueryParams
+            )}`}
           />
           <ResponseExplorer
             response={responseContent}
             verb={httpMethod}
-            path={pathify(endpoint, activePathParams)}
+            path={requestUrl(
+              sdk.authSession.transport as BaseTransport,
+              basePath,
+              endpoint,
+              activePathParams,
+              activeQueryParams
+            )}
           />
         </TabPanel>
         <TabPanel key="makeTheCall">

packages/run-it/src/components/ResponseExplorer/ResponseExplorer.tsx

@@ -129,7 +129,7 @@ interface ResponseExplorerProps {
  * Explore the raw response from an HTTP request
  * @param response IRawResponse values
  * @param verb HTTP method
- * @param path Path of request
+ * @param path Full path of request, including query string
  * @constructor
  */
 export const ResponseExplorer: FC<ResponseExplorerProps> = ({
@@ -145,11 +145,8 @@ export const ResponseExplorer: FC<ResponseExplorerProps> = ({
       {!response && <DarkSpan>No response was received</DarkSpan>}
       {response && (
         <>
-          <RunItHeading as="h4">
-            {`${verb || ''} ${path || ''} (${response.statusCode}: ${
-              response.statusMessage
-            })`}
-          </RunItHeading>
+          <RunItHeading as="h4">{`${verb || ''} ${path || ''}`}</RunItHeading>
+          <DarkSpan>{`${response.statusCode}: ${response.statusMessage}`}</DarkSpan>
           <CollapserCard
             divider={false}
             heading={`Body (${getBodySize(response)})`}

packages/run-it/src/utils/requestUtils.ts

@@ -24,7 +24,7 @@
 
  */
 
-import type { IAPIMethods, IRawResponse } from '@looker/sdk-rtl'
+import type { BaseTransport, IAPIMethods, IRawResponse } from '@looker/sdk-rtl'
 import cloneDeep from 'lodash/cloneDeep'
 import { isEmpty } from 'lodash'
 import type { IApiModel, IMethod, IType } from '@looker/sdk-codegen'
@@ -172,6 +172,26 @@ export const createRequestParams = (
   return [pathParams, queryParams, body]
 }
 
+/**
+ * Construct the full request URL
+ * @param transport to get server's host url
+ * @param path to REST server
+ * @param endpoint REST endpoint
+ * @param pathParams path parameters
+ * @param queryParams collection
+ */
+export const requestUrl = (
+  transport: BaseTransport,
+  path: string,
+  endpoint: string,
+  pathParams: RunItValues,
+  queryParams?: RunItValues
+) => {
+  path = `${path}${pathify(endpoint, pathParams)}`
+  const url = transport.makeUrl(path, transport.options, queryParams)
+  return url
+}
+
 /**
  * Makes an http request using the SDK browser transport rawRequest method
  * @param sdk functional SDK that supports rawRequest via its transport

packages/sdk-node/src/nodeTransport.ts

@@ -83,7 +83,7 @@ export type RequestOptions = rq.RequiredUriUrl &
   rq.OptionsWithUrl
 
 export class NodeTransport extends BaseTransport {
-  constructor(protected readonly options: ITransportSettings) {
+  constructor(public readonly options: ITransportSettings) {
     super(options)
   }
 

packages/sdk-rtl/src/baseTransport.ts

@@ -38,7 +38,7 @@ import type {
 } from './transport'
 
 export abstract class BaseTransport implements ITransport {
-  protected constructor(protected readonly options: ITransportSettings) {
+  protected constructor(readonly options: ITransportSettings) {
     this.options = options
   }
 

packages/sdk-rtl/src/browserTransport.ts

@@ -77,7 +77,7 @@ export class BrowserCryptoHash implements ICryptoHash {
 }
 
 export class BrowserTransport extends BaseTransport {
-  constructor(protected readonly options: ITransportSettings) {
+  constructor(public readonly options: ITransportSettings) {
     super(options)
   }