tinacms 0.58.1 → 0.59.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # tinacms
 
+## 0.59.0
+
+### Minor Changes
+
+- df3030990: Add basic branch switcher
+
+### Patch Changes
+
+- 9ecceb59f: Always include `collection` for TinaAdmin `createDocument()` and `updateDocument()`
+- Updated dependencies [df3030990]
+  - @tinacms/toolkit@0.56.0
+
 ## 0.58.1
 
 ### Patch Changes

package/dist/client/index.d.ts

@@ -33,6 +33,7 @@ export declare class Client {
     identityApiUrl: string;
     schema: GraphQLSchema;
     clientId: string;
+    contentApiBase: string;
     query: string;
     setToken: (_token: TokenObject) => void;
     private getToken;
@@ -64,8 +65,8 @@ export declare class Client {
      */
     fetchWithToken(input: RequestInfo, init?: RequestInit): Promise<Response>;
     getUser(): Promise<any>;
-    listBranches({ owner, repo }: BranchData): Promise<string>;
-    createBranch({ owner, repo, baseBranch, branchName }: BranchData): Promise<string>;
+    listBranches(): Promise<any>;
+    createBranch({ baseBranch, branchName }: BranchData): Promise<string>;
 }
 export declare const DEFAULT_LOCAL_TINA_GQL_SERVER_URL = "http://localhost:4001/graphql";
 export declare class LocalClient extends Client {

package/dist/index.es.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 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, TinaCMS, BranchSwitcherPlugin, TinaProvider, useCMS, FormMetaPlugin, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
+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";
@@ -376,6 +376,7 @@ function assertIsUnionType(type) {
 class Client {
   constructor(_a) {
     var _b = _a, { tokenStorage = "MEMORY" } = _b, options = __objRest(_b, ["tokenStorage"]);
+    this.events = new EventBus();
     this.addPendingContent = async (props) => {
       const mutation = `#graphql
 mutation addPendingDocumentMutation(
@@ -416,8 +417,7 @@ mutation addPendingDocumentMutation(
     };
     this.options = options;
     this.setBranch(options.branch);
-    this.events = new EventBus();
-    this.events.subscribe("branch-switcher:change-branch", ({ branchName }) => {
+    this.events.subscribe("branch:change", ({ branchName }) => {
       this.setBranch(branchName);
     });
     this.clientId = options.clientId;
@@ -468,8 +468,8 @@ mutation addPendingDocumentMutation(
     const encodedBranch = encodeURIComponent(branchName);
     this.frontendUrl = ((_a = this.options.tinaioConfig) == null ? void 0 : _a.frontendUrlOverride) || "https://app.tina.io";
     this.identityApiUrl = ((_b = this.options.tinaioConfig) == null ? void 0 : _b.identityApiUrlOverride) || "https://identity.tinajs.io";
-    const contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
-    this.contentApiUrl = this.options.customContentApiUrl || `${contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
+    this.contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
+    this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
   }
   async requestWithForm(query, { variables }) {
     const schema = await this.getSchema();
@@ -534,28 +534,24 @@ mutation addPendingDocumentMutation(
       return null;
     }
   }
-  async listBranches({ owner, repo }) {
-    const url = `${this.contentApiUrl}/list_branches?owner=${owner}&repo=${repo}`;
-    try {
-      const res = await this.fetchWithToken(url, {
-        method: "GET"
-      });
-      return JSON.stringify(res);
-    } catch (e) {
-      console.error("There was an issue fetching the branch list.", e);
-      return null;
-    }
+  async listBranches() {
+    const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
+    const res = await this.fetchWithToken(url, {
+      method: "GET"
+    });
+    return res.json();
   }
-  async createBranch({ owner, repo, baseBranch, branchName }) {
-    const url = `${this.contentApiUrl}/create_branch`;
+  async createBranch({ baseBranch, branchName }) {
+    const url = `${this.contentApiBase}/github/${this.clientId}/create_branch`;
     try {
       const res = await this.fetchWithToken(url, {
         method: "POST",
         body: {
-          owner,
-          repo,
           baseBranch,
           branchName
+        },
+        headers: {
+          "Content-Type": "application/json"
         }
       });
       return JSON.stringify(res);
@@ -737,13 +733,15 @@ const AuthWallInner = ({
   }), showChildren ? children : loginScreen ? loginScreen : null);
 };
 const TinaCloudProvider = (props) => {
+  const baseBranch = props.branch || "main";
+  const [currentBranch, setCurrentBranch] = useLocalStorage("tinacms-current-branch", baseBranch);
   useTinaAuthRedirect();
   const cms = React.useMemo(() => props.cms || new TinaCMS({
     enabled: true,
     sidebar: true
   }), [props.cms]);
   if (!cms.api.tina) {
-    cms.api.tina = createClient(props);
+    cms.registerApi("tina", createClient(props));
   }
   const setupMedia = async () => {
     var _a;
@@ -759,45 +757,54 @@ const TinaCloudProvider = (props) => {
   const handleListBranches = async () => {
     const { owner, repo } = props;
     const branches = await cms.api.tina.listBranches({ owner, repo });
-    return branches.map((branch) => branch.name);
+    if (!Array.isArray(branches)) {
+      return [];
+    }
+    return branches;
   };
   const handleCreateBranch = async (data) => {
     const newBranch = await cms.api.tina.createBranch(data);
     return newBranch;
   };
   setupMedia();
-  const branchingEnabled = cms.flags.get("branch-switcher");
+  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]);
   React.useEffect(() => {
     let branchSwitcher;
     if (branchingEnabled) {
       branchSwitcher = new BranchSwitcherPlugin({
-        cms,
-        owner: props.owner,
-        repo: props.repo,
-        baseBranch: props.branch || "main",
-        currentBranch: props.branch || "main",
         listBranches: handleListBranches,
-        createBranch: handleCreateBranch,
-        setCurrentBranch: () => console.log(props.branch)
+        createBranch: handleCreateBranch
       });
       cms.plugins.add(branchSwitcher);
     }
     return () => {
-      if (!branchingEnabled) {
-        if (branchSwitcher) {
-          cms.plugins.remove(branchSwitcher);
-        }
+      if (branchingEnabled && branchSwitcher) {
+        cms.plugins.remove(branchSwitcher);
       }
     };
   }, [branchingEnabled, props.branch]);
-  if (props.cmsCallback) {
-    props.cmsCallback(cms);
-  }
-  return /* @__PURE__ */ React.createElement(TinaProvider, {
+  React.useEffect(() => {
+    if (props.cmsCallback) {
+      props.cmsCallback(cms);
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement(BranchDataProvider, {
+    currentBranch,
+    setCurrentBranch: (b) => {
+      setCurrentBranch(b);
+    }
+  }, /* @__PURE__ */ React.createElement(TinaProvider, {
     cms
   }, /* @__PURE__ */ React.createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
     cms
-  })));
+  }))));
 };
 const TinaCloudAuthWall = TinaCloudProvider;
 var DefaultContext = {
@@ -898,6 +905,7 @@ function useGraphqlForms({
   const [pendingReset, setPendingReset] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   const [newUpdate, setNewUpdate] = React.useState(null);
+  const { currentBranch } = useBranchData();
   const updateData = async () => {
     var _a;
     if (newUpdate) {
@@ -1108,7 +1116,7 @@ function useGraphqlForms({
         }
       });
     };
-  }, [queryString, JSON.stringify(variables)]);
+  }, [queryString, JSON.stringify(variables), currentBranch]);
   return [data, isLoading];
 }
 const transformDocumentIntoMutationRequestPayload = (document2, instructions) => {
@@ -1906,13 +1914,15 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
     includeCollection,
     includeTemplate
   });
-  await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
-      createDocument( 
+  await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+      createDocument(
+        collection: $collection, 
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
     variables: {
+      collection: collection.name,
       relativePath,
       params
     }
@@ -1986,19 +1996,21 @@ const GetDocument = ({
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document2));
 };
-const updateDocument = async (cms, relativePath, mutationInfo, values) => {
+const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
   const { includeCollection, includeTemplate } = mutationInfo;
   const params = transformDocumentIntoMutationRequestPayload(values, {
     includeCollection,
     includeTemplate
   });
-  await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
+  await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
       updateDocument( 
+        collection: $collection,
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
     variables: {
+      collection: collection.name,
       relativePath,
       params
     }
@@ -2023,7 +2035,7 @@ const CollectionUpdatePage = () => {
         fields: document2.form.fields,
         initialValues: document2.values,
         onSubmit: async (values) => {
-          await updateDocument(cms, relativePath, mutationInfo, values);
+          await updateDocument(cms, relativePath, collection, mutationInfo, values);
           history.push(`/admin/collections/${collection.name}`);
         }
       });

package/dist/index.js

@@ -397,6 +397,7 @@ var __objRest = (source, exclude) => {
   class Client {
     constructor(_a) {
       var _b = _a, { tokenStorage = "MEMORY" } = _b, options = __objRest(_b, ["tokenStorage"]);
+      this.events = new toolkit.EventBus();
       this.addPendingContent = async (props) => {
         const mutation = `#graphql
 mutation addPendingDocumentMutation(
@@ -437,8 +438,7 @@ mutation addPendingDocumentMutation(
       };
       this.options = options;
       this.setBranch(options.branch);
-      this.events = new toolkit.EventBus();
-      this.events.subscribe("branch-switcher:change-branch", ({ branchName }) => {
+      this.events.subscribe("branch:change", ({ branchName }) => {
         this.setBranch(branchName);
       });
       this.clientId = options.clientId;
@@ -489,8 +489,8 @@ mutation addPendingDocumentMutation(
       const encodedBranch = encodeURIComponent(branchName);
       this.frontendUrl = ((_a = this.options.tinaioConfig) == null ? void 0 : _a.frontendUrlOverride) || "https://app.tina.io";
       this.identityApiUrl = ((_b = this.options.tinaioConfig) == null ? void 0 : _b.identityApiUrlOverride) || "https://identity.tinajs.io";
-      const contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
-      this.contentApiUrl = this.options.customContentApiUrl || `${contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
+      this.contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
+      this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
     }
     async requestWithForm(query, { variables }) {
       const schema = await this.getSchema();
@@ -555,28 +555,24 @@ mutation addPendingDocumentMutation(
         return null;
       }
     }
-    async listBranches({ owner, repo }) {
-      const url = `${this.contentApiUrl}/list_branches?owner=${owner}&repo=${repo}`;
-      try {
-        const res = await this.fetchWithToken(url, {
-          method: "GET"
-        });
-        return JSON.stringify(res);
-      } catch (e) {
-        console.error("There was an issue fetching the branch list.", e);
-        return null;
-      }
+    async listBranches() {
+      const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
+      const res = await this.fetchWithToken(url, {
+        method: "GET"
+      });
+      return res.json();
     }
-    async createBranch({ owner, repo, baseBranch, branchName }) {
-      const url = `${this.contentApiUrl}/create_branch`;
+    async createBranch({ baseBranch, branchName }) {
+      const url = `${this.contentApiBase}/github/${this.clientId}/create_branch`;
       try {
         const res = await this.fetchWithToken(url, {
           method: "POST",
           body: {
-            owner,
-            repo,
             baseBranch,
             branchName
+          },
+          headers: {
+            "Content-Type": "application/json"
           }
         });
         return JSON.stringify(res);
@@ -758,13 +754,15 @@ mutation addPendingDocumentMutation(
     }), showChildren ? children : loginScreen ? loginScreen : null);
   };
   const TinaCloudProvider = (props) => {
+    const baseBranch = props.branch || "main";
+    const [currentBranch, setCurrentBranch] = toolkit.useLocalStorage("tinacms-current-branch", baseBranch);
     useTinaAuthRedirect();
     const cms = React__default["default"].useMemo(() => props.cms || new toolkit.TinaCMS({
       enabled: true,
       sidebar: true
     }), [props.cms]);
     if (!cms.api.tina) {
-      cms.api.tina = createClient(props);
+      cms.registerApi("tina", createClient(props));
     }
     const setupMedia = async () => {
       var _a;
@@ -780,45 +778,54 @@ mutation addPendingDocumentMutation(
     const handleListBranches = async () => {
       const { owner, repo } = props;
       const branches = await cms.api.tina.listBranches({ owner, repo });
-      return branches.map((branch) => branch.name);
+      if (!Array.isArray(branches)) {
+        return [];
+      }
+      return branches;
     };
     const handleCreateBranch = async (data) => {
       const newBranch = await cms.api.tina.createBranch(data);
       return newBranch;
     };
     setupMedia();
-    const branchingEnabled = cms.flags.get("branch-switcher");
+    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]);
     React__default["default"].useEffect(() => {
       let branchSwitcher;
       if (branchingEnabled) {
         branchSwitcher = new toolkit.BranchSwitcherPlugin({
-          cms,
-          owner: props.owner,
-          repo: props.repo,
-          baseBranch: props.branch || "main",
-          currentBranch: props.branch || "main",
           listBranches: handleListBranches,
-          createBranch: handleCreateBranch,
-          setCurrentBranch: () => console.log(props.branch)
+          createBranch: handleCreateBranch
         });
         cms.plugins.add(branchSwitcher);
       }
       return () => {
-        if (!branchingEnabled) {
-          if (branchSwitcher) {
-            cms.plugins.remove(branchSwitcher);
-          }
+        if (branchingEnabled && branchSwitcher) {
+          cms.plugins.remove(branchSwitcher);
         }
       };
     }, [branchingEnabled, props.branch]);
-    if (props.cmsCallback) {
-      props.cmsCallback(cms);
-    }
-    return /* @__PURE__ */ React__default["default"].createElement(toolkit.TinaProvider, {
+    React__default["default"].useEffect(() => {
+      if (props.cmsCallback) {
+        props.cmsCallback(cms);
+      }
+    }, []);
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.BranchDataProvider, {
+      currentBranch,
+      setCurrentBranch: (b) => {
+        setCurrentBranch(b);
+      }
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.TinaProvider, {
       cms
     }, /* @__PURE__ */ React__default["default"].createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
       cms
-    })));
+    }))));
   };
   const TinaCloudAuthWall = TinaCloudProvider;
   var DefaultContext = {
@@ -919,6 +926,7 @@ mutation addPendingDocumentMutation(
     const [pendingReset, setPendingReset] = React__default["default"].useState(null);
     const [isLoading, setIsLoading] = React__default["default"].useState(true);
     const [newUpdate, setNewUpdate] = React__default["default"].useState(null);
+    const { currentBranch } = toolkit.useBranchData();
     const updateData = async () => {
       var _a;
       if (newUpdate) {
@@ -1129,7 +1137,7 @@ mutation addPendingDocumentMutation(
           }
         });
       };
-    }, [queryString, JSON.stringify(variables)]);
+    }, [queryString, JSON.stringify(variables), currentBranch]);
     return [data, isLoading];
   }
   const transformDocumentIntoMutationRequestPayload = (document2, instructions) => {
@@ -1927,13 +1935,15 @@ This will work when developing locally but NOT when deployed to production.
       includeCollection,
       includeTemplate
     });
-    await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
-      createDocument( 
+    await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+      createDocument(
+        collection: $collection, 
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
       variables: {
+        collection: collection.name,
         relativePath,
         params
       }
@@ -2007,19 +2017,21 @@ This will work when developing locally but NOT when deployed to production.
     }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document2));
   };
