NewPanelEdit: Side options collapse/expand design update (#23161)

* WIP: Panel options search

* Panel options search

* Minor update

* Fixed ts issues

* StatPanel: Fixed duplicate option exception

* Added some polish

* Updated snapshot

* Minor fix

* updated snapshot

packages/grafana-ui/src/components/Forms/Input/Input.tsx

@@ -211,7 +211,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
 });
 
 export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
-  const { addonAfter, addonBefore, prefix, suffix, invalid, loading, size = 'auto', ...restProps } = props;
+  const { className, addonAfter, addonBefore, prefix, suffix, invalid, loading, size = 'auto', ...restProps } = props;
   /**
    * Prefix & suffix are positioned absolutely within inputWrapper. We use client rects below to apply correct padding to the input
    * when prefix/suffix is larger than default (28px = 16px(icon) + 12px(left/right paddings)).
@@ -224,7 +224,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   const styles = getInputStyles({ theme, invalid: !!invalid });
 
   return (
-    <div className={cx(styles.wrapper, inputSizes()[size])}>
+    <div className={cx(styles.wrapper, inputSizes()[size], className)}>
       {!!addonBefore && <div className={styles.addon}>{addonBefore}</div>}
 
       <div className={styles.inputWrapper}>

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

@@ -13,11 +13,13 @@ export interface IconProps {
 const getIconStyles = stylesFactory(() => {
   return {
     icon: css`
-      display: inline-block;
+      display: inline-flex;
       width: 16px;
+      align-items: center;
       height: 16px;
       text-align: center;
       font-size: 14px;
+
       &:before {
         vertical-align: middle;
       }

packages/grafana-ui/src/components/Icon/types.ts

@@ -89,6 +89,7 @@ export type IconType =
   | 'times-circle-o'
   | 'check-circle-o'
   | 'ban'
+  | 'remove'
   | 'arrow-left'
   | 'arrow-right'
   | 'arrow-up'

packages/grafana-ui/src/components/Tabs/TabsBar.tsx

@@ -24,6 +24,8 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme, hideBorder = false)
       position: relative;
       top: 1px;
       display: flex;
+      // Sometimes TabsBar is rendered without any tabs, and should preserve height
+      height: 41px;
     `,
   };
 });

public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap

@@ -97,7 +97,7 @@ exports[`ServerStats Should render table with stats 1`] = `
                   className="page-header__tabs"
                 >
                   <ul
-                    className="css-13jkosq"
+                    className="css-payll4"
                   >
                     <li
                       className="css-1aiaexb"

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

@@ -5,32 +5,35 @@ import { Tooltip } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 
 interface Props {
-  icon: string;
+  icon?: string;
   tooltip: string;
-  classSuffix: string;
+  classSuffix?: string;
   onClick?: () => void;
   href?: string;
+  children?: React.ReactNode;
 }
 
-export const DashNavButton: FunctionComponent<Props> = ({ icon, tooltip, classSuffix, onClick, href }) => {
+export const DashNavButton: FunctionComponent<Props> = ({ icon, tooltip, classSuffix, onClick, href, children }) => {
   if (onClick) {
     return (
-      <Tooltip content={tooltip}>
+      <Tooltip content={tooltip} placement="bottom">
         <button
           className={`btn navbar-button navbar-button--${classSuffix}`}
           onClick={onClick}
           aria-label={e2e.pages.Dashboard.Toolbar.selectors.toolbarItems(tooltip)}
         >
-          <i className={icon} />
+          {icon && <i className={icon} />}
+          {children}
         </button>
       </Tooltip>
     );
   }
 
   return (
-    <Tooltip content={tooltip}>
+    <Tooltip content={tooltip} placement="bottom">
       <a className={`btn navbar-button navbar-button--${classSuffix}`} href={href}>
-        <i className={icon} />
+        {icon && <i className={icon} />}
+        {children}
       </a>
     </Tooltip>
   );

public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx

@@ -1,24 +1,48 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, CSSProperties } from 'react';
+import Transition from 'react-transition-group/Transition';
 import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin } from '@grafana/data';
 import { DashboardModel, PanelModel } from '../../state';
-import { CustomScrollbar, stylesFactory, Tab, TabContent, TabsBar, useTheme, Container } from '@grafana/ui';
+import {
+  CustomScrollbar,
+  stylesFactory,
+  Tab,
+  TabContent,
+  TabsBar,
+  useTheme,
+  Container,
+  Forms,
+  Icon,
+} from '@grafana/ui';
 import { DefaultFieldConfigEditor, OverrideFieldConfigEditor } from './FieldConfigEditor';
 import { AngularPanelOptions } from './AngularPanelOptions';
 import { css } from 'emotion';
 import { GeneralPanelOptions } from './GeneralPanelOptions';
 import { PanelOptionsEditor } from './PanelOptionsEditor';
+import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
 
 export const OptionsPaneContent: React.FC<{
   plugin?: PanelPlugin;
   panel: PanelModel;
   data: PanelData;
   dashboard: DashboardModel;
+  onClose: () => void;
   onFieldConfigsChange: (config: FieldConfigSource) => void;
   onPanelOptionsChanged: (options: any) => void;
   onPanelConfigChange: (configKey: string, value: any) => void;
-}> = ({ plugin, panel, data, onFieldConfigsChange, onPanelOptionsChanged, onPanelConfigChange, dashboard }) => {
+}> = ({
+  plugin,
+  panel,
+  data,
+  onFieldConfigsChange,
+  onPanelOptionsChanged,
+  onPanelConfigChange,
+  onClose,
+  dashboard,
+}) => {
   const theme = useTheme();
   const styles = getStyles(theme);
+  const [activeTab, setActiveTab] = useState('defaults');
+  const [isSearching, setSearchMode] = useState(false);
 
   const renderFieldOptions = useCallback(
     (plugin: PanelPlugin) => {
@@ -105,16 +129,75 @@ export const OptionsPaneContent: React.FC<{
     [data, plugin, panel, onFieldConfigsChange]
   );
 
-  const [activeTab, setActiveTab] = useState('defaults');
+  const renderSearchInput = useCallback(() => {
+    const defaultStyles = {
+      transition: 'width 50ms ease-in-out',
+      width: '50%',
+      display: 'flex',
+    };
+
+    const transitionStyles: { [str: string]: CSSProperties } = {
+      entered: { width: '100%' },
+    };
+
+    return (
+      <Transition in={true} timeout={0} appear={true}>
+        {state => {
+          return (
+            <div className={styles.searchWrapper}>
+              <div style={{ ...defaultStyles, ...transitionStyles[state] }}>
+                <Forms.Input
+                  className={styles.searchInput}
+                  type="text"
+                  prefix={<Icon name="search" />}
+                  ref={elem => elem && elem.focus()}
+                  placeholder="Search all options"
+                  suffix={
+                    <Icon name="remove" onClick={() => setSearchMode(false)} className={styles.searchRemoveIcon} />
+                  }
+                />
+              </div>
+            </div>
+          );
+        }}
+      </Transition>
+    );
+  }, []);
 
   return (
     <div className={styles.panelOptionsPane}>
       {plugin && (
         <div className={styles.wrapper}>
-          <TabsBar>
+          <TabsBar className={styles.tabsBar}>
-            <Tab label="Options" active={activeTab === 'defaults'} onChangeTab={() => setActiveTab('defaults')} />
+            {isSearching && renderSearchInput()}
-            <Tab label="Overrides" active={activeTab === 'overrides'} onChangeTab={() => setActiveTab('overrides')} />
+            {!isSearching && (
-            <Tab label="General" active={activeTab === 'panel'} onChangeTab={() => setActiveTab('panel')} />
+              <>
+                <Tab label="Options" active={activeTab === 'defaults'} onChangeTab={() => setActiveTab('defaults')} />
+                <Tab
+                  label="Overrides"
+                  active={activeTab === 'overrides'}
+                  onChangeTab={() => setActiveTab('overrides')}
+                />
+                <Tab label="General" active={activeTab === 'panel'} onChangeTab={() => setActiveTab('panel')} />
+                <div className="flex-grow-1" />
+                <div className={styles.tabsButton}>
+                  <DashNavButton
+                    icon="fa fa-search"
+                    tooltip="Search all options"
+                    classSuffix="search-options"
+                    onClick={() => setSearchMode(true)}
+                  />
+                </div>
+                <div className={styles.tabsButton}>
+                  <DashNavButton
+                    icon="fa fa-chevron-right"
+                    tooltip="Close options pane"
+                    classSuffix="close-options"
+                    onClick={onClose}
+                  />
+                </div>
+              </>
+            )}
           </TabsBar>
           <TabContent className={styles.tabContent}>
             <CustomScrollbar>
@@ -135,11 +218,26 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       display: flex;
       flex-direction: column;
       height: 100%;
+      padding-top: ${theme.spacing.sm};
     `,
     panelOptionsPane: css`
       height: 100%;
       width: 100%;
-      border-bottom: none;
+    `,
+    tabsBar: css`
+      padding-right: ${theme.spacing.sm};
+    `,
+    searchWrapper: css`
+      display: flex;
+      flex-grow: 1;
+      flex-direction: row-reverse;
+    `,
+    searchInput: css`
+      color: ${theme.colors.textWeak};
+      flex-grow: 1;
+    `,
+    searchRemoveIcon: css`
+      cursor: pointer;
     `,
     tabContent: css`
       padding: 0;
@@ -150,6 +248,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       background: ${theme.colors.pageBg};
       border-left: 1px solid ${theme.colors.pageHeaderBorder};
     `,
+    tabsButton: css``,
     legacyOptions: css`
       label: legacy-options;
       .panel-options-grid {

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

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin, SelectableValue } from '@grafana/data';
-import { Forms, stylesFactory, Button } from '@grafana/ui';
+import { Forms, stylesFactory, Icon } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import config from 'app/core/config';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -25,6 +25,7 @@ import { PanelEditorUIState, setDiscardChanges } from './state/reducers';
 import { getPanelEditorTabs } from './state/selectors';
 import { getPanelStateById } from '../../state/selectors';
 import { OptionsPaneContent } from './OptionsPaneContent';
+import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
 
 enum Pane {
   Right,
@@ -155,28 +156,31 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         onDragStarted={this.onDragStarted}
         onDragFinished={size => this.onDragFinished(Pane.Top, size)}
       >
-        <div className={styles.panelWrapper}>
+        <div className={styles.mainPaneWrapper}>
-          <AutoSizer>
+          {this.renderToolbar(styles)}
-            {({ width, height }) => {
+          <div className={styles.panelWrapper}>
-              if (width < 3 || height < 3) {
+            <AutoSizer>
-                return null;
+              {({ width, height }) => {
-              }
+                if (width < 3 || height < 3) {
-              return (
+                  return null;
-                <div className={styles.centeringContainer} style={{ width, height }}>
+                }
-                  <div style={calculatePanelSize(uiState.mode, width, height, panel)}>
+                return (
-                    <DashboardPanel
+                  <div className={styles.centeringContainer} style={{ width, height }}>
-                      dashboard={dashboard}
+                    <div style={calculatePanelSize(uiState.mode, width, height, panel)}>
-                      panel={panel}
+                      <DashboardPanel
-                      isEditing={false}
+                        dashboard={dashboard}
-                      isInEditMode
+                        panel={panel}
-                      isFullscreen={false}
+                        isEditing={false}
-                      isInView={true}
+                        isInEditMode
-                    />
+                        isFullscreen={false}
+                        isInView={true}
+                      />
+                    </div>
                   </div>
-                </div>
+                );
-              );
+              }}
-            }}
+            </AutoSizer>
-          </AutoSizer>
+          </div>
         </div>
         <div className={styles.tabsWrapper}>
           <PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} data={data} />
@@ -185,9 +189,8 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
     );
   }
 
-  renderToolbar() {
+  renderToolbar(styles: any) {
     const { dashboard, location, uiState } = this.props;
-    const styles = getStyles(config.theme);
 
     return (
       <div className={styles.toolbar}>
@@ -197,9 +200,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         </div>
         <div className={styles.toolbarLeft}>
           <div className={styles.toolbarItem}>
-            <Button className={styles.toolbarItem} variant="secondary" onClick={this.onDiscard}>
+            <DashNavButton tooltip="Discard all changes and return to dashboard" onClick={this.onDiscard}>
               Discard changes
-            </Button>
+            </DashNavButton>
           </div>
           <div className={styles.toolbarItem}>
             <Forms.Select
@@ -211,20 +214,23 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
           <div className={styles.toolbarItem}>
             <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
           </div>
-          <div className={styles.toolbarItem}>
+          {!uiState.isPanelOptionsVisible && (
-            <Button
+            <div className={styles.toolbarItem}>
-              className={styles.toolbarItem}
+              <DashNavButton
-              icon="fa fa-sliders"
+                onClick={this.onTogglePanelOptions}
-              variant="secondary"
+                tooltip="Open options pane"
-              onClick={this.onTogglePanelOptions}
+                classSuffix="close-options"
-            />
+              >
-          </div>
+                <Icon name="chevron-left" /> <span style={{ paddingLeft: '6px' }}>Show options</span>
+              </DashNavButton>
+            </div>
+          )}
         </div>
       </div>
     );
   }
 
-  renderOptionsPane() {
+  renderOptionsPane(styles: any) {
     const { plugin, dashboard, data, panel } = this.props;
 
     if (!plugin) {
@@ -237,6 +243,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         dashboard={dashboard}
         data={data}
         panel={panel}
+        onClose={this.onTogglePanelOptions}
         onFieldConfigsChange={this.onFieldConfigChange}
         onPanelOptionsChanged={this.onPanelOptionsChanged}
         onPanelConfigChange={this.onPanelConfigChanged}
@@ -259,14 +266,14 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         onDragFinished={size => this.onDragFinished(Pane.Right, size)}
       >
         {this.renderHorizontalSplit(styles)}
-        {this.renderOptionsPane()}
+        {this.renderOptionsPane(styles)}
       </SplitPane>
     );
   }
 
   render() {
     const { initDone, uiState } = this.props;
-    const styles = getStyles(config.theme);
+    const styles = getStyles(config.theme, this.props);
 
     if (!initDone) {
       return null;
@@ -275,10 +282,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
     return (
       <NewPanelEditorContext.Provider value={true}>
         <div className={styles.wrapper}>
-          {this.renderToolbar()}
+          {uiState.isPanelOptionsVisible ? this.renderWithOptionsPane(styles) : this.renderHorizontalSplit(styles)}
-          <div className={styles.panesWrapper}>
-            {uiState.isPanelOptionsVisible ? this.renderWithOptionsPane(styles) : this.renderHorizontalSplit(styles)}
-          </div>
         </div>
       </NewPanelEditorContext.Provider>
     );
@@ -313,7 +317,8 @@ export const PanelEditor = connect(mapStateToProps, mapDispatchToProps)(PanelEdi
 /*
  * Styles
  */
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
+  const { uiState } = props;
   const handleColor = theme.colors.blueLight;
   const paneSpaceing = theme.spacing.md;
 
@@ -347,16 +352,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       display: flex;
       flex-direction: column;
     `,
-    panesWrapper: css`
+    mainPaneWrapper: css`
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+      padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpaceing};
+    `,
+    panelWrapper: css`
       flex: 1 1 0;
       min-height: 0;
-      width: 100%;
-      position: relative;
-    `,
-    panelWrapper: css`
       width: 100%;
       padding-left: ${paneSpaceing};
-      height: 100%;
     `,
     resizerV: cx(
       resizer,
@@ -384,6 +391,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     toolbar: css`
       display: flex;
       padding: ${theme.spacing.sm};
+      padding-right: 0;
       justify-content: space-between;
     `,
     toolbarLeft: css`

public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx

@@ -71,7 +71,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
       height: 100%;
     `,
     tabBar: css`
-      padding-left: ${theme.spacing.sm};
+      padding-left: ${theme.spacing.md};
     `,
     tabContent: css`
       padding: 0;
@@ -80,6 +80,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
       flex-grow: 1;
       min-height: 0;
       background: ${theme.colors.panelBg};
+      border-right: 1px solid ${theme.colors.pageHeaderBorder};
 
       .toolbar {
         background: transparent;