tinacms 1.1.3 → 1.1.4

package/dist/admin/api.d.ts

@@ -21,6 +21,11 @@ export declare class TinaAdminApi {
     constructor(cms: TinaCMS);
     isAuthenticated(): Promise<boolean>;
     fetchCollections(): import("@tinacms/schema-tools").TinaCloudCollection<true>[];
+    renameDocument({ collection, relativePath, newRelativePath }: {
+        collection: any;
+        relativePath: any;
+        newRelativePath: any;
+    }): Promise<void>;
     deleteDocument({ collection, relativePath, }: {
         collection: string;
         relativePath: string;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, Nav, LocalWarning, BillingWarning, Select, OverflowMenu, CursorPaginator, PopupModal, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, Nav, LocalWarning, BillingWarning, Select, OverflowMenu, CursorPaginator, PopupModal, BaseTextField, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 export { MdxFieldPluginExtendible } from "@tinacms/toolkit";
 import * as G from "graphql";
@@ -556,7 +556,7 @@ const buildForm = (doc, cms, formify2, showInSidebar = false, onSubmit) => {
         });
         const variables = { params };
         const mutationString = `#graphql
-          mutation UpdateDocument($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+          mutation UpdateDocument($collection: String!, $relativePath: String!, $params: DocumentUpdateMutation!) {
             updateDocument(collection: $collection, relativePath: $relativePath, params: $params) {
               __typename
             }
@@ -2530,6 +2530,15 @@ class TinaAdminApi {
   fetchCollections() {
     return this.schema.getCollections();
   }
+  async renameDocument({ collection, relativePath, newRelativePath }) {
+    await this.api.request(`#graphql
+              mutation RenameDocument($collection: String!, $relativePath: String! $newRelativePath: String!) {
+                updateDocument(collection: $collection, relativePath: $relativePath, params: {relativePath: $newRelativePath}){
+    __typename
+  }
+              }
+            `, { variables: { collection, relativePath, newRelativePath } });
+  }
   async deleteDocument({
     collection,
     relativePath
@@ -2668,7 +2677,7 @@ class TinaAdminApi {
   }
   async updateDocument(collectionName, relativePath, params) {
     const response = await this.api.request(`#graphql
-      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+      mutation($collection: String!, $relativePath: String!, $params: DocumentUpdateMutation!) {
         updateDocument(
           collection: $collection,
           relativePath: $relativePath,
@@ -3240,6 +3249,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .mt-2 {
   margin-top: 8px;
 }
+.tina-tailwind .mb-4 {
+  margin-bottom: 16px;
+}
 .tina-tailwind .mr-1\\.5 {
   margin-right: 6px;
 }
@@ -4537,6 +4549,9 @@ function BiMenu(props) {
 function BiPlus(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
 }
+function BiRename(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20.005 5.995h-1v2h1v8h-1v2h1c1.103 0 2-.897 2-2v-8c0-1.102-.898-2-2-2zm-14 4H15v4H6.005z" } }, { "tag": "path", "attr": { "d": "M17.005 17.995V4H20V2h-8v2h3.005v1.995h-11c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h11V20H12v2h8v-2h-2.995v-2.005zm-13-2v-8h11v8h-11z" } }] })(props);
+}
 function BiTrash(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
 }
@@ -5032,10 +5047,12 @@ const handleNavigate = (navigate, cms, collection, collectionDefinition, documen
 const CollectionListPage = () => {
   const navigate = useNavigate();
   const { collectionName } = useParams();
-  const [open, setOpen] = React.useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
+  const [renameModalOpen, setRenameModalOpen] = React.useState(false);
   const [vars, setVars] = React.useState({
     collection: collectionName,
-    relativePath: ""
+    relativePath: "",
+    newRelativePath: ""
   });
   const [endCursor, setEndCursor] = useState("");
   const [prevCursors, setPrevCursors] = useState([]);
@@ -5070,7 +5087,7 @@ const CollectionListPage = () => {
       const collectionDefinition = cms.api.tina.schema.getCollection(collection.name);
       const allowCreate = (_d = (_c = (_b = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _b.allowedActions) == null ? void 0 : _c.create) != null ? _d : true;
       const allowDelete = (_g = (_f = (_e = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _e.allowedActions) == null ? void 0 : _f.delete) != null ? _g : true;
-      return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, open && /* @__PURE__ */ React.createElement(DeleteModal, {
+      return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, deleteModalOpen && /* @__PURE__ */ React.createElement(DeleteModal, {
         filename: vars.relativePath,
         deleteFunc: async () => {
           try {
@@ -5083,7 +5100,32 @@ const CollectionListPage = () => {
             throw error;
           }
         },
-        close: () => setOpen(false)
+        close: () => setDeleteModalOpen(false)
+      }), renameModalOpen && /* @__PURE__ */ React.createElement(RenameModal, {
+        filename: vars.relativePath,
+        newRelativePath: vars.newRelativePath,
+        setNewRelativePath: (newRelativePath) => {
+          setVars((vars2) => {
+            return { ...vars2, newRelativePath };
+          });
+        },
+        renameFunc: async () => {
+          const newRelativePath = `${vars.newRelativePath}.${collection.format}`;
+          try {
+            await admin.renameDocument({
+              collection: vars.collection,
+              relativePath: vars.relativePath,
+              newRelativePath
+            });
+            cms.alerts.info("Document was successfully renamed");
+            reFetchCollection();
+          } catch (error) {
+            cms.alerts.warn("Document was not renamed, ask a developer for help or check the console for an error message");
+            console.error(error);
+            throw error;
+          }
+        },
+        close: () => setRenameModalOpen(false)
       }), /* @__PURE__ */ React.createElement(PageHeader, {
         isLocalMode: (_i = (_h = cms == null ? void 0 : cms.api) == null ? void 0 : _h.tina) == null ? void 0 : _i.isLocalMode
       }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
@@ -5216,9 +5258,26 @@ const CollectionListPage = () => {
               onMouseDown: () => {
                 setVars({
                   collection: collectionName,
-                  relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension
+                  relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension,
+                  newRelativePath: ""
                 });
-                setOpen(true);
+                setDeleteModalOpen(true);
+              }
+            },
+            allowDelete && {
+              name: "rename",
+              label: "Rename",
+              Icon: /* @__PURE__ */ React.createElement(BiRename, {
+                size: "1.3rem",
+                className: "text-red-500"
+              }),
+              onMouseDown: () => {
+                setVars({
+                  collection: collectionName,
+                  relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension,
+                  newRelativePath: ""
+                });
+                setRenameModalOpen(true);
               }
             }
           ].filter(Boolean)
@@ -5263,6 +5322,35 @@ const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
     }
   }, "Delete"))));
 };
+const RenameModal = ({
+  close: close2,
+  renameFunc,
+  filename,
+  newRelativePath,
+  setNewRelativePath
+}) => {
+  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, {
+    close: close2
+  }, "Rename ", filename), /* @__PURE__ */ React.createElement(ModalBody, {
+    padded: true
+  }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
+    className: "mb-4"
+  }, "Are you sure you want to rename ", /* @__PURE__ */ React.createElement("strong", null, filename), "? TinaCMS uses the filename as the ID; renaming this file could result in unresolved references."), /* @__PURE__ */ React.createElement(BaseTextField, {
+    placeholder: "Enter a new name for the document's file",
+    value: newRelativePath,
+    onChange: (event) => setNewRelativePath(event.target.value)
+  }))), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button, {
+    style: { flexGrow: 2 },
+    onClick: close2
+  }, "Cancel"), /* @__PURE__ */ React.createElement(Button, {
+    style: { flexGrow: 3 },
+    variant: "primary",
+    onClick: async () => {
+      await renameFunc();
+      close2();
+    }
+  }, "Rename"))));
+};
 function HiChevronRight(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
 }

