feat: show original spec in API Explorer

packages/api-explorer/src/components/Collapser/CollapserCard.tsx

@@ -29,13 +29,18 @@ import {
   Accordion,
   AccordionDisclosure,
   AccordionContent,
+  Divider,
+  Box,
 } from '@looker/components'
+import { ArrowRight } from '@styled-icons/material/ArrowRight'
+import { ArrowDropDown } from '@styled-icons/material/ArrowDropDown'
 import { ApixHeading } from '../common'
 
 interface CollapserCardProps {
   id?: string
   heading: string
   children: ReactElement
+  defaultOpen?: boolean
 }
 
 /**
@@ -45,20 +50,27 @@ export const CollapserCard: FC<CollapserCardProps> = ({
   id,
   heading,
   children,
+  defaultOpen = true,
 }) => {
-  const { value, toggle } = useToggle(true)
+  const { value, toggle } = useToggle(defaultOpen)
 
   return (
-    <Accordion
-      id={id}
-      indicatorPosition="left"
-      isOpen={value}
-      toggleOpen={toggle}
-    >
-      <AccordionDisclosure>
-        <ApixHeading as="h2">{heading}</ApixHeading>
-      </AccordionDisclosure>
-      <AccordionContent>{children}</AccordionContent>
-    </Accordion>
+    <>
+      <Divider appearance="light" />
+      <Accordion
+        id={id}
+        indicatorPosition="left"
+        isOpen={value}
+        toggleOpen={toggle}
+        indicatorIcons={{ close: <ArrowRight />, open: <ArrowDropDown /> }}
+      >
+        <AccordionDisclosure>
+          <ApixHeading as="h3">{heading}</ApixHeading>
+        </AccordionDisclosure>
+        <AccordionContent>
+          <Box pb="xlarge">{children}</Box>
+        </AccordionContent>
+      </Accordion>
+    </>
   )
 }

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

@@ -25,7 +25,6 @@
  */
 
 import React, { FC, useContext } from 'react'
-import { Box } from '@looker/components'
 import { ApiModel, IMethod, IType } from '@looker/sdk-codegen'
 
 import { SearchContext } from '../../context'
