tinacms 0.59.1 → 0.60.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # tinacms
 
+## 0.60.0
+
+### Minor Changes
+
+- 75974d0a4: Updates the tina cloud client to do id_token & access_token refreshes when needed
+
+### Patch Changes
+
+- 88c209b45: Throw when Tina Cloud responds with non 200 code
+- dcdf1ecf0: Updates `react-router` to `v6` for `TinaAdmin`
+- 47d126029: Fix support of objects in a list for MDX templates
+- Updated dependencies [bc4699d2b]
+  - @tinacms/toolkit@0.56.2
+
 ## 0.59.1
 
 ### Patch Changes

package/dist/client/index.d.ts

@@ -11,9 +11,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { TokenObject } from '../auth/authenticate';
+import { BranchData, EventBus } from '@tinacms/toolkit';
 import { DocumentNode, GraphQLSchema } from 'graphql';
 import gql from 'graphql-tag';
-import { EventBus, BranchData } from '@tinacms/toolkit';
 export declare type TinaIOConfig = {
     frontendUrlOverride?: string;
     identityApiUrlOverride?: string;
@@ -23,7 +23,7 @@ interface ServerOptions {
     clientId: string;
     branch: string;
     customContentApiUrl?: string;
-    getTokenFn?: () => TokenObject;
+    getTokenFn?: () => Promise<TokenObject>;
     tinaioConfig?: TinaIOConfig;
     tokenStorage?: 'MEMORY' | 'LOCAL_STORAGE' | 'CUSTOM';
 }
@@ -51,6 +51,8 @@ export declare class Client {
     request<ReturnType>(query: ((gqlTag: typeof gql) => DocumentNode) | string, { variables }: {
         variables: object;
     }): Promise<ReturnType>;
+    parseJwt(token: any): any;
+    getRefreshedToken(tokens: string): Promise<TokenObject>;
     isAuthorized(): Promise<boolean>;
     isAuthenticated(): Promise<boolean>;
     authenticate(): Promise<TokenObject>;

package/dist/index.es.js

@@ -29,17 +29,17 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
+export * from "@tinacms/toolkit";
 import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print } from "graphql";
 import set from "lodash.set";
 import gql$1 from "graphql-tag";
-import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
-export * from "@tinacms/toolkit";
 import React, { useState, useCallback, useEffect, Fragment } from "react";
 import styled from "styled-components";
 import * as yup from "yup";
 import { setEditing, useEditState } from "@tinacms/sharedctx";
 import { getIn, setIn } from "final-form";
-import { NavLink, useLocation, useParams, Link, useHistory, BrowserRouter, Switch, Route } from "react-router-dom";
+import { NavLink, useLocation, useParams, Link, useNavigate, BrowserRouter, Routes, Route } from "react-router-dom";
 import { Menu, Transition } from "@headlessui/react";
 function popupWindow(url, title, window2, w, h) {
   const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
@@ -424,10 +424,10 @@ mutation addPendingDocumentMutation(
     this.clientId = options.clientId;
     switch (tokenStorage) {
       case "LOCAL_STORAGE":
-        this.getToken = function() {
+        this.getToken = async function() {
           const tokens = localStorage.getItem(AUTH_TOKEN_KEY) || null;
           if (tokens) {
-            return JSON.parse(tokens);
+            return await this.getRefreshedToken(tokens);
           } else {
             return {
               access_token: null,
@@ -441,9 +441,9 @@ mutation addPendingDocumentMutation(
         };
         break;
       case "MEMORY":
-        this.getToken = () => {
+        this.getToken = async () => {
           if (this.token) {
-            return JSON.parse(this.token);
+            return await this.getRefreshedToken(this.token);
           } else {
             return {
               access_token: null,
@@ -482,13 +482,16 @@ mutation addPendingDocumentMutation(
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        Authorization: "Bearer " + this.getToken().id_token
+        Authorization: "Bearer " + (await this.getToken()).id_token
       },
       body: JSON.stringify({
         query: typeof query === "function" ? print(query(gql$1)) : query,
         variables
       })
     });
+    if (res.status !== 200) {
+      throw new Error(`Unable to complete request, ${res.statusText}`);
+    }
     const json = await res.json();
     if (json.errors) {
       throw new Error(`Unable to fetch, errors: 
@@ -496,6 +499,47 @@ mutation addPendingDocumentMutation(
     }
     return json.data;
   }
+  parseJwt(token) {
+    const base64Url = token.split(".")[1];
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const jsonPayload = decodeURIComponent(atob(base64).split("").map(function(c) {
+      return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(""));
+    return JSON.parse(jsonPayload);
+  }
+  async getRefreshedToken(tokens) {
+    const { access_token, id_token, refresh_token } = JSON.parse(tokens);
+    const { exp, iss, client_id } = this.parseJwt(access_token);
+    if (Date.now() / 1e3 >= exp) {
+      const refreshResponse = await fetch(iss, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-amz-json-1.1",
+          "x-amz-target": "AWSCognitoIdentityProviderService.InitiateAuth"
+        },
+        body: JSON.stringify({
+          ClientId: client_id,
+          AuthFlow: "REFRESH_TOKEN_AUTH",
+          AuthParameters: {
+            REFRESH_TOKEN: refresh_token,
+            DEVICE_KEY: null
+          }
+        })
+      });
+      if (refreshResponse.status !== 200) {
+        throw new Error("Unable to refresh auth tokens");
+      }
+      const responseJson = await refreshResponse.json();
+      const newToken = {
+        access_token: responseJson.AuthenticationResult.AccessToken,
+        id_token: responseJson.AuthenticationResult.IdToken,
+        refresh_token
+      };
+      this.setToken(newToken);
+      return Promise.resolve(newToken);
+    }
+    return Promise.resolve({ access_token, id_token, refresh_token });
+  }
   async isAuthorized() {
     return this.isAuthenticated();
   }
@@ -511,7 +555,7 @@ mutation addPendingDocumentMutation(
     const headers = (init == null ? void 0 : init.headers) || {};
     return await fetch(input, __spreadProps(__spreadValues({}, init), {
       headers: new Headers(__spreadValues({
-        Authorization: "Bearer " + this.getToken().id_token
+        Authorization: "Bearer " + (await this.getToken()).id_token
       }, headers))
     }));
   }
@@ -995,25 +1039,30 @@ function useGraphqlForms({
             setPendingReset(queryName);
           },
           onSubmit: async (payload2) => {
-            const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
-            const variables2 = { params };
-            const mutationString = result.form.mutationInfo.string;
-            if (onSubmit) {
-              onSubmit({
-                queryString: mutationString,
-                mutationString,
-                variables: variables2
-              });
-            } else {
-              try {
-                await cms.api.tina.request(mutationString, {
+            try {
+              const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
+              const variables2 = { params };
+              const mutationString = result.form.mutationInfo.string;
+              if (onSubmit) {
+                onSubmit({
+                  queryString: mutationString,
+                  mutationString,
                   variables: variables2
                 });
-                cms.alerts.success("Document saved!");
-              } catch (e) {
-                cms.alerts.error("There was a problem saving your document");
-                console.error(e);
+              } else {
+                try {
+                  await cms.api.tina.request(mutationString, {
+                    variables: variables2
+                  });
+                  cms.alerts.success("Document saved!");
+                } catch (e) {
+                  cms.alerts.error("There was a problem saving your document");
+                  console.error(e);
+                }
               }
+            } catch (e) {
+              console.error(e);
+              cms.alerts.error("There was a problem saving your document");
             }
           }
         };
@@ -1125,6 +1174,9 @@ const transformParams = (data) => {
     return { [_template]: nested };
   } catch (e) {
     if (e.message === "Failed to assertShape - _template is a required field") {
+      if (!data) {
+        return [];
+      }
       const accum = {};
       Object.entries(data).map(([keyName, value]) => {
         accum[keyName] = transformParams(value);
@@ -1687,8 +1739,9 @@ const Sidebar = ({ cms }) => {
     return /* @__PURE__ */ React.createElement("li", {
       key: `${collection.name}-link`
     }, /* @__PURE__ */ React.createElement(NavLink, {
-      className: `text-lg tracking-wide hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`,
-      activeClassName: "text-blue-600",
+      className: ({ isActive }) => {
+        return `text-lg tracking-wide ${isActive ? "text-blue-600" : ""} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
+      },
       to: `/admin/collections/${collection.name}`
     }, /* @__PURE__ */ React.createElement(ImFilesEmpty, {
       className: "mr-2 h-6 opacity-80 w-auto"
@@ -2017,7 +2070,7 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
 };
 const CollectionCreatePage = () => {
   const { collectionName, templateName } = useParams();
-  const history = useHistory();
+  const navigate = useNavigate();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
     collectionName,
@@ -2038,7 +2091,7 @@ const CollectionCreatePage = () => {
       ],
       onSubmit: async (values) => {
         await createDocument(cms, collection, template, mutationInfo, values);
-        history.push(`/admin/collections/${collection.name}`);
+        navigate(`/admin/collections/${collection.name}`);
       }
     });
     const formLabel = template ? `${collection.label} - Create New ${template.label}` : `${collection.label} - Create New`;
@@ -2105,7 +2158,7 @@ const updateDocument = async (cms, relativePath, collection, mutationInfo, value
 };
 const CollectionUpdatePage = () => {
   const { collectionName, filename } = useParams();
-  const history = useHistory();
+  const navigate = useNavigate();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
     collectionName
@@ -2123,7 +2176,7 @@ const CollectionUpdatePage = () => {
         initialValues: document2.values,
         onSubmit: async (values) => {
           await updateDocument(cms, relativePath, collection, mutationInfo, values);
-          history.push(`/admin/collections/${collection.name}`);
+          navigate(`/collections/${collection.name}`);
         }
       });
       return /* @__PURE__ */ React.createElement("div", {
@@ -2154,10 +2207,10 @@ const useEmbedTailwind = () => {
 const TinaAdmin = () => {
   useEmbedTailwind();
   const isSSR = typeof window === "undefined";
+  const { edit } = useEditState();
   if (isSSR) {
     return null;
   }
-  const { edit } = useEditState();
   if (!edit) {
     return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(LoginPage, null));
   }
@@ -2170,22 +2223,27 @@ const TinaAdmin = () => {
         cms
       }), /* @__PURE__ */ React.createElement("div", {
         className: "flex-1"
-      }, /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Route, {
-        path: `/admin/collections/:collectionName/new`
-      }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null)), /* @__PURE__ */ React.createElement(Route, {
-        path: `/admin/collections/:collectionName/:templateName/new`
-      }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null)), /* @__PURE__ */ React.createElement(Route, {
-        path: `/admin/collections/:collectionName/:filename`
-      }, /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)), /* @__PURE__ */ React.createElement(Route, {
-        path: `/admin/collections/:collectionName`
-      }, /* @__PURE__ */ React.createElement(CollectionListPage, null)), /* @__PURE__ */ React.createElement(Route, {
-        path: `/admin`
-      }, /* @__PURE__ */ React.createElement(DashboardPage, null)))))));
+      }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
+        path: "/admin/collections/:collectionName/new",
+        element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
+      }), /* @__PURE__ */ React.createElement(Route, {
+        path: "/admin/collections/:collectionName/:templateName/new",
+        element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
+      }), /* @__PURE__ */ React.createElement(Route, {
+        path: "/admin/collections/:collectionName/:filename",
+        element: /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)
+      }), /* @__PURE__ */ React.createElement(Route, {
+        path: "/admin/collections/:collectionName",
+        element: /* @__PURE__ */ React.createElement(CollectionListPage, null)
+      }), /* @__PURE__ */ React.createElement(Route, {
+        path: "/admin",
+        element: /* @__PURE__ */ React.createElement(DashboardPage, null)
+      }))))));
     } else {
-      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Route, {
-        path: [`/admin/logout`, `/admin/exit`, `/admin/exit-admin`]
+      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
+        path: "/admin/logout"
       }, /* @__PURE__ */ React.createElement(LogoutPage, null)), /* @__PURE__ */ React.createElement(Route, {
-        path: `/admin`
+        path: "/admin"
       }, () => {
         window.location.href = "/";
       }))));

