Fix before submit types (#4133)

* update types for better use of before submit function * update frontent values * add changset
tinacms · Aug 10, 2023 · 133e97d · 133e97d
1 parent ae4bf62
commit 133e97d
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 16 deletions.
diff --git a/.changeset/gentle-doors-cry.md b/.changeset/gentle-doors-cry.md
@@ -0,0 +1,6 @@
+---
+'@tinacms/schema-tools': patch
+'tinacms': patch
+---
+
+Update the before submit types to not pass the finalForm form since it is contained in the TinaForm
diff --git a/packages/@tinacms/schema-tools/src/types/index.ts b/packages/@tinacms/schema-tools/src/types/index.ts
@@ -820,8 +820,7 @@ export interface UICollection<Form = any, CMS = any, TinaForm = any> {
   beforeSubmit?: (arg: {
     values: Record<string, unknown>
     cms: CMS
-    form: Form
-    tinaForm: TinaForm
+    form: TinaForm
   }) => Promise<void | Record<string, unknown>>
 }
 

diff --git a/packages/tinacms/src/auth/TinaCloudProvider.tsx b/packages/tinacms/src/auth/TinaCloudProvider.tsx
@@ -248,12 +248,14 @@ export const TinaCloudProvider = (
     !client.schema?.config?.config?.admin?.auth?.customAuth
 
   const handleListBranches = async (): Promise<Branch[]> => {
-    const { owner, repo } = props
-    const branches = await cms.api.tina.listBranches({ owner, repo })
+    const branches = await cms.api.tina.listBranches({
+      includeIndexStatus: true,
+    })
 
     if (!Array.isArray(branches)) {
       return []
     }
+    // @ts-ignore
     return branches
   }
   const handleCreateBranch = async (data) => {

diff --git a/packages/tinacms/src/hooks/use-content-creator.tsx b/packages/tinacms/src/hooks/use-content-creator.tsx
@@ -5,6 +5,7 @@
 import React from 'react'
 import { useCMS } from '@tinacms/toolkit'
 import { ContentCreatorPlugin, OnNewDocument } from './create-page-plugin'
+import { Template } from '@tinacms/schema-tools'
 
 export type FilterCollections = (
   options: {
@@ -32,7 +33,14 @@ export const useDocumentCreatorPlugin = (args?: DocumentCreatorArgs) => {
       /**
        * Query for Collections and Templates
        */
-      const res = await cms.api.tina.request(
+      const res: {
+        collections: {
+          label?: string
+          slug: string
+          format: string
+          templates: Template[]
+        }[]
+      } = await cms.api.tina.request(
         (gql) => gql`
           {
             collections {
@@ -86,6 +94,7 @@ export const useDocumentCreatorPlugin = (args?: DocumentCreatorArgs) => {
           (c) => c.slug === values.collection
         )
         filteredCollection?.templates?.forEach((template) => {
+          // @ts-ignore
           templateOptions.push({ value: template.name, label: template.label })
         })
       }
@@ -97,6 +106,7 @@ export const useDocumentCreatorPlugin = (args?: DocumentCreatorArgs) => {
         new ContentCreatorPlugin({
           label: 'Add Document',
           onNewDocument: args && args.onNewDocument,
+          // @ts-ignore
           collections: res.collections,
           onChange: async ({ values }) => {
             setValues(values)

diff --git a/packages/tinacms/src/index.ts b/packages/tinacms/src/index.ts
@@ -12,6 +12,7 @@ export { RouteMappingPlugin } from './admin/plugins/route-mapping'
 export { TinaAdminApi } from './admin/api'
 
 export * from './toolkit'
+export { Form } from './toolkit/forms/form'
 export { MdxFieldPluginExtendible } from '@tinacms/toolkit'
 
 import { TinaCMSProvider2, DocumentCreatorCallback } from './tina-cms'

diff --git a/packages/tinacms/src/internalClient/index.ts b/packages/tinacms/src/internalClient/index.ts
@@ -54,6 +54,7 @@ const ListBranchResponse = z
     githubPullRequestUrl: z.string().optional(),
   })
   .array()
+  .nonempty()
 
 const IndexStatusResponse = z.object({
   status: z
@@ -346,7 +347,8 @@ mutation addPendingDocumentMutation(
       variables: props,
     })
 
-    return result
+    // TODO: fix this type
+    return result as any
   }
 
   getSchema = async () => {
@@ -753,7 +755,7 @@ mutation addPendingDocumentMutation(
         method: 'GET',
       })
       const branches = await res.json()
-      const parsedBranches = ListBranchResponse.parse(branches)
+      const parsedBranches = await ListBranchResponse.parseAsync(branches)
       if (args?.includeIndexStatus === false) {
         return parsedBranches
       }

diff --git a/packages/tinacms/src/toolkit/components/media/media-manager.tsx b/packages/tinacms/src/toolkit/components/media/media-manager.tsx
@@ -605,8 +605,8 @@ const SyncStatusContainer = ({ children }) => {
   const cms = useCMS()
   const isLocal = cms.api.tina.isLocalMode
 
-  const tinaMedia = cms.api.tina.schema.schema?.config?.media?.tina || {}
-  const hasTinaMedia = !!(tinaMedia.mediaRoot || tinaMedia.publicFolder)
+  const tinaMedia = cms.api.tina.schema.schema?.config?.media?.tina
+  const hasTinaMedia = !!(tinaMedia?.mediaRoot || tinaMedia?.publicFolder)
 
   const doCheckSyncStatus = hasTinaMedia && !isLocal
   const [syncStatus, setSyncStatus] = useState<

diff --git a/packages/tinacms/src/toolkit/form-builder/form-builder.tsx b/packages/tinacms/src/toolkit/form-builder/form-builder.tsx
@@ -164,8 +164,16 @@ export const FormBuilder: FC<FormBuilderProps> = ({
         const schema: TinaSchema = cms.api.tina.schema
         const collection = schema.getCollectionByFullPath(tinaForm.relativePath)
         const valOverride = collection?.ui?.beforeSubmit
-          ? await collection?.ui?.beforeSubmit({ cms, form, values, tinaForm })
+          ? await collection?.ui?.beforeSubmit({ cms, values, form: tinaForm })
           : false
+
+        // Update the values on the frontend to reflect the changes made in the beforeSubmit hook
+        if (valOverride) {
+          for (const [key, value] of Object.entries(valOverride)) {
+            form.change(key, value)
+          }
+        }
+
         return tinaForm.onSubmit(valOverride || values, form, cb)
       }}
     >
@@ -469,11 +477,9 @@ export const CreateBranchModel = ({
             onClick={async () => {
               setDisabled(true)
               // get the list of branches form tina
-              const branchList: { name: string }[] = await tinaApi.listBranches(
-                {
-                  includeIndexStatus: false,
-                }
-              )
+              const branchList = await tinaApi.listBranches({
+                includeIndexStatus: false,
+              })
               // filter out the branches that are not content branches
               const contentBranches = branchList
                 .filter((x) => x?.name?.startsWith('tina/'))

diff --git a/packages/tinacms/src/toolkit/plugin-branch-switcher/branch-switcher-legacy.tsx b/packages/tinacms/src/toolkit/plugin-branch-switcher/branch-switcher-legacy.tsx
@@ -104,6 +104,7 @@ export const BranchSwitcherLegacy = ({
           })
           cancelFuncs.push(cancelWaitForIndexFunc)
           waitForIndexStatusPromise
+            // @ts-ignore
             .then((indexStatus) => {
               setBranchList((previousBranchList) => {
                 // update the index status of the branch

diff --git a/packages/tinacms/src/toolkit/plugin-branch-switcher/branch-switcher.tsx b/packages/tinacms/src/toolkit/plugin-branch-switcher/branch-switcher.tsx
@@ -127,6 +127,7 @@ export const EditoralBranchSwitcher = ({
           })
           cancelFuncs.push(cancelWaitForIndexFunc)
           waitForIndexStatusPromise
+            // @ts-ignore
             .then((indexStatus) => {
               setBranchList((previousBranchList) => {
                 // update the index status of the branch

diff --git a/packages/tinacms/src/toolkit/plugin-branch-switcher/types.ts b/packages/tinacms/src/toolkit/plugin-branch-switcher/types.ts
@@ -1,6 +1,6 @@
 // TODO: Consolidate these types with the ones from the internal client
 export interface Branch {
-  indexStatus: {
+  indexStatus?: {
     status?: 'unknown' | 'complete' | 'failed' | 'inprogress' | 'timeout'
     timestamp?: number
   }

diff --git a/packages/tinacms/src/toolkit/tina-cms.ts b/packages/tinacms/src/toolkit/tina-cms.ts
@@ -41,6 +41,7 @@ import {
 import { MediaManagerScreenPlugin } from '@toolkit/plugin-screens/media-manager-screen'
 import { createCloudConfig } from '@toolkit/react-cloud-config'
 import { TinaAction, TinaState } from './tina-state'
+import type { Client } from '../internalClient'
 
 const DEFAULT_FIELDS = [
   TextFieldPlugin,
@@ -78,6 +79,8 @@ export class TinaCMS extends CMS {
   _alerts?: Alerts
   state: TinaState
   dispatch: React.Dispatch<TinaAction>
+  // We always attach the tina client to the cms instance
+  api: { [key: string]: any; tina?: Client } = {}
 
   constructor({
     sidebar,