tinacms 1.2.0 → 1.2.2

package/dist/admin/api.d.ts

@@ -1,6 +1,3 @@
-/**
-
-*/
 import type { TinaCMS } from '@tinacms/toolkit';
 import type { TinaSchema } from '@tinacms/schema-tools';
 import type { Client } from '../internalClient';
@@ -18,6 +15,9 @@ export declare class TinaAdminApi {
     schema: TinaSchema;
     constructor(cms: TinaCMS);
     isAuthenticated(): Promise<boolean>;
+    checkGraphqlSchema({ localSchema }: {
+        localSchema: any;
+    }): Promise<boolean>;
     fetchCollections(): import("@tinacms/schema-tools").TinaCloudCollection<true>[];
     renameDocument({ collection, relativePath, newRelativePath }: {
         collection: any;

package/dist/admin/index.d.ts

@@ -1,8 +1,6 @@
-/**
-
-*/
 /// <reference types="react" />
-export declare const TinaAdmin: ({ preview, config, }: {
+export declare const TinaAdmin: ({ preview, config, schemaJson, }: {
+    schemaJson?: any;
     preview?: (props: object) => JSX.Element;
     config: object;
 }) => JSX.Element;

package/dist/index.es.js

@@ -1,16 +1,18 @@
-import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, Nav, LocalWarning, BillingWarning, Select, Input, ReactDateTimeWithStyles, textFieldClasses, Toggle, OverflowMenu, CursorPaginator, PopupModal, BaseTextField, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { z } from "zod";
+import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, Nav, BranchBanner, LocalWarning, BillingWarning, Select, Input, ReactDateTimeWithStyles, textFieldClasses, Toggle, OverflowMenu, CursorPaginator, PopupModal, BaseTextField, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 export { MdxFieldPluginExtendible } from "@tinacms/toolkit";
 import * as G from "graphql";
-import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType as isScalarType$1, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
+import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType as isScalarType$1, getIntrospectionQuery, buildClientSchema, print, parse, buildSchema } from "graphql";
 import set from "lodash.set";
 import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
 import { getIn, setIn } from "final-form";
 import { resolveForm, TinaSchema, addNamespaceToSchema, parseURL, validateSchema } from "@tinacms/schema-tools";
 export { NAMER, resolveForm } from "@tinacms/schema-tools";
-import gql$1 from "graphql-tag";
 import * as yup from "yup";
+import gql$1 from "graphql-tag";
 import { setEditing, TinaDataContext, EditContext, useEditState } from "@tinacms/sharedctx";
+import { diff } from "@graphql-inspector/core";
 import { NavLink, useSearchParams, useNavigate, useParams, useLocation, Link, HashRouter, Routes, Route } from "react-router-dom";
 import { Transition, Menu } from "@headlessui/react";
 import { useWindowWidth } from "@react-hook/window-size";
@@ -2114,6 +2116,38 @@ const parseRefForBranchName = (ref) => {
   const matches = ref.match(captureBranchName);
   return matches[1];
 };
+const ListBranchResponse = z.object({
+  name: z.string(),
+  protected: z.boolean(),
+  commit: z.object({ sha: z.string(), url: z.string() })
+}).array();
+const IndexStatusResponse = z.object({
+  status: z.union([
+    z.literal("complete"),
+    z.literal("unknown"),
+    z.literal("failed"),
+    z.literal("inprogress")
+  ]).optional(),
+  timestamp: z.number().optional()
+});
+async function asyncPoll(fn, pollInterval = 5 * 1e3, pollTimeout = 30 * 1e3) {
+  const endTime = new Date().getTime() + pollTimeout;
+  const checkCondition = (resolve, reject) => {
+    Promise.resolve(fn()).then((result) => {
+      const now = new Date().getTime();
+      if (result.done) {
+        resolve(result.data);
+      } else if (now < endTime) {
+        setTimeout(checkCondition, pollInterval, resolve, reject);
+      } else {
+        reject(new Error("AsyncPoller: reached timeout"));
+      }
+    }).catch((err) => {
+      reject(err);
+    });
+  };
+  return new Promise(checkCondition);
+}
 class Client {
   constructor({ tokenStorage = "MEMORY", ...options }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
@@ -2431,12 +2465,64 @@ mutation addPendingDocumentMutation(
       return null;
     }
   }
+  async waitForIndexStatus({ ref }) {
+    try {
+      const result = await asyncPoll(async () => {
+        try {
+          const result2 = await this.getIndexStatus({ ref });
+          if (!(result2.status === "inprogress" || result2.status === "unknown")) {
+            return Promise.resolve({
+              done: true,
+              data: result2
+            });
+          } else {
+            return Promise.resolve({
+              done: false
+            });
+          }
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }, 5e3, 9e5);
+      return result;
+    } catch (error) {
+      if (error.message === "AsyncPoller: reached timeout") {
+        console.warn(error);
+        return {
+          status: "timeout"
+        };
+      }
+      throw error;
+    }
+  }
+  async getIndexStatus({ ref }) {
+    const url = `${this.contentApiBase}/db/${this.clientId}/status/${ref}`;
+    const res = await this.fetchWithToken(url);
+    const result = await res.json();
+    const parsedResult = IndexStatusResponse.parse(result);
+    return parsedResult;
+  }
   async listBranches() {
-    const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
-    const res = await this.fetchWithToken(url, {
-      method: "GET"
-    });
-    return res.json();
+    try {
+      const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
+      const res = await this.fetchWithToken(url, {
+        method: "GET"
+      });
+      const branches = await res.json();
+      const parsedBranches = ListBranchResponse.parse(branches);
+      const indexStatusPromises = parsedBranches.map(async (branch) => {
+        const indexStatus2 = await this.getIndexStatus({ ref: branch.name });
+        return {
+          ...branch,
+          indexStatus: indexStatus2
+        };
+      });
+      const indexStatus = await Promise.all(indexStatusPromises);
+      return indexStatus;
+    } catch (error) {
+      console.error("There was an error listing branches.", error);
+      throw error;
+    }
   }
   async createBranch({ baseBranch, branchName }) {
     const url = `${this.contentApiBase}/github/${this.clientId}/create_branch`;
@@ -2538,6 +2624,17 @@ class TinaAdminApi {
   async isAuthenticated() {
     return await this.api.isAuthenticated();
   }
+  async checkGraphqlSchema({ localSchema }) {
+    const schemaFromCloud = await this.api.getSchema();
+    const schema1 = schemaFromCloud;
+    const schema2 = buildSchema(print(localSchema));
+    const diffOutput = await diff(schema1, schema2);
+    if (diffOutput.length > 0) {
+      return false;
+    } else {
+      return true;
+    }
+  }
   fetchCollections() {
     return this.schema.getCollections();
   }
@@ -2867,7 +2964,8 @@ const TinaCloudProvider = (props) => {
     if (branchingEnabled) {
       branchSwitcher = new BranchSwitcherPlugin({
         listBranches: handleListBranches,
-        createBranch: handleCreateBranch
+        createBranch: handleCreateBranch,
+        chooseBranch: setCurrentBranch
       });
       cms.plugins.add(branchSwitcher);
     }
@@ -3546,6 +3644,10 @@ var styles = `.tina-tailwind {
   --tw-border-opacity: 1;
   border-color: rgb(225 221 236 / var(--tw-border-opacity));
 }
+.tina-tailwind .border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 236 243 / var(--tw-border-opacity));
+}
 .tina-tailwind .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -3640,6 +3742,10 @@ var styles = `.tina-tailwind {
   padding-left: 12px;
   padding-right: 12px;
 }
+.tina-tailwind .py-3 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -4876,20 +4982,33 @@ const LogoutPage = () => {
 const PageWrapper = ({
   children
 }) => {
+  var _a, _b;
+  const cms = useCMS();
+  const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
+  const [branchingEnabled, setBranchingEnabled] = React.useState(() => cms.flags.get("branch-switcher"));
+  React.useEffect(() => {
+    cms.events.subscribe("flag:set", ({ key, value }) => {
+      if (key === "branch-switcher") {
+        setBranchingEnabled(value);
+      }
+    });
+  }, [cms.events]);
   return /* @__PURE__ */ React.createElement("div", {
     className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 shadow-2xl overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100"
-  }, children);
+  }, branchingEnabled && !isLocalMode && /* @__PURE__ */ React.createElement(BranchBanner, null), children);
 };
 const PageHeader = ({
   isLocalMode,
   children
-}) => /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", {
-  className: "pt-12 px-12"
-}, /* @__PURE__ */ React.createElement("div", {
-  className: "w-full mx-auto max-w-screen-xl"
-}, /* @__PURE__ */ React.createElement("div", {
-  className: "w-full flex justify-between items-end"
-}, children))));
+}) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", {
+    className: "pt-12 px-12"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "w-full mx-auto max-w-screen-xl"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "w-full flex justify-between items-end"
+  }, children))));
+};
 const PageBody = ({
   children
 }) => /* @__PURE__ */ React.createElement("div", {
@@ -5175,7 +5294,7 @@ const CollectionListPage = () => {
       }
     }, (collection, _loading, reFetchCollection, collectionExtra) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-      const totalCount = collection.documents.totalCount;
+      collection.documents.totalCount;
       const documents = collection.documents.edges;
       const admin = cms.api.admin;
       const pageInfo = collection.documents.pageInfo;
@@ -5284,7 +5403,7 @@ const CollectionListPage = () => {
             setSortOrder(val.order);
           }
         }
