tinacms 0.68.13 → 0.69.0

package/dist/admin/api.d.ts

@@ -25,7 +25,7 @@ export declare class TinaAdminApi {
         collection: string;
         relativePath: string;
     }): Promise<void>;
-    fetchCollection(collectionName: string, includeDocuments: boolean, after?: string): Promise<Collection>;
+    fetchCollection(collectionName: string, includeDocuments: boolean, after?: string, sortKey?: string, order?: 'asc' | 'desc'): Promise<Collection>;
     fetchDocument(collectionName: string, relativePath: string): Promise<{
         document: DocumentForm;
     }>;

package/dist/admin/components/GetCollection.d.ts

@@ -12,17 +12,19 @@ limitations under the License.
 */
 import type { TinaCMS } from '@tinacms/toolkit';
 import type { Collection } from '../types';
-export declare const useGetCollection: (cms: TinaCMS, collectionName: string, includeDocuments?: boolean, after?: string) => {
+export declare const useGetCollection: (cms: TinaCMS, collectionName: string, includeDocuments?: boolean, after?: string, sortKey?: string) => {
     collection: Collection;
     loading: boolean;
     error: Error;
     reFetchCollection: () => void;
+    collectionExtra: import("@tinacms/schema-tools").TinaCloudCollection<true>;
 };
-declare const GetCollection: ({ cms, collectionName, includeDocuments, startCursor, children, }: {
+declare const GetCollection: ({ cms, collectionName, includeDocuments, startCursor, sortKey, children, }: {
     cms: TinaCMS;
     collectionName: string;
     includeDocuments?: boolean;
     startCursor?: string;
+    sortKey?: string;
     children: any;
 }) => JSX.Element;
 export default GetCollection;

package/dist/client.es.js

@@ -36,9 +36,7 @@ class TinaClient {
     };
     this.apiUrl = url;
     this.readonlyToken = token;
-    if (queries) {
-      this.queries = queries(this);
-    }
+    this.queries = queries(this);
   }
   async request(args) {
     const headers = new Headers();
@@ -57,9 +55,18 @@ class TinaClient {
       body: bodyString,
       redirect: "follow"
     });
+    if (!res.ok) {
+      let additionalInfo = "";
+      if (res.status === 401) {
+        additionalInfo = "Please check that your client ID, URL and read only token are configured properly.";
+      }
+      throw new Error(`Server responded with status code ${res.status}, ${res.statusText}. ${additionalInfo ? additionalInfo : ""} Please see our FAQ for more information: https://tina.io/docs/errors/faq/`);
+    }
     const json = await res.json();
     if (json.errors) {
-      throw new Error(`Unable to fetch, errors: 
+      throw new Error(`Unable to fetch, please see our FAQ for more information: https://tina.io/docs/errors/faq/
+  
+        Errors: 
 	${json.errors.map((error) => error.message).join("\n")}`);
     }
     return {

package/dist/client.js

@@ -43,9 +43,7 @@
       };
       this.apiUrl = url;
       this.readonlyToken = token;
-      if (queries) {
-        this.queries = queries(this);
-      }
+      this.queries = queries(this);
     }
     async request(args) {
       const headers = new Headers();
@@ -64,9 +62,18 @@
         body: bodyString,
         redirect: "follow"
       });
+      if (!res.ok) {
+        let additionalInfo = "";
+        if (res.status === 401) {
+          additionalInfo = "Please check that your client ID, URL and read only token are configured properly.";
+        }
+        throw new Error(`Server responded with status code ${res.status}, ${res.statusText}. ${additionalInfo ? additionalInfo : ""} Please see our FAQ for more information: https://tina.io/docs/errors/faq/`);
+      }
       const json = await res.json();
       if (json.errors) {
-        throw new Error(`Unable to fetch, errors: 
+        throw new Error(`Unable to fetch, please see our FAQ for more information: https://tina.io/docs/errors/faq/
+  
+        Errors: 
 	${json.errors.map((error) => error.message).join("\n")}`);
       }
       return {

package/dist/index.d.ts

@@ -20,7 +20,8 @@ export * from '@tinacms/toolkit';
 export { TinaAdmin } from './admin';
 export { RouteMappingPlugin } from './admin/plugins/route-mapping';
 export { TinaAdminApi } from './admin/api';
-import { TinaCMSProvider2, TinaCMSProviderDefaultProps } from './tina-cms';
+import { TinaCMSProvider2 } from './tina-cms';
+import type { TinaCMSProviderDefaultProps } from './types/cms';
 export type { TinaCMSProviderDefaultProps };
 export default TinaCMSProvider2;
 import type { TinaCloudSchema as TinaCloudSchemaBase, TinaCloudCollection as TinaCloudCollectionBase, TinaCloudTemplateBase as TinaTemplate, TinaFieldBase } from '@tinacms/schema-tools';

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, OverflowMenu, CursorPaginator, PopupModal, 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, Select, OverflowMenu, CursorPaginator, PopupModal, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * 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";
@@ -2459,7 +2459,6 @@ class TinaAdminApi {
   constructor(cms) {
     this.api = cms.api.tina;
     this.schema = cms.api.tina.schema;
-    this.useDataLayer = cms.flags.get("experimentalData");
   }
   async isAuthenticated() {
     return await this.api.isAuthenticated();
@@ -2484,11 +2483,10 @@ class TinaAdminApi {
   }
 }`, { variables: { collection, relativePath } });
   }
-  async fetchCollection(collectionName, includeDocuments, after) {
+  async fetchCollection(collectionName, includeDocuments, after, sortKey, order) {
     if (includeDocuments === true) {
-      if (this.useDataLayer) {
-        const sort = this.schema.getIsTitleFieldName(collectionName);
-        const response = await this.api.request(`#graphql
+      const sort = sortKey || this.schema.getIsTitleFieldName(collectionName);
+      const response = order === "asc" ? await this.api.request(`#graphql
       query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String){
         collection(collection: $collection){
           name
@@ -2522,45 +2520,56 @@ class TinaAdminApi {
           }
         }
       }`, {
-          variables: {
-            collection: collectionName,
-            includeDocuments,
-            sort,
-            limit: 10,
-            after
-          }
-        });
-        return response.collection;
-      } else {
-        const response = await this.api.request(`#graphql
-    query($collection: String!, $includeDocuments: Boolean!){
-      collection(collection: $collection){
-        name
-        label
-        format
-        templates
-        documents @include(if: $includeDocuments) {
-          totalCount
-          edges {
-            node {
-              ... on Document {
-                _sys {
-                  template
-                  breadcrumbs
-                  path
-                  basename
-                  relativePath
-                  filename
-                  extension
+        variables: {
+          collection: collectionName,
+          includeDocuments,
+          sort,
+          limit: 10,
+          after
+        }
+      }) : await this.api.request(`#graphql
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String){
+        collection(collection: $collection){
+          name
+          label
+          format
+          templates
+          documents(sort: $sort, before: $after, last: $limit) @include(if: $includeDocuments) {
+            totalCount
+            pageInfo {
+              hasPreviousPage
+              hasNextPage
+              startCursor
+              endCursor
+            }
+            edges {
+              node {
+                ... on Document {
+                  _sys {
+                    title
+                    template
+                    breadcrumbs
+                    path
+                    basename
+                    relativePath
+                    filename
+                    extension
+                  }
                 }
               }
             }
           }
         }
-      }
-    }`, { variables: { collection: collectionName, includeDocuments } });
-        return response.collection;
-      }
+      }`, {
+        variables: {
+          collection: collectionName,
+          includeDocuments,
+          sort,
+          limit: 10,
+          after
+        }
+      });
+      return response.collection;
     } else {
       try {
         const collection = this.schema.getCollection(collectionName);
@@ -3312,6 +3321,9 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .gap-4 {
   gap: 16px;
 }
+.tina-tailwind .gap-2 {
+  gap: 8px;
+}
 .tina-tailwind .gap-3 {
   gap: 12px;
 }
@@ -3330,6 +3342,9 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
+.tina-tailwind .whitespace-normal {
+  white-space: normal;
+}
 .tina-tailwind .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -3451,8 +3466,8 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .pb-4 {
   padding-bottom: 16px;
 }
-.tina-tailwind .pt-18 {
-  padding-top: 72px;
+.tina-tailwind .pt-16 {
+  padding-top: 64px;
 }
 .tina-tailwind .pt-3 {
   padding-top: 12px;
@@ -3496,6 +3511,9 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .font-medium {
   font-weight: 500;
 }
+.tina-tailwind .font-semibold {
+  font-weight: 600;
+}
 .tina-tailwind .uppercase {
   text-transform: uppercase;
 }
@@ -3998,16 +4016,18 @@ const TinaCMSProvider2 = ({
   ...props
 }) => {
   var _a;
-  const validOldSetup = new Boolean(props == null ? void 0 : props.isLocalClient) || new Boolean(props == null ? void 0 : props.clientId) && new Boolean(props == null ? void 0 : props.branch);
-  const apiURL = ((_a = props == null ? void 0 : props.client) == null ? void 0 : _a.apiUrl) || (props == null ? void 0 : props.apiURL);
-  if (!apiURL && !validOldSetup) {
-    throw new Error(`Must provide apiUrl or a client to the TinaWrapper component`);
+  if (props == null ? void 0 : props.apiURL) {
+    console.warn("The apiURL prop is deprecated. Please see https://tina.io/blog/tina-v-0.68.14 for information on how to upgrade to the new API");
   }
+  const apiURL = ((_a = props == null ? void 0 : props.client) == null ? void 0 : _a.apiUrl) || (props == null ? void 0 : props.apiURL);
   const { branch, clientId, isLocalClient } = apiURL ? parseURL(apiURL) : {
     branch: props.branch,
     clientId: props.clientId,
-    isLocalClient: props.isLocalClient
+    isLocalClient: props == null ? void 0 : props.isLocalClient
   };
+  if (typeof isLocalClient === "undefined" || !isLocalClient && (!branch || !clientId)) {
+    throw new Error("Invalid setup. See https://tina.io/docs/tina-cloud/connecting-site/ for more information.");
+  }
   if (!schema) {
     throw new Error("`schema` is required to be passed as a property to `TinaProvider`.  You can learn more about this change here: https://github.com/tinacms/tinacms/pull/2823");
   }
@@ -4590,7 +4610,7 @@ const PageHeader = ({
   isLocalMode,
   children
 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
-  className: "bg-white pb-4 pt-18 border-b border-gray-200 px-12"
+  className: "bg-white pb-4 pt-16 border-b border-gray-200 px-12"
 }, /* @__PURE__ */ React.createElement("div", {
   className: "w-full mx-auto max-w-screen-xl"
 }, /* @__PURE__ */ React.createElement("div", {
@@ -4717,8 +4737,10 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
     fontWeight: "normal"
   }
 }, "Please wait, Tina is loading data..."))));
-const useGetCollection = (cms, collectionName, includeDocuments = true, after = "") => {
+const useGetCollection = (cms, collectionName, includeDocuments = true, after = "", sortKey) => {
   const api = new TinaAdminApi(cms);
+  const schema = cms.api.tina.schema;
+  const collectionExtra = schema.getCollection(collectionName);
   const [collection, setCollection] = useState(void 0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(void 0);
@@ -4726,8 +4748,10 @@ const useGetCollection = (cms, collectionName, includeDocuments = true, after =
   useEffect(() => {
     const fetchCollection = async () => {
       if (await api.isAuthenticated()) {
+        const { name, order } = JSON.parse(sortKey || "{}");
+        const validSortKey = collectionExtra.fields.map((x) => x.name).includes(name) ? name : void 0;
         try {
-          const collection2 = await api.fetchCollection(collectionName, includeDocuments, after);
+          const collection2 = await api.fetchCollection(collectionName, includeDocuments, after, validSortKey, order);
           setCollection(collection2);
         } catch (error2) {
           cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`, 30 * 1e3);
@@ -4740,26 +4764,29 @@ const useGetCollection = (cms, collectionName, includeDocuments = true, after =
     };
     setLoading(true);
     fetchCollection();
-  }, [cms, collectionName, resetState, after]);
+  }, [cms, collectionName, resetState, after, sortKey]);
   const reFetchCollection = () => setResetSate((x) => x + 1);
-  return { collection, loading, error, reFetchCollection };
+  return { collection, loading, error, reFetchCollection, collectionExtra };
 };
 const GetCollection = ({
   cms,
   collectionName,
   includeDocuments = true,
   startCursor,
+  sortKey,
   children
 }) => {
-  const { collection, loading, error, reFetchCollection } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "");
+  const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "", sortKey) || {};
   if (error) {
     return null;
   }
   if (loading) {
     return /* @__PURE__ */ React.createElement(LoadingPage, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection, collectionExtra));
 };
+const LOCAL_STORAGE_KEY = "tinacms.admin.collection.list.page";
+const isSSR = typeof window === "undefined";
 const TemplateMenu = ({ templates }) => {
   return /* @__PURE__ */ React.createElement(Menu, {
     as: "div",
@@ -4808,8 +4835,17 @@ const CollectionListPage = () => {
   });
   const [endCursor, setEndCursor] = useState("");
   const [prevCursors, setPrevCursors] = useState([]);
+  const [sortKey, setSortKey] = useState(isSSR ? "" : window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
+    order: "asc",
+    name: ""
+  }));
+  const [sortOrder, setSortOrder] = useState("asc");
   const loc = useLocation();
   useEffect(() => {
+    setSortKey(window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
+      order: "asc",
+      name: ""
+    }));
     setEndCursor("");
     setPrevCursors([]);
   }, [loc]);
