fix: show a helpful message when sdk call syntax generation fails (#879)

* fix: catch invalid complex structure errors and show useful message

Also replaced deprecated Tabs components in DocMultiCall with Tabs2

packages/run-it/src/components/DocSdkCalls/DocMultiCall.tsx

@@ -25,39 +25,23 @@
  */
 import type { FC } from 'react'
 import React from 'react'
-import { Tab, TabList, TabPanel, TabPanels, useTabs } from '@looker/components'
-
+import { Tabs2, Tab2 } from '@looker/components'
 import { CodeCopy } from '@looker/code-editor'
-import { getGenerators } from './callUtils'
-import type { DocSdkCallsProps } from './DocSdkCalls'
+
+interface DocMultiCallProps {
+  /** An object with keys representing the language and values for call syntax */
+  calls: Record<string, string>
+}
 
 /**
  * Generates the SDK call syntax for all supported languages
  */
-export const DocMultiCall: FC<Omit<DocSdkCallsProps, 'sdkLanguage'>> = ({
-  api,
-  inputs,
-  method,
-}) => {
-  const tabs = useTabs()
-  const generators = getGenerators(api)
-  return (
-    <>
-      <TabList {...tabs}>
-        {Object.keys(generators).map((language) => (
-          <Tab key={language}>{language}</Tab>
-        ))}
-      </TabList>
-      <TabPanels {...tabs} pt="0">
-        {Object.entries(generators).map(([language, gen]) => {
-          const code = gen.makeTheCall(method, inputs)
-          return (
-            <TabPanel key={language}>
-              <CodeCopy code={code} language={language} />
-            </TabPanel>
-          )
-        })}
-      </TabPanels>
-    </>
-  )
-}
+export const DocMultiCall: FC<DocMultiCallProps> = ({ calls }) => (
+  <Tabs2>
+    {Object.entries(calls).map(([language, callSyntax]) => (
+      <Tab2 label={language} key={language}>
+        <CodeCopy code={callSyntax} language={language} />
+      </Tab2>
+    ))}
+  </Tabs2>
+)

packages/run-it/src/components/DocSdkCalls/DocSdkCalls.spec.tsx

@@ -40,15 +40,7 @@ describe('DocSdkCalls', () => {
       <DocSdkCalls
         api={api}
         method={api.methods.user}
-        inputs={[
-          {
-            name: 'user_id',
-            location: 'path',
-            type: 'string',
-            required: true,
-            description: 'A unique identifier for a user',
-          },
-        ]}
+        inputs={{ user_id: 1 }}
         sdkLanguage="All"
       />
     )
@@ -69,15 +61,7 @@ describe('DocSdkCalls', () => {
         <DocSdkCalls
           api={api}
           method={api.methods.user}
-          inputs={[
-            {
-              name: 'user_id',
-              location: 'path',
-              type: 'string',
-              required: true,
-              description: 'A unique identifier for a user',
-            },
-          ]}
+          inputs={{ user_id: 1 }}
           sdkLanguage={sdkLanguage}
         />
       )
@@ -87,4 +71,22 @@ describe('DocSdkCalls', () => {
       ).toBeInTheDocument()
     }
   )
+
+  test('shows useful message when it errors while parsing complex structures', () => {
+    renderWithTheme(
+      <DocSdkCalls
+        api={api}
+        method={api.methods.run_inline_query}
+        inputs={{
+          body: '{\n  "k1": "v1",\n',
+        }}
+        sdkLanguage="All"
+      />
+    )
+    expect(
+      screen.getByText(
+        'Cannot generate SDK call syntax. Ensure all complex structures in the request form are valid.'
+      )
+    ).toBeInTheDocument()
+  })
 })

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

@@ -27,12 +27,14 @@
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import type { ApiModel, IMethod } from '@looker/sdk-codegen'
-import { trimInputs } from '@looker/sdk-codegen'
+import { getCodeGenerator, trimInputs } from '@looker/sdk-codegen'
 import { Heading } from '@looker/components'
+import { CodeCopy } from '@looker/code-editor'
 
 import type { RunItValues } from '../../RunIt'
-import { DocSingleCall } from './DocSingleCall'
+import { DarkSpan } from '../common'
 import { DocMultiCall } from './DocMultiCall'
+import { getGenerators } from './callUtils'
 
 export interface DocSdkCallsProps {
   /** API spec */
@@ -64,20 +66,36 @@ export const DocSdkCalls: FC<DocSdkCallsProps> = ({
         : `${sdkLanguage} SDK call syntax`
     setHeading(text)
   }, [sdkLanguage])
+
+  const calls = {}
+  try {
+    if (sdkLanguage === 'All') {
+      const generators = getGenerators(api)
+      Object.entries(generators).forEach(([language, gen]) => {
+        calls[language] = gen.makeTheCall(method, trimmedInputs)
+      })
+    } else {
+      const gen = getCodeGenerator(sdkLanguage, api)
+      calls[sdkLanguage] = gen!.makeTheCall(method, trimmedInputs)
+    }
+  } catch {
+    return (
+      <DarkSpan>
+        Cannot generate SDK call syntax. Ensure all complex structures in the
+        request form are valid.
+      </DarkSpan>
+    )
+  }
+
   return (
     <>
       <Heading as="h4" mb="medium">
         {heading}
       </Heading>
       {sdkLanguage === 'All' ? (
-        <DocMultiCall api={api} inputs={trimmedInputs} method={method} />
+        <DocMultiCall calls={calls} />
       ) : (
-        <DocSingleCall
-          api={api}
-          method={method}
-          inputs={trimmedInputs}
-          sdkLanguage={sdkLanguage}
-        />
+        <CodeCopy code={calls[sdkLanguage]} language={sdkLanguage} />
       )}
     </>
   )