-      })), /* @__PURE__ */ React.createElement("div", {
+      })), /* @__PURE__ */ React.createElement("form", {
         className: "flex flex-wrap gap-4 items-end"
       }, /* @__PURE__ */ React.createElement("div", {
         className: "flex flex-shrink-0 flex-col gap-2 items-start"
@@ -5315,6 +5434,9 @@ const CollectionListPage = () => {
               ...old,
               filterField: val
             }));
+            if (!val) {
+              reFetchCollection();
+            }
           }
         }
       })), showStartsWith && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
@@ -5351,7 +5473,7 @@ const CollectionListPage = () => {
         onChange: (e) => {
           setVars((old) => ({
             ...old,
-            after: e.format(),
+            after: typeof e.format === "function" ? e.format() : "",
             booleanEquals: null,
             startsWith: ""
           }));
@@ -5369,7 +5491,7 @@ const CollectionListPage = () => {
         onChange: (e) => {
           setVars((old) => ({
             ...old,
-            before: e.format(),
+            before: typeof e.format === "function" ? e.format() : "",
             booleanEquals: null,
             startsWith: ""
           }));
@@ -5403,7 +5525,8 @@ const CollectionListPage = () => {
           setPrevCursors([]);
           reFetchCollection();
         },
-        variant: "primary"
+        variant: "primary",
+        type: "submit"
       }, "Search", " ", /* @__PURE__ */ React.createElement(BiSearch, {
         className: "w-5 h-full ml-1.5 opacity-70"
       })), (vars.startsWith || vars.after || vars.before || vars.booleanEquals) && /* @__PURE__ */ React.createElement(Button, {
@@ -5433,7 +5556,7 @@ const CollectionListPage = () => {
         templates: collection.templates
       })))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", {
         className: "w-full mx-auto max-w-screen-xl"
-      }, totalCount > 0 && /* @__PURE__ */ React.createElement("table", {
+      }, documents.length > 0 ? /* @__PURE__ */ React.createElement("table", {
         className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
       }, /* @__PURE__ */ React.createElement("tbody", {
         className: "divide-y divide-gray-150"
@@ -5531,7 +5654,7 @@ const CollectionListPage = () => {
             }
           ].filter(Boolean)
         })));
