tinacms 1.5.7 → 1.5.9

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, useCMS, Nav, BranchBanner, LocalWarning, BillingWarning, Select, Input, ReactDateTimeWithStyles, textFieldClasses, Toggle, OverflowMenu, CursorPaginator, PopupModal, BaseTextField, Form, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, useCMS, Nav, BranchBanner, LocalWarning, BillingWarning, Select, Message, OverflowMenu, CursorPaginator, Input, PopupModal, BaseTextField, Form, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 export { MdxFieldPluginExtendible } from "@tinacms/toolkit";
 import { getIntrospectionQuery, buildClientSchema, print, parse, buildSchema } from "graphql";
@@ -39,6 +39,152 @@ const authenticate = (clientId, frontendUrl) => {
     authTab = popupWindow(`${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`, "_blank", window, 1e3, 700);
   });
 };
+class StringBuilder {
+  constructor(limit) {
+    this.length = 0;
+    this.buffer = [];
+    this.limit = limit;
+  }
+  append(str) {
+    if (this.length + str.length > this.limit) {
+      return true;
+    } else {
+      this.buffer.push(str);
+      this.length += str.length;
+      if (this.length > this.limit) {
+        return true;
+      }
+      return false;
+    }
+  }
+  toString() {
+    return this.buffer.join(" ");
+  }
+}
+const extractText = (data, acc, indexableNodeTypes) => {
+  var _a, _b;
+  if (data) {
+    if (indexableNodeTypes.indexOf(data.type) !== -1 && (data.text || data.value)) {
+      const tokens = tokenizeString(data.text || data.value);
+      for (const token of tokens) {
+        if (acc.append(token)) {
+          return;
+        }
+      }
+    }
+    (_b = (_a = data.children) == null ? void 0 : _a.forEach) == null ? void 0 : _b.call(_a, (child) => extractText(child, acc, indexableNodeTypes));
+  }
+};
+const relativePath = (path, collection) => {
+  return path.replace(/\\/g, "/").replace(collection.path, "").replace(/^\/|\/$/g, "");
+};
+const tokenizeString = (str) => {
+  return str.split(/[\s\.,]+/).map((s) => s.toLowerCase()).filter((s) => s);
+};
+const processTextFieldValue = (value, maxLen) => {
+  const tokens = tokenizeString(value);
+  const builder = new StringBuilder(maxLen);
+  for (const part of tokens) {
+    if (builder.append(part)) {
+      break;
+    }
+  }
+  return builder.toString();
+};
+const processDocumentForIndexing = (data, path, collection, textIndexLength, field) => {
+  if (!field) {
+    const relPath = relativePath(path, collection);
+    data["_id"] = `${collection.name}:${relPath}`;
+    data["_relativePath"] = relPath;
+  }
+  for (const f of collection.fields || (field == null ? void 0 : field.fields) || []) {
+    if (!f.searchable) {
+      delete data[f.name];
+      continue;
+    }
+    const isList = f.list;
+    if (data[f.name]) {
+      if (f.type === "object") {
+        if (isList) {
+          data[f.name] = data[f.name].map((obj) => processDocumentForIndexing(obj, path, collection, textIndexLength, f));
+        } else {
+          data[f.name] = processDocumentForIndexing(data[f.name], path, collection, textIndexLength, f);
+        }
+      } else if (f.type === "string") {
+        const fieldTextIndexLength = f.maxSearchIndexFieldLength || textIndexLength;
+        if (isList) {
+          data[f.name] = data[f.name].map((value) => processTextFieldValue(value, fieldTextIndexLength));
+        } else {
+          data[f.name] = processTextFieldValue(data[f.name], fieldTextIndexLength);
+        }
+      } else if (f.type === "rich-text") {
+        const fieldTextIndexLength = f.maxSearchIndexFieldLength || textIndexLength;
+        if (isList) {
+          data[f.name] = data[f.name].map((value) => {
+            const acc = new StringBuilder(fieldTextIndexLength);
+            extractText(value, acc, ["text", "code_block", "html"]);
+            return acc.toString();
+          });
+        } else {
+          const acc = new StringBuilder(fieldTextIndexLength);
+          extractText(data[f.name], acc, ["text", "code_block", "html"]);
+          data[f.name] = acc.toString();
+        }
+      }
+    }
+  }
+  return data;
+};
+const queryToSearchIndexQuery = (query) => {
+  let q;
+  const parts = query.split(" ");
+  if (parts.length === 1) {
+    q = { AND: [parts[0]] };
+  } else {
+    q = { AND: parts.filter((part) => part.toLowerCase() !== "and") };
+  }
+  return q;
+};
+const optionsToSearchIndexOptions = (options) => {
+  const opt = {};
+  if (options == null ? void 0 : options.limit) {
+    opt["PAGE"] = {
+      SIZE: options.limit,
+      NUMBER: (options == null ? void 0 : options.cursor) ? parseInt(options.cursor) : 0
+    };
+  }
+  return opt;
+};
+const parseSearchIndexResponse = (data, options) => {
+  const results = data["RESULT"];
+  const total = data["RESULT_LENGTH"];
+  if ((options == null ? void 0 : options.cursor) && (options == null ? void 0 : options.limit)) {
+    const prevCursor = options.cursor === "0" ? null : (parseInt(options.cursor) - 1).toString();
+    const nextCursor = total <= (parseInt(options.cursor) + 1) * options.limit ? null : (parseInt(options.cursor) + 1).toString();
+    return {
+      results,
+      total,
+      prevCursor,
+      nextCursor
+    };
+  } else if (!(options == null ? void 0 : options.cursor) && (options == null ? void 0 : options.limit)) {
+    const prevCursor = null;
+    const nextCursor = total <= options.limit ? null : "1";
+    return {
+      results,
+      total,
+      prevCursor,
+      nextCursor
+    };
+  } else {
+    return {
+      results,
+      total,
+      prevCursor: null,
+      nextCursor: null
+    };
+  }
+};
 const captureBranchName = /^refs\/heads\/(.*)/;
 const parseRefForBranchName = (ref) => {
   const matches = ref.match(captureBranchName);
@@ -217,6 +363,9 @@ mutation addPendingDocumentMutation(
     this.contentApiBase = ((_d = this.options.tinaioConfig) == null ? void 0 : _d.contentApiUrlOverride) || `https://content.tinajs.io`;
     this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/${this.tinaGraphQLVersion}/content/${this.options.clientId}/github/${encodedBranch}`;
   }
+  getBranch() {
+    return this.branch;
+  }
   async request(query, { variables }) {
     const token = await this.getToken();
     const headers = {
@@ -502,6 +651,62 @@ class LocalClient extends Client {
     return localStorage.getItem(LOCAL_CLIENT_KEY) === "true";
   }
 }
+class TinaCMSSearchClient {
+  constructor(client) {
+    this.client = client;
+  }
+  async query(query, options) {
+    const q = queryToSearchIndexQuery(query);
+    const opt = optionsToSearchIndexOptions(options);
+    const optionsParam = opt["PAGE"] ? `&options=${JSON.stringify(opt)}` : "";
+    const res = await this.client.fetchWithToken(`${this.client.contentApiBase}/searchIndex/${this.client.clientId}/${this.client.getBranch()}?q=${JSON.stringify(q)}${optionsParam}`);
+    return parseSearchIndexResponse(await res.json(), options);
+  }
+  async del(ids) {
+    const res = await this.client.fetchWithToken(`${this.client.contentApiBase}/searchIndex/${this.client.clientId}/${this.client.getBranch()}?ids=${ids.join(",")}`, {
+      method: "DELETE"
+    });
+    if (res.status !== 200) {
+      throw new Error("Failed to update search index");
+    }
+  }
+  async put(docs) {
+    const res = await this.client.fetchWithToken(`${this.client.contentApiBase}/searchIndex/${this.client.clientId}/${this.client.getBranch()}`, {
+      method: "POST",
+      body: JSON.stringify({ docs }),
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (res.status !== 200) {
+      throw new Error("Failed to update search index");
+    }
+  }
+  supportsClientSideIndexing() {
+    return true;
+  }
+}
+class LocalSearchClient {
+  constructor(client) {
+    this.client = client;
+  }
+  async query(query, options) {
+    const q = queryToSearchIndexQuery(query);
+    const opt = optionsToSearchIndexOptions(options);
+    const optionsParam = opt["PAGE"] ? `&options=${JSON.stringify(opt)}` : "";
+    const res = await this.client.fetchWithToken(`http://localhost:4001/searchIndex?q=${JSON.stringify(q)}${optionsParam}`);
+    return parseSearchIndexResponse(await res.json(), options);
+  }
+  del(ids) {
+    return Promise.resolve(void 0);
+  }
+  put(docs) {
+    return Promise.resolve(void 0);
+  }
+  supportsClientSideIndexing() {
+    return false;
+  }
+}
 function ModalBuilder(modalProps) {
   return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React.createElement(ModalBody, {
     padded: true
@@ -586,8 +791,14 @@ function safeAssertShape(value, yupSchema) {
 }
 class TinaAdminApi {
   constructor(cms) {
+    var _a, _b, _c, _d;
+    this.maxSearchIndexFieldLength = 100;
     this.api = cms.api.tina;
     this.schema = cms.api.tina.schema;
+    if (cms.api.search && ((_a = cms.api.search) == null ? void 0 : _a.supportsClientSideIndexing())) {
+      this.searchClient = cms.api.searchClient;
+      this.maxSearchIndexFieldLength = ((_d = (_c = (_b = this.schema.config) == null ? void 0 : _b.config) == null ? void 0 : _c.search) == null ? void 0 : _d.maxSearchIndexFieldLength) || 100;
+    }
   }
   async isAuthenticated() {
     return await this.api.isAuthenticated();
@@ -606,25 +817,33 @@ class TinaAdminApi {
   fetchCollections() {
     return this.schema.getCollections();
   }
-  async renameDocument({ collection, relativePath, newRelativePath }) {
+  async renameDocument({ collection, relativePath: relativePath2, 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 } });
+            `, { variables: { collection, relativePath: relativePath2, newRelativePath } });
+    if (this.searchClient) {
+      const { document: doc } = await this.fetchDocument(collection.name, newRelativePath);
+      const processed = processDocumentForIndexing(doc["_values"], `${collection.path}/${newRelativePath}`, collection, this.maxSearchIndexFieldLength);
+      await this.searchClient.put([processed]);
+      await this.searchClient.del([`${collection.name}:${relativePath2}`]);
+    }
   }
   async deleteDocument({
     collection,
-    relativePath
+    relativePath: relativePath2
   }) {
+    var _a;
     await this.api.request(`#graphql
       mutation DeleteDocument($collection: String!, $relativePath: String!  ){
   deleteDocument(collection: $collection, relativePath: $relativePath){
     __typename
   }
-}`, { variables: { collection, relativePath } });
+}`, { variables: { collection, relativePath: relativePath2 } });
+    await ((_a = this.searchClient) == null ? void 0 : _a.del([`${collection}:${relativePath2}`]));
   }
   async fetchCollection(collectionName, includeDocuments, folder = "", after, sortKey, order, filterArgs) {
     let filter = null;
@@ -770,18 +989,43 @@ class TinaAdminApi {
       }
     }
   }
-  async fetchDocument(collectionName, relativePath) {
-    const response = await this.api.request(`#graphql
-      query($collection: String!, $relativePath: String!) {
-        document(collection:$collection, relativePath:$relativePath) {
-          ... on Document {
-            _values
+  async fetchDocument(collectionName, relativePath2, values = true) {
+    let query;
+    if (values) {
+      query = `#graphql
+        query($collection: String!, $relativePath: String!) {
+          document(collection:$collection, relativePath:$relativePath) {
+            ... on Document {
+              _values
+            }
           }
-        }
-      }`, { variables: { collection: collectionName, relativePath } });
+        }`;
+    } else {
+      query = `#graphql
+        query($collection: String!, $relativePath: String!) {
+          document(collection:$collection, relativePath:$relativePath) {
+            __typename
+            ... on Document {
+              _sys {
+                title
+                template
+                breadcrumbs
+                path
+                basename
+                relativePath
+                filename
+                extension
+              }
+            }
+          }
+        }`;
+    }
+    const response = await this.api.request(query, {
+      variables: { collection: collectionName, relativePath: relativePath2 }
+    });
     return response;
   }
-  async createDocument(collectionName, relativePath, params) {
+  async createDocument(collection, relativePath2, params) {
     const response = await this.api.request(`#graphql
       mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
         createDocument(
@@ -791,14 +1035,19 @@ class TinaAdminApi {
         ){__typename}
       }`, {
       variables: {
-        collection: collectionName,
-        relativePath,
+        collection: collection.name,
+        relativePath: relativePath2,
         params
       }
     });
+    if (this.searchClient) {
+      const { document: doc } = await this.fetchDocument(collection.name, relativePath2);
+      const processed = processDocumentForIndexing(doc["_values"], `${collection.path}/${relativePath2}`, collection, this.maxSearchIndexFieldLength);
+      await this.searchClient.put([processed]);
+    }
     return response;
   }
-  async updateDocument(collectionName, relativePath, params) {
+  async updateDocument(collection, relativePath2, params) {
     const response = await this.api.request(`#graphql
       mutation($collection: String!, $relativePath: String!, $params: DocumentUpdateMutation!) {
         updateDocument(
@@ -808,11 +1057,16 @@ class TinaAdminApi {
         ){__typename}
       }`, {
       variables: {
-        collection: collectionName,
-        relativePath,
+        collection: collection.name,
+        relativePath: relativePath2,
         params
       }
     });
+    if (this.searchClient) {
+      const { document: doc } = await this.fetchDocument(collection.name, relativePath2);
+      const processed = processDocumentForIndexing(doc["_values"], `${collection.path}/${relativePath2}`, collection, this.maxSearchIndexFieldLength);
+      await this.searchClient.put([processed]);
+    }
     return response;
   }
 }
@@ -898,6 +1152,23 @@ const TinaCloudProvider = (props) => {
   } else {
     cms.api.tina.setBranch(currentBranch);
   }
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    let searchClient;
+    if (props.isLocalClient) {
+      searchClient = new LocalSearchClient(cms.api.tina);
+    } else {
+      const hasTinaSearch = Boolean((_b = (_a = props.schema.config) == null ? void 0 : _a.search) == null ? void 0 : _b.tina);
+      if (hasTinaSearch) {
+        searchClient = new TinaCMSSearchClient(cms.api.tina);
+      } else {
+        searchClient = (_d = (_c = props.schema.config) == null ? void 0 : _c.search) == null ? void 0 : _d.searchClient;
+      }
+    }
+    if (searchClient) {
+      cms.registerApi("search", searchClient);
+    }
+  }, [props]);
   if (!cms.api.admin) {
     cms.registerApi("admin", new TinaAdminApi(cms));
   }
@@ -1464,6 +1735,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .w-full {
   width: 100%;
 }
+.tina-tailwind .min-w-\\[200px\\] {
+  min-width: 200px;
+}
 .tina-tailwind .max-w-0 {
   max-width: 0rem;
 }
@@ -2131,16 +2405,16 @@ class ContentCreatorPlugin {
     this.onChange = options.onChange;
     this.initialValues = options.initialValues;
   }
-  async onSubmit({ collection, template, relativePath }, cms) {
+  async onSubmit({ collection, template, relativePath: relativePath2 }, cms) {
     try {
       const selectedCollection = this.collections.find((collectionItem) => collectionItem.slug === collection);
       const collectionFormat = selectedCollection.format;
       const extensionLength = -1 * (collectionFormat.length + 1);
-      let relativePathWithExt = relativePath;
-      if (relativePath.slice(extensionLength).toLocaleLowerCase() === `.${collectionFormat}`) {
-        relativePathWithExt = `${relativePath.slice(0, -3)}.${collectionFormat}`;
+      let relativePathWithExt = relativePath2;
+      if (relativePath2.slice(extensionLength).toLocaleLowerCase() === `.${collectionFormat}`) {
+        relativePathWithExt = `${relativePath2.slice(0, -3)}.${collectionFormat}`;
       } else {
-        relativePathWithExt = `${relativePath}.${collectionFormat}`;
+        relativePathWithExt = `${relativePath2}.${collectionFormat}`;
       }
       const payload = {
         relativePath: relativePathWithExt,
@@ -3158,6 +3432,75 @@ const useGetCollection = (cms, collectionName, includeDocuments = true, folder,
   const reFetchCollection = () => setResetSate((x) => x + 1);
   return { collection, loading, error, reFetchCollection, collectionExtra };
 };
+const useSearchCollection = (cms, collectionName, includeDocuments = true, folder, after = "", search) => {
+  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);
+  const [resetState, setResetSate] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    const searchCollection = async () => {
+      if (await api.isAuthenticated() && !folder.loading && !cancelled) {
+        try {
+          const response = await cms.api.search.query(`${search} AND _collection:${collectionName}`, {
+            limit: 15,
+            cursor: after
+          });
+          const docs = await Promise.allSettled(response.results.map((result) => {
+            const [collection2, relativePath2] = result._id.split(":");
+            return api.fetchDocument(collection2, relativePath2, false);
+          }));
+          const edges = docs.filter((p) => {
+            var _a;
+            return p.status === "fulfilled" && !!((_a = p.value) == null ? void 0 : _a.document);
+          }).map((result) => ({ node: result.value.document }));
+          const c = await api.fetchCollection(collectionName, false, "");
+          setCollection({
+            format: collection.format,
+            label: collection.label,
+            name: collectionName,
+            templates: collection.templates,
+            documents: {
+              pageInfo: {
+                hasNextPage: !!response.nextCursor,
+                hasPreviousPage: !!response.prevCursor,
+                startCursor: "",
+                endCursor: response.nextCursor || ""
+              },
+              edges
+            }
+          });
+        } catch (error2) {
+          cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`);
+          console.error(error2);
+          setCollection(void 0);
+          setError(error2);
+        }
+        setLoading(false);
+      }
+    };
+    if (cancelled)
+      return;
+    setLoading(true);
+    searchCollection();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    cms,
+    collectionName,
+    folder.loading,
+    folder.fullyQualifiedName,
+    resetState,
+    after,
+    search
+  ]);
+  const reFetchCollection = () => setResetSate((x) => x + 1);
+  return { collection, loading, error, reFetchCollection, collectionExtra };
+};
 const GetCollection = ({
   cms,
   collectionName,
@@ -3166,10 +3509,11 @@ const GetCollection = ({
   startCursor,
   sortKey,
   children,
-  filterArgs
+  filterArgs,
+  search
 }) => {
   const navigate = useNavigate();
-  const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, folder, startCursor || "", sortKey, filterArgs) || {};
+  const { collection, loading, error, reFetchCollection, collectionExtra } = search ? useSearchCollection(cms, collectionName, includeDocuments, folder, startCursor || "", search) : useGetCollection(cms, collectionName, includeDocuments, folder, startCursor || "", sortKey, filterArgs) || {};
   useEffect(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     if (loading)
@@ -3177,9 +3521,10 @@ const GetCollection = ({
     const collectionDefinition = cms.api.tina.schema.getCollection(collection.name);
     const allowCreate = (_c = (_b = (_a = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _a.allowedActions) == null ? void 0 : _b.create) != null ? _c : true;
     const allowDelete = (_f = (_e = (_d = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _d.allowedActions) == null ? void 0 : _e.delete) != null ? _f : true;
-    if (!allowCreate && !allowDelete && ((_h = (_g = collection.documents) == null ? void 0 : _g.edges) == null ? void 0 : _h.length) === 1 && ((_k = (_j = (_i = collection.documents) == null ? void 0 : _i.edges[0]) == null ? void 0 : _j.node) == null ? void 0 : _k.__typename) !== "Folder") {
-      const doc = collection.documents.edges[0].node;
-      handleNavigate(navigate, cms, collection, collectionDefinition, doc);
+    const collectionResponse = collection;
+    if (!allowCreate && !allowDelete && ((_h = (_g = collectionResponse.documents) == null ? void 0 : _g.edges) == null ? void 0 : _h.length) === 1 && ((_k = (_j = (_i = collectionResponse.documents) == null ? void 0 : _i.edges[0]) == null ? void 0 : _j.node) == null ? void 0 : _k.__typename) !== "Folder") {
+      const doc = collectionResponse.documents.edges[0].node;
+      handleNavigate(navigate, cms, collectionResponse, collectionDefinition, doc);
     }
   }, [(collection == null ? void 0 : collection.name) || "", loading]);
   if (error) {
@@ -3308,13 +3653,14 @@ const CollectionListPage = () => {
     after: "",
     booleanEquals: null
   });
-  const [activeSearch, setActiveSearch] = React.useState(false);
   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 [search, setSearch] = useState("");
+  const [searchInput, setSearchInput] = useState("");
   const { order = "asc", name: sortName } = JSON.parse(sortKey || "{}");
   const [sortOrder, setSortOrder] = useState(order);
   const loc = useLocation();
@@ -3359,25 +3705,20 @@ const CollectionListPage = () => {
         before: "",
         after: "",
         booleanEquals: null
-      }
+      },
+      search
     }, (collection, _loading, reFetchCollection, collectionExtra) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       collection.documents.totalCount;
       const documents = collection.documents.edges;
       const admin = cms.api.admin;
       const pageInfo = collection.documents.pageInfo;
       const fields = (_a = collectionExtra.fields) == null ? void 0 : _a.filter((x) => ["string", "number", "datetime", "boolean"].includes(x.type));
       const sortField = fields == null ? void 0 : fields.find((field) => field.name === sortName);
-      const filterFields = (_b = collectionExtra.fields) == null ? void 0 : _b.filter((x) => {
-        return ["string", "datetime", "boolean"].includes(x.type) && !x.list;
-      });
-      const filterField = filterFields == null ? void 0 : filterFields.find((x) => x.name === vars.filterField);
-      const showStartsWith = (filterField == null ? void 0 : filterField.type) === "string" && !filterField.list;
-      const showDateFilter = (filterField == null ? void 0 : filterField.type) === "datetime";
-      const showBooleanToggle = (filterField == null ? void 0 : filterField.type) === "boolean" && !filterField.list;
+      const searchEnabled = !!((_d = (_c = (_b = cms.api.tina.schema) == null ? void 0 : _b.config) == null ? void 0 : _c.config) == null ? void 0 : _d.search);
       const collectionDefinition = cms.api.tina.schema.getCollection(collection.name);
-      const allowCreate = (_e = (_d = (_c = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _c.allowedActions) == null ? void 0 : _d.create) != null ? _e : true;
-      const allowDelete = (_h = (_g = (_f = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _f.allowedActions) == null ? void 0 : _g.delete) != null ? _h : true;
+      const allowCreate = (_g = (_f = (_e = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _e.allowedActions) == null ? void 0 : _f.create) != null ? _g : true;
+      const allowDelete = (_j = (_i = (_h = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _h.allowedActions) == null ? void 0 : _i.delete) != null ? _j : true;
       const folderView = folder.fullyQualifiedName !== "";
       return /* @__PURE__ */ React.createElement(React.Fragment, null, deleteModalOpen && /* @__PURE__ */ React.createElement(DeleteModal, {
         filename: vars.relativePath,
@@ -3419,7 +3760,7 @@ const CollectionListPage = () => {
         },
         close: () => setRenameModalOpen(false)
       }), /* @__PURE__ */ React.createElement(PageHeader, {
-        isLocalMode: (_j = (_i = cms == null ? void 0 : cms.api) == null ? void 0 : _i.tina) == null ? void 0 : _j.isLocalMode
+        isLocalMode: (_l = (_k = cms == null ? void 0 : cms.api) == null ? void 0 : _k.tina) == null ? void 0 : _l.isLocalMode
       }, /* @__PURE__ */ React.createElement("div", {
         className: "w-full grid grid-flow-col items-end gap-4"
       }, /* @__PURE__ */ React.createElement("div", {
@@ -3427,8 +3768,8 @@ const CollectionListPage = () => {
       }, /* @__PURE__ */ React.createElement("h3", {
         className: "font-sans text-2xl text-gray-700"
       }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", {
-        className: "flex gap-4 items-end flex-wrap"
-      }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+        className: "flex gap-4 items-start flex-wrap"
+      }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", {
         className: "flex flex-col gap-2 items-start"
       }, /* @__PURE__ */ React.createElement("label", {
         htmlFor: "sort",
@@ -3473,152 +3814,22 @@ const CollectionListPage = () => {
             setSortOrder(val.order);
           }
         }
-      })), /* @__PURE__ */ React.createElement("form", {
-        className: "flex flex-wrap gap-4 items-end"
-      }, /* @__PURE__ */ React.createElement("div", {
-        className: "flex flex-shrink-0 flex-col gap-2 items-start"
-      }, /* @__PURE__ */ React.createElement("label", {
-        htmlFor: "filter",
-        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-      }, "Filter by"), /* @__PURE__ */ React.createElement(Select, {
-        name: "filter",
-        options: [
-          {
-            label: "None",
-            value: ""
-          },
-          ...filterFields.map((x) => ({
-            label: typeof x.label === "string" && x.label || x.name,
-            value: x.name
-          }))
-        ],
-        input: {
-          id: "filter",
-          name: "filter",
-          value: vars.filterField,
-          onChange: (e) => {
-            const val = e.target.value;
-            setEndCursor("");
-            setPrevCursors([]);
-            setVars((old) => ({
-              ...old,
-              filterField: val
-            }));
-            if (!val) {
-              reFetchCollection();
-            }
-          }
-        }
-      })), showStartsWith && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-        className: "flex flex-shrink-0 flex-col gap-2 items-start"
-      }, /* @__PURE__ */ React.createElement("label", {
-        htmlFor: "startsWith",
-        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-      }, "Starts with"), /* @__PURE__ */ React.createElement(Input, {
-        name: "startsWith",
-        id: "startsWith",
-        value: vars.startsWith,
-        onChange: (e) => {
-          const val = e.target.value;
-          setVars((old) => ({
-            ...old,
-            startsWith: val,
-            after: "",
-            before: "",
-            booleanEquals: null
-          }));
-        }
-      }))), showDateFilter && /* @__PURE__ */ React.createElement("div", {
-        className: "flex flex-shrink-0 gap-4"
-      }, /* @__PURE__ */ React.createElement("div", {
-        className: "flex flex-col gap-2 items-start"
-      }, /* @__PURE__ */ React.createElement("label", {
-        htmlFor: "dateAfter",
-        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-      }, "After"), /* @__PURE__ */ React.createElement(ReactDateTimeWithStyles, {
-        inputProps: {
-          className: textFieldClasses
-        },
-        value: vars.after,
-        onChange: (e) => {
-          setVars((old) => ({
-            ...old,
-            after: typeof e.format === "function" ? e.format() : "",
-            booleanEquals: null,
-            startsWith: ""
-          }));
-        }
       })), /* @__PURE__ */ React.createElement("div", {
-        className: "flex flex-col gap-2 items-start"
-      }, /* @__PURE__ */ React.createElement("label", {
-        htmlFor: "dateBefore",
-        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-      }, "Before"), /* @__PURE__ */ React.createElement(ReactDateTimeWithStyles, {
-        inputProps: {
-          className: textFieldClasses
-        },
-        value: vars.before,
-        onChange: (e) => {
-          setVars((old) => ({
-            ...old,
-            before: typeof e.format === "function" ? e.format() : "",
-            booleanEquals: null,
-            startsWith: ""
-          }));
-        }
-      }))), showBooleanToggle && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-        className: "flex flex-col gap-2 items-start"
-      }, /* @__PURE__ */ React.createElement("label", {
-        htmlFor: "toggle",
+        className: "flex flex-1 flex-col gap-2 items-start w-full"
+      }, searchEnabled ? /* @__PURE__ */ React.createElement(SearchInput, {
+        loading: _loading,
+        search,
+        setSearch,
+        searchInput,
+        setSearchInput
+      }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", {
         className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-      }, filterField.label || filterField.name), /* @__PURE__ */ React.createElement(Toggle, {
-        field: filterField,
-        input: {
-          name: "toggle",
-          value: (_k = vars.booleanEquals) != null ? _k : false,
-          onChange: () => {
-            setVars((old) => ({
-              ...old,
-              booleanEquals: !old.booleanEquals,
-              after: "",
-              before: "",
-              startsWith: ""
-            }));
-          }
-        },
-        name: "toggle"
-      }))), (showStartsWith || showDateFilter || showBooleanToggle) && /* @__PURE__ */ React.createElement("div", {
-        className: "flex gap-3"
-      }, /* @__PURE__ */ React.createElement(Button, {
-        onClick: () => {
-          setActiveSearch(true);
-          setEndCursor("");
-          setPrevCursors([]);
-          reFetchCollection();
-        },
-        variant: "primary",
-        type: "submit"
-      }, "Search", " ", /* @__PURE__ */ React.createElement(BiSearch, {
-        className: "w-5 h-full ml-1.5 opacity-70"
-      })), (vars.startsWith || vars.after || vars.before || vars.booleanEquals) && /* @__PURE__ */ React.createElement(Button, {
-        onClick: () => {
-          setActiveSearch(false);
-          setVars((old) => ({
-            ...old,
-            filterField: "",
-            startsWith: "",
-            after: "",
-            before: "",
-            booleanEquals: null
-          }));
-          setEndCursor("");
-          setPrevCursors([]);
-          reFetchCollection();
-        },
-        variant: "white"
-      }, "Clear", " ", /* @__PURE__ */ React.createElement(BiX, {
-        className: "w-5 h-full ml-1 opacity-70"
-      }))))))), /* @__PURE__ */ React.createElement("div", {
+      }, "Search"), /* @__PURE__ */ React.createElement(Message, {
+        link: "https://tina.io/docs/reference/search/overview",
+        linkLabel: "Read The Docs",
+        type: "info",
+        size: "small"
+      }, "Search not configured.")))))), /* @__PURE__ */ React.createElement("div", {
         className: "flex self-end	justify-self-end"
       }, !collection.templates && allowCreate && /* @__PURE__ */ React.createElement(Link, {
         to: `/${folder.fullyQualifiedName ? [
@@ -3643,7 +3854,7 @@ const CollectionListPage = () => {
         className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
       }, /* @__PURE__ */ React.createElement("tbody", {
         className: "divide-y divide-gray-150"
-      }, !activeSearch && folder.name && /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", {
+      }, folder.name && !search && /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", {
         colSpan: 5
       }, /* @__PURE__ */ React.createElement(Breadcrumb, {
         folder,
@@ -3834,6 +4045,59 @@ const CollectionListPage = () => {
     }));
   });
 };
+const SearchInput = ({
+  loading,
+  search,
+  setSearch,
+  searchInput,
+  setSearchInput
+}) => {
+  const [searchLoaded, setSearchLoaded] = useState(false);
+  useEffect(() => {
+    if (loading) {
+      setSearchLoaded(false);
+    } else {
+      setSearchLoaded(true);
+    }
+  }, [loading]);
+  return /* @__PURE__ */ React.createElement("form", {
+    className: "flex flex-1 flex-col gap-2 items-start w-full"
+  }, /* @__PURE__ */ React.createElement("label", {
+    htmlFor: "search",
+    className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+  }, "Search"), /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-wrap items-center gap-3"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex-1 min-w-[200px]"
+  }, /* @__PURE__ */ React.createElement(Input, {
+    type: "text",
+    name: "search",
+    placeholder: "Search",
+    value: searchInput,
+    onChange: (e) => {
+      setSearchInput(e.target.value);
+    }
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "flex gap-3"
+  }, /* @__PURE__ */ React.createElement(Button, {
+    onClick: () => {
+      setSearch(searchInput);
+      setSearchLoaded(false);
+    },
+    variant: "primary",
+    type: "submit"
+  }, "Search ", /* @__PURE__ */ React.createElement(BiSearch, {
+    className: "w-5 h-full ml-1.5 opacity-70"
+  })), search && searchLoaded && /* @__PURE__ */ React.createElement(Button, {
+    onClick: () => {
+      setSearch("");
+      setSearchInput("");
+    },
+    variant: "white"
+  }, "Clear ", /* @__PURE__ */ React.createElement(BiX, {
+    className: "w-5 h-full ml-1 opacity-70"
+  })))));
+};
 const Breadcrumb = ({ folder, navigate, collectionName }) => {
   const folderArray = folder.name.split("/");
   return /* @__PURE__ */ React.createElement("div", {
@@ -3944,14 +4208,14 @@ function FaUnlock(props) {
 const createDocument = async (cms, collection, template, mutationInfo, folder, values) => {
   const api = new TinaAdminApi(cms);
   const { filename, ...leftover } = values;
-  const relativePath = `${folder ? `${folder}/` : ""}${filename}.${collection.format}`;
+  const relativePath2 = `${folder ? `${folder}/` : ""}${filename}.${collection.format}`;
   const params = api.schema.transformPayload(collection.name, {
     _collection: collection.name,
     ...template && { _template: template.name },
     ...leftover
   });
   if (await api.isAuthenticated()) {
-    await api.createDocument(collection.name, relativePath, params);
+    await api.createDocument(collection, relativePath2, params);
   } else {
     const authMessage = `CreateDocument failed: User is no longer authenticated; please login and try again.`;
     cms.alerts.error(authMessage);
@@ -4146,7 +4410,7 @@ const RenderForm$1 = ({
     onPristineChange: setFormIsPristine
   })));
 };
-const useGetDocument = (cms, collectionName, relativePath) => {
+const useGetDocument = (cms, collectionName, relativePath2) => {
   const api = new TinaAdminApi(cms);
   const [document, setDocument] = useState(void 0);
   const [loading, setLoading] = useState(true);
@@ -4155,7 +4419,7 @@ const useGetDocument = (cms, collectionName, relativePath) => {
     const fetchDocument = async () => {
       if (api.isAuthenticated()) {
         try {
-          const response = await api.fetchDocument(collectionName, relativePath);
+          const response = await api.fetchDocument(collectionName, relativePath2);
           setDocument(response.document);
         } catch (error2) {
           cms.alerts.error(`[${error2.name}] GetDocument failed: ${error2.message}`);
@@ -4168,16 +4432,16 @@ const useGetDocument = (cms, collectionName, relativePath) => {
     };
     setLoading(true);
     fetchDocument();
-  }, [cms, collectionName, relativePath]);
+  }, [cms, collectionName, relativePath2]);
   return { document, loading, error };
 };
 const GetDocument = ({
   cms,
   collectionName,
-  relativePath,
+  relativePath: relativePath2,
   children
 }) => {
-  const { document, loading, error } = useGetDocument(cms, collectionName, relativePath);
+  const { document, loading, error } = useGetDocument(cms, collectionName, relativePath2);
   if (error) {
     return /* @__PURE__ */ React.createElement(FullscreenError, null);
   }
@@ -4196,7 +4460,7 @@ const CollectionDuplicatePage = () => {
     folder,
     includeDocuments: false
   }, (collection) => {
-    const relativePath = `${filename.startsWith("~/") ? filename.substring(2) : filename}.${collection.format}`;
+    const relativePath2 = `${filename.startsWith("~/") ? filename.substring(2) : filename}.${collection.format}`;
     const mutationInfo = {
       includeCollection: true,
       includeTemplate: !!collection.templates
@@ -4204,7 +4468,7 @@ const CollectionDuplicatePage = () => {
     return /* @__PURE__ */ React.createElement(GetDocument, {
       cms,
       collectionName: collection.name,
-      relativePath
+      relativePath: relativePath2
     }, (document) => {
       var _a;
       return /* @__PURE__ */ React.createElement(RenderForm$1, {
@@ -4218,11 +4482,11 @@ const CollectionDuplicatePage = () => {
     });
   }));
 };
-const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
+const updateDocument = async (cms, relativePath2, collection, mutationInfo, values) => {
   const api = new TinaAdminApi(cms);
   const params = api.schema.transformPayload(collection.name, values);
   if (await api.isAuthenticated()) {
-    await api.updateDocument(collection.name, relativePath, params);
+    await api.updateDocument(collection, relativePath2, params);
   } else {
     const authMessage = `UpdateDocument failed: User is no longer authenticated; please login and try again.`;
     cms.alerts.error(authMessage);
@@ -4241,7 +4505,7 @@ const CollectionUpdatePage = () => {
     folder,
     includeDocuments: false
   }, (collection) => {
-    const relativePath = `${resolvedFile}.${collection.format}`;
+    const relativePath2 = `${resolvedFile}.${collection.format}`;
     const mutationInfo = {
       includeCollection: true,
       includeTemplate: !!collection.templates
@@ -4249,12 +4513,12 @@ const CollectionUpdatePage = () => {
     return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(GetDocument, {
       cms,
       collectionName: collection.name,
-      relativePath
+      relativePath: relativePath2
     }, (document) => /* @__PURE__ */ React.createElement(RenderForm, {
       cms,
       document,
       filename: resolvedFile,
-      relativePath,
+      relativePath: relativePath2,
       collection,
       mutationInfo
     })));
@@ -4264,14 +4528,14 @@ const RenderForm = ({
   cms,
   document,
   filename,
-  relativePath,
+  relativePath: relativePath2,
   collection,
   mutationInfo
 }) => {
   var _a, _b;
   const [formIsPristine, setFormIsPristine] = useState(true);
   const schema = cms.api.tina.schema;
-  const parentFolder2 = relativePath.split("/").slice(0, -1).join("/");
+  const parentFolder2 = relativePath2.split("/").slice(0, -1).join("/");
   const schemaCollection = schema.getCollection(collection.name);
   const template = schema.getTemplateForData({
     collection: schemaCollection,
@@ -4291,7 +4555,7 @@ const RenderForm = ({
       initialValues: document._values,
       onSubmit: async (values) => {
         try {
-          await updateDocument(cms, relativePath, collection, mutationInfo, values);
+          await updateDocument(cms, relativePath2, collection, mutationInfo, values);
           cms.alerts.success("Document updated!");
         } catch (error) {
           console.error(error);
@@ -4299,7 +4563,7 @@ const RenderForm = ({
         }
       }
     });
-  }, [cms, document, relativePath, collection, mutationInfo]);
+  }, [cms, document, relativePath2, collection, mutationInfo]);
   const navBreakpoint = 1e3;
   const windowWidth = useWindowWidth();
   const renderNavToggle = windowWidth < navBreakpoint + 1;
@@ -4604,4 +4868,4 @@ const defineStaticConfig = (config) => {
   return config;
 };
 const defineConfig = defineStaticConfig;
-export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, assertShape, asyncPoll, createClient, TinaCMSProvider2 as default, defineConfig, defineLegacyConfig, defineSchema, defineStaticConfig, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useTinaAuthRedirect };
+export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, LocalSearchClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCMSSearchClient, TinaCloudAuthWall, TinaCloudProvider, assertShape, asyncPoll, createClient, TinaCMSProvider2 as default, defineConfig, defineLegacyConfig, defineSchema, defineStaticConfig, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useTinaAuthRedirect };