Fix mismatch in field config editor types (#27657)

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

@@ -37,7 +37,7 @@ export interface FieldOverrideContext extends StandardEditorContext<any> {
 }
 }
 export interface FieldConfigEditorProps<TValue, TSettings>
 export interface FieldConfigEditorProps<TValue, TSettings>
   extends Omit<StandardEditorProps<TValue, TSettings>, 'item'> {
   extends Omit<StandardEditorProps<TValue, TSettings>, 'item'> {
-  item: FieldConfigPropertyItem<TValue, TSettings>; // The property info
+  item: FieldConfigPropertyItem<any, TValue, TSettings>; // The property info
   value: TValue;
   value: TValue;
   context: FieldOverrideContext;
   context: FieldOverrideContext;
   onChange: (value?: TValue) => void;
   onChange: (value?: TValue) => void;

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

@@ -23,7 +23,7 @@ export const ColorValueEditor: React.FC<FieldConfigEditorProps<string, ColorFiel
   const color = value || (item.defaultValue as string) || theme.colors.panelBg;
   const color = value || (item.defaultValue as string) || theme.colors.panelBg;
 
 
   return (
   return (
-    <ColorPicker color={color} onChange={onChange} enableNamedColors={!settings.disableNamedColors}>
+    <ColorPicker color={color} onChange={onChange} enableNamedColors={!settings?.disableNamedColors}>
       {({ ref, showColorPicker, hideColorPicker }) => {
       {({ ref, showColorPicker, hideColorPicker }) => {
         return (
         return (
           <div className={styles.spot} onBlur={hideColorPicker}>
           <div className={styles.spot} onBlur={hideColorPicker}>
@@ -36,9 +36,9 @@ export const ColorValueEditor: React.FC<FieldConfigEditorProps<string, ColorFiel
               />
               />
             </div>
             </div>
             <div className={styles.colorText} onClick={showColorPicker}>
             <div className={styles.colorText} onClick={showColorPicker}>
-              {value ?? settings.textWhenUndefined ?? 'Pick Color'}
+              {value ?? settings?.textWhenUndefined ?? 'Pick Color'}
             </div>
             </div>
-            {value && settings.allowUndefined && (
+            {value && settings?.allowUndefined && (
               <Icon className={styles.trashIcon} name="trash-alt" onClick={() => onChange(undefined)} />
               <Icon className={styles.trashIcon} name="trash-alt" onClick={() => onChange(undefined)} />
             )}
             )}
           </div>
           </div>

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

@@ -24,7 +24,7 @@ export class SelectValueEditor<T> extends React.PureComponent<Props<T>, State<T>
     const now = this.props.item?.settings;
     const now = this.props.item?.settings;
     if (old !== now) {
     if (old !== now) {
       this.updateOptions();
       this.updateOptions();
-    } else if (now.getOptions) {
+    } else if (now?.getOptions) {
       const old = oldProps.context?.data;
       const old = oldProps.context?.data;
       const now = this.props.context?.data;
       const now = this.props.context?.data;
       if (old !== now) {
       if (old !== now) {
@@ -53,7 +53,6 @@ export class SelectValueEditor<T> extends React.PureComponent<Props<T>, State<T>
     const { value, onChange, item } = this.props;
     const { value, onChange, item } = this.props;
 
 
     const { settings } = item;
     const { settings } = item;
-    const { allowCustomValue } = settings;
     let current = options.find(v => v.value === value);
     let current = options.find(v => v.value === value);
     if (!current && value) {
     if (!current && value) {
       current = {
       current = {
@@ -66,7 +65,7 @@ export class SelectValueEditor<T> extends React.PureComponent<Props<T>, State<T>
         isLoading={isLoading}
         isLoading={isLoading}
         value={current}
         value={current}
         defaultValue={value}
         defaultValue={value}
-        allowCustomValue={allowCustomValue}
+        allowCustomValue={settings?.allowCustomValue}
         onChange={e => onChange(e.value)}
         onChange={e => onChange(e.value)}
         options={options}
         options={options}
       />
       />

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

@@ -31,7 +31,7 @@ export const StringValueEditor: React.FC<FieldConfigEditorProps<string, StringFi
     <Component
     <Component
       placeholder={item.settings?.placeholder}
       placeholder={item.settings?.placeholder}
       defaultValue={value || ''}
       defaultValue={value || ''}
-      rows={item.settings?.useTextarea && item.settings.rows}
+      rows={(item.settings?.useTextarea && item.settings.rows) || 5}
       onBlur={onValueChange}
       onBlur={onValueChange}
       onKeyDown={onValueChange}
       onKeyDown={onValueChange}
     />
     />