From 773c2690848977e67ac861473decb7e9437f0415 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Wed, 22 Jun 2022 13:49:44 -0700
Subject: [PATCH] OptionsUI: UnitPicker now supports isClearable setting
 (#51064)

---
 .../src/field/overrides/processors.ts         |  4 +-
 .../app/core/components/OptionsUI/units.tsx   | 38 +++++++++++++++----
 .../app/plugins/panel/heatmap-new/module.tsx  | 33 +++++++++-------
 3 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/packages/grafana-data/src/field/overrides/processors.ts b/packages/grafana-data/src/field/overrides/processors.ts
index 1ba88fab1a9..ae1201b9199 100644
--- a/packages/grafana-data/src/field/overrides/processors.ts
+++ b/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,
diff --git a/public/app/core/components/OptionsUI/units.tsx b/public/app/core/components/OptionsUI/units.tsx
index 4b4abfb8fac..ebc62e0e47e 100644
--- a/public/app/core/components/OptionsUI/units.tsx
+++ b/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;
+  `,
+});
diff --git a/public/app/plugins/panel/heatmap-new/module.tsx b/public/app/plugins/panel/heatmap-new/module.tsx
index 7d4f81db27a..db2e7cab5e7 100644
--- a/public/app/plugins/panel/heatmap-new/module.tsx
+++ b/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,