Graph: Improves graph edit options in side pane (#24352)

* Graph: Improves graph edit options in side pane

* Fixed spell issue and order

* Fixed ts issue

packages/grafana-ui/src/components/OptionsUI/units.tsx

@@ -7,5 +7,5 @@ export const UnitValueEditor: React.FC<FieldConfigEditorProps<string, UnitFieldC
   value,
   value,
   onChange,
   onChange,
 }) => {
 }) => {
-  return <UnitPicker value={value} onChange={onChange} useNewForms />;
+  return <UnitPicker value={value} onChange={onChange} />;
 };
 };

packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx

@@ -13,5 +13,4 @@ export default {
   },
   },
 };
 };
 
 
-export const simple = () => <UnitPicker useNewForms onChange={val => console.log(val)} />;
-export const old = () => <UnitPicker onChange={val => console.log(val)} />;
+export const simple = () => <UnitPicker onChange={val => console.log(val)} />;

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
-
-import { Select } from '../Forms/Legacy/Select/Select';
 import { Cascader, CascaderOption } from '../Cascader/Cascader';
 import { Cascader, CascaderOption } from '../Cascader/Cascader';
 import { getValueFormats, SelectableValue } from '@grafana/data';
 import { getValueFormats, SelectableValue } from '@grafana/data';
 
 
@@ -8,8 +6,6 @@ interface Props {
   onChange: (item?: string) => void;
   onChange: (item?: string) => void;
   value?: string;
   value?: string;
   width?: number;
   width?: number;
-  /** Temporary flag that uses the new form styles. */
-  useNewForms?: boolean;
 }
 }
 
 
 function formatCreateLabel(input: string) {
 function formatCreateLabel(input: string) {
@@ -17,16 +13,12 @@ function formatCreateLabel(input: string) {
 }
 }
 
 
 export class UnitPicker extends PureComponent<Props> {
 export class UnitPicker extends PureComponent<Props> {
-  static defaultProps = {
-    width: 12,
-  };
-
   onChange = (value: SelectableValue<string>) => {
   onChange = (value: SelectableValue<string>) => {
     this.props.onChange(value.value);
     this.props.onChange(value.value);
   };
   };
 
 
   render() {
   render() {
-    const { value, width, useNewForms } = this.props;
+    const { value, width } = this.props;
 
 
     // Set the current selection
     // Set the current selection
     let current: SelectableValue<string> | undefined = undefined;
     let current: SelectableValue<string> | undefined = undefined;
@@ -46,16 +38,11 @@ export class UnitPicker extends PureComponent<Props> {
         }
         }
         return sel;
         return sel;
       });
       });
-      if (useNewForms) {
-        return {
-          label: group.text,
-          value: group.text,
-          items: options,
-        };
-      }
+
       return {
       return {
         label: group.text,
         label: group.text,
-        options,
+        value: group.text,
+        items: options,
       };
       };
     });
     });
 
 
@@ -64,8 +51,9 @@ export class UnitPicker extends PureComponent<Props> {
       current = { value, label: value };
       current = { value, label: value };
     }
     }
 
 
-    return useNewForms ? (
+    return (
       <Cascader
       <Cascader
+        width={width}
         initialValue={current && current.label}
         initialValue={current && current.label}
         allowCustomValue
         allowCustomValue
         formatCreateLabel={formatCreateLabel}
         formatCreateLabel={formatCreateLabel}
@@ -73,17 +61,6 @@ export class UnitPicker extends PureComponent<Props> {
         placeholder="Choose"
         placeholder="Choose"
         onSelect={this.props.onChange}
         onSelect={this.props.onChange}
       />
       />
-    ) : (
-      <Select
-        width={width}
-        defaultValue={current}
-        isSearchable={true}
-        allowCustomValue={true}
-        formatCreateLabel={formatCreateLabel}
-        options={groupOptions}
-        placeholder="Choose"
-        onChange={this.onChange}
-      />
     );
     );
   }
   }
 }
 }

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -159,7 +159,7 @@ $scrollbarBorder: black;
 
 
 // Tables
 // Tables
 // -------------------------
 // -------------------------