@@ -4818,14 +4854,15 @@ const CollectionListPage = () => {
       cms,
       collectionName,
       includeDocuments: true,
-      startCursor: endCursor
-    }, (collection, _loading, reFetchCollection) => {
+      startCursor: endCursor,
+      sortKey
+    }, (collection, _loading, reFetchCollection, collectionExtra) => {
       var _a, _b;
       const totalCount = collection.documents.totalCount;
       const documents = collection.documents.edges;
       const admin = cms.api.admin;
       const pageInfo = collection.documents.pageInfo;
-      const useDataFlag = cms.flags.get("experimentalData");
+      const fields = collectionExtra.fields.filter((x) => ["string", "number", "datetime"].includes(x.type));
       return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, open && /* @__PURE__ */ React.createElement(DeleteModal, {
         filename: vars.relativePath,
         deleteFunc: async () => {
@@ -4842,9 +4879,56 @@ const CollectionListPage = () => {
         close: () => setOpen(false)
       }), /* @__PURE__ */ React.createElement(PageHeader, {
         isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
-      }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", {
+      }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-col gap-4"
+      }, /* @__PURE__ */ React.createElement("h3", {
         className: "font-sans text-2xl text-gray-700"
-      }, collection.label ? collection.label : collection.name), !collection.templates && /* @__PURE__ */ React.createElement(Link, {
+      }, collection.label ? collection.label : collection.name), fields.length > 0 && /* @__PURE__ */ React.createElement("div", {
+        className: "flex gap-2 items-center"
+      }, /* @__PURE__ */ React.createElement("label", {
+        htmlFor: "sort",
+        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+      }, "Sort by"), /* @__PURE__ */ React.createElement(Select, {
+        name: "sort",
+        options: [
+          {
+            label: "Default",
+            value: JSON.stringify({
+              order: "asc",
+              name: ""
+            })
+          },
+          ...fields.map((x) => [
+            {
+              label: x.label + " (Ascending)",
+              value: JSON.stringify({
+                name: x.name,
+                order: "asc"
+              })
+            },
+            {
+              label: x.label + " (Descending)",
+              value: JSON.stringify({
+                name: x.name,
+                order: "desc"
+              })
+            }
+          ]).flat()
+        ],
+        input: {
+          id: "sort",
+          name: "sort",
+          value: sortKey,
+          onChange: (e) => {
+            const val = JSON.parse(e.target.value);
+            setEndCursor("");
+            setPrevCursors([]);
+            window == null ? void 0 : window.localStorage.setItem(`${LOCAL_STORAGE_KEY}.${collectionName}`, e.target.value);
+            setSortKey(e.target.value);
+            setSortOrder(val.order);
+          }
+        }
+      }))), !collection.templates && /* @__PURE__ */ React.createElement(Link, {
         to: `new`,
         className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
       }, "Create New", " ", /* @__PURE__ */ React.createElement(BiPlus, {
@@ -4928,11 +5012,11 @@ const CollectionListPage = () => {
             }
           ]
         })));
-      }))), useDataFlag && /* @__PURE__ */ React.createElement("div", {
+      }))), /* @__PURE__ */ React.createElement("div", {
         className: "pt-3"
       }, /* @__PURE__ */ React.createElement(CursorPaginator, {
         variant: "white",
-        hasNext: pageInfo == null ? void 0 : pageInfo.hasNextPage,
+        hasNext: sortOrder === "asc" ? pageInfo == null ? void 0 : pageInfo.hasNextPage : pageInfo.hasPreviousPage,
         navigateNext: () => {
           const newState = [...prevCursors, endCursor];
           setPrevCursors(newState);
@@ -5270,9 +5354,9 @@ const Redirect = () => {
   return null;
 };
 const TinaAdmin = () => {
-  const isSSR = typeof window === "undefined";
+  const isSSR2 = typeof window === "undefined";
   const { edit } = useEditState();
-  if (isSSR) {
+  if (isSSR2) {
     return null;
   }
   if (!edit) {