Graph NG: make series color easy to clear (#27778)

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

@@ -22,7 +22,7 @@ export const ColorValueEditor: React.FC<FieldConfigEditorProps<FieldColor, Color
   const theme = getTheme();
   const styles = getStyles(theme);
 
-  const color = value.fixedColor || item.defaultValue?.fixedColor;
+  const color = value?.fixedColor || item.defaultValue?.fixedColor;
 
   const onValueChange = useCallback(
     color => {
@@ -41,7 +41,7 @@ export const ColorValueEditor: React.FC<FieldConfigEditorProps<FieldColor, Color
                 ref={ref}
                 onClick={showColorPicker}
                 onMouseLeave={hideColorPicker}
-                color={color ? getColorFromHexRgbOrName(color, theme.type) : ''}
+                color={color ? getColorFromHexRgbOrName(color, theme.type) : theme.colors.formInputBorder}
               />
             </div>
             <div className={styles.colorText} onClick={showColorPicker}>

packages/grafana-ui/src/index.ts

@@ -10,4 +10,4 @@ export * from './themes';
 export * from './slate-plugins';
 
 // Exposes standard editors for registries of optionsUi config and panel options UI
-export { getStandardFieldConfigs, getStandardOptionEditors } from './utils//standardEditors';
+export { getStandardFieldConfigs, getStandardOptionEditors } from './utils/standardEditors';

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

 import {
   FieldColor,
-  FieldColorMode,
+  FieldConfigProperty,
   identityOverrideProcessor,
   PanelPlugin,
   standardEditorsRegistry,
@@ -11,6 +11,16 @@ import { Options } from './types';
 
 export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPanel)
   .useFieldConfig({
+    standardOptions: [
+      // FieldConfigProperty.Min,
+      // FieldConfigProperty.Max,
+      FieldConfigProperty.Unit,
+      FieldConfigProperty.DisplayName,
+      FieldConfigProperty.Decimals,
+      // NOT:  FieldConfigProperty.Thresholds,
+      FieldConfigProperty.Mappings,
+    ],
+
     useCustomConfig: builder => {
       builder
         // TODO:  Until we fix standard color property let's do it the custom editor way
@@ -19,8 +29,11 @@ export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPane
           id: 'line.color',
           name: 'Series color',
           shouldApply: () => true,
-          settings: {},
-          defaultValue: { mode: FieldColorMode.Fixed },
+          settings: {
+            allowUndefined: true,
+            textWhenUndefined: 'Automatic',
+          },
+          defaultValue: undefined,
           editor: standardEditorsRegistry.get('color').editor as any,
           override: standardEditorsRegistry.get('color').editor as any,
           process: identityOverrideProcessor,