-  const updateDocument = async (cms, relativePath, mutationInfo, values) => {
+  const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
     const { includeCollection, includeTemplate } = mutationInfo;
     const params = transformDocumentIntoMutationRequestPayload(values, {
       includeCollection,
       includeTemplate
     });
-    await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
+    await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
       updateDocument( 
+        collection: $collection,
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
       variables: {
+        collection: collection.name,
         relativePath,
         params
       }
@@ -2044,7 +2056,7 @@ This will work when developing locally but NOT when deployed to production.
           fields: document2.form.fields,
           initialValues: document2.values,
           onSubmit: async (values) => {
-            await updateDocument(cms, relativePath, mutationInfo, values);
+            await updateDocument(cms, relativePath, collection, mutationInfo, values);
             history.push(`/admin/collections/${collection.name}`);
           }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.58.1",
+  "version": "0.59.0",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -24,7 +24,7 @@
     "@graphql-codegen/typescript-operations": "^1.15.4",
     "@headlessui/react": "^1.4.1",
     "@heroicons/react": "^1.0.4",
-    "@tinacms/toolkit": "0.55.4",
+    "@tinacms/toolkit": "0.56.0",
     "@xstate/react": "^1.1.0",
     "codemirror": "^5.55.0",
     "cors": "^2.8.5",