package/dist/index.js

@@ -572,7 +572,7 @@
           });
           const variables = { params };
           const mutationString = `#graphql
-          mutation UpdateDocument($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+          mutation UpdateDocument($collection: String!, $relativePath: String!, $params: DocumentUpdateMutation!) {
             updateDocument(collection: $collection, relativePath: $relativePath, params: $params) {
               __typename
             }
@@ -2546,6 +2546,15 @@ mutation addPendingDocumentMutation(
     fetchCollections() {
       return this.schema.getCollections();
     }
+    async renameDocument({ collection, relativePath, newRelativePath }) {
+      await this.api.request(`#graphql
+              mutation RenameDocument($collection: String!, $relativePath: String! $newRelativePath: String!) {
+                updateDocument(collection: $collection, relativePath: $relativePath, params: {relativePath: $newRelativePath}){
+    __typename
+  }
+              }
+            `, { variables: { collection, relativePath, newRelativePath } });
+    }
     async deleteDocument({
       collection,
       relativePath
@@ -2684,7 +2693,7 @@ mutation addPendingDocumentMutation(
     }
     async updateDocument(collectionName, relativePath, params) {
       const response = await this.api.request(`#graphql
-      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+      mutation($collection: String!, $relativePath: String!, $params: DocumentUpdateMutation!) {
         updateDocument(
           collection: $collection,
           relativePath: $relativePath,
@@ -3256,6 +3265,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .mt-2 {
   margin-top: 8px;
 }
+.tina-tailwind .mb-4 {
+  margin-bottom: 16px;
+}
 .tina-tailwind .mr-1\\.5 {
   margin-right: 6px;
 }
@@ -4553,6 +4565,9 @@ This will work when developing locally but NOT when deployed to production.
   function BiPlus(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
   }
+  function BiRename(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20.005 5.995h-1v2h1v8h-1v2h1c1.103 0 2-.897 2-2v-8c0-1.102-.898-2-2-2zm-14 4H15v4H6.005z" } }, { "tag": "path", "attr": { "d": "M17.005 17.995V4H20V2h-8v2h3.005v1.995h-11c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h11V20H12v2h8v-2h-2.995v-2.005zm-13-2v-8h11v8h-11z" } }] })(props);
+  }
   function BiTrash(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
   }
@@ -5048,10 +5063,12 @@ This will work when developing locally but NOT when deployed to production.
   const CollectionListPage = () => {
     const navigate = reactRouterDom.useNavigate();
     const { collectionName } = reactRouterDom.useParams();
-    const [open, setOpen] = React__default["default"].useState(false);
+    const [deleteModalOpen, setDeleteModalOpen] = React__default["default"].useState(false);
+    const [renameModalOpen, setRenameModalOpen] = React__default["default"].useState(false);
     const [vars, setVars] = React__default["default"].useState({
       collection: collectionName,
-      relativePath: ""
+      relativePath: "",
+      newRelativePath: ""
     });
     const [endCursor, setEndCursor] = React.useState("");
     const [prevCursors, setPrevCursors] = React.useState([]);
@@ -5086,7 +5103,7 @@ This will work when developing locally but NOT when deployed to production.
         const collectionDefinition = cms.api.tina.schema.getCollection(collection.name);
         const allowCreate = (_d = (_c = (_b = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _b.allowedActions) == null ? void 0 : _c.create) != null ? _d : true;
         const allowDelete = (_g = (_f = (_e = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _e.allowedActions) == null ? void 0 : _f.delete) != null ? _g : true;
-        return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, open && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
+        return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
           filename: vars.relativePath,
           deleteFunc: async () => {
             try {
@@ -5099,7 +5116,32 @@ This will work when developing locally but NOT when deployed to production.
               throw error;
             }
           },
-          close: () => setOpen(false)
+          close: () => setDeleteModalOpen(false)
+        }), renameModalOpen && /* @__PURE__ */ React__default["default"].createElement(RenameModal, {
+          filename: vars.relativePath,
+          newRelativePath: vars.newRelativePath,
+          setNewRelativePath: (newRelativePath) => {
+            setVars((vars2) => {
+              return { ...vars2, newRelativePath };
+            });
+          },
+          renameFunc: async () => {
+            const newRelativePath = `${vars.newRelativePath}.${collection.format}`;
+            try {
+              await admin.renameDocument({
+                collection: vars.collection,
+                relativePath: vars.relativePath,
+                newRelativePath
+              });
+              cms.alerts.info("Document was successfully renamed");
+              reFetchCollection();
+            } catch (error) {
+              cms.alerts.warn("Document was not renamed, ask a developer for help or check the console for an error message");
+              console.error(error);
+              throw error;
+            }
+          },
+          close: () => setRenameModalOpen(false)
         }), /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
           isLocalMode: (_i = (_h = cms == null ? void 0 : cms.api) == null ? void 0 : _h.tina) == null ? void 0 : _i.isLocalMode
         }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -5232,9 +5274,26 @@ This will work when developing locally but NOT when deployed to production.
                 onMouseDown: () => {
                   setVars({
                     collection: collectionName,
-                    relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension
+                    relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension,
+                    newRelativePath: ""
                   });
-                  setOpen(true);
+                  setDeleteModalOpen(true);
+                }
+              },
+              allowDelete && {
+                name: "rename",
+                label: "Rename",
+                Icon: /* @__PURE__ */ React__default["default"].createElement(BiRename, {
+                  size: "1.3rem",
+                  className: "text-red-500"
+                }),
+                onMouseDown: () => {
+                  setVars({
+                    collection: collectionName,
+                    relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension,
+                    newRelativePath: ""
+                  });
+                  setRenameModalOpen(true);
                 }
               }
             ].filter(Boolean)