-      }))), /* @__PURE__ */ React.createElement("div", {
+      }))) : /* @__PURE__ */ React.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React.createElement("div", {
         className: "pt-4"
       }, /* @__PURE__ */ React.createElement(CursorPaginator, {
         variant: "white",
@@ -5554,6 +5677,13 @@ const CollectionListPage = () => {
     });
   });
 };
+const NoDocumentsPlaceholder = () => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "text-center px-5 py-3 flex flex-col items-center justify-center shadow border border-gray-100 bg-gray-50 border-b border-gray-200 w-full max-w-full rounded-lg"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "text-base italic font-medium text-gray-300"
+  }, "No documents found."));
+};
 const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
   return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, {
     close: close2
@@ -6019,9 +6149,30 @@ const PreviewInner = ({ preview, config }) => {
     ...config
   });
 };
+const CheckSchema = ({
+  schemaJson,
+  children
+}) => {
+  const cms = useCMS();
+  const api = new TinaAdminApi(cms);
+  const url = api.api.contentApiUrl;
+  useEffect(() => {
+    if (schemaJson && cms) {
+      api.checkGraphqlSchema({
+        localSchema: schemaJson
+      }).then((x) => {
+        if (x === false) {
+          cms.alerts.error("GraphQL Schema Mismatch. Editing may not work. If you just switched branches, try going back to the previous branch");
+        }
+      });
+    }
+  }, [cms, JSON.stringify(schemaJson || {}), url]);
+  return children;
+};
 const TinaAdmin = ({
   preview,
-  config
+  config,
+  schemaJson
 }) => {
   const isSSR2 = typeof window === "undefined";
   const { edit } = useEditState();
@@ -6032,9 +6183,18 @@ const TinaAdmin = ({
     return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(LoginPage, null));
   }
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
+    var _a, _b, _c;
     const isTinaAdminEnabled = cms.flags.get("tina-admin") === false ? false : true;
     if (isTinaAdminEnabled) {
-      return /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement(SetPreviewFlag, {
+      const tinaClient = (_a = cms.api) == null ? void 0 : _a.tina;
+      const collectionWithRouter = (_c = (_b = tinaClient == null ? void 0 : tinaClient.schema) == null ? void 0 : _b.config) == null ? void 0 : _c.collections.find((x) => {
+        var _a2;
+        return typeof ((_a2 = x == null ? void 0 : x.ui) == null ? void 0 : _a2.router) === "function";
+      });
+      const hasRouter = Boolean(collectionWithRouter);
+      return /* @__PURE__ */ React.createElement(CheckSchema, {
+        schemaJson
+      }, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement(SetPreviewFlag, {
         preview,
         cms
       }), /* @__PURE__ */ React.createElement(Routes, null, preview && /* @__PURE__ */ React.createElement(Route, {
@@ -6076,11 +6236,11 @@ const TinaAdmin = ({
       }), /* @__PURE__ */ React.createElement(Route, {
         path: "/",
         element: /* @__PURE__ */ React.createElement(MaybeRedirectToPreview, {
-          redirect: !!preview
+          redirect: !!preview && hasRouter
         }, /* @__PURE__ */ React.createElement(DefaultWrapper, {
           cms
         }, /* @__PURE__ */ React.createElement(DashboardPage, null)))
-      })));
+      }))));
     } else {
       return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
         path: "logout",
@@ -6127,4 +6287,4 @@ const defineStaticConfig = (config) => {
   return config;
 };
 const defineConfig = defineStaticConfig;
-export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, createClient, TinaCMSProvider2 as default, defineConfig, defineLegacyConfig, defineSchema, defineStaticConfig, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };
+export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, asyncPoll, createClient, TinaCMSProvider2 as default, defineConfig, defineLegacyConfig, defineSchema, defineStaticConfig, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("@tinacms/sharedctx"), require("react-router-dom"), require("@headlessui/react"), require("@react-hook/window-size")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "@tinacms/schema-tools", "graphql-tag", "yup", "@tinacms/sharedctx", "react-router-dom", "@headlessui/react", "@react-hook/window-size"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, sharedctx, reactRouterDom, react, windowSize) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("@tinacms/schema-tools"), require("yup"), require("graphql-tag"), require("@tinacms/sharedctx"), require("@graphql-inspector/core"), require("react-router-dom"), require("@headlessui/react"), require("@react-hook/window-size")) : typeof define === "function" && define.amd ? define(["exports", "zod", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "@tinacms/schema-tools", "yup", "graphql-tag", "@tinacms/sharedctx", "@graphql-inspector/core", "react-router-dom", "@headlessui/react", "@react-hook/window-size"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, zod, toolkit, G, set, React, finalForm, schemaTools, yup, gql$1, sharedctx, core, reactRouterDom, react, windowSize) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -28,8 +28,8 @@
   var G__namespace = /* @__PURE__ */ _interopNamespace(G);
   var set__default = /* @__PURE__ */ _interopDefaultLegacy(set);
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
-  var gql__default = /* @__PURE__ */ _interopDefaultLegacy(gql$1);
   var yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
+  var gql__default = /* @__PURE__ */ _interopDefaultLegacy(gql$1);
   function popupWindow(url, title, window2, w, h) {
     const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
     const x = window2.top.outerWidth / 2 + window2.top.screenX - w / 2;
@@ -2130,6 +2130,38 @@
     const matches = ref.match(captureBranchName);
     return matches[1];
   };
+  const ListBranchResponse = zod.z.object({
+    name: zod.z.string(),
+    protected: zod.z.boolean(),
+    commit: zod.z.object({ sha: zod.z.string(), url: zod.z.string() })
+  }).array();
+  const IndexStatusResponse = zod.z.object({
+    status: zod.z.union([
+      zod.z.literal("complete"),
+      zod.z.literal("unknown"),
+      zod.z.literal("failed"),
+      zod.z.literal("inprogress")
+    ]).optional(),
+    timestamp: zod.z.number().optional()
+  });
+  async function asyncPoll(fn, pollInterval = 5 * 1e3, pollTimeout = 30 * 1e3) {
+    const endTime = new Date().getTime() + pollTimeout;
+    const checkCondition = (resolve, reject) => {
+      Promise.resolve(fn()).then((result) => {
+        const now = new Date().getTime();
+        if (result.done) {
+          resolve(result.data);
+        } else if (now < endTime) {
+          setTimeout(checkCondition, pollInterval, resolve, reject);
+        } else {
+          reject(new Error("AsyncPoller: reached timeout"));
+        }
+      }).catch((err) => {
+        reject(err);
+      });
+    };
+    return new Promise(checkCondition);
+  }
   class Client {
     constructor({ tokenStorage = "MEMORY", ...options }) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
@@ -2447,12 +2479,64 @@ mutation addPendingDocumentMutation(
         return null;
       }
     }
+    async waitForIndexStatus({ ref }) {
+      try {
+        const result = await asyncPoll(async () => {
+          try {
+            const result2 = await this.getIndexStatus({ ref });
+            if (!(result2.status === "inprogress" || result2.status === "unknown")) {
+              return Promise.resolve({
+                done: true,
+                data: result2
+              });
+            } else {
+              return Promise.resolve({
+                done: false
+              });
+            }
+          } catch (err) {
+            return Promise.reject(err);
+          }
+        }, 5e3, 9e5);
+        return result;
+      } catch (error) {
+        if (error.message === "AsyncPoller: reached timeout") {
+          console.warn(error);
+          return {
+            status: "timeout"
+          };
+        }
+        throw error;
+      }
+    }
+    async getIndexStatus({ ref }) {
+      const url = `${this.contentApiBase}/db/${this.clientId}/status/${ref}`;
+      const res = await this.fetchWithToken(url);
+      const result = await res.json();
+      const parsedResult = IndexStatusResponse.parse(result);
+      return parsedResult;
+    }
     async listBranches() {
-      const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
-      const res = await this.fetchWithToken(url, {
-        method: "GET"
-      });
-      return res.json();
+      try {
+        const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
+        const res = await this.fetchWithToken(url, {
+          method: "GET"
+        });
+        const branches = await res.json();
+        const parsedBranches = ListBranchResponse.parse(branches);
+        const indexStatusPromises = parsedBranches.map(async (branch) => {
+          const indexStatus2 = await this.getIndexStatus({ ref: branch.name });
+          return {
+            ...branch,
+            indexStatus: indexStatus2
+          };
+        });
+        const indexStatus = await Promise.all(indexStatusPromises);
+        return indexStatus;
+      } catch (error) {
+        console.error("There was an error listing branches.", error);
+        throw error;
+      }
     }
     async createBranch({ baseBranch, branchName }) {
       const url = `${this.contentApiBase}/github/${this.clientId}/create_branch`;
@@ -2554,6 +2638,17 @@ mutation addPendingDocumentMutation(
     async isAuthenticated() {
       return await this.api.isAuthenticated();
     }
+    async checkGraphqlSchema({ localSchema }) {
+      const schemaFromCloud = await this.api.getSchema();
+      const schema1 = schemaFromCloud;
+      const schema2 = G.buildSchema(G.print(localSchema));
+      const diffOutput = await core.diff(schema1, schema2);
+      if (diffOutput.length > 0) {
+        return false;
+      } else {
+        return true;
+      }
+    }
     fetchCollections() {
       return this.schema.getCollections();
     }
@@ -2883,7 +2978,8 @@ mutation addPendingDocumentMutation(
       if (branchingEnabled) {
         branchSwitcher = new toolkit.BranchSwitcherPlugin({
           listBranches: handleListBranches,
-          createBranch: handleCreateBranch
+          createBranch: handleCreateBranch,
+          chooseBranch: setCurrentBranch
         });
         cms.plugins.add(branchSwitcher);
       }
@@ -3562,6 +3658,10 @@ mutation addPendingDocumentMutation(
   --tw-border-opacity: 1;
   border-color: rgb(225 221 236 / var(--tw-border-opacity));
 }
+.tina-tailwind .border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 236 243 / var(--tw-border-opacity));
+}
 .tina-tailwind .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -3656,6 +3756,10 @@ mutation addPendingDocumentMutation(
   padding-left: 12px;
   padding-right: 12px;
 }
+.tina-tailwind .py-3 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -4892,20 +4996,33 @@ This will work when developing locally but NOT when deployed to production.
   const PageWrapper = ({
     children
   }) => {
+    var _a, _b;
+    const cms = toolkit.useCMS();
+    const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
+    const [branchingEnabled, setBranchingEnabled] = React__default["default"].useState(() => cms.flags.get("branch-switcher"));
+    React__default["default"].useEffect(() => {
+      cms.events.subscribe("flag:set", ({ key, value }) => {
+        if (key === "branch-switcher") {
+          setBranchingEnabled(value);
+        }
+      });
+    }, [cms.events]);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 shadow-2xl overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100"
-    }, children);
+    }, branchingEnabled && !isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.BranchBanner, null), children);
   };
   const PageHeader = ({
     isLocalMode,
     children
-  }) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.BillingWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "pt-12 px-12"
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "w-full mx-auto max-w-screen-xl"
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "w-full flex justify-between items-end"
-  }, children))));
+  }) => {
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.BillingWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "pt-12 px-12"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "w-full mx-auto max-w-screen-xl"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "w-full flex justify-between items-end"
+    }, children))));
+  };
   const PageBody = ({
     children
   }) => /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -5191,7 +5308,7 @@ This will work when developing locally but NOT when deployed to production.
         }
       }, (collection, _loading, reFetchCollection, collectionExtra) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-        const totalCount = collection.documents.totalCount;
