OptionsUI: UnitPicker now supports isClearable setting (#51064)

packages/grafana-data/src/field/overrides/processors.ts

@@ -125,7 +125,9 @@ export const thresholdsOverrideProcessor = (
   return value as ThresholdsConfig; // !!!! likely not !!!!
 };
 
-export interface UnitFieldConfigSettings {}
+export interface UnitFieldConfigSettings {
+  isClearable?: boolean;
+}
 
 export const unitOverrideProcessor = (
   value: boolean,

public/app/core/components/OptionsUI/units.tsx

@@ -1,11 +1,35 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
-import { FieldConfigEditorProps, UnitFieldConfigSettings } from '@grafana/data';
-import { UnitPicker } from '@grafana/ui';
+import { FieldConfigEditorProps, GrafanaTheme2, UnitFieldConfigSettings } from '@grafana/data';
+import { IconButton, UnitPicker, useStyles2 } from '@grafana/ui';
 
-export const UnitValueEditor: React.FC<FieldConfigEditorProps<string, UnitFieldConfigSettings>> = ({
-  value,
-  onChange,
-}) => {
+type Props = FieldConfigEditorProps<string, UnitFieldConfigSettings>;
+
+export function UnitValueEditor({ value, onChange, item }: Props) {
+  const styles = useStyles2(getStyles);
+  if (item?.settings?.isClearable && value != null) {
+    return (
+      <div className={styles.wrapper}>
+        <span className={styles.first}>
+          <UnitPicker value={value} onChange={onChange} />
+        </span>
+        <IconButton ariaLabel="clear unit selection" name="times" onClick={() => onChange(undefined)} />
+      </div>
+    );
+  }
   return <UnitPicker value={value} onChange={onChange} />;
-};
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    width: 100%;
+    display: flex;
+    flex-direction: rows;
+    align-items: center;
+  `,
+  first: css`
+    margin-right: 8px;
+    flex-grow: 2;
+  `,
+});

public/app/plugins/panel/heatmap-new/module.tsx

@@ -68,26 +68,28 @@ export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPan
 
     category = ['Y Axis'];
 
-    builder.addRadio({
-      path: 'yAxis.axisPlacement',
-      name: 'Placement',
-      defaultValue: defaultPanelOptions.yAxis.axisPlacement ?? AxisPlacement.Left,
-      category,
-      settings: {
-        options: [
-          { label: 'Left', value: AxisPlacement.Left },
-          { label: 'Right', value: AxisPlacement.Right },
-          { label: 'Hidden', value: AxisPlacement.Hidden },
-        ],
-      },
-    });
-
     builder
+      .addRadio({
+        path: 'yAxis.axisPlacement',
+        name: 'Placement',
+        defaultValue: defaultPanelOptions.yAxis.axisPlacement ?? AxisPlacement.Left,
+        category,
+        settings: {
+          options: [
+            { label: 'Left', value: AxisPlacement.Left },
+            { label: 'Right', value: AxisPlacement.Right },
+            { label: 'Hidden', value: AxisPlacement.Hidden },
+          ],
+        },
+      })
       .addUnitPicker({
         category,
         path: 'yAxis.unit',
         name: 'Unit',
         defaultValue: undefined,
+        settings: {
+          isClearable: true,
+        },
       })
       .addNumberInput({
         category,
@@ -297,6 +299,9 @@ export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPan
         path: 'cellValues.unit',
         name: 'Unit',
         defaultValue: undefined,
+        settings: {
+          isClearable: true,
+        },
       })
       .addNumberInput({
         category,