[FIX] ColorPicker: Conditionally hide reset button

Previously, in the Conditional Formatting Color Scale rule editor,
clicking the "Reset" button in the color picker gives a traceback.

This commit resolves the issue by conditionally hiding the "Reset"
button when resetting the color is not applicable.

Task: 4102704

src/components/color_picker/color_picker.ts

@@ -195,6 +195,7 @@ export interface ColorPickerProps {
   dropdownDirection?: "left" | "right" | "center";
   onColorPicked: (color: Color) => void;
   currentColor: Color;
+  hideNoColorButton?: boolean;
 }
 
 interface State {

src/components/color_picker/color_picker.xml

@@ -72,10 +72,12 @@
           <button class="o-add-button" t-on-click="setCustomColor">Add</button>
         </div>
       </div>
-      <div class="o-separator"/>
-      <div class="o-buttons">
-        <button t-on-click="resetColor" class="o-cancel">Reset</button>
-      </div>
+      <t t-if="!props.hideNoColorButton">
+        <div class="o-separator"/>
+        <div class="o-buttons">
+          <button t-on-click="resetColor" class="o-cancel">Reset</button>
+        </div>
+      </t>
     </div>
   </t>
 </templates>

src/components/side_panel/conditional_formatting/color_scale_rule_editor.xml

@@ -49,6 +49,7 @@
             dropdownDirection="'left'"
             onColorPicked="(color) => this.setColorScaleColor(thresholdType, color)"
             currentColor="getThresholdColor(threshold)"
+            hideNoColorButton="true"
           />
         </div>
       </div>

tests/components/color_picker.test.ts

@@ -17,6 +17,7 @@ async function mountColorPicker(partialProps: Partial<ColorPickerProps> = {}, mo
     onColorPicked: partialProps.onColorPicked || (() => {}),
     currentColor: partialProps.currentColor || "#000000",
     maxHeight: partialProps.maxHeight !== undefined ? partialProps.maxHeight : 1000,
+    hideNoColorButton: partialProps.hideNoColorButton || false,
   };
   ({ fixture } = await mountComponent(ColorPicker, { model, props }));
 }
@@ -165,4 +166,9 @@ describe("Color Picker buttons", () => {
     const picker = fixture.querySelector<HTMLElement>(".o-color-picker")!;
     expect(picker.style["display"]).toEqual("none");
   });
+
+  test("Hides the 'No Color' button when hideNoColorButton prop is set to true", async () => {
+    await mountColorPicker({ hideNoColorButton: true });
+    expect(fixture.querySelector(".o-buttons .o-cancel")).toBeNull();
+  });
 });

tests/components/conditional_formatting.test.ts

@@ -1123,6 +1123,18 @@ describe("UI of conditional formats", () => {
     expect(errorMessages()).toEqual(["Invalid Maxpoint formula"]);
   });
 
+  test("Hides the 'No Color' button when the color picker is opened for the color scale", async () => {
+    triggerMouseEvent(selectors.buttonAdd, "click");
+    await nextTick();
+
+    triggerMouseEvent(document.querySelectorAll(selectors.cfTabSelector)[1], "click");
+    await nextTick();
+
+    triggerMouseEvent(selectors.colorScaleEditor.minColor, "click");
+    await nextTick();
+    expect(fixture.querySelector(".o-buttons .o-cancel")).toBeNull();
+  });
+
   describe("Icon set CF", () => {
     test("can select the Icon set tab", async () => {
       triggerMouseEvent(selectors.buttonAdd, "click");