-$table-bg-accent: $dark-6; // for striping
+$table-bg-accent: ${styleMixins.hoverColor(theme.colors.bg1, theme)}; // for striping
 $table-border: $dark-6; // table and cell border
 $table-border: $dark-6; // table and cell border
 
 
 $table-bg-odd: $dark-3;
 $table-bg-odd: $dark-3;

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -152,7 +152,7 @@ $scrollbarBorder: $gray-7;
 
 
 // Tables
 // Tables
 // -------------------------
 // -------------------------
-$table-bg-accent: $gray-5; // for striping
+$table-bg-accent: ${styleMixins.hoverColor(theme.colors.bg1, theme)};
 $table-border: $gray-3; // table and cell border
 $table-border: $gray-3; // table and cell border
 
 
 $table-bg-odd: $gray-6;
 $table-bg-odd: $gray-6;

public/app/plugins/panel/graph/module.ts

@@ -167,7 +167,7 @@ class GraphCtrl extends MetricsPanelCtrl {
 
 
   onInitEditMode() {
   onInitEditMode() {
     this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html');
     this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html');
-    this.addEditorTab('Series overides', 'public/app/plugins/panel/graph/tab_series_overrides.html');
+    this.addEditorTab('Series overrides', 'public/app/plugins/panel/graph/tab_series_overrides.html');
     this.addEditorTab('Axes', axesEditorComponent);
     this.addEditorTab('Axes', axesEditorComponent);
     this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
     this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
     this.addEditorTab('Thresholds', 'public/app/plugins/panel/graph/tab_thresholds.html');
     this.addEditorTab('Thresholds', 'public/app/plugins/panel/graph/tab_thresholds.html');

public/app/plugins/panel/graph/tab_legend.html

@@ -117,7 +117,7 @@
     <gf-form-switch
     <gf-form-switch
       class="gf-form"
       class="gf-form"
       label="With only nulls"
       label="With only nulls"
-      label-class="width-10"
+      label-class="width-7"
       checked="ctrl.panel.legend.hideEmpty"
       checked="ctrl.panel.legend.hideEmpty"
       on-change="ctrl.render()"
       on-change="ctrl.render()"
     >
     >
@@ -125,7 +125,7 @@
     <gf-form-switch
     <gf-form-switch
       class="gf-form"
       class="gf-form"
       label="With only zeros"
       label="With only zeros"
-      label-class="width-10"
+      label-class="width-7"
       checked="ctrl.panel.legend.hideZero"
       checked="ctrl.panel.legend.hideZero"
       on-change="ctrl.render()"
       on-change="ctrl.render()"
     >
     >

public/sass/_variables.dark.generated.scss

@@ -161,7 +161,7 @@ $scrollbarBorder: black;
 
 
 // Tables
 // Tables
 // -------------------------
 // -------------------------
-$table-bg-accent: $dark-6; // for striping
+$table-bg-accent: #191b1e; // for striping
 $table-border: $dark-6; // table and cell border
 $table-border: $dark-6; // table and cell border
 
 
 $table-bg-odd: $dark-3;
 $table-bg-odd: $dark-3;

public/sass/_variables.light.generated.scss

@@ -154,7 +154,7 @@ $scrollbarBorder: $gray-7;
 
 
 // Tables
 // Tables
 // -------------------------
 // -------------------------
-$table-bg-accent: $gray-5; // for striping
+$table-bg-accent: #fafafa;
 $table-border: $gray-3; // table and cell border
 $table-border: $gray-3; // table and cell border
 
 
 $table-bg-odd: $gray-6;
 $table-bg-odd: $gray-6;

public/sass/components/_panel_graph.scss

@@ -171,7 +171,7 @@
     overflow: hidden;
     overflow: hidden;
   }
   }
 
 
-  .graph-legend-series:nth-child(odd) {
+  .graph-legend-series:nth-child(even) {
     background: $table-bg-accent;
     background: $table-bg-accent;
   }
   }