Search: Adds search to main nav and removes open search click on dashboard name (#23943)

* Search: Adds search to main nav and removes open search click on dashboard name

* Updated snapshots

* Fixed strict null errors

* Fixed type issue

packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts

@@ -40,7 +40,7 @@ export interface OptionsEditorItem<TOptions, TSettings, TEditorProps, TValue> ex
    *
    * @param currentConfig Current options values
    */
-  showIf?: (currentConfig: TOptions) => boolean;
+  showIf?: (currentConfig: TOptions) => boolean | undefined;
   /**
    * Function that returns number of items if given option represents a collection, i.e. array of items.
    * @param value

packages/grafana-data/src/types/datasource.ts

@@ -428,7 +428,7 @@ export interface DataQueryRequest<TQuery extends DataQuery = DataQuery> {
   intervalMs?: number;
   maxDataPoints?: number;
   panelId: number;
-  range?: TimeRange;
+  range: TimeRange;
   reverse?: boolean;
   scopedVars: ScopedVars;
   targets: TQuery[];

packages/grafana-data/src/types/panel.ts

@@ -156,7 +156,7 @@ export interface PanelOptionsEditorConfig<TOptions, TSettings = any, TValue = an
    *
    * @param currentConfig Current panel options
    */
-  showIf?: (currentConfig: TOptions) => boolean;
+  showIf?: (currentConfig: TOptions) => boolean | undefined;
 }
 
 /**

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -88,7 +88,7 @@ export const getSvgSize = (size: IconSize) => {
     case 'lg':
       return 18;
     case 'xl':
-      return 28;
+      return 24;
     case 'xxl':
       return 36;
     case 'xxxl':

packages/grafana-ui/src/components/Select/SelectMenu.tsx

@@ -42,6 +42,7 @@ export const SelectMenuOptions = React.forwardRef<HTMLDivElement, React.PropsWit
     const theme = useTheme();
     const styles = getSelectStyles(theme);
     const { children, innerProps, data, renderOptionLabel, isSelected, isFocused } = props;
+
     return (
       <div
         ref={ref}

packages/grafana-ui/src/types/icon.ts

@@ -112,6 +112,7 @@ export type IconName =
   | 'heart-break'
   | 'ellipsis-v'
   | 'favorite'
+  | 'line-alt'
   | 'sort-amount-down';
 
 export const getAvailableIcons = (): IconName[] => [

public/app/core/components/TagFilter/TagFilter.tsx

@@ -4,7 +4,7 @@ import { css } from 'emotion';
 // @ts-ignore
 import { components } from '@torkelo/react-select';
 import { AsyncSelect, stylesFactory } from '@grafana/ui';
-import { resetSelectStyles, Icon } from '@grafana/ui';
+import { Icon } from '@grafana/ui';
 import { escapeStringForRegex } from '@grafana/data';
 // Components
 import { TagOption } from './TagOption';
@@ -74,7 +74,6 @@ export class TagFilter extends React.Component<Props, any> {
       noOptionsMessage: 'No tags found',
       onChange: this.onChange,
       placeholder,
-      styles: resetSelectStyles(),
       value: tags,
       width,
       components: {

public/app/core/components/sidemenu/TopSection.tsx

@@ -2,13 +2,23 @@ import React, { FC } from 'react';
 import _ from 'lodash';
 import TopSectionItem from './TopSectionItem';
 import config from '../../config';
+import { getLocationSrv } from '@grafana/runtime';
 
 const TopSection: FC<any> = () => {
   const navTree = _.cloneDeep(config.bootData.navTree);
   const mainLinks = _.filter(navTree, item => !item.hideFromMenu);
+  const searchLink = {
+    text: 'Search',
+    icon: 'search',
+  };
+
+  const onOpenSearch = () => {
+    getLocationSrv().update({ query: { search: 'open' }, partial: true });
+  };
 
   return (
     <div className="sidemenu__top">
+      <TopSectionItem link={searchLink} onClick={onOpenSearch} />
       {mainLinks.map((link, index) => {
         return <TopSectionItem link={link} key={`${link.id}-${index}`} />;
       })}

public/app/core/components/sidemenu/TopSectionItem.test.tsx

 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import TopSectionItem from './TopSectionItem';
 
 const setup = (propOverrides?: object) => {
   const props = Object.assign(
     {
-      link: {},
+      link: {
+        text: 'Hello',
+        url: '/asd',
+      },
     },
     propOverrides
   );
 
-  return shallow(<TopSectionItem {...props} />);
+  return mount(<TopSectionItem {...props} />);
 };
 
 describe('Render', () => {
   it('should render component', () => {
     const wrapper = setup();
-
     expect(wrapper).toMatchSnapshot();
   });
 });

public/app/core/components/sidemenu/TopSectionItem.tsx

 import React, { FC } from 'react';
 import SideMenuDropDown from './SideMenuDropDown';
 import { Icon } from '@grafana/ui';
+import { NavModelItem } from '@grafana/data';
 
 export interface Props {
-  link: any;
+  link: NavModelItem;
+  onClick?: () => void;
 }
 
 const TopSectionItem: FC<Props> = props => {
-  const { link } = props;
+  const { link, onClick } = props;
+
   return (
     <div className="sidemenu-item dropdown">
-      <a className="sidemenu-link" href={link.url} target={link.target}>
+      <a className="sidemenu-link" href={link.url} target={link.target} onClick={onClick}>
         <span className="icon-circle sidemenu-icon">
-          <Icon name={link.icon} size="xl" />
+          <Icon name={link.icon as any} size="xl" />
           {link.img && <img src={link.img} />}
         </span>
       </a>

public/app/core/components/sidemenu/__snapshots__/TopSection.test.tsx.snap

@@ -5,6 +5,15 @@ exports[`Render should render component 1`] = `
   className="sidemenu__top"
 >
   <TopSectionItem
+    link={
+      Object {
+        "icon": "search",
+        "text": "Search",
+      }
+    }
+    onClick={[Function]}
+  />
+  <TopSectionItem
     key="3-0"
     link={
       Object {
@@ -21,6 +30,15 @@ exports[`Render should render items 1`] = `
   className="sidemenu__top"
 >
   <TopSectionItem
+    link={
+      Object {
+        "icon": "search",
+        "text": "Search",
+      }
+    }
+    onClick={[Function]}
+  />
+  <TopSectionItem
     key="3-0"
     link={
       Object {

public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render component 1`] = `
-<div
-  className="sidemenu-item dropdown"
+<TopSectionItem
+  link={
+    Object {
+      "text": "Hello",
+      "url": "/asd",
+    }
+  }
 >
-  <a
-    className="sidemenu-link"
+  <div
+    className="sidemenu-item dropdown"
   >
-    <span
-      className="icon-circle sidemenu-icon"
+    <a
+      className="sidemenu-link"
+      href="/asd"
     >
-      <Icon
-        size="xl"
-      />
-    </span>
-  </a>
-  <SideMenuDropDown
-    link={Object {}}
-  />
-</div>
+      <span
+        className="icon-circle sidemenu-icon"
+      >
+        <Icon
+          size="xl"
+        >
+          <div />
+        </Icon>
+      </span>
+    </a>
+    <SideMenuDropDown
+      link={
+        Object {
+          "text": "Hello",
+          "url": "/asd",
+        }
+      }
+    >
+      <ul
+        className="dropdown-menu dropdown-menu--sidemenu"
+        role="menu"
+      >
+        <li
+          className="side-menu-header"
+        >
+          <a
+            className="side-menu-header-link"
+            href="/asd"
+          >
+            <span
+              className="sidemenu-item-text"
+            >
+              Hello
+            </span>
+          </a>
+        </li>
+      </ul>
+    </SideMenuDropDown>
+  </div>
+</TopSectionItem>
 `;

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -58,13 +58,6 @@ class DashNav extends PureComponent<Props> {
     this.playlistSrv = this.props.$injector.get('playlistSrv');
   }
 
-  onDashboardNameClick = () => {
-    this.props.updateLocation({
-      query: { search: 'open' },
-      partial: true,
-    });
-  };
-
   onFolderNameClick = () => {
     this.props.updateLocation({
       query: { search: 'open', folder: 'current' },
@@ -169,13 +162,12 @@ class DashNav extends PureComponent<Props> {
 
   renderDashboardTitleSearchButton() {
     const { dashboard, isFullscreen } = this.props;
-    /* Hard-coded value so we don't have to wrap whole component in withTheme because of 1 variable */
-    const iconClassName = css`
-      margin-right: 4px;
-      margin-bottom: -1px;
+
+    const folderSymbol = css`
+      margin-right: 0 4px;
     `;
     const mainIconClassName = css`
