tinacms 0.61.1 → 0.62.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # tinacms
 
+## 0.62.0
+
+### Minor Changes
+
+- 70da62fe8: deprecated the use of `getStaticPropsForTina`
+
+### Patch Changes
+
+- 0afa75df1: 2342 - [TinaAdmin] Truncates the `filename` column for the Document List View
+- 7dafce89d: Fixed issue where content creator was invalid
+- 3de8c6165: Enabled branch creation in branch switcher
+- fee183f8f: add "switch to default branch" recover option to error boundary
+- 5c070a83f: feat: Add UI banner for when in localMode
+- Updated dependencies [ddf81a4fd]
+- Updated dependencies [20260a82d]
+- Updated dependencies [0370147fb]
+- Updated dependencies [3de8c6165]
+- Updated dependencies [2eaad97bf]
+- Updated dependencies [5c070a83f]
+  - @tinacms/toolkit@0.56.5
+
 ## 0.61.1
 
 ### Patch Changes

package/dist/client/index.d.ts

@@ -42,6 +42,7 @@ export declare class Client {
     private options;
     events: EventBus;
     constructor({ tokenStorage, ...options }: ServerOptions);
+    get isLocalMode(): boolean;
     setBranch(branchName: string): void;
     addPendingContent: (props: any) => Promise<unknown>;
     getSchema: () => Promise<GraphQLSchema>;

package/dist/index.es.js

@@ -374,6 +374,11 @@ function assertIsUnionType(type) {
     throw new Error(`Expected an instance of GraphQLUnionType for type ${type.name}`);
   }
 }
+const captureBranchName = /^refs\/heads\/(.*)/;
+const parseRefForBranchName = (ref) => {
+  const matches = ref.match(captureBranchName);
+  return matches[1];
+};
 class Client {
   constructor(_a) {
     var _b = _a, { tokenStorage = "MEMORY" } = _b, options = __objRest(_b, ["tokenStorage"]);
@@ -464,6 +469,9 @@ mutation addPendingDocumentMutation(
         break;
     }
   }
+  get isLocalMode() {
+    return this.contentApiUrl.includes("localhost");
+  }
   setBranch(branchName) {
     var _a, _b, _c;
     const encodedBranch = encodeURIComponent(branchName);
@@ -591,15 +599,15 @@ mutation addPendingDocumentMutation(
     try {
       const res = await this.fetchWithToken(url, {
         method: "POST",
-        body: {
+        body: JSON.stringify({
           baseBranch,
           branchName
-        },
+        }),
         headers: {
           "Content-Type": "application/json"
         }
       });
-      return JSON.stringify(res);
+      return await res.json().then((r) => parseRefForBranchName(r.data.ref));
     } catch (error) {
       console.error("There was an error creating a new branch.", error);
       return null;
@@ -1370,7 +1378,7 @@ const useDocumentCreatorPlugin = (args) => {
       }));
     };
     run();
-  }, [cms, values == null ? void 0 : values.collection]);
+  }, [cms]);
   React.useEffect(() => {
     if (plugin) {
       cms.plugins.add(plugin);
@@ -1382,6 +1390,18 @@ const useDocumentCreatorPlugin = (args) => {
     };
   }, [plugin]);
 };
