From a9d6d131b35803bb64e63a6c5b0b1fc857141c6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Wed, 28 Apr 2021 17:34:18 +0200
Subject: [PATCH] LibraryPanels: Small UI improvements (#33482)

---
 .../PanelTypeFilter/PanelTypeFilter.tsx       |  4 +-
 .../AddPanelWidget/AddPanelWidget.tsx         | 12 +++-
 .../LibraryPanelsSearch.tsx                   | 61 +++++++++++++++++--
 3 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
index 8c8d0e69791..dcfc7c21607 100644
--- a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
+++ b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
@@ -41,7 +41,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange }: Props): JSX.Element
     getOptionValue: (i: any) => i.value,
     isMulti: true,
     noOptionsMessage: 'No Panel types found',
-    placeholder: 'Filter by Panel type',
+    placeholder: 'Filter by type',
     styles: resetSelectStyles(),
     maxMenuHeight: 150,
     options,
@@ -56,7 +56,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange }: Props): JSX.Element
           Clear types
         </span>
       )}
-      <Select {...selectOptions} prefix={<Icon name="table" />} aria-label="Panel Type filter" />
+      <Select {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
     </div>
   );
 };
diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index 9d74e2a27c7..81e052215b4 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@@ -14,7 +14,10 @@ import { DashboardModel, PanelModel } from '../../state';
 import { LS_PANEL_COPY_KEY } from 'app/core/constants';
 import { LibraryPanelDTO } from '../../../library-panels/types';
 import { toPanelModelLibraryPanel } from '../../../library-panels/utils';
-import { LibraryPanelsSearch } from '../../../library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch';
+import {
+  LibraryPanelsSearch,
+  LibraryPanelsSearchVariant,
+} from '../../../library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch';
 import { connect, MapDispatchToProps } from 'react-redux';
 
 export type PanelPluginInfo = { id: any; defaults: { gridPos: { w: any; h: any }; title: any } };
@@ -138,7 +141,12 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
         {addPanelView ? 'Add panel from panel library' : 'Add panel'}
       </AddPanelWidgetHandle>
       {addPanelView ? (
-        <LibraryPanelsSearch onClick={onAddLibraryPanel} perPage={3} />
+        <LibraryPanelsSearch
+          onClick={onAddLibraryPanel}
+          perPage={40}
+          variant={LibraryPanelsSearchVariant.Tight}
+          showFilter
+        />
       ) : (
         <div className={styles.actionsWrapper}>
           <div className={styles.actionsRow}>
diff --git a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
index df197f2867d..302dc41d790 100644
--- a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
@@ -9,8 +9,14 @@ import { LibraryPanelsView } from '../LibraryPanelsView/LibraryPanelsView';
 import { DEFAULT_PER_PAGE_PAGINATION } from '../../../../core/constants';
 import { LibraryPanelDTO } from '../../types';
 
+export enum LibraryPanelsSearchVariant {
+  Tight = 'tight',
+  Spacious = 'spacious',
+}
+
 export interface LibraryPanelsSearchProps {
   onClick: (panel: LibraryPanelDTO) => void;
+  variant?: LibraryPanelsSearchVariant;
   showSort?: boolean;
   showFilter?: boolean;
   showSecondaryActions?: boolean;
@@ -20,6 +26,7 @@ export interface LibraryPanelsSearchProps {
 
 export const LibraryPanelsSearch = ({
   onClick,
+  variant = LibraryPanelsSearchVariant.Spacious,
   currentPanelId,
   perPage = DEFAULT_PER_PAGE_PAGINATION,
   showFilter = false,
@@ -33,14 +40,43 @@ export const LibraryPanelsSearch = ({
   const onSortChange = useCallback((sort: SelectableValue<string>) => setSortDirection(sort.value), []);
   const onFilterChange = useCallback((plugins: PanelPluginMeta[]) => setPanelFilter(plugins.map((p) => p.id)), []);
 
+  if (variant === LibraryPanelsSearchVariant.Spacious) {
+    return (
+      <div className={styles.container}>
+        <VerticalGroup spacing="lg">
+          <FilterInput value={searchQuery} onChange={setSearchQuery} placeholder={'Search by name'} width={0} />
+          <HorizontalGroup spacing="sm" justify={showSort && showFilter ? 'space-between' : 'flex-end'}>
+            {showSort && <SortPicker value={sortDirection} onChange={onSortChange} />}
+            {showFilter && <PanelTypeFilter onChange={onFilterChange} />}
+          </HorizontalGroup>
+          <div className={styles.libraryPanelsView}>
+            <LibraryPanelsView
+              onClickCard={onClick}
+              searchString={searchQuery}
+              sortDirection={sortDirection}
+              panelFilter={panelFilter}
+              currentPanelId={currentPanelId}
+              showSecondaryActions={showSecondaryActions}
+              perPage={perPage}
+            />
+          </div>
+        </VerticalGroup>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.container}>
-      <VerticalGroup spacing={showSort || showFilter ? 'lg' : 'xs'}>
-        <FilterInput value={searchQuery} onChange={setSearchQuery} placeholder={'Search by name'} width={0} />
-        <HorizontalGroup spacing="sm" justify={showSort && showFilter ? 'space-between' : 'flex-end'}>
-          {showSort && <SortPicker value={sortDirection} onChange={onSortChange} />}
-          {showFilter && <PanelTypeFilter onChange={onFilterChange} />}
-        </HorizontalGroup>
+      <VerticalGroup spacing="xs">
+        <div className={styles.buttonRow}>
+          <div className={styles.tightFilter}>
+            <FilterInput value={searchQuery} onChange={setSearchQuery} placeholder={'Search by name'} width={0} />
+          </div>
+          <div className={styles.tightSortFilter}>
+            {showSort && <SortPicker value={sortDirection} onChange={onSortChange} />}
+            {showFilter && <PanelTypeFilter onChange={onFilterChange} />}
+          </div>
+        </div>
         <div className={styles.libraryPanelsView}>
           <LibraryPanelsView
             onClickCard={onClick}
@@ -64,6 +100,19 @@ function getStyles(theme: GrafanaThemeV2) {
       overflow-y: auto;
       padding: ${theme.spacing(1)};
     `,
+    buttonRow: css`
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      margin-top: ${theme.spacing(1.5)}; // Clear types link
+    `,
+    tightFilter: css`
+      flex-grow: 1;
+    `,
+    tightSortFilter: css`
+      flex-grow: 1;
+      padding: ${theme.spacing(0, 0, 0, 0.5)};
+    `,
     libraryPanelsView: css`
       width: 100%;
     `,