add trendColorsTooltip to ColorPickerControl, fix test , add normalizeColorToHex

Author: SBIN2010

superset-frontend/src/explore/components/controls/ColorPickerControl.test.tsx

@@ -204,7 +204,7 @@ test('resolves colorSuccess theme token correctly when matching color is selecte
 
   await userEvent.click(successPreset!);
 
-  expect(onChange).toHaveBeenCalledWith({ a: 1, b: 26, g: 196, r: 82 });
+  expect(onChange).toHaveBeenCalledWith('colorSuccess');
 });
 
 test('handles theme with nested colors object', () => {

superset-frontend/src/explore/components/controls/ColorPickerControl.tsx

@@ -57,7 +57,7 @@ const getReverseThemeColorMap = (
 
   Object.entries(themeColors).forEach(([name, value]) => {
     if (typeof value === 'string') {
-      reverseMap[value.toLowerCase()] = name;
+      reverseMap[normalizeColorToHex(value)] = name;
     }
   });
 
@@ -101,6 +101,32 @@ const extractThemeColors = (
   return theme as unknown as Record<string, string>;
 };
 
+const normalizeColorToHex = (color: string): string => {
+  if (!color) return '';
+
+  if (color.startsWith('#')) {
+    return color.toLowerCase();
+  }
+
+  const div = document.createElement('div');
+  div.style.color = color;
+  const normalized = div.style.color;
+
+  const match = normalized.match(
+    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/,
+  );
+  if (match) {
+    return rgbaToHex({
+      r: parseInt(match[1], 10),
+      g: parseInt(match[2], 10),
+      b: parseInt(match[3], 10),
+      a: match[4] !== undefined ? parseFloat(match[4]) : 1,
+    }).toLowerCase();
+  }
+
+  return color.toLowerCase();
+};
+
 export default function ColorPickerControl({
   onChange,
   value,

superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.test.tsx

@@ -151,9 +151,12 @@ test('renders None for operator when Green for increase is selected', async () =
 
   expect(safeGreenPreset).toBeInTheDocument();
   await userEvent.click(safeGreenPreset);
-  const operatorSelect = container.querySelector('[data-test="Operator"]');
-  expect(operatorSelect).toBeInTheDocument();
 
+  const operatorInput = screen.getByLabelText('Operator');
+  expect(operatorInput).toBeInTheDocument();
+
+  const operatorSelect = operatorInput.closest('.ant-select-content');
+  expect(operatorSelect).toBeInTheDocument();
   expect(operatorSelect).toHaveTextContent(/none/i);
 });
 
@@ -328,3 +331,43 @@ test('should hide formatting fields when color scheme is Green', async () => {
     expect(screen.queryByText('Formatting object')).not.toBeInTheDocument();
   });
 });
+
+test('should not display tooltip when extraColorChoices is not provided', async () => {
+  const { container } = render(
+    <FormattingPopoverContent onChange={mockOnChange} columns={columns} />,
+  );
+
+  const tooltipIcon = container.querySelector('.ant-form-item-tooltip');
+  expect(tooltipIcon).not.toBeInTheDocument();
+});
+
+test('should display tooltip icon when extraColorChoices is provided', () => {
+  const { container } = render(
+    <FormattingPopoverContent
+      onChange={mockOnChange}
+      columns={columns}
+      extraColorChoices={extraColorChoices}
+    />,
+  );
+
+  const tooltipIcon = container.querySelector('.ant-form-item-tooltip');
+  expect(tooltipIcon).toBeInTheDocument();
+
+  const questionIcon = tooltipIcon?.querySelector(
+    '[aria-label="question-circle"]',
+  );
+  expect(questionIcon).toBeInTheDocument();
+});
+
+test('should not display tooltip icon when extraColorChoices is empty', () => {
+  const { container } = render(
+    <FormattingPopoverContent
+      onChange={mockOnChange}
+      columns={columns}
+      extraColorChoices={[]}
+    />,
+  );
+
+  const tooltipIcon = container.querySelector('.ant-form-item-tooltip');
+  expect(tooltipIcon).not.toBeInTheDocument();
+});

superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx

@@ -367,6 +367,14 @@ export const FormattingPopoverContent = ({
     }
   }, [column, columns, previousColumnType]);
 
+  const trendColorsTooltip = (
+    <div>
+      <div>{t('Trend colors are added (for time-based comparison):')}</div>
+      <div>{t('green — increase / red — decrease')}</div>
+      <div>{t('red — increase / green — decrease')}</div>
+    </div>
+  );
+
   return (
     <Form
       form={form}
@@ -398,6 +406,7 @@ export const FormattingPopoverContent = ({
             label={t('Color scheme')}
             rules={rulesRequired}
             initialValue={defaultColorToken}
+            tooltip={extraColorChoices.length > 0 ? trendColorsTooltip : ''}
           >
             <ColorPickerControl
               ariaLabel={t('Color scheme')}