From 8de606aa222c361f6c45e88391ca4278d95f7ab9 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Mon, 27 Apr 2020 23:28:24 +0200
Subject: [PATCH] Various 7.0 UI tweaks (#23972)

* Set min height of panel pane to 200px

* Disable badge on viz picker when item is in disabled in search results

* Fix UserProfile inputs width

* Remove select caret in user admin permissions editor

* fix 23911
---
 public/app/features/admin/UserPermissions.tsx        | 12 +++++-------
 public/app/features/admin/UserProfile.tsx            |  1 +
 .../dashboard/components/PanelEditor/PanelEditor.tsx |  2 +-
 .../dashboard/panel_editor/VizTypePicker.tsx         | 10 +++++-----
 .../dashboard/panel_editor/VizTypePickerPlugin.tsx   |  8 ++++----
 .../features/search/components/DashboardSearch.tsx   |  2 +-
 6 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/public/app/features/admin/UserPermissions.tsx b/public/app/features/admin/UserPermissions.tsx
index 52a4f6674b8..1c6df69265a 100644
--- a/public/app/features/admin/UserPermissions.tsx
+++ b/public/app/features/admin/UserPermissions.tsx
@@ -61,13 +61,11 @@ export class UserPermissions extends PureComponent<Props, State> {
                   <td className="width-16">Grafana Admin</td>
                   {isEditing ? (
                     <td colSpan={2}>
-                      <div className="gf-form-select-wrapper width-8">
-                        <RadioButtonGroup
-                          options={adminOptions}
-                          value={currentAdminOption}
-                          onChange={this.onAdminOptionSelect}
-                        />
-                      </div>
+                      <RadioButtonGroup
+                        options={adminOptions}
+                        value={currentAdminOption}
+                        onChange={this.onAdminOptionSelect}
+                      />
                     </td>
                   ) : (
                     <td colSpan={2}>
diff --git a/public/app/features/admin/UserProfile.tsx b/public/app/features/admin/UserProfile.tsx
index 138eacdeb25..7d3046c5141 100644
--- a/public/app/features/admin/UserProfile.tsx
+++ b/public/app/features/admin/UserProfile.tsx
@@ -272,6 +272,7 @@ export class UserProfileRow extends PureComponent<UserProfileRowProps, UserProfi
               onBlur={this.onInputBlur}
               onChange={this.onInputChange}
               ref={this.setInputElem}
+              width={30}
             />
           ) : (
             <span>{this.props.value}</span>
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index 28daff7dbf0..cbd190f001d 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -187,7 +187,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
     return tabs.length > 0 ? (
       <SplitPane
         split="horizontal"
-        minSize={50}
+        minSize={200}
         primary="first"
         /* Use persisted state for default size */
         defaultSize={uiState.topPaneSize}
diff --git a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
index 8d636de22d3..b4ec3610d21 100644
--- a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
+++ b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
@@ -60,6 +60,10 @@ export const VizTypePicker: React.FC<Props> = ({ searchQuery, onTypeChange, curr
     return getAllPanelPluginMeta();
   }, []);
 
+  const getFilteredPluginList = useCallback((): PanelPluginMeta[] => {
+    return filterPluginList(pluginsList, searchQuery, current);
+  }, [searchQuery]);
+
   const renderVizPlugin = (plugin: PanelPluginMeta, index: number) => {
     const isCurrent = plugin.id === current.id;
     const filteredPluginList = getFilteredPluginList();
@@ -67,7 +71,7 @@ export const VizTypePicker: React.FC<Props> = ({ searchQuery, onTypeChange, curr
     const matchesQuery = filteredPluginList.indexOf(plugin) > -1;
     return (
       <VizTypePickerPlugin
-        disabled={!matchesQuery}
+        disabled={!matchesQuery && !!searchQuery}
         key={plugin.id}
         isCurrent={isCurrent}
         plugin={plugin}
@@ -76,10 +80,6 @@ export const VizTypePicker: React.FC<Props> = ({ searchQuery, onTypeChange, curr
     );
   };
 
-  const getFilteredPluginList = useCallback((): PanelPluginMeta[] => {
-    return filterPluginList(pluginsList, searchQuery, current);
-  }, [searchQuery]);
-
   const filteredPluginList = getFilteredPluginList();
   const hasResults = filteredPluginList.length > 0;
   const renderList = filteredPluginList.concat(pluginsList.filter(p => filteredPluginList.indexOf(p) === -1));
diff --git a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
index 22300180cd8..f3d26eec83e 100644
--- a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
+++ b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { GrafanaTheme, PanelPluginMeta } from '@grafana/data';
-import { stylesFactory, useTheme, styleMixins } from '@grafana/ui';
+import { GrafanaTheme, PanelPluginMeta, PluginState } from '@grafana/data';
+import { styleMixins, stylesFactory, useTheme } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import { selectors } from '@grafana/e2e-selectors';
 import { PanelPluginBadge } from '../../plugins/PluginSignatureBadge';
@@ -17,7 +17,7 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
   const styles = getStyles(theme);
   const cssClass = cx({
     [styles.item]: true,
-    [styles.disabled]: disabled,
+    [styles.disabled]: disabled || plugin.state === PluginState.deprecated,
     [styles.current]: isCurrent,
   });
 
@@ -32,7 +32,7 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
           <img className={styles.img} src={plugin.info.logos.small} />
         </div>
       </div>
-      <div className={styles.badge}>
+      <div className={cx(styles.badge, disabled && styles.disabled)}>
         <PanelPluginBadge plugin={plugin} />
       </div>
     </div>
diff --git a/public/app/features/search/components/DashboardSearch.tsx b/public/app/features/search/components/DashboardSearch.tsx
index 6e8380806ba..0cba3528126 100644
--- a/public/app/features/search/components/DashboardSearch.tsx
+++ b/public/app/features/search/components/DashboardSearch.tsx
@@ -14,7 +14,7 @@ export interface Props {
 }
 
 export const DashboardSearch: FC<Props> = memo(({ onCloseSearch, folder }) => {
-  const payload = folder ? { query: `folder:${folder}` } : {};
+  const payload = folder ? { query: `folder:${folder} ` } : {};
   const { query, onQueryChange, onTagFilterChange, onTagAdd, onSortChange, onLayoutChange } = useSearchQuery(payload);
   const { results, loading, onToggleSection, onKeyDown } = useDashboardSearch(query, onCloseSearch);
   const theme = useTheme();