-      margin-right: 4px;
+      margin-right: 8px;
       margin-bottom: 3px;
     `;
 
@@ -190,14 +182,11 @@ class DashNav extends PureComponent<Props> {
             {haveFolder && (
               <>
                 <a className="navbar-page-btn__folder" onClick={this.onFolderNameClick}>
-                  {folderTitle}
+                  {folderTitle} <span className={folderSymbol}>/</span>
                 </a>
-                <Icon name="angle-right" className={iconClassName} />
               </>
             )}
-            <a onClick={this.onDashboardNameClick}>
-              {dashboard.title} <Icon name="angle-down" className={iconClassName} />
-            </a>
+            <span>{dashboard.title}</span>
           </div>
         </div>
         <div className="navbar-buttons navbar-buttons--actions">{this.renderLeftActionsButton()}</div>

public/app/plugins/datasource/jaeger/datasource.test.ts

 import { JaegerDatasource, JaegerQuery } from './datasource';
-import { DataQueryRequest, DataSourceInstanceSettings, FieldType, PluginType } from '@grafana/data';
+import { DataQueryRequest, DataSourceInstanceSettings, FieldType, PluginType, dateTime } from '@grafana/data';
 import { BackendSrv, BackendSrvRequest, getBackendSrv, setBackendSrv } from '@grafana/runtime';
 
 describe('JaegerDatasource', () => {
@@ -77,7 +77,12 @@ const defaultQuery: DataQueryRequest<JaegerQuery> = {
   interval: '0',
   panelId: 0,
   scopedVars: {},
-  timezone: '',
+  range: {
+    from: dateTime().subtract(1, 'h'),
+    to: dateTime(),
+    raw: { from: '1h', to: 'now' },
+  },
+  timezone: 'browser',
   app: 'explore',
   startTime: 0,
   targets: [

public/app/plugins/panel/news/module.tsx

@@ -17,7 +17,7 @@ export const plugin = new PanelPlugin<NewsOptions>(NewsPanel).setPanelOptions(bu
       path: 'useProxy',
       name: 'Use Proxy',
       description: 'If the feed is unable to connect, consider a CORS proxy',
-      showIf: currentConfig => {
+      showIf: (currentConfig: NewsOptions) => {
         return currentConfig.feedUrl && !currentConfig.feedUrl.startsWith(PROXY_PREFIX);
       },
     });

public/app/plugins/panel/stat/types.ts

@@ -51,7 +51,7 @@ export function addStandardDataReduceOptions(
       min: 1,
       max: 5000,
     },
-    showIf: options => options.reduceOptions.values,
+    showIf: options => options.reduceOptions.values === true,
   });
 
   builder.addCustomEditor({

public/sass/components/_navbar.scss

@@ -76,7 +76,7 @@
 
 .navbar-page-btn__folder {
   display: none;
-  padding-right: 8px;
+  padding-right: 4px;
 
   @include media-breakpoint-up(lg) {
     display: inline-block;

scripts/ci-frontend-metrics.sh

@@ -4,7 +4,7 @@ echo -e "Collecting code stats (typescript errors & more)"
 
 
 
-ERROR_COUNT_LIMIT=788
+ERROR_COUNT_LIMIT=771
 DIRECTIVES_LIMIT=172
 CONTROLLERS_LIMIT=139