+        collection.documents.totalCount;
         const documents = collection.documents.edges;
         const admin = cms.api.admin;
         const pageInfo = collection.documents.pageInfo;
@@ -5300,7 +5417,7 @@ This will work when developing locally but NOT when deployed to production.
               setSortOrder(val.order);
             }
           }
-        })), /* @__PURE__ */ React__default["default"].createElement("div", {
+        })), /* @__PURE__ */ React__default["default"].createElement("form", {
           className: "flex flex-wrap gap-4 items-end"
         }, /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "flex flex-shrink-0 flex-col gap-2 items-start"
@@ -5331,6 +5448,9 @@ This will work when developing locally but NOT when deployed to production.
                 ...old,
                 filterField: val
               }));
+              if (!val) {
+                reFetchCollection();
+              }
             }
           }
         })), showStartsWith && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -5367,7 +5487,7 @@ This will work when developing locally but NOT when deployed to production.
           onChange: (e) => {
             setVars((old) => ({
               ...old,
-              after: e.format(),
+              after: typeof e.format === "function" ? e.format() : "",
               booleanEquals: null,
               startsWith: ""
             }));
@@ -5385,7 +5505,7 @@ This will work when developing locally but NOT when deployed to production.
           onChange: (e) => {
             setVars((old) => ({
               ...old,
-              before: e.format(),
+              before: typeof e.format === "function" ? e.format() : "",
               booleanEquals: null,
               startsWith: ""
             }));
@@ -5419,7 +5539,8 @@ This will work when developing locally but NOT when deployed to production.
             setPrevCursors([]);
             reFetchCollection();
           },
-          variant: "primary"
+          variant: "primary",
+          type: "submit"
         }, "Search", " ", /* @__PURE__ */ React__default["default"].createElement(BiSearch, {
           className: "w-5 h-full ml-1.5 opacity-70"
         })), (vars.startsWith || vars.after || vars.before || vars.booleanEquals) && /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
