docs: Allow searching of ecosystem page (#7574)

* docs: Allow searching of ecosystem page

At the moment, showing the long list is not ideal without categorizing
the items. However, search helps a little as well as the existing categorization
earlier in the page.

This PR also adds a small note to show how the page is ordered.

Signed-off-by: Charlie Egan <charlie@styra.com>

* docs: No results text for ecosystem search

Links to slack to in case the user is confused.

Signed-off-by: Charlie Egan <charlie@styra.com>

---------

Signed-off-by: Charlie Egan <charlie@styra.com>

Author: Charlie Egan

docs/new/src/pages/ecosystem/index.js

@@ -1,6 +1,6 @@
 import Heading from "@theme/Heading";
 import Layout from "@theme/Layout";
-import React from "react";
+import React, { useState } from "react";
 
 import Card from "../../components/Card";
 import getLogoAsset from "../../lib/ecosystem/getLogoAsset.js";
@@ -12,8 +12,20 @@ import features from "@generated/ecosystem-data/default/features.json";
 import languages from "@generated/ecosystem-data/default/languages.json";
 
 const EcosystemIndex = (props) => {
-  const sortedPages = sortPagesByRank(entries);
   const title = "OPA Ecosystem";
+  const sortedPages = sortPagesByRank(entries);
+
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredPages = sortedPages.filter((id) => {
+    const page = entries[id];
+    const query = searchQuery.toLowerCase();
+    return (
+      page.title.toLowerCase().includes(query)
+      || page.subtitle?.toLowerCase().includes(query)
+      || page.content.toLowerCase().includes(query)
+    );
+  });
 
   const orderedCategoryKeys = ["rego", "production", "tool", "createwithopa"];
   const preferredLanguageOrder = [
@@ -139,6 +151,24 @@ const EcosystemIndex = (props) => {
           All Entries & Integrations
         </Heading>
 
+        <div style={{ margin: "1.5rem 0" }}>
+          <input
+            type="text"
+            placeholder="Search entries..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{
+              padding: "0.5rem",
+              width: "100%",
+              maxWidth: "40rem",
+              fontSize: "1rem",
+            }}
+          />
+          <p style={{ fontSize: "0.8rem", marginTop: "0.5rem" }}>
+            All integrations are ordered by the number of linked resources.
+          </p>
+        </div>
+
         <div
           style={{
             marginTop: "2rem",
@@ -148,23 +178,33 @@ const EcosystemIndex = (props) => {
             gap: 20,
           }}
         >
-          {sortedPages.map((id) => {
-            const page = entries[id];
-
-            const cardData = {
-              title: page.title,
-              note: page.subtitle,
-              icon: getLogoAsset(page.id),
-              link: `/ecosystem/entry/${id}`,
-              link_text: "View Details",
-            };
-
-            return (
-              <div key={id} style={{ flex: "1 1 30%", minWidth: "250px", maxWidth: "400px" }}>
-                <Card item={cardData} />
-              </div>
-            );
-          })}
+          {filteredPages.length === 0
+            ? (
+              <p style={{ textAlign: "center", width: "100%" }}>
+                No integrations found. Try searching for something else or drop us a message on{" "}
+                <a href="https://slack.openpolicyagent.org/" target="_blank" rel="noopener noreferrer">
+                  Slack
+                </a>.
+              </p>
+            )
+            : (
+              filteredPages.map((id) => {
+                const page = entries[id];
+                const cardData = {
+                  title: page.title,
+                  note: page.subtitle,
+                  icon: getLogoAsset(page.id),
+                  link: `/ecosystem/entry/${id}`,
+                  link_text: "View Details",
+                };
+
+                return (
+                  <div key={id} style={{ flex: "1 1 30%", minWidth: "250px", maxWidth: "400px" }}>
+                    <Card item={cardData} />
+                  </div>
+                );
+              })
+            )}
         </div>
       </div>
     </Layout>