From 71e8a03c4641daff85309f0d5ae13026b9174f66 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 7 Apr 2021 10:27:45 +0100
Subject: [PATCH] LibraryPanels: Add search input back to add panel widget
 (#32719)

---
 .../AddPanelWidget/AddPanelWidget.tsx         | 23 ++++++++++++++-----
 .../AddPanelWidget.test.tsx.snap              |  1 +
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index 9c5405e321f..1708f5daab1 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@@ -10,6 +10,7 @@ import { GrafanaTheme } from '@grafana/data';
 
 import config from 'app/core/config';
 import store from 'app/core/store';
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { addPanel } from 'app/features/dashboard/state/reducers';
 import { DashboardModel, PanelModel } from '../../state';
 import { LibraryPanelsView } from '../../../library-panels/components/LibraryPanelsView/LibraryPanelsView';
@@ -55,6 +56,7 @@ const getCopiedPanelPlugins = () => {
 
 export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard }) => {
   const [addPanelView, setAddPanelView] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
 
   const onCancelAddPanel = (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.preventDefault();
@@ -138,12 +140,17 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
         {addPanelView ? 'Add panel from panel library' : 'Add panel'}
       </AddPanelWidgetHandle>
       {addPanelView ? (
-        <LibraryPanelsView
-          className={styles.libraryPanelsWrapper}
-          onClickCard={(panel) => onAddLibraryPanel(panel)}
-          showSecondaryActions={false}
-          searchString={''}
-        />
+        <>
+          <div className={styles.panelSearchInput}>
+            <FilterInput width={0} value={searchQuery} onChange={setSearchQuery} placeholder={'Search global panels'} />
+          </div>
+          <LibraryPanelsView
+            className={styles.libraryPanelsWrapper}
+            onClickCard={(panel) => onAddLibraryPanel(panel)}
+            showSecondaryActions={false}
+            searchString={searchQuery}
+          />
+        </>
       ) : (
         <div className={styles.actionsWrapper}>
           <div className={styles.actionsRow}>
@@ -219,6 +226,10 @@ const getStyles = (theme: GrafanaTheme) => {
   `;
 
   return {
+    panelSearchInput: css`
+      padding-left: ${theme.spacing.sm};
+      padding-right: ${theme.spacing.sm};
+    `,
     wrapper: css`
       overflow: hidden;
       outline: 2px dotted transparent;
diff --git a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
index 96bf6c325c2..2b9eb71cda2 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
+++ b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`Render should render component 1`] = `
         "headerRow": "css-1ka09x",
         "libraryPanelsWrapper": "css-18m13of",
         "noMargin": "css-u023fv",
+        "panelSearchInput": "css-2ug8g3",
         "wrapper": "css-1sl7nld",
       }
     }