@@ -5279,6 +5338,35 @@ This will work when developing locally but NOT when deployed to production.
       }
     }, "Delete"))));
   };
+  const RenameModal = ({
+    close: close2,
+    renameFunc,
+    filename,
+    newRelativePath,
+    setNewRelativePath
+  }) => {
+    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
+    }, "Rename ", filename), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalBody, {
+      padded: true
+    }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("p", {
+      className: "mb-4"
+    }, "Are you sure you want to rename ", /* @__PURE__ */ React__default["default"].createElement("strong", null, filename), "? TinaCMS uses the filename as the ID; renaming this file could result in unresolved references."), /* @__PURE__ */ React__default["default"].createElement(toolkit.BaseTextField, {
+      placeholder: "Enter a new name for the document's file",
+      value: newRelativePath,
+      onChange: (event) => setNewRelativePath(event.target.value)
+    }))), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalActions, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      style: { flexGrow: 2 },
+      onClick: close2
+    }, "Cancel"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      style: { flexGrow: 3 },
+      variant: "primary",
+      onClick: async () => {
+        await renameFunc();
+        close2();
+      }
+    }, "Rename"))));
+  };
   function HiChevronRight(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
   }

package/dist/style.css

@@ -399,6 +399,9 @@
 .tina-tailwind .mt-2 {
   margin-top: 8px;
 }
+.tina-tailwind .mb-4 {
+  margin-bottom: 16px;
+}
 .tina-tailwind .mr-1\.5 {
   margin-right: 6px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -55,9 +55,9 @@
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@react-hook/window-size": "^3.0.7",
-    "@tinacms/schema-tools": "1.2.0",
+    "@tinacms/schema-tools": "1.2.1",
     "@tinacms/sharedctx": "1.0.0",
-    "@tinacms/toolkit": "1.2.1",
+    "@tinacms/toolkit": "1.3.0",
     "crypto-js": "^4.0.0",
     "encoding": "0.1.13",
     "fetch-ponyfill": "^7.1.0",