@@ -62,32 +61,30 @@ export const DocReferences: FC<DocReferencesProps> = ({
     return <></>
 
   return (
-    <Box id="references" mb="xlarge">
-      <CollapserCard heading="References">
-        <>
-          {DocReferenceItems(
-            'Referenced Types:',
-            typesUsed,
-            api,
-            specKey,
-            pattern
-          )}
-          {DocReferenceItems(
-            'Used by types:',
-            typesUsedBy,
-            api,
-            specKey,
-            pattern
-          )}
-          {DocReferenceItems(
-            'Used by methods:',
-            methodsUsedBy,
-            api,
-            specKey,
-            pattern
-          )}
-        </>
-      </CollapserCard>
-    </Box>
+    <CollapserCard heading="References" id="references">
+      <>
+        {DocReferenceItems(
+          'Referenced Types:',
+          typesUsed,
+          api,
+          specKey,
+          pattern
+        )}
+        {DocReferenceItems(
+          'Used by types:',
+          typesUsedBy,
+          api,
+          specKey,
+          pattern
+        )}
+        {DocReferenceItems(
+          'Used by methods:',
+          methodsUsedBy,
+          api,
+          specKey,
+          pattern
+        )}
+      </>
+    </CollapserCard>
   )
 }

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

@@ -25,14 +25,7 @@
  */
 
 import React, { FC } from 'react'
-import {
-  Box,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  useTabs,
-} from '@looker/components'
+import { Tab, TabList, TabPanel, TabPanels, useTabs } from '@looker/components'
 import { IMethodResponse } from '@looker/sdk-codegen'
 
 import { CollapserCard } from '../Collapser'
@@ -54,23 +47,21 @@ export const DocResponses: FC<DocResponsesProps> = ({ responses }) => {
   const responseTree = buildResponseTree(responses)
 
   return (
-    <Box mb="xlarge">
-      <CollapserCard heading="Response Models">
-        <>
-          <TabList {...tabs}>
-            {Object.keys(responseTree).map((statusCode, index) => (
-              <Tab key={index}>{statusCode}</Tab>
-            ))}
-          </TabList>
-          <TabPanels {...tabs} pt="0">
-            {Object.values(responseTree).map((responses, index) => (
-              <TabPanel key={index}>
-                <DocResponseTypes responses={responses} />
-              </TabPanel>
-            ))}
-          </TabPanels>
-        </>
-      </CollapserCard>
-    </Box>
+    <CollapserCard heading="Response Models" id="response models">
+      <>
+        <TabList {...tabs}>
+          {Object.keys(responseTree).map((statusCode, index) => (
+            <Tab key={index}>{statusCode}</Tab>
+          ))}
+        </TabList>
+        <TabPanels {...tabs} pt="0">
+          {Object.values(responseTree).map((responses, index) => (
+            <TabPanel key={index}>
+              <DocResponseTypes responses={responses} />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </>
+    </CollapserCard>
   )
 }

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

@@ -35,7 +35,6 @@ import {
   Method,
 } from '@looker/sdk-codegen'
 import { getGenerators } from '@looker/run-it'
-import { Box } from '@looker/components'
 
 import { DocCode } from '../DocCode'
 import { getSelectedSdkLanguage } from '../../state'
@@ -98,17 +97,15 @@ export const DocSDKs: FC<LanguageSDKProps> = ({ api, method, type }) => {
   }, [sdkLanguage, item])
 
   return (
-    <Box mb="xlarge">
-      <CollapserCard heading={header}>
-        {Object.keys(declarations).length > 1 ? (
-          <DocDeclarations declarations={declarations} />
-        ) : (
-          <DocCode
-            language={Object.keys(declarations)[0]}
-            code={Object.values(declarations)[0]}
-          />
-        )}
-      </CollapserCard>
-    </Box>
+    <CollapserCard heading={header} id="sdk declarations">
+      {Object.keys(declarations).length > 1 ? (
+        <DocDeclarations declarations={declarations} />
+      ) : (
+        <DocCode
+          language={Object.keys(declarations)[0]}
+          code={Object.values(declarations)[0]}
+        />
+      )}
+    </CollapserCard>
   )
 }

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

@@ -0,0 +1,54 @@
+/*
+
+ 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, { FC } from 'react'
+
+import { CodeDisplay } from '@looker/code-editor'
+import { CollapserCard } from '../Collapser'
+
+interface DocSchemaProps {
+  object: any
+}
+
+/**
+ * It renders links to the given types and/or methods references
+ */
+export const DocSchema: FC<DocSchemaProps> = ({ object }) => {
+  if (!object) return <></>
+  const json = JSON.stringify(object, null, 2)
+
+  return (
+    <CollapserCard
+      heading="Original Schema"
+      defaultOpen={false}
+      id="original schema"
+    >
+      <>
+        <CodeDisplay language="json" code={json} />
+      </>
+    </CollapserCard>
+  )
+}

packages/api-explorer/src/components/DocSchema/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 { DocSchema } from './DocSchema'

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

@@ -41,3 +41,4 @@ export { Header } from './Header'
 export { SideNav } from './SideNav'
 export { ExploreType, ExploreProperty } from './ExploreType'
 export { CollapserCard } from './Collapser'
+export { DocSchema } from './DocSchema'

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

@@ -165,7 +165,7 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   return (
     <ApixSection>
       <Box>
-        <Flex bg="AliceBlue" padding="large" mb="xlarge" alignItems="center">
+        <Flex bg="AliceBlue" padding="large" mb="large" alignItems="center">
           <FlexItem>
             <Label htmlFor="base">Base</Label>
             <Select

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

@@ -52,6 +52,7 @@ import {
   DocSource,
   DocStatus,
   DocTitle,
+  DocSchema,
 } from '../../components'
 import { getSelectedSdkLanguage } from '../../state'
 import { DocOperation, DocRequestBody } from './components'
@@ -101,7 +102,7 @@ export const MethodScene: FC<DocMethodProps> = ({ api }) => {
           </Space>
           {runItToggle}
         </Space>
-        <Space mb="xlarge" gap="small">
+        <Space mb="large" gap="small">
           <DocStatus method={method} />
           <DocActivityType method={method} />
           <DocRateLimited method={method} />
@@ -113,6 +114,7 @@ export const MethodScene: FC<DocMethodProps> = ({ api }) => {
         <DocSdkUsage method={method} />
         <DocReferences typesUsed={seeTypes} api={api} specKey={specKey} />
         <DocResponses responses={method.responses} />
+        <DocSchema object={method.schema} />
       </ApixSection>
       {sdk && value && (
         <Aside width="50rem">

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

@@ -35,7 +35,7 @@ interface DocOperationProps {
 }
 
 export const DocOperation: FC<DocOperationProps> = ({ method }) => (
-  <SpaceVertical align="start" mb="xlarge" gap="xsmall">
+  <SpaceVertical align="start" mb="large" gap="xsmall">
     <MethodBadge type={method.httpMethod}>
       <DocPseudo method={method} />
     </MethodBadge>

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

@@ -27,7 +27,7 @@
 import React, { FC } from 'react'
 import { typeRefs, methodRefs, ApiModel } from '@looker/sdk-codegen'
 import { useParams } from 'react-router-dom'
-import { Space } from '@looker/components'
+import { Space, Box } from '@looker/components'
 
 import {
   ApixSection,
@@ -36,6 +36,7 @@ import {
   DocSource,
   DocTitle,
   ExploreType,
+  DocSchema,
 } from '../../components'
 
 interface DocTypeProps {
@@ -60,7 +61,9 @@ export const TypeScene: FC<DocTypeProps> = ({ api }) => {
         <DocTitle>{type.name}</DocTitle>
         <DocSource type={type} />
       </Space>
-      <ExploreType type={type} />
+      <Box pb="xlarge">
+        <ExploreType type={type} />
+      </Box>
       <DocReferences
         typesUsed={typesUsed}
         typesUsedBy={typesUsedBy}
@@ -69,6 +72,7 @@ export const TypeScene: FC<DocTypeProps> = ({ api }) => {
         specKey={specKey}
       />
       <DocSDKs type={type} api={api} />
+      <DocSchema object={type.schema} />
     </ApixSection>
   )
 }

packages/run-it/src/components/DocSdkCalls/callUtils.ts

@@ -25,9 +25,9 @@
  */
 import {
   ApiModel,
-  KeyedCollection,
   CodeGen,
   codeGenerators,
+  KeyedCollection,
 } from '@looker/sdk-codegen'
 
 /**