@@ -5449,7 +5570,7 @@ This will work when developing locally but NOT when deployed to production.
           templates: collection.templates
         })))), /* @__PURE__ */ React__default["default"].createElement(PageBody, null, /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "w-full mx-auto max-w-screen-xl"
-        }, totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("table", {
+        }, documents.length > 0 ? /* @__PURE__ */ React__default["default"].createElement("table", {
           className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
         }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
           className: "divide-y divide-gray-150"
@@ -5547,7 +5668,7 @@ This will work when developing locally but NOT when deployed to production.
               }
             ].filter(Boolean)
           })));
-        }))), /* @__PURE__ */ React__default["default"].createElement("div", {
+        }))) : /* @__PURE__ */ React__default["default"].createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "pt-4"
         }, /* @__PURE__ */ React__default["default"].createElement(toolkit.CursorPaginator, {
           variant: "white",
@@ -5570,6 +5691,13 @@ This will work when developing locally but NOT when deployed to production.
       });
     });
   };
+  const NoDocumentsPlaceholder = () => {
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "text-center px-5 py-3 flex flex-col items-center justify-center shadow border border-gray-100 bg-gray-50 border-b border-gray-200 w-full max-w-full rounded-lg"
+    }, /* @__PURE__ */ React__default["default"].createElement("p", {
+      className: "text-base italic font-medium text-gray-300"
+    }, "No documents found."));
+  };
   const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
     return /* @__PURE__ */ React__default["default"].createElement(toolkit.Modal, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.PopupModal, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalHeader, {
       close: close2
@@ -6035,9 +6163,30 @@ This will work when developing locally but NOT when deployed to production.
       ...config
     });
   };
