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

@@ -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}>

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>

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}

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));

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>

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();