From 9736d307f8e811b697b026d246bd4818e58fcb97 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Mon, 16 Sep 2024 20:08:53 +0000
Subject: [PATCH] Add new filters for events and blogs (#8209) (#8299)

---
 _layouts/search_layout.html | 38 ++++++++++++++++++++++---------------
 assets/js/search.js         |  2 +-
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/_layouts/search_layout.html b/_layouts/search_layout.html
index 47b8f25d1c..67e877fcb8 100644
--- a/_layouts/search_layout.html
+++ b/_layouts/search_layout.html
@@ -38,12 +38,16 @@ <h2>Filter results</h2>
                             <label for="categoryAll">All</label>
                         </div>
                         <div class="search-page--sidebar--category-filter--checkbox-child">
-                            <input type="checkbox" id="categoryDocumentation" name="categoryGroup" value="Documentation" class="category-checkbox">
+                            <input type="checkbox" id="categoryDocumentation" name="categoryGroup" value="docs" class="category-checkbox" checked>
                             <label for="categoryDocumentation">Documentation</label>
                         </div>
                         <div class="search-page--sidebar--category-filter--checkbox-child">
-                            <input type="checkbox" id="categoryNews" name="categoryGroup" value="News" class="category-checkbox">
-                            <label for="categoryNews">News</label>
+                            <input type="checkbox" id="categoryBlog" name="categoryGroup" value="blogs" class="category-checkbox" checked>
+                            <label for="categoryBlog">Blog</label>
+                        </div>
+                        <div class="search-page--sidebar--category-filter--checkbox-child">
+                            <input type="checkbox" id="categoryEvent" name="categoryGroup" value="events" class="category-checkbox" checked>
+                            <label for="categoryEvent">Event</label>
                         </div>
                     </div>
                 </form>
@@ -97,10 +101,7 @@ <h1 class="search-page--results--diplay--header" id="searchPageResultsHeader"></
 
     function getSelectedCategory() {
         const allCheckbox = document.getElementById('categoryAll');
-        if (allCheckbox.checked) {
-            return "All";
-        }
-        return document.querySelector('input[name="categoryGroup"]:checked');
+        return document.querySelectorAll('input[name="categoryGroup"]:checked');
     }
     
     function triggerSearch(query) {
@@ -108,13 +109,13 @@ <h1 class="search-page--results--diplay--header" id="searchPageResultsHeader"></
 
       if (query) {
         trucatedQuery = truncateSentence(query, 20);
-        if (getSelectedCategory() == null) {
+        if (getSelectedCategory().length === 0) {
             searchResultsHeader.textContent = 'Select the result type for your search.';
             document.getElementById('searchPageResultsContainer').innerHTML = '';
             return;
         }
-        const selectedCategory = getSelectedCategory().value;
-        const searchType = selectedCategory == ("Documentation") ? "docs" : selectedCategory == ("News") ? "proj" : "all";
+        const selectedCategory = getSelectedCategory();
+        const searchType = Array.from(selectedCategory).map(element => element.value).join(',');
         const urlPath = window.location.pathname;
         const versionMatch = urlPath.match(/(\d+\.\d+)/);
         const docsVersion = versionMatch ? versionMatch[1] : "latest";
@@ -139,11 +140,12 @@ <h1 class="search-page--results--diplay--header" id="searchPageResultsHeader"></
     document.addEventListener('DOMContentLoaded', function() {
         const categoryAll = document.getElementById('categoryAll');
         const categoryDocumentation = document.getElementById('categoryDocumentation');
-        const categoryNews = document.getElementById('categoryNews');
+        const categoryBlog = document.getElementById('categoryBlog');
+        const categoryEvent = document.getElementById('categoryEvent');
         const searchInput = document.getElementById('searchPageInput');
 
         function updateAllCheckbox() {
-            if (categoryDocumentation.checked && categoryNews.checked) {
+            if (categoryDocumentation.checked && categoryBlog.checked && categoryEvent.checked) {
                 categoryAll.checked = true;
             } else {
                 categoryAll.checked = false;
@@ -153,10 +155,12 @@ <h1 class="search-page--results--diplay--header" id="searchPageResultsHeader"></
         function updateChildCheckboxes() {
             if (categoryAll.checked) {
                 categoryDocumentation.checked = true;
-                categoryNews.checked = true;
+                categoryBlog.checked = true;
+                categoryEvent.checked = true;
             } else {
                 categoryDocumentation.checked = false;
-                categoryNews.checked = false;
+                categoryBlog.checked = false;
+                categoryEvent.checked = false;
             }
         }
 
@@ -168,7 +172,11 @@ <h1 class="search-page--results--diplay--header" id="searchPageResultsHeader"></
             updateAllCheckbox(); 
             triggerSearch(searchInput.value.trim());
         });
-        categoryNews.addEventListener('change', () => {
+        categoryBlog.addEventListener('change', () => {
+            updateAllCheckbox(); 
+            triggerSearch(searchInput.value.trim());
+        });
+        categoryEvent.addEventListener('change', () => {
             updateAllCheckbox(); 
             triggerSearch(searchInput.value.trim());
         });
diff --git a/assets/js/search.js b/assets/js/search.js
index 8d9cab2ec5..4d4fce62f3 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -319,7 +319,7 @@ window.doResultsPageSearch = async (query, type, version) => {
               searchResultsContainer.appendChild(resultElement);
 
               const breakline = document.createElement('hr');
-              breakline.style.border = '.5px solid #ccc';
+              breakline.style.borderTop = '.5px solid #ccc';
               breakline.style.margin = 'auto';
               searchResultsContainer.appendChild(breakline);
             });