@tinacms/app 1.2.26 → 1.2.28

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @tinacms/app
 
+## 1.2.28
+
+### Patch Changes
+
+- 841456237: Fix issue where an error would occur if the folder button was clicked in the playground
+- Updated dependencies [5040fc7cb]
+- Updated dependencies [177002715]
+- Updated dependencies [e69a3ef81]
+- Updated dependencies [c925786ef]
+- Updated dependencies [9f01550dd]
+  - @tinacms/mdx@1.3.19
+  - tinacms@1.5.21
+
+## 1.2.27
+
+### Patch Changes
+
+- 7e4de0b2a: Improvements to error handling with auth
+- 1144af060: Improve error messaging when onPut / onDelete hooks throw errors
+- Updated dependencies [7e4de0b2a]
+- Updated dependencies [1144af060]
+  - tinacms@1.5.20
+  - @tinacms/mdx@1.3.18
+
 ## 1.2.26
 
 ### Patch Changes

package/LICENSE

@@ -1,12 +1,4 @@
-Copyright (c) 2023-present Forestry.io Holdings Inc. 
-
-Portions of the TinaCMS software are licensed as follows:
-
-* All software that resides under the "packages/@tinacms/datalayer/" and the "packages/@tinacms/graphql/" directories (the "Tina Data Layer"), is licensed under the license defined in "packages/@tinacms/datalayer/LICENSE".
-
-* All software outside of the above-mentioned directories is available under the "Apache 2.0" license as set forth below.
-
-Apache License
+                                Apache License
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "1.2.26",
+  "version": "1.2.28",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
@@ -14,7 +14,7 @@
     "@headlessui/react": "1.6.6",
     "@heroicons/react": "1.0.6",
     "@monaco-editor/react": "4.4.5",
-    "@tinacms/mdx": "1.3.17",
+    "@tinacms/mdx": "1.3.19",
     "@xstate/react": "3.0.0",
     "final-form": "4.20.7",
     "graphiql": "3.0.0-alpha.1",
@@ -25,7 +25,7 @@
     "react-dom": "17.0.2",
     "react-router-dom": "6.3.0",
     "tailwindcss": "^3.2.7",
-    "tinacms": "1.5.19",
+    "tinacms": "1.5.21",
     "typescript": "^4.6.4",
     "zod": "^3.14.3"
   }

package/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react'
+import React, { Suspense, useEffect } from 'react'
 import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms'
 import { TinaEditProvider, useEditState } from 'tinacms/dist/edit-state'
 import { Preview } from './preview'
