Add search for knowledge-base articles

src/components/KBArticleSearch/KBArticleSearch.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import styles from './styles.module.css'
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import {useState, useEffect} from "react";
+
+const KBArticleSearch = ({kb_articles, onUpdateResults}) => {
+
+    const [searchTerm, setSearchTerm] = useState('');
+    const handleSearch = (event) => {
+        setSearchTerm(event.target.value);
+    };
+
+    const filteredArticles = searchTerm ? kb_articles.filter((article) =>
+        searchTerm && article.title.match(new RegExp(searchTerm, 'i')) // Case-insensitive search
+    ) : kb_articles;
+
+    useEffect(() => {
+        onUpdateResults(filteredArticles); // Call callback with filtered articles
+    }, [filteredArticles, onUpdateResults]); // Update on filter changes
+
+    return (
+        <form autoComplete="off" className="DocSearch-Button">
+            <span className="DocSearch-Button-Container">
+                <svg width="20" height="20" className="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path
+                    d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+                    stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round"
+                    stroke-linejoin="round"></path></svg>
+            </span>
+            <input
+                type="text"
+                onKeyUp={handleSearch}
+                placeholder="Search Knowledge Base"
+                className={styles.KBArticleInputSearchArea}
+            />
+        </form>
+    )
+}
+
+export default KBArticleSearch;

src/components/KBArticleSearch/styles.module.css

@@ -0,0 +1,12 @@
+.KBArticleInput {
+  width: 98%;
+  border: none;
+}
+
+.KBArticleInputSearchArea {
+  width: 100%;
+  background-color: transparent;
+  border: none !important;
+  outline: none;
+  padding-left: 5px;
+}

src/css/custom.scss

@@ -1156,6 +1156,35 @@ nav[aria-label='Docs sidebar']:hover {
 
 }
 
+form.DocSearch-Button {
+  justify-content: normal;
+  margin-bottom: 8px;
+  width: 98%;
+}
+
+.sidebarSearchContainer_BOHF {
+  margin-bottom: 1rem !important;
+  width: 98%;
+}
+
+/* Style changes to placeholder text of form element used in KBArticleSearch */
+
+input::-webkit-input-placeholder { /* Chrome, Edge, Safari */
+  color: var(--docsearch-muted-color);;
+}
+
+input::-moz-placeholder { /* Firefox 19+ */
+  color:var(--docsearch-muted-color);;
+}
+
+input:-ms-input-placeholder { /* IE 10-11 */
+  color: var(--docsearch-muted-color);;
+}
+
+input::-ms-input-placeholder { /* Microsoft Edge */
+  color: var(--docsearch-muted-color);;
+}
+
 [data-theme='light'] .details_r1OI {
   --ifm-alert-background-color: #F6F7FA;
   --ifm-alert-foreground-color: var(--ifm-alert-foreground-color);

src/theme/BlogSidebar/Desktop/index.js

@@ -4,40 +4,53 @@ import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
 import SearchBar from "../../SearchBar";
+import KBArticleSearch from "../../../components/KBArticleSearch/KBArticleSearch";
+import {DocSearchButton} from "@docsearch/react";
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useState} from "react";
+
 export default function BlogSidebarDesktop({sidebar}) {
     const { siteConfig } = useDocusaurusContext();
+
+    const [filteredArticles, setFilteredArticles] = useState(sidebar.items);
+    const updateResults = (filteredArticlesFromSearch) => {
+        setFilteredArticles(filteredArticlesFromSearch);
+    }
     return (
-    <aside className="col col--3">
-      <div className={styles.sidebarSearchContainer}>
-        <SearchBar />
-      </div>
-      <nav
-        className={clsx(styles.sidebar, 'thin-scrollbar')}
-        aria-label={translate({
-          id: 'theme.blog.sidebar.navAriaLabel',
-          message: 'Blog recent posts navigation',
-          description: 'The ARIA label for recent posts in the blog sidebar',
-        })}>
-        <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
-            <Link to={siteConfig.customFields.blogSidebarLink}>
-                {sidebar.title}
-            </Link>
-        </div>
-        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
-          {sidebar.items.map((item) => (
-            <li key={item.permalink} className={styles.sidebarItem}>
-              <Link
-                isNavLink
-                to={item.permalink}
-                className={styles.sidebarItemLink}
-                activeClassName={styles.sidebarItemLinkActive}>
-                {item.title}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </aside>
-  );
+        <aside className="col col--3">
+            <div className={styles.sidebarSearchContainer}>
+                <SearchBar className={styles.blogsSearch}/>
+            </div>
+            <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
+                <Link to={siteConfig.customFields.blogSidebarLink}>
+                    {sidebar.title}
+                </Link>
+            </div>
+            <div>
+                <KBArticleSearch kb_articles={sidebar.items} onUpdateResults={updateResults}
+                                 className={styles.KBArticleInput}/>
+            </div>
+            <nav
+                className={clsx(styles.sidebar, 'thin-scrollbar')}
+                aria-label={translate({
+                    id: 'theme.blog.sidebar.navAriaLabel',
+                    message: 'Blog recent posts navigation',
+                    description: 'The ARIA label for recent posts in the blog sidebar',
+                })}>
+                <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
+                    {filteredArticles.map((item) => (
+                        <li key={item.permalink} className={styles.sidebarItem}>
+                            <Link
+                                isNavLink
+                                to={item.permalink}
+                                className={styles.sidebarItemLink}
+                                activeClassName={styles.sidebarItemLinkActive}>
+                                {item.title}
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </aside>
+    );
 }

src/theme/DocSidebar/Desktop/styles.module.css

@@ -38,6 +38,5 @@
 
 .sidebarSearchContainer {
   margin-top: 2rem;
-  /* margin-bottom: 1.75rem; */
   padding: 0 1rem;
 }