From 06571e0af6ccc61cd22b71f06f25d7cc27e08d8d Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 17 Sep 2021 11:59:15 +0100
Subject: [PATCH] Dashboard: Don't show SectionHeader unless section has a
 title (#39336)

* Dashboard: Don't show SectionHeader unless section has a title

* Dashboard: Add unit test to prevent regression
---
 .../features/search/components/SearchResults.test.tsx    | 9 +++++++++
 public/app/features/search/components/SearchResults.tsx  | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/app/features/search/components/SearchResults.test.tsx b/public/app/features/search/components/SearchResults.test.tsx
index d23d85bfe10..31354d9c92e 100644
--- a/public/app/features/search/components/SearchResults.test.tsx
+++ b/public/app/features/search/components/SearchResults.test.tsx
@@ -53,4 +53,13 @@ describe('SearchResults', () => {
     expect(mockOnToggleSection).toHaveBeenCalledTimes(1);
     expect(mockOnToggleSection).toHaveBeenCalledWith(generalFolder);
   });
+
+  it('should not throw an error if the search results have an empty title', () => {
+    const mockOnToggleSection = jest.fn();
+    const searchResultsEmptyTitle = searchResults.slice();
+    searchResultsEmptyTitle[0].title = '';
+    expect(() => {
+      setup({ results: searchResultsEmptyTitle, onToggleSection: mockOnToggleSection });
+    }).not.toThrowError();
+  });
 });
diff --git a/public/app/features/search/components/SearchResults.tsx b/public/app/features/search/components/SearchResults.tsx
index 078f56d3ce8..8bf2766e2b8 100644
--- a/public/app/features/search/components/SearchResults.tsx
+++ b/public/app/features/search/components/SearchResults.tsx
@@ -33,7 +33,9 @@ export const SearchResults: FC<Props> = memo(
           {results.map((section) => {
             return (
               <div aria-label={sectionLabel} className={styles.section} key={section.id || section.title}>
-                <SectionHeader onSectionClick={onToggleSection} {...{ onToggleChecked, editable, section }} />
+                {section.title && (
+                  <SectionHeader onSectionClick={onToggleSection} {...{ onToggleChecked, editable, section }} />
+                )}
                 {section.expanded && (
                   <div aria-label={itemsLabel} className={styles.sectionItems}>
                     {section.items.map((item) => (