@tinacms/app 1.2.12 → 1.2.13

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tinacms/app
 
+## 1.2.13
+
+### Patch Changes
+
+- 7f95c1ce5: Reorganize the way fields are presented on the form to allow for deep-linking
+- Updated dependencies [5a6018916]
+- Updated dependencies [63dd98904]
+- Updated dependencies [b3d98d159]
+- Updated dependencies [7f95c1ce5]
+  - tinacms@1.5.6
+  - @tinacms/toolkit@1.7.2
+
 ## 1.2.12
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
@@ -14,7 +14,7 @@
     "@heroicons/react": "1.0.6",
     "@monaco-editor/react": "4.4.5",
     "@tinacms/mdx": "1.3.10",
-    "@tinacms/toolkit": "1.7.1",
+    "@tinacms/toolkit": "1.7.2",
     "@xstate/react": "3.0.0",
     "final-form": "4.20.7",
     "graphiql": "^2.4.0",
@@ -27,7 +27,7 @@
     "react-is": "17.0.2",
     "react-router-dom": "6.3.0",
     "tailwindcss": "^3.2.7",
-    "tinacms": "1.5.5",
+    "tinacms": "1.5.6",
     "typescript": "^4.6.4",
     "zod": "^3.14.3"
   }

package/src/App.tsx