+const errorButtonStyles = {
+  background: "#eb6337",
+  padding: "12px 18px",
+  cursor: "pointer",
+  borderRadius: "50px",
+  textTransform: "uppercase",
+  letterSpacing: "2px",
+  fontWeight: "bold",
+  border: "none",
+  color: "white",
+  margin: "1rem 0"
+};
 const SetupHooks = (props) => {
   const cms = useCMS();
   const [payload, isLoading] = useGraphqlForms({
@@ -1411,6 +1431,8 @@ class ErrorBoundary extends React.Component {
     return { hasError: true, message: error.message };
   }
   render() {
+    const branchData = window.localStorage.getItem("tinacms-current-branch");
+    const hasBranchData = branchData && branchData.length > 0;
     if (this.state.hasError && !this.state.pageRefresh) {
       return /* @__PURE__ */ React.createElement("div", {
         style: {
@@ -1431,25 +1453,21 @@ class ErrorBoundary extends React.Component {
         }
       }, /* @__PURE__ */ React.createElement("h3", {
         style: { color: "#eb6337" }
-      }, "TinaCMS Render Error"), /* @__PURE__ */ React.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React.createElement("pre", null, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React.createElement("div", {
-        style: { padding: "10px 0" }
-      }, /* @__PURE__ */ React.createElement("button", {
-        style: {
-          background: "#eb6337",
-          padding: "12px 18px",
-          cursor: "pointer",
-          borderRadius: "50px",
-          textTransform: "uppercase",
-          letterSpacing: "2px",
-          fontWeight: "bold",
-          border: "none",
-          color: "white"
-        },
+      }, "TinaCMS Render Error"), /* @__PURE__ */ React.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React.createElement("pre", {
+        style: { marginTop: "1rem", overflowX: "auto" }
+      }, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React.createElement("button", {
+        style: errorButtonStyles,
         onClick: () => {
           this.setState({ pageRefresh: true });
           setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
         }
-      }, "Refresh"))));
+      }, "Refresh"), hasBranchData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React.createElement("button", {
+        style: errorButtonStyles,
+        onClick: () => {
+          window.localStorage.removeItem("tinacms-current-branch");
+          window.location.reload();
+        }
+      }, "Switch to default branch"))));
     }
     if (this.state.pageRefresh) {
       return /* @__PURE__ */ React.createElement(Loader, null, "Let's try that again.");
@@ -1973,11 +1991,11 @@ const CollectionListPage = () => {
           className: "block text-xs mb-0.5 text-gray-400 uppercase"
         }, "Filename"), /* @__PURE__ */ React.createElement(Link, {
           to: `${location2.pathname}/${document2.node.sys.filename}`,
-          className: "h-5 leading-5 block"
+          className: "h-5 leading-5 flex max-w-xs"
         }, /* @__PURE__ */ React.createElement("span", {
-          className: "leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
+          className: "flex-shrink-1 leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
         }, document2.node.sys.filename), /* @__PURE__ */ React.createElement("span", {
-          className: "leading-5 text-base font-medium text-gray-300"
+          className: "flex-shrink-0 leading-5 text-base font-medium text-gray-300"
         }, document2.node.sys.extension))), /* @__PURE__ */ React.createElement("td", {
           className: "px-5 py-3 whitespace-nowrap"
         }, /* @__PURE__ */ React.createElement("span", {

package/dist/index.js

@@ -394,6 +394,11 @@ var __objRest = (source, exclude) => {
       throw new Error(`Expected an instance of GraphQLUnionType for type ${type.name}`);
     }
   }
+  const captureBranchName = /^refs\/heads\/(.*)/;
+  const parseRefForBranchName = (ref) => {
+    const matches = ref.match(captureBranchName);
+    return matches[1];
+  };
   class Client {
     constructor(_a) {
       var _b = _a, { tokenStorage = "MEMORY" } = _b, options = __objRest(_b, ["tokenStorage"]);
@@ -484,6 +489,9 @@ mutation addPendingDocumentMutation(
           break;
       }
     }
+    get isLocalMode() {
+      return this.contentApiUrl.includes("localhost");
+    }
     setBranch(branchName) {
       var _a, _b, _c;
       const encodedBranch = encodeURIComponent(branchName);
@@ -611,15 +619,15 @@ mutation addPendingDocumentMutation(
       try {
         const res = await this.fetchWithToken(url, {
           method: "POST",
-          body: {
+          body: JSON.stringify({
             baseBranch,
             branchName
-          },
+          }),
           headers: {
             "Content-Type": "application/json"
           }
         });
-        return JSON.stringify(res);
+        return await res.json().then((r) => parseRefForBranchName(r.data.ref));
       } catch (error) {
         console.error("There was an error creating a new branch.", error);
         return null;
@@ -1390,7 +1398,7 @@ mutation addPendingDocumentMutation(
         }));
       };
       run();
-    }, [cms, values == null ? void 0 : values.collection]);
+    }, [cms]);
     React__default["default"].useEffect(() => {
       if (plugin) {
         cms.plugins.add(plugin);
@@ -1402,6 +1410,18 @@ mutation addPendingDocumentMutation(
       };
     }, [plugin]);
   };