@@ -78,7 +78,9 @@ export const TinaAdminWrapper = () => {
 
 const GoToEdit = () => {
   const { setEdit } = useEditState()
-  setEdit(true)
+  useEffect(() => {
+    setEdit(true)
+  }, [])
   return <div>Going into edit mode</div>
 }
 

package/src/Playground.tsx

@@ -89,7 +89,8 @@ const Playground = () => {
                 let relativePath = ''
                 if (collection) {
                   relativePath =
-                    collection.documents.edges[0].node._sys.relativePath
+                    collection?.documents?.edges[0]?.node?._sys.relativePath ||
+                    ''
                   variables = JSON.stringify({ relativePath }, null, 2)
                 }
                 return (

package/src/lib/errors.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { TinaCMS } from 'tinacms'
+
+const ErrorModalContent = (props: { title: string; errors: string[] }) => {
+  const { title, errors } = props
+  return (
+    <>
+      <div>{title}</div>
+      <ul>
+        {errors.map((error, i) => (
+          <li key={i}>{error}</li>
+        ))}
+      </ul>
+    </>
+  )
+}
+
+export const showErrorModal = (
+  title: string,
+  errors: string[],
+  cms: TinaCMS
+) => {
+  cms.alerts.error(() => <ErrorModalContent title={title} errors={errors} />)
+}

package/src/lib/graphql-reducer.ts

@@ -19,6 +19,7 @@ import {
   FormOptions,
   GlobalFormPlugin,
   TinaState,
+  ErrorDialog,
 } from 'tinacms'
 import { createForm, createGlobalForm, FormifyCallback } from './build-form'
 import type {
@@ -29,6 +30,7 @@ import type {
 } from './types'
 import { getFormAndFieldNameFromMetadata } from './util'
 import { useSearchParams } from 'react-router-dom'
+import { showErrorModal } from './errors'
 
 const sysSchema = z.object({
   breadcrumbs: z.array(z.string()),
@@ -152,6 +154,14 @@ const astNodeWithMeta: G.DocumentNode = {
 const schema = G.buildASTSchema(astNode)
 const schemaForResolver = G.buildASTSchema(astNodeWithMeta)
 
+const isRejected = (
+  input: PromiseSettledResult<unknown>
+): input is PromiseRejectedResult => input.status === 'rejected'
+
+const isFulfilled = <T>(
+  input: PromiseSettledResult<T>
+): input is PromiseFulfilledResult<T> => input.status === 'fulfilled'
+
 export const useGraphQLReducer = (
   iframe: React.MutableRefObject<HTMLIFrameElement>,
   url: string
@@ -159,6 +169,7 @@ export const useGraphQLReducer = (
   const cms = useCMS()
   const tinaSchema = cms.api.tina.schema as TinaSchema
   const [payloads, setPayloads] = React.useState<Payload[]>([])
+  const [requestErrors, setRequestErrors] = React.useState<string[]>([])
   const [searchParams, setSearchParams] = useSearchParams()
   const [results, setResults] = React.useState<
     {
@@ -204,7 +215,9 @@ export const useGraphQLReducer = (
    */
   React.useEffect(() => {
     const run = async () => {
-      return Promise.all(
+      setRequestErrors([])
+      // gather the errors and display an error message containing each error unique message
+      return Promise.allSettled(
         payloads.map(async (payload) => {
           // This payload has already been expanded, skip it.
           if (payload.expandedQuery) {
@@ -219,7 +232,10 @@ export const useGraphQLReducer = (
     }
     if (payloads.length) {
       run().then((updatedPayloads) => {
-        setPayloads(updatedPayloads)
+        setPayloads(updatedPayloads.filter(isFulfilled).map((p) => p.value))
+        setRequestErrors(
+          updatedPayloads.filter(isRejected).map((p) => String(p.reason))
+        )
       })
     }
   }, [JSON.stringify(payloads), cms])
@@ -575,6 +591,12 @@ export const useGraphQLReducer = (
       cms.dispatch({ type: 'set-edit-mode', value: 'basic' })
     }
   }, [iframe.current, JSON.stringify(results)])
+
+  React.useEffect(() => {
+    if (requestErrors.length) {
+      showErrorModal('Unexpected error querying content', requestErrors, cms)
+    }
+  }, [requestErrors])
 }
 
 const onSubmit = async (
@@ -602,7 +624,13 @@ const onSubmit = async (
     })
     cms.alerts.success('Document saved!')
   } catch (e) {
-    cms.alerts.error('There was a problem saving your document')
+    cms.alerts.error(() =>
+      ErrorDialog({
+        title: 'There was a problem saving your document',
+        message: 'Tina caught an error while updating the page',
+        error: e,
+      })
+    )
     console.error(e)
   }
 }
@@ -834,12 +862,15 @@ _internalSys: _sys {
   return response.node
 }
 
-const expandPayload = async (payload: Payload, cms: TinaCMS) => {
+const expandPayload = async (
+  payload: Payload,
+  cms: TinaCMS
+): Promise<Payload> => {
   const { query, variables } = payload
   const documentNode = G.parse(query)
   const expandedDocumentNode = expandQuery({ schema, documentNode })
   const expandedQuery = G.print(expandedDocumentNode)
-  const expandedData = await cms.api.tina.request(expandedQuery, {
+  const expandedData = await cms.api.tina.request<object>(expandedQuery, {
     variables,
   })