feat: lots of RunIt form cleanup (#814)

Made some changes to the **RunIt** form, both for layout and editing various values
 
## Bug fixes

- enum values are now a string input instead of `{}`. There is an outstanding task to support a dropdown picker for enums that will come with the next significant change for the form editor
- DelimArray values are now a string input instead of `{}`

## Design improvements

- all inputs are on a single line now, saving form space. This is particularly useful for endpoints with many input values

![image](https://user-images.githubusercontent.com/6099714/132744478-cd548230-7dd7-4148-9d6c-55e93b8bfef1.png)

- date time picker is now a pop over with a button to choose the date (but still doesn't have time picking)

![image](https://user-images.githubusercontent.com/6099714/132928125-ca1d30fa-0d52-4265-bc77-e559c9ba09b8.png)


- the default action for the form is now the first button, making it more convenient for tabbing through

![image](https://user-images.githubusercontent.com/6099714/132744727-e40cf9e2-ca85-4844-8c1a-bf576bd9680c.png)

packages/api-explorer/src/scenes/MethodScene/utils.spec.ts

@@ -29,67 +29,102 @@ import { createInputs } from './utils'
 
 describe('MethodScene utils', () => {
   describe('run-it utils', () => {
-    test('createInputs works with various param types', () => {
-      const method = api.methods.run_inline_query
-      const actual = createInputs(api, method)
-      expect(actual).toHaveLength(method.allParams.length)
+    describe('createInputs', () => {
+      test('converts delimarray to string', () => {
+        const method = api.methods.all_users
+        const actual = createInputs(api, method)
+        expect(actual).toHaveLength(method.allParams.length)
+        expect(actual[4]).toEqual({
+          name: 'ids',
+          location: 'query',
+          type: 'string',
+          required: false,
+          description: 'Optional list of ids to get specific users.',
+        })
+      })
 
-      expect(actual).toEqual(
-        expect.arrayContaining([
-          /** Boolean param */
-          {
-            name: 'cache',
-            location: 'query',
-            type: 'boolean',
-            required: false,
-            description: 'Get results from cache if available.',
+      test('converts enums in body to string', () => {
+        const method = api.methods.create_query_task
+        const actual = createInputs(api, method)
+        expect(actual).toHaveLength(method.allParams.length)
+        expect(actual[0]).toEqual({
+          name: 'body',
+          location: 'body',
+          type: {
+            query_id: 0,
+            result_format: '',
+            source: '',
+            deferred: false,
+            look_id: 0,
+            dashboard_id: '',
           },
-          /** Number param */
-          {
-            name: 'limit',
-            location: 'query',
-            type: 'int64',
-            required: false,
-            description: expect.any(String),
-          },
-          /** String param */
-          {
-            name: 'result_format',
-            location: 'path',
-            type: 'string',
-            required: true,
-            description: 'Format of result',
-          },
-          /** Body param */
-          {
-            name: 'body',
-            location: 'body',
-            type: expect.objectContaining({
-              model: '',
-              view: '',
-              fields: [],
-              pivots: [],
-              fill_fields: [],
-              filters: {},
-              filter_expression: '',
-              sorts: [],
-              limit: '',
-              column_limit: '',
-              total: false,
-              row_total: '',
-              subtotals: [],
-              vis_config: {},
-              filter_config: {},
-              visible_ui_sections: '',
-              dynamic_fields: '',
-              client_id: '',
-              query_timezone: '',
-            }),
-            required: true,
-            description: '',
-          },
-        ])
-      )
+          required: true,
+          description: '',
+        })
+      })
+
+      test('works with various param types', () => {
+        const method = api.methods.run_inline_query
+        const actual = createInputs(api, method)
+        expect(actual).toHaveLength(method.allParams.length)
+
+        expect(actual).toEqual(
+          expect.arrayContaining([
+            /** Boolean param */
+            {
+              name: 'cache',
+              location: 'query',
+              type: 'boolean',
+              required: false,
+              description: 'Get results from cache if available.',
+            },
+            /** Number param */
+            {
+              name: 'limit',
+              location: 'query',
+              type: 'int64',
+              required: false,
+              description: expect.any(String),
+            },
+            /** String param */
+            {
+              name: 'result_format',
+              location: 'path',
+              type: 'string',
+              required: true,
+              description: 'Format of result',
+            },
+            /** Body param */
+            {
+              name: 'body',
+              location: 'body',
+              type: expect.objectContaining({
+                model: '',
+                view: '',
+                fields: [],
+                pivots: [],
+                fill_fields: [],
+                filters: {},
+                filter_expression: '',
+                sorts: [],
+                limit: '',
+                column_limit: '',
+                total: false,
+                row_total: '',
+                subtotals: [],
+                vis_config: {},
+                filter_config: {},
+                visible_ui_sections: '',
+                dynamic_fields: '',
+                client_id: '',
+                query_timezone: '',
+              }),
+              required: true,
+              description: '',
+            },
+          ])
+        )
+      })
     })
   })
 })

packages/api-explorer/src/scenes/MethodScene/utils.ts

@@ -32,8 +32,9 @@ import {
   IntrinsicType,
   IType,
   IMethod,
+  EnumType,
 } from '@looker/sdk-codegen'
-import { RunItInput } from '@looker/run-it'
+import { RunItInput, RunItValues } from '@looker/run-it'
 
 /**
  * Return a default value for a given type name
@@ -78,20 +79,22 @@ const createSampleBody = (spec: IApiModel, type: IType) => {
   /* eslint-disable @typescript-eslint/no-use-before-define */
   const getSampleValue = (type: IType) => {
     if (type instanceof IntrinsicType) return getTypeDefault(type.name)
+    if (type instanceof DelimArrayType)
+      return getTypeDefault(type.elementType.name)
+    if (type instanceof EnumType) return ''
     if (type instanceof ArrayType)
       return type.customType
         ? [recurse(spec.types[type.customType])]
         : getTypeDefault(type.name)
     if (type instanceof HashType)
       return type.customType ? recurse(spec.types[type.customType]) : {}
-    if (type instanceof DelimArrayType) return ''
 
     return recurse(type)
   }
   /* eslint-enable @typescript-eslint/no-use-before-define */
 
   const recurse = (type: IType) => {
-    const sampleBody: { [key: string]: any } = {}
+    const sampleBody: RunItValues = {}
     for (const prop of type.writeable) {
       const sampleValue = getSampleValue(prop.type)
       if (sampleValue !== undefined) {
@@ -103,6 +106,18 @@ const createSampleBody = (spec: IApiModel, type: IType) => {
   return recurse(type)
 }
 
+/**
+ * Convert model type to an editable type
+ * @param spec API model for building input editor
+ * @param type to convert
+ */
+const editType = (spec: IApiModel, type: IType) => {
+  if (type instanceof IntrinsicType) return type.name
+  // TODO create a DelimArray editing component as part of the complex type editor
+  if (type instanceof DelimArrayType) return 'string'
+  return createSampleBody(spec, type)
+}
+
 /**
  * Given an SDK method create and return an array of inputs for the run-it form
  * @param spec Api spec
@@ -112,10 +127,7 @@ export const createInputs = (spec: IApiModel, method: IMethod): RunItInput[] =>
   method.allParams.map((param) => ({
     name: param.name,
     location: param.location,
-    type:
-      param.type instanceof IntrinsicType
-        ? param.type.name
-        : createSampleBody(spec, param.type),
+    type: editType(spec, param.type),
     required: param.required,
     description: param.description,
   }))

packages/code-editor/src/CodeDisplay/CodeDisplay.tsx

@@ -39,6 +39,7 @@ require('prismjs/components/prism-kotlin')
 require('prismjs/components/prism-csharp')
 require('prismjs/components/prism-swift')
 require('prismjs/components/prism-ruby')
+require('prismjs/components/prism-markdown')
 
 const Line = styled(Span)`
   display: table-row;

packages/run-it/src/components/RequestForm/FormItem.tsx

@@ -0,0 +1,56 @@
+/*
+
+ 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, ReactElement } from 'react'
+import { Space, Box, Label } from '@looker/components'
+
+interface FormItemProps {
+  /** ID of input item for label */
+  id: string
+  /** Optional label. Defaults to an empty string so spacing is preserved */
+  label?: string
+  /** Nested react elements */
+  children: ReactElement
+}
+
+/**
+ * basic input form layout component
+ * @param id of input item
+ * @param children embedded react elements
+ * @param label optional label
+ */
+export const FormItem: FC<FormItemProps> = ({ id, children, label = ' ' }) => {
+  const key = `space_${id}`
+  return (
+    <Space id={key} key={key}>
+      <Box key={`${key}_box`} width="120px" flexShrink={0}>
+        <Label key={`${key}_label_for`} htmlFor={id}>
+          {label}
+        </Label>
+      </Box>
+      {children}
+    </Space>
+  )
+}

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

@@ -152,6 +152,57 @@ describe('RequestForm', () => {
     })
   })
 
+  /** Return time that matches day picker in calendar */
+  const noon = () => {
+    const now = new Date()
+    return new Date(
+      now.getFullYear(),
+      now.getMonth(),
+      now.getDate(),
+      12,
+      0,
+      0,
+      0
+    )
+  }
+
+  test('interacting with a date picker changes the request content', async () => {
+    const name = 'date_item'
+    renderWithTheme(
+      <RequestForm
+        configurator={defaultConfigurator}
+        setVersionsUrl={runItNoSet}
+        inputs={[
+          {
+            name,
+            location: 'query',
+            required: true,
+            type: 'datetime',
+            description: 'some datetime item description',
+          },
+        ]}
+        handleSubmit={handleSubmit}
+        httpMethod={'POST'}
+        requestContent={requestContent}
+        setRequestContent={setRequestContent}
+        needsAuth={false}
+        hasConfig={true}
+        sdk={mockSdk}
+        handleConfig={runItNoSet}
+      />
+    )
+
+    const button = screen.getByRole('button', { name: 'Choose' })
+    userEvent.click(button)
+    await waitFor(() => {
+      const today = noon()
+      const pickName = today.toDateString()
+      const cell = screen.getByRole('gridcell', { name: pickName })
+      userEvent.click(cell)
+      expect(setRequestContent).toHaveBeenLastCalledWith({ [name]: today })
+    })
+  })
+
   test('interactive with a number simple item changes the request content', async () => {
     const name = 'number_item'
     renderWithTheme(