+  const errorButtonStyles = {
+    background: "#eb6337",
+    padding: "12px 18px",
+    cursor: "pointer",
+    borderRadius: "50px",
+    textTransform: "uppercase",
+    letterSpacing: "2px",
+    fontWeight: "bold",
+    border: "none",
+    color: "white",
+    margin: "1rem 0"
+  };
   const SetupHooks = (props) => {
     const cms = toolkit.useCMS();
     const [payload, isLoading] = useGraphqlForms({
@@ -1431,6 +1451,8 @@ mutation addPendingDocumentMutation(
       return { hasError: true, message: error.message };
     }
     render() {
+      const branchData = window.localStorage.getItem("tinacms-current-branch");
+      const hasBranchData = branchData && branchData.length > 0;
       if (this.state.hasError && !this.state.pageRefresh) {
         return /* @__PURE__ */ React__default["default"].createElement("div", {
           style: {
@@ -1451,25 +1473,21 @@ mutation addPendingDocumentMutation(
           }
         }, /* @__PURE__ */ React__default["default"].createElement("h3", {
           style: { color: "#eb6337" }
-        }, "TinaCMS Render Error"), /* @__PURE__ */ React__default["default"].createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React__default["default"].createElement("pre", null, this.state.message), /* @__PURE__ */ React__default["default"].createElement("br", null), /* @__PURE__ */ React__default["default"].createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React__default["default"].createElement("div", {
-          style: { padding: "10px 0" }
-        }, /* @__PURE__ */ React__default["default"].createElement("button", {
-          style: {
-            background: "#eb6337",
-            padding: "12px 18px",
-            cursor: "pointer",
-            borderRadius: "50px",
-            textTransform: "uppercase",
-            letterSpacing: "2px",
-            fontWeight: "bold",
-            border: "none",
-            color: "white"
-          },
+        }, "TinaCMS Render Error"), /* @__PURE__ */ React__default["default"].createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React__default["default"].createElement("pre", {
+          style: { marginTop: "1rem", overflowX: "auto" }
+        }, this.state.message), /* @__PURE__ */ React__default["default"].createElement("br", null), /* @__PURE__ */ React__default["default"].createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React__default["default"].createElement("button", {
+          style: errorButtonStyles,
           onClick: () => {
             this.setState({ pageRefresh: true });
             setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
           }
-        }, "Refresh"))));
+        }, "Refresh"), hasBranchData && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React__default["default"].createElement("button", {
+          style: errorButtonStyles,
+          onClick: () => {
+            window.localStorage.removeItem("tinacms-current-branch");
+            window.location.reload();
+          }
+        }, "Switch to default branch"))));
       }
       if (this.state.pageRefresh) {
         return /* @__PURE__ */ React__default["default"].createElement(Loader, null, "Let's try that again.");
@@ -1993,11 +2011,11 @@ This will work when developing locally but NOT when deployed to production.
             className: "block text-xs mb-0.5 text-gray-400 uppercase"
           }, "Filename"), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
             to: `${location2.pathname}/${document2.node.sys.filename}`,
-            className: "h-5 leading-5 block"
+            className: "h-5 leading-5 flex max-w-xs"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
+            className: "flex-shrink-1 leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
           }, document2.node.sys.filename), /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "leading-5 text-base font-medium text-gray-300"
+            className: "flex-shrink-0 leading-5 text-base font-medium text-gray-300"
           }, document2.node.sys.extension))), /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-5 py-3 whitespace-nowrap"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {

package/dist/tina-cms.d.ts

@@ -42,6 +42,8 @@ export declare const TinaCMSProvider2: ({ children, branch, clientId, isLocalCli
     tinaioConfig?: TinaIOConfig;
 }) => JSX.Element;
 /**
+ * @deprecated v0.62.0: Use `staticRequest` and a "try catch" block instead. see https://tina.io/docs/features/data-fetching/#querying-tina-content-in-nextjs for more details
+ *
  * A convenience function which makes a GraphQL request
  * to a local GraphQL server and ensures the response fits
  * the shape expected by Tina context in your application

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.61.1",
+  "version": "0.62.0",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -16,13 +16,14 @@
   "license": "Apache-2.0",
   "scripts": {
     "types": "yarn tsc",
-    "build": "echo \"Run `yarn build` from the root of the repository instead\""
+    "build": "echo \"Run `yarn build` from the root of the repository instead\"",
+    "test": "jest --env=jsdom --passWithNoTests"
   },
   "dependencies": {
     "@headlessui/react": "^1.4.1",
     "@heroicons/react": "^1.0.4",
     "@tinacms/sharedctx": "0.0.1",
-    "@tinacms/toolkit": "0.56.4",
+    "@tinacms/toolkit": "0.56.5",
     "crypto-js": "^4.0.0",
     "final-form": "4.20.1",
     "graphql": "^15.1.0",
@@ -33,14 +34,20 @@
     "yup": "^0.32.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^12.7.0",
     "@tinacms/scripts": "0.50.4",
+    "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.169",
     "@types/node": "^14.0.13",
     "@types/react": "^16.9.38",
     "@types/yup": "^0.29.10",
+    "jest": "^27.0.6",
     "next": "9.4.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-is": "^17.0.2",
     "styled-components": "^5.2.0",
     "typescript": "^4.3.5"
   },