LibraryPanels: Add search input back to add panel widget (grafana#32719)

kevisong · Apr 7, 2021 · 71e8a03 · 71e8a03
1 parent 0f7d8ae
commit 71e8a03
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git 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/...p/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap b/...p/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",
       }
     }