package/dist/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("graphql"), require("lodash.set"), require("graphql-tag"), require("@tinacms/toolkit"), require("react"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "graphql", "lodash.set", "graphql-tag", "@tinacms/toolkit", "react", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "react-router-dom", "@headlessui/react"], 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));
-})(this, function(exports2, graphql, set, gql$1, toolkit, React, styled, yup, sharedctx, finalForm, reactRouterDom, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("graphql-tag"), require("react"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "graphql-tag", "react", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "react-router-dom", "@headlessui/react"], 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));
+})(this, function(exports2, toolkit, graphql, set, gql$1, React, styled, yup, sharedctx, finalForm, reactRouterDom, react) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -444,10 +444,10 @@ mutation addPendingDocumentMutation(
       this.clientId = options.clientId;
       switch (tokenStorage) {
         case "LOCAL_STORAGE":
-          this.getToken = function() {
+          this.getToken = async function() {
             const tokens = localStorage.getItem(AUTH_TOKEN_KEY) || null;
             if (tokens) {
-              return JSON.parse(tokens);
+              return await this.getRefreshedToken(tokens);
             } else {
               return {
                 access_token: null,
@@ -461,9 +461,9 @@ mutation addPendingDocumentMutation(
           };
           break;
         case "MEMORY":
-          this.getToken = () => {
+          this.getToken = async () => {
             if (this.token) {
-              return JSON.parse(this.token);
+              return await this.getRefreshedToken(this.token);
             } else {
               return {
                 access_token: null,
@@ -502,13 +502,16 @@ mutation addPendingDocumentMutation(
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: "Bearer " + this.getToken().id_token
+          Authorization: "Bearer " + (await this.getToken()).id_token
         },
         body: JSON.stringify({
           query: typeof query === "function" ? graphql.print(query(gql__default["default"])) : query,
           variables
         })
       });
+      if (res.status !== 200) {
+        throw new Error(`Unable to complete request, ${res.statusText}`);
+      }
       const json = await res.json();
       if (json.errors) {
         throw new Error(`Unable to fetch, errors: 
@@ -516,6 +519,47 @@ mutation addPendingDocumentMutation(
       }
       return json.data;
     }
+    parseJwt(token) {
+      const base64Url = token.split(".")[1];
+      const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+      const jsonPayload = decodeURIComponent(atob(base64).split("").map(function(c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(""));
+      return JSON.parse(jsonPayload);
+    }
+    async getRefreshedToken(tokens) {
+      const { access_token, id_token, refresh_token } = JSON.parse(tokens);
+      const { exp, iss, client_id } = this.parseJwt(access_token);
+      if (Date.now() / 1e3 >= exp) {
+        const refreshResponse = await fetch(iss, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-amz-json-1.1",
+            "x-amz-target": "AWSCognitoIdentityProviderService.InitiateAuth"
+          },
+          body: JSON.stringify({
+            ClientId: client_id,
+            AuthFlow: "REFRESH_TOKEN_AUTH",
+            AuthParameters: {
+              REFRESH_TOKEN: refresh_token,
+              DEVICE_KEY: null
+            }
+          })
+        });
+        if (refreshResponse.status !== 200) {
+          throw new Error("Unable to refresh auth tokens");
+        }
+        const responseJson = await refreshResponse.json();
+        const newToken = {
+          access_token: responseJson.AuthenticationResult.AccessToken,
+          id_token: responseJson.AuthenticationResult.IdToken,
+          refresh_token
+        };
+        this.setToken(newToken);
+        return Promise.resolve(newToken);
+      }
+      return Promise.resolve({ access_token, id_token, refresh_token });
+    }
     async isAuthorized() {
       return this.isAuthenticated();
     }
@@ -531,7 +575,7 @@ mutation addPendingDocumentMutation(
       const headers = (init == null ? void 0 : init.headers) || {};
       return await fetch(input, __spreadProps(__spreadValues({}, init), {
         headers: new Headers(__spreadValues({
-          Authorization: "Bearer " + this.getToken().id_token
+          Authorization: "Bearer " + (await this.getToken()).id_token
         }, headers))
       }));
     }
@@ -1015,25 +1059,30 @@ mutation addPendingDocumentMutation(
               setPendingReset(queryName);
             },
             onSubmit: async (payload2) => {
-              const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
-              const variables2 = { params };
-              const mutationString = result.form.mutationInfo.string;
-              if (onSubmit) {
-                onSubmit({
-                  queryString: mutationString,
-                  mutationString,
-                  variables: variables2
-                });
-              } else {
-                try {
-                  await cms.api.tina.request(mutationString, {
+              try {
+                const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
+                const variables2 = { params };
+                const mutationString = result.form.mutationInfo.string;
+                if (onSubmit) {
+                  onSubmit({
+                    queryString: mutationString,
+                    mutationString,
                     variables: variables2
                   });
-                  cms.alerts.success("Document saved!");
-                } catch (e) {
-                  cms.alerts.error("There was a problem saving your document");
-                  console.error(e);
+                } else {
+                  try {
+                    await cms.api.tina.request(mutationString, {
+                      variables: variables2
+                    });
+                    cms.alerts.success("Document saved!");
+                  } catch (e) {
+                    cms.alerts.error("There was a problem saving your document");
+                    console.error(e);
+                  }
                 }
+              } catch (e) {
+                console.error(e);
+                cms.alerts.error("There was a problem saving your document");
               }
             }
           };
@@ -1145,6 +1194,9 @@ mutation addPendingDocumentMutation(
       return { [_template]: nested };
     } catch (e) {
       if (e.message === "Failed to assertShape - _template is a required field") {
+        if (!data) {
+          return [];
+        }
         const accum = {};
         Object.entries(data).map(([keyName, value]) => {
           accum[keyName] = transformParams(value);
@@ -1707,8 +1759,9 @@ This will work when developing locally but NOT when deployed to production.
       return /* @__PURE__ */ React__default["default"].createElement("li", {
         key: `${collection.name}-link`
       }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.NavLink, {
-        className: `text-lg tracking-wide hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`,
-        activeClassName: "text-blue-600",
+        className: ({ isActive }) => {
+          return `text-lg tracking-wide ${isActive ? "text-blue-600" : ""} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
+        },
         to: `/admin/collections/${collection.name}`
       }, /* @__PURE__ */ React__default["default"].createElement(ImFilesEmpty, {
         className: "mr-2 h-6 opacity-80 w-auto"
@@ -2037,7 +2090,7 @@ This will work when developing locally but NOT when deployed to production.
   };
   const CollectionCreatePage = () => {
     const { collectionName, templateName } = reactRouterDom.useParams();
-    const history = reactRouterDom.useHistory();
+    const navigate = reactRouterDom.useNavigate();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
       collectionName,
@@ -2058,7 +2111,7 @@ This will work when developing locally but NOT when deployed to production.
         ],
         onSubmit: async (values) => {
           await createDocument(cms, collection, template, mutationInfo, values);
-          history.push(`/admin/collections/${collection.name}`);
+          navigate(`/admin/collections/${collection.name}`);
         }
       });
       const formLabel = template ? `${collection.label} - Create New ${template.label}` : `${collection.label} - Create New`;
@@ -2125,7 +2178,7 @@ This will work when developing locally but NOT when deployed to production.
   };
   const CollectionUpdatePage = () => {
     const { collectionName, filename } = reactRouterDom.useParams();
-    const history = reactRouterDom.useHistory();
+    const navigate = reactRouterDom.useNavigate();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
       collectionName
@@ -2143,7 +2196,7 @@ This will work when developing locally but NOT when deployed to production.
           initialValues: document2.values,
           onSubmit: async (values) => {
             await updateDocument(cms, relativePath, collection, mutationInfo, values);
-            history.push(`/admin/collections/${collection.name}`);
+            navigate(`/collections/${collection.name}`);
           }
         });
         return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -2174,10 +2227,10 @@ This will work when developing locally but NOT when deployed to production.
   const TinaAdmin = () => {
     useEmbedTailwind();
     const isSSR = typeof window === "undefined";
+    const { edit } = sharedctx.useEditState();
     if (isSSR) {
       return null;
     }
-    const { edit } = sharedctx.useEditState();
     if (!edit) {
       return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(LoginPage, null));
     }
@@ -2190,22 +2243,27 @@ This will work when developing locally but NOT when deployed to production.
           cms
         }), /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "flex-1"
-        }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: `/admin/collections/:collectionName/new`
-        }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: `/admin/collections/:collectionName/:templateName/new`
-        }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: `/admin/collections/:collectionName/:filename`
-        }, /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: `/admin/collections/:collectionName`
-        }, /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: `/admin`
-        }, /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)))))));
+        }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/collections/:collectionName/new",
+          element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/collections/:collectionName/:templateName/new",
+          element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/collections/:collectionName/:filename",
+          element: /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/collections/:collectionName",
+          element: /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null)
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin",
+          element: /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)
+        }))))));
       } else {
-        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: [`/admin/logout`, `/admin/exit`, `/admin/exit-admin`]
+        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "/admin/logout"
         }, /* @__PURE__ */ React__default["default"].createElement(LogoutPage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: `/admin`
+          path: "/admin"
         }, () => {
           window.location.href = "/";
         }))));