+  const CheckSchema = ({
+    schemaJson,
+    children
+  }) => {
+    const cms = toolkit.useCMS();
+    const api = new TinaAdminApi(cms);
+    const url = api.api.contentApiUrl;
+    React.useEffect(() => {
+      if (schemaJson && cms) {
+        api.checkGraphqlSchema({
+          localSchema: schemaJson
+        }).then((x) => {
+          if (x === false) {
+            cms.alerts.error("GraphQL Schema Mismatch. Editing may not work. If you just switched branches, try going back to the previous branch");
+          }
+        });
+      }
+    }, [cms, JSON.stringify(schemaJson || {}), url]);
+    return children;
+  };
   const TinaAdmin = ({
     preview,
-    config
+    config,
+    schemaJson
   }) => {
     const isSSR2 = typeof window === "undefined";
     const { edit } = sharedctx.useEditState();
@@ -6048,9 +6197,18 @@ This will work when developing locally but NOT when deployed to production.
       return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(LoginPage, null));
     }
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
+      var _a, _b, _c;
       const isTinaAdminEnabled = cms.flags.get("tina-admin") === false ? false : true;
       if (isTinaAdminEnabled) {
-        return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.HashRouter, null, /* @__PURE__ */ React__default["default"].createElement(SetPreviewFlag, {
+        const tinaClient = (_a = cms.api) == null ? void 0 : _a.tina;
+        const collectionWithRouter = (_c = (_b = tinaClient == null ? void 0 : tinaClient.schema) == null ? void 0 : _b.config) == null ? void 0 : _c.collections.find((x) => {
+          var _a2;
+          return typeof ((_a2 = x == null ? void 0 : x.ui) == null ? void 0 : _a2.router) === "function";
+        });
+        const hasRouter = Boolean(collectionWithRouter);
+        return /* @__PURE__ */ React__default["default"].createElement(CheckSchema, {
+          schemaJson
+        }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.HashRouter, null, /* @__PURE__ */ React__default["default"].createElement(SetPreviewFlag, {
           preview,
           cms
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, preview && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
@@ -6092,11 +6250,11 @@ This will work when developing locally but NOT when deployed to production.
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "/",
           element: /* @__PURE__ */ React__default["default"].createElement(MaybeRedirectToPreview, {
-            redirect: !!preview
+            redirect: !!preview && hasRouter
           }, /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
             cms
           }, /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)))
-        })));
+        }))));
       } else {
         return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.HashRouter, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "logout",
@@ -6173,6 +6331,7 @@ This will work when developing locally but NOT when deployed to production.
   exports2.TinaCloudProvider = TinaCloudProvider;
   exports2.TinaDataProvider = TinaDataProvider;
   exports2.assertShape = assertShape;
+  exports2.asyncPoll = asyncPoll;
   exports2.createClient = createClient;
   exports2["default"] = TinaCMSProvider2;
   exports2.defineConfig = defineConfig;

package/dist/internalClient/index.d.ts

@@ -1,6 +1,3 @@
-/**
-
-*/
 import { TokenObject } from '../auth/authenticate';
 import { BranchData, EventBus } from '@tinacms/toolkit';
 import { DocumentNode, GraphQLSchema } from 'graphql';
@@ -24,6 +21,90 @@ interface ServerOptions {
     tinaioConfig?: TinaIOConfig;
     tokenStorage?: 'MEMORY' | 'LOCAL_STORAGE' | 'CUSTOM';
 }
+/**
+ * The function you pass to `asyncPoll` should return a promise
+ * that resolves with object that satisfies this interface.
+ *
+ * The `done` property indicates to the async poller whether to
+ * continue polling or not.
+ *
+ * When done is `true` that means you've got what you need
+ * and the poller will resolve with `data`.
+ *
+ * When done is `false` taht means you don't have what you need
+ * and the poller will continue polling.
+ */
+export interface AsyncData<T> {
+    done: boolean;
+    data?: T;
+}
+/**
+ * Your custom function you provide to the async poller should
+ * satisfy this interface. Your function returns a promise that
+ * resolves with `AsyncData` to indicate to the poller whether
+ * you have what you need or we should continue polling.
+ */
+export interface AsyncFunction<T> extends Function {
+    (): PromiseLike<AsyncData<T>>;
+}
+/**
+* How to repeatedly call an async function until get a desired result.
+*
+* Inspired by the following gist:
+* https://gist.github.com/twmbx/2321921670c7e95f6fad164fbdf3170e#gistcomment-3053587
+* https://davidwalsh.name/javascript-polling
+*
+* Usage:
+  asyncPoll(
+      async (): Promise<AsyncData<any>> => {
+          try {
+              const result = await getYourAsyncResult();
+              if (result.isWhatYouWant) {
+                  return Promise.resolve({
+                      done: true,
+                      data: result,
+                  });
+              } else {
+                  return Promise.resolve({
+                      done: false
+                  });
+              }
+          } catch (err) {
+              return Promise.reject(err);
+          }
+      },
+      500,    // interval
+      15000,  // timeout
+  );
+*/
+export declare function asyncPoll<T>(
+/**
+ * Function to call periodically until it resolves or rejects.
+ *
+ * It should resolve as soon as possible indicating if it found
+ * what it was looking for or not. If not then it will be reinvoked
+ * after the `pollInterval` if we haven't timed out.
+ *
+ * Rejections will stop the polling and be propagated.
+ */
+fn: AsyncFunction<T>, 
+/**
+ * Milliseconds to wait before attempting to resolve the promise again.
+ * The promise won't be called concurrently. This is the wait period
+ * after the promise has resolved/rejected before trying again for a
+ * successful resolve so long as we haven't timed out.
+ *
+ * Default 5 seconds.
+ */
+pollInterval?: number, 
+/**
+ * Max time to keep polling to receive a successful resolved response.
+ * If the promise never resolves before the timeout then this method
+ * rejects with a timeout error.
+ *
+ * Default 30 seconds.
+ */
+pollTimeout?: number): Promise<T>;
 export declare class Client {
     onLogin?: OnLoginFunc;
     onLogout?: () => Promise<void>;
@@ -121,7 +202,27 @@ export declare class Client {
         delinquencyDate: number;
         billingState: 'current' | 'late' | 'delinquent';
     }>;
-    listBranches(): Promise<any>;
+    waitForIndexStatus({ ref }: {
+        ref: string;
+    }): Promise<any>;
+    getIndexStatus({ ref }: {
+        ref: string;
+    }): Promise<{
+        status?: "unknown" | "complete" | "failed" | "inprogress";
+        timestamp?: number;
+    }>;
+    listBranches(): Promise<{
+        indexStatus: {
+            status?: "unknown" | "complete" | "failed" | "inprogress";
+            timestamp?: number;
+        };
+        name?: string;
+        protected?: boolean;
+        commit?: {
+            url?: string;
+            sha?: string;
+        };
+    }[]>;
     createBranch({ baseBranch, branchName }: BranchData): Promise<string>;
 }
 export declare const DEFAULT_LOCAL_TINA_GQL_SERVER_URL = "http://localhost:4001/graphql";

package/dist/style.css

@@ -649,6 +649,10 @@
   --tw-border-opacity: 1;
   border-color: rgb(225 221 236 / var(--tw-border-opacity));
 }
+.tina-tailwind .border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 236 243 / var(--tw-border-opacity));
+}
 .tina-tailwind .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -743,6 +747,10 @@
   padding-left: 12px;
   padding-right: 12px;
 }
+.tina-tailwind .py-3 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -51,13 +51,14 @@
   "typings": "dist/index.d.ts",
   "license": "Apache-2.0",
   "dependencies": {
+    "@graphql-inspector/core": "^4.0.0",
     "@graphql-tools/relay-operation-optimizer": "^6.4.1",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@react-hook/window-size": "^3.0.7",
-    "@tinacms/schema-tools": "1.3.0",
+    "@tinacms/schema-tools": "1.3.2",
     "@tinacms/sharedctx": "1.0.1",
-    "@tinacms/toolkit": "1.3.2",
+    "@tinacms/toolkit": "1.3.4",
     "crypto-js": "^4.0.0",
     "encoding": "0.1.13",
     "fetch-ponyfill": "^7.1.0",
@@ -68,7 +69,8 @@
     "prism-react-renderer": "^1.3.5",
     "react-icons": "^4.3.1",
     "react-router-dom": "6",
-    "yup": "^0.32.0"
+    "yup": "^0.32.0",
+    "zod": "^3.14.3"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^8.6.1",