@@ -47,11 +47,6 @@ const SetPreview = () => {
         ''
       )}`
     )
-    // Override original 'rich-text' field with one that has raw mode support
-    cms.fields.add({
-      ...MdxFieldPluginExtendible,
-      Component: Editor,
-    })
   }, [])
   return null
 }

package/src/fields/rich-text/monaco/index.tsx

@@ -160,7 +160,7 @@ export const RawEditor = (props: RichTextType) => {
 
   return (
     <div className="relative">
-      <div className="sticky -top-4 w-full flex justify-between mb-2 z-50 max-w-full">
+      <div className="sticky top-1 w-full flex justify-between mb-2 z-50 max-w-full">
         <Button onClick={() => props.setRawMode(false)}>
           View in rich-text editor
         </Button>

package/src/lib/expand-query.ts

@@ -67,6 +67,13 @@ const addTypenameToDocument = (doc: G.DocumentNode) => {
   })
 }
 
+const CONTENT_SOURCE_FIELD: G.FieldNode = {
+  kind: G.Kind.FIELD,
+  name: {
+    kind: G.Kind.NAME,
+    value: '_content_source',
+  },
+}
 const METADATA_FIELD: G.FieldNode = {
   kind: G.Kind.FIELD,
   name: {
@@ -94,7 +101,11 @@ const addMetadataField = (
         selections: [],
       }),
       selections:
-        [...(node.selectionSet?.selections || []), METADATA_FIELD] || [],
+        [
+          ...(node.selectionSet?.selections || []),
+          METADATA_FIELD,
+          CONTENT_SOURCE_FIELD,
+        ] || [],
     },
   }
 }
@@ -229,3 +240,29 @@ export const isNodeType = (type: G.GraphQLOutputType) => {
     }
   }
 }
+
+export const isConnectionType = (type: G.GraphQLOutputType) => {
+  const namedType = G.getNamedType(type)
+  if (G.isInterfaceType(namedType)) {
+    if (namedType.name === 'Connection') {
+      return true
+    }
+  }
+  if (G.isUnionType(namedType)) {
+    const types = namedType.getTypes()
+    if (
+      types.every((type) => {
+        return type.getInterfaces().some((intfc) => intfc.name === 'Connection')
+      })
+    ) {
+      return true
+    }
+  }
+  if (G.isObjectType(namedType)) {
+    if (
+      namedType.getInterfaces().some((intfc) => intfc.name === 'Connection')
+    ) {
+      return true
+    }
+  }
+}

package/src/lib/graphql-reducer.ts

@@ -1,10 +1,10 @@
 import React from 'react'
 import * as G from 'graphql'
 import { getIn } from 'final-form'
-import { z, ZodError } from 'zod'
+import { z } from 'zod'
 // @ts-expect-error
 import schemaJson from 'SCHEMA_IMPORT'
-import { expandQuery, isNodeType } from './expand-query'
+import { expandQuery, isConnectionType, isNodeType } from './expand-query'
 import {
   Form,
   TinaCMS,
@@ -18,15 +18,17 @@ import {
   Client,
   FormOptions,
   GlobalFormPlugin,
+  TinaState,
 } from 'tinacms'
 import { createForm, createGlobalForm, FormifyCallback } from './build-form'
 import type {
   PostMessage,
   Payload,
   SystemInfo,
-  Document,
   ResolvedDocument,
 } from './types'
+import { getFormAndFieldNameFromMetadata } from './util'
+import { useSearchParams } from 'react-router-dom'
 
 const sysSchema = z.object({
   breadcrumbs: z.array(z.string()),
@@ -56,6 +58,50 @@ const astNode = schemaJson as G.DocumentNode
 const astNodeWithMeta: G.DocumentNode = {
   ...astNode,
   definitions: astNode.definitions.map((def) => {
+    if (def.kind === 'InterfaceTypeDefinition') {
+      return {
+        ...def,
+        fields: [
+          ...(def.fields || []),
+          {
+            kind: 'FieldDefinition',
+            name: {
+              kind: 'Name',
+              value: '_tina_metadata',
+            },
+            arguments: [],
+            type: {
+              kind: 'NonNullType',
+              type: {
+                kind: 'NamedType',
+                name: {
+                  kind: 'Name',
+                  value: 'JSON',
+                },
+              },
+            },
+          },
+          {
+            kind: 'FieldDefinition',
+            name: {
+              kind: 'Name',
+              value: '_content_source',
+            },
+            arguments: [],
+            type: {
+              kind: 'NonNullType',
+              type: {
+                kind: 'NamedType',
+                name: {
+                  kind: 'Name',
+                  value: 'JSON',
+                },
+              },
+            },
+          },
+        ],
+      }
+    }
     if (def.kind === 'ObjectTypeDefinition') {
       return {
         ...def,
@@ -79,6 +125,24 @@ const astNodeWithMeta: G.DocumentNode = {
               },
             },
           },
+          {
+            kind: 'FieldDefinition',
+            name: {
+              kind: 'Name',
+              value: '_content_source',
+            },
+            arguments: [],
+            type: {
+              kind: 'NonNullType',
+              type: {
+                kind: 'NamedType',
+                name: {
+                  kind: 'Name',
+                  value: 'JSON',
+                },
+              },
+            },
+          },
         ],
       }
     }
@@ -95,6 +159,18 @@ export const useGraphQLReducer = (
   const cms = useCMS()
   const tinaSchema = cms.api.tina.schema as TinaSchema
   const [payloads, setPayloads] = React.useState<Payload[]>([])
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [results, setResults] = React.useState<
+    {
+      id: string
+      data:
+        | {
+            [key: string]: any
+          }
+        | null
+        | undefined
+    }[]
+  >([])
   const [documentsToResolve, setDocumentsToResolve] = React.useState<string[]>(
     []
   )
@@ -144,7 +220,7 @@ export const useGraphQLReducer = (
         setPayloads(updatedPayloads)
       })
     }
-  }, [payloads.map(({ id }) => id).join('.'), cms])
+  }, [JSON.stringify(payloads), cms])
 
   const processPayload = React.useCallback(
     (payload: Payload) => {
@@ -152,6 +228,8 @@ export const useGraphQLReducer = (
       if (!expandedQueryForResolver || !expandedData) {
         throw new Error(`Unable to process payload which has not been expanded`)
       }
+      const formListItems: TinaState['formLists'][number]['items'] = []
+      const formIds: string[] = []
 
       const result = G.graphqlSync({
         schema: schemaForResolver,
@@ -189,6 +267,13 @@ export const useGraphQLReducer = (
           if (fieldName === '_values') {
             return source._internalValues
           }
+          if (info.fieldName === '_content_source') {
+            const pathArray = G.responsePathAsArray(info.path)
+            return {
+              queryId: payload.id,
+              path: pathArray.slice(0, pathArray.length - 1),
+            }
+          }
           if (info.fieldName === '_tina_metadata') {
             if (value) {
               return value
@@ -198,6 +283,27 @@ export const useGraphQLReducer = (
             return {
               id: null,
               fields: [],
+              prefix: '',
+            }
+          }
+          if (isConnectionType(info.returnType)) {
+            const name = G.getNamedType(info.returnType).name
+            const connectionCollection = tinaSchema
+              .getCollections()
+              .find((collection) => {
+                const collectionName = NAMER.referenceConnectionType(
+                  collection.namespace
+                )
+                if (collectionName === name) {
+                  return true
+                }
+                return false
+              })
+            if (connectionCollection) {
+              formListItems.push({
+                type: 'list',
+                label: connectionCollection.label || connectionCollection.name,
+              })
             }
           }
           if (isNodeType(info.returnType)) {
@@ -236,19 +342,37 @@ export const useGraphQLReducer = (
               resolvedDocument = documentSchema.parse(value)
             }
             const id = resolvedDocument._internalSys.path
-            let existingForm = cms.forms.find(id)
-            if (!existingForm) {
-              cms.plugins
-                .getType('screen')
-                .all()
-                .forEach((plugin) => {
-                  // @ts-ignore
-                  if (plugin?.form && plugin.form?.id === id) {
-                    // @ts-ignore
-                    existingForm = plugin.form
-                  }
+            formIds.push(id)
+            const existingForm = cms.state.forms.find(
+              (f) => f.tinaForm.id === id
+            )
+
+            const pathArray = G.responsePathAsArray(info.path)
+            const pathString = pathArray.join('.')
+            const ancestors = formListItems.filter((item) => {
+              if (item.type === 'document') {
+                return pathString.startsWith(item.path)
+              }
+            })
+            const parent = ancestors[ancestors.length - 1]
+            if (parent) {
+              if (parent.type === 'document') {
+                parent.subItems.push({
+                  type: 'document',
+                  path: pathString,
+                  formId: id,
+                  subItems: [],
                 })
+              }
+            } else {
+              formListItems.push({
+                type: 'document',
+                path: pathString,
+                formId: id,
+                subItems: [],
+              })
             }
+
             if (!existingForm) {
               const { form, template } = buildForm({
                 resolvedDocument,
@@ -262,15 +386,25 @@ export const useGraphQLReducer = (
                 },
                 { values: true }
               )
-              return resolveDocument(resolvedDocument, template, form)
+              return resolveDocument(
+                resolvedDocument,
+                template,
+                form,
+                pathString
+              )
             } else {
-              existingForm.addQuery(payload.id)
+              existingForm.tinaForm.addQuery(payload.id)
               const { template } = getTemplateForDocument(
                 resolvedDocument,
                 tinaSchema
               )
-              existingForm.addQuery(payload.id)
-              return resolveDocument(resolvedDocument, template, existingForm)
+              existingForm.tinaForm.addQuery(payload.id)
+              return resolveDocument(
+                resolvedDocument,
+                template,
+                existingForm.tinaForm,
+                pathString
+              )
             }
           }
           return value
@@ -295,56 +429,94 @@ export const useGraphQLReducer = (
           }
         })
       } else {
+        if (result.data) {
+          setResults((results) => [
+            ...results.filter((result) => result.id !== payload.id),
+            { id: payload.id, data: result.data },
+          ])
+        }
+        const activeField = searchParams.get('active-field')
+        if (activeField) {
+          setSearchParams({})
+          const [queryId, eventFieldName] = activeField.split('---')
+          if (queryId === payload.id) {
+            if (result?.data) {
+              cms.dispatch({
+                type: 'forms:set-active-field-name',
+                value: getFormAndFieldNameFromMetadata(
+                  result.data,
+                  eventFieldName
+                ),
+              })
+            }
+            cms.dispatch({
+              type: 'sidebar:set-display-state',
+              value: 'openOrFull',
+            })
+          }
+        }
         iframe.current?.contentWindow?.postMessage({
           type: 'updateData',
           id: payload.id,
           data: result.data,
         })
-
-        // This can be improved, for now we just need something to test with
-        const elements =
-          iframe.current?.contentWindow?.document.querySelectorAll<HTMLElement>(
-            `[data-tinafield]`
-          )
-        if (elements) {
-          for (let i = 0; i < elements.length; i++) {
-            const el = elements[i]
-            el.onclick = () => {
-              const tinafield = el.getAttribute('data-tinafield')
-              cms.events.dispatch({
-                type: 'field:selected',
-                value: tinafield,
-              })
-            }
-          }
-        }
       }
+      cms.dispatch({
+        type: 'form-lists:add',
+        value: {
+          id: payload.id,
+          label: 'Anonymous Query', // TODO: grab the name of the query if it exists
+          items: formListItems,
+          formIds,
+        },
+      })
     },
     [resolvedDocuments.map((doc) => doc._internalSys.path).join('.')]
   )
 
-  const notifyEditMode = React.useCallback(
+  const handleMessage = React.useCallback(
     (event: MessageEvent<PostMessage>) => {
+      if (event?.data?.type === 'quick-edit') {
+        cms.dispatch({
+          type: 'set-quick-editing-supported',
+          value: event.data.value,
+        })
+        iframe.current?.contentWindow?.postMessage({
+          type: 'quickEditEnabled',
+          value: cms.state.sidebarDisplayState === 'open',
+        })
+      }
       if (event?.data?.type === 'isEditMode') {
         iframe?.current?.contentWindow?.postMessage({
           type: 'tina:editMode',
         })
       }
-    },
-    []
-  )
-  const handleOpenClose = React.useCallback(
-    (event: MessageEvent<PostMessage>) => {
+      if (event.data.type === 'field:selected') {
+        const [queryId, eventFieldName] = event.data.fieldName.split('---')
+        const result = results.find((res) => res.id === queryId)
+        if (result?.data) {
+          cms.dispatch({
+            type: 'forms:set-active-field-name',
+            value: getFormAndFieldNameFromMetadata(result.data, eventFieldName),
+          })
+        }
+        cms.dispatch({
+          type: 'sidebar:set-display-state',
+          value: 'openOrFull',
+        })
+      }
       if (event.data.type === 'close') {
         const payloadSchema = z.object({ id: z.string() })
         const { id } = payloadSchema.parse(event.data)
         setPayloads((previous) =>
           previous.filter((payload) => payload.id !== id)
         )
+        setResults((previous) => previous.filter((result) => result.id !== id))
         cms.forms.all().map((form) => {
           form.removeQuery(id)
         })
         cms.removeOrphanedForms()
+        cms.dispatch({ type: 'form-lists:remove', value: id })
       }
       if (event.data.type === 'open') {
         const payloadSchema = z.object({
@@ -360,7 +532,7 @@ export const useGraphQLReducer = (
         ])
       }
     },
-    [cms]
+    [cms, JSON.stringify(results)]
   )
 
   React.useEffect(() => {
@@ -374,22 +546,31 @@ export const useGraphQLReducer = (
   React.useEffect(() => {
     return () => {
       setPayloads([])
+      setResults([])
       cms.removeAllForms()
+      cms.dispatch({ type: 'form-lists:clear' })
     }
   }, [url])
 
   React.useEffect(() => {
+    iframe.current?.contentWindow?.postMessage({
+      type: 'quickEditEnabled',
+      value: cms.state.sidebarDisplayState === 'open',
+    })
+  }, [cms.state.sidebarDisplayState])
+
+  React.useEffect(() => {
+    cms.dispatch({ type: 'set-edit-mode', value: 'visual' })
     if (iframe) {
-      window.addEventListener('message', handleOpenClose)
-      window.addEventListener('message', notifyEditMode)
+      window.addEventListener('message', handleMessage)
     }
 
     return () => {
-      window.removeEventListener('message', handleOpenClose)
-      window.removeEventListener('message', notifyEditMode)
+      window.removeEventListener('message', handleMessage)
       cms.removeAllForms()
+      cms.dispatch({ type: 'set-edit-mode', value: 'basic' })
     }
-  }, [iframe.current])
+  }, [iframe.current, JSON.stringify(results)])
 }
 
 const onSubmit = async (
@@ -427,7 +608,8 @@ type Path = (string | number)[]
 const resolveDocument = (
   doc: ResolvedDocument,
   template: Template<true>,
-  form: Form
+  form: Form,
+  pathToDocument: string
 ): ResolvedDocument => {
   // @ts-ignore AnyField and TinaField don't mix
   const fields = form.fields as TinaField<true>[]
@@ -438,6 +620,7 @@ const resolveDocument = (
     values: form.values,
     path,
     id,
+    pathToDocument,
   })
   const metadataFields: Record<string, string> = {}
   Object.keys(formValues).forEach((key) => {
@@ -450,7 +633,9 @@ const resolveDocument = (
     sys: doc._internalSys,
     values: form.values,
     _tina_metadata: {
+      prefix: pathToDocument,
       id: doc._internalSys.path,
+      name: '',
       fields: metadataFields,
     },
     _internalSys: doc._internalSys,
@@ -464,12 +649,14 @@ const resolveFormValue = <T extends Record<string, unknown>>({
   values,
   path,
   id,
+  pathToDocument,
 }: // tinaSchema,
 {
   fields: TinaField<true>[]
   values: T
   path: Path
   id: string
+  pathToDocument: string
   // tinaSchema: TinaSchema
 }): T & { __typename?: string } => {
   const accum: Record<string, unknown> = {}
@@ -486,6 +673,7 @@ const resolveFormValue = <T extends Record<string, unknown>>({
       value: v,
       path,
       id,
+      pathToDocument,
     })
   })
   return accum as T & { __typename?: string }
@@ -495,11 +683,13 @@ const resolveFieldValue = ({
   value,
   path,
   id,
+  pathToDocument,
 }: {
   field: TinaField<true>
   value: unknown
   path: Path
   id: string
+  pathToDocument: string
 }) => {
   switch (field.type) {
     case 'object': {
@@ -520,13 +710,16 @@ const resolveFieldValue = ({
                 __typename: NAMER.dataTypeName(template.namespace),
                 _tina_metadata: {
                   id,
+                  name: nextPath.join('.'),
                   fields: metadataFields,
+                  prefix: pathToDocument,
                 },
                 ...resolveFormValue({
                   fields: template.fields,
                   values: item,
                   path: nextPath,
                   id,
+                  pathToDocument,
                 }),
               }
             })
@@ -555,13 +748,16 @@ const resolveFieldValue = ({
               __typename: NAMER.dataTypeName(field.namespace),
               _tina_metadata: {
                 id,
+                name: nextPath.join('.'),
                 fields: metadataFields,
+                prefix: pathToDocument,
               },
               ...resolveFormValue({
                 fields: templateFields,
                 values: item,
-                path,
+                path: nextPath,
                 id,
+                pathToDocument,
               }),
             }
           })
@@ -576,13 +772,16 @@ const resolveFieldValue = ({
           __typename: NAMER.dataTypeName(field.namespace),
           _tina_metadata: {
             id,
+            name: nextPath.join('.'),
             fields: metadataFields,
+            prefix: pathToDocument,
           },
           ...resolveFormValue({
             fields: templateFields,
             values: value as any,
-            path,
+            path: nextPath,
             id,
+            pathToDocument,
           }),
         }
       }
@@ -645,7 +844,7 @@ const expandPayload = async (payload: Payload, cms: TinaCMS) => {
     documentNode,
   })
   const expandedQueryForResolver = G.print(expandedDocumentNodeForResolver)
-  return { ...payload, expandQuery, expandedData, expandedQueryForResolver }
+  return { ...payload, expandedQuery, expandedData, expandedQueryForResolver }
 }
 
 /**
@@ -738,12 +937,10 @@ const buildForm = ({
   }
   if (form) {
     if (shouldRegisterForm) {
-      form.subscribe(() => {}, { values: true })
       if (collection.ui?.global) {
         cms.plugins.add(new GlobalFormPlugin(form))
-      } else {
-        cms.forms.add(form)
       }
+      cms.dispatch({ type: 'forms:add', value: form })
     }
   }
   if (!form) {

package/src/lib/types.ts

@@ -1,8 +1,11 @@
-export type PostMessage = {
-  type: 'open' | 'close' | 'isEditMode'
-  id: string
-  data: object
-}
+export type PostMessage =
+  | {
+      type: 'open' | 'close' | 'isEditMode'
+      id: string
+      data: object
+    }
+  | { type: 'field:selected'; fieldName: string }
+  | { type: 'quick-edit'; value: boolean }
 
 export type Payload = {
   id: string

package/src/lib/util.ts

@@ -0,0 +1,129 @@
+const charCodeOfDot = '.'.charCodeAt(0)
+const reEscapeChar = /\\(\\)?/g
+const rePropName = RegExp(
+  // Match anything that isn't a dot or bracket.
+  '[^.[\\]]+' +
+    '|' +
+    // Or match property names within brackets.
+    '\\[(?:' +
+    // Match a non-string expression.
+    '([^"\'][^[]*)' +
+    '|' +
+    // Or match strings (supports escaping characters).
+    '(["\'])((?:(?!\\2)[^\\\\]|\\\\.)*?)\\2' +
+    ')\\]' +
+    '|' +
+    // Or match "" as the space between consecutive dots or empty brackets.
+    '(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))',
+  'g'
+)
+
+/**
+ * Converts `string` to a property path array.
+ *
+ * @private
+ * @param {string} string The string to convert.
+ * @returns {Array} Returns the property path array.
+ */
+const stringToPath = (string: string) => {
+  const result = []
+  if (string.charCodeAt(0) === charCodeOfDot) {
+    result.push('')
+  }
+  string.replace(rePropName, (match, expression, quote, subString) => {
+    let key = match
+    if (quote) {
+      key = subString.replace(reEscapeChar, '$1')
+    } else if (expression) {
+      key = expression.trim()
+    }
+    result.push(key)
+  })
+  return result
+}
+
+const keysCache: { [key: string]: string[] } = {}
+const keysRegex = /[.[\]]+/
+
+const toPath = (key: string): string[] => {
+  if (key === null || key === undefined || !key.length) {
+    return []
+  }
+  if (typeof key !== 'string') {
+    throw new Error('toPath() expects a string')
+  }
+  if (keysCache[key] == null) {
+    /**
+     * The following patch fixes issue 456, introduced since v4.20.3:
+     *
+     * Before v4.20.3, i.e. in v4.20.2, a `key` like 'choices[]' would map to ['choices']
+     * (e.g. an array of choices used where 'choices[]' is name attribute of an input of type checkbox).
+     *
+     * Since v4.20.3, a `key` like 'choices[]' would map to ['choices', ''] which is wrong and breaks
+     * this kind of inputs e.g. in React.
+     *
+     * v4.20.3 introduced an unwanted breaking change, this patch fixes it, see the issue at the link below.
+     *
+     * @see https://github.com/final-form/final-form/issues/456
+     */
+    if (key.endsWith('[]')) {
+      // v4.20.2 (a `key` like 'choices[]' should map to ['choices'], which is fine).
+      keysCache[key] = key.split(keysRegex).filter(Boolean)
+    } else {
+      // v4.20.3 (a `key` like 'choices[]' maps to ['choices', ''], which breaks applications relying on inputs like `<input type="checkbox" name="choices[]" />`).
+      keysCache[key] = stringToPath(key)
+    }
+  }
+  return keysCache[key]
+}
+export const getDeepestMetadata = (state: Object, complexKey: string): any => {
+  // Intentionally using iteration rather than recursion
+  const path = toPath(complexKey)
+  let current: any = state
+  let metadata: any
+  for (let i = 0; i < path.length; i++) {
+    const key = path[i]
+    if (
+      current === undefined ||
+      current === null ||
+      typeof current !== 'object' ||
+      (Array.isArray(current) && isNaN(Number(key)))
+    ) {
+      return undefined
+    }
+    const value = current[key]
+    if (value?._tina_metadata) {
+      metadata = value._tina_metadata
+    }
+    current = value
+  }
+  return metadata
+}
+export const getFormAndFieldNameFromMetadata = (
+  object: object,
+  eventFieldName: string
+) => {
+  let formId
+  let n
+  const value = getDeepestMetadata(object, eventFieldName)
+  if (value) {
+    if (value.prefix) {
+      const fieldName = eventFieldName.slice(value?.prefix?.length + 1)
+      const localFieldName = value.name
+        ? fieldName.slice(value?.name?.length + 1)
+        : fieldName
+      if (localFieldName) {
+        // If localFieldName is tags.2, just use `tags`
+        if (!isNaN(Number(localFieldName.split('.')[1]))) {
+          n = value.fields[localFieldName.split('.')[0]]
+        } else {
+          n = value.fields[localFieldName]
+        }
+      } else {
+        n = value.name
+      }
+      formId = value.id
+    }
+  }
+  return { formId, fieldName: n }
+}