From 398dcbf526895fcae24685928fff28b276ae77e3 Mon Sep 17 00:00:00 2001
From: Graham Hudgins <graham@elastic.co>
Date: Tue, 26 Nov 2024 13:47:04 -0500
Subject: [PATCH] [Discover] field formatter truncated hex color pickers
 (#201676)

## Summary

Updates data view color field formatter to allow
easier hex color entry (the UI is truncated today)
---
 .../editors/color/color.test.tsx              | 17 +++++-
 .../editors/color/color.tsx                   | 61 ++++++++++++++++++-
 .../management/data_views/_field_formatter.ts |  6 +-
 test/functional/services/field_editor.ts      |  6 +-
 4 files changed, 84 insertions(+), 6 deletions(-)

diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx
index 695737733d2c..a44845ad93f0 100644
--- a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx
+++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { shallowWithI18nProvider } from '@kbn/test-jest-helpers';
+import { shallowWithI18nProvider, mountWithI18nProvider } from '@kbn/test-jest-helpers';
 
 import { ColorFormatEditor } from './color';
 import { FieldFormat, DEFAULT_CONVERTER_COLOR } from '@kbn/field-formats-plugin/common';
@@ -28,6 +28,21 @@ describe('ColorFormatEditor', () => {
     expect(ColorFormatEditor.formatId).toEqual('color');
   });
 
+  it('renders the color swatch icon inside the button', () => {
+    const component = mountWithI18nProvider(
+      <ColorFormatEditor
+        fieldType={'color'}
+        format={format as unknown as FieldFormat}
+        formatParams={formatParams}
+        onChange={onChange}
+        onError={onError}
+      />
+    );
+
+    const button = component.find('[data-test-subj="buttonColorSwatchIcon"]').at(0);
+    expect(button.exists()).toBe(true);
+  });
+
   it('should render string type normally (regex field)', async () => {
     const component = shallowWithI18nProvider(
       <ColorFormatEditor
diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx
index 6cc81f2f52b0..9ed18eb7f8bd 100644
--- a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx
+++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx
@@ -9,7 +9,14 @@
 
 import React, { Fragment } from 'react';
 
-import { EuiBasicTable, EuiButton, EuiColorPicker, EuiFieldText, EuiSpacer } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiButton,
+  EuiColorPicker,
+  EuiIcon,
+  EuiFieldText,
+  EuiSpacer,
+} from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -156,6 +163,32 @@ export class ColorFormatEditor extends DefaultFormatEditor<ColorFormatEditorForm
                   item.index
                 );
               }}
+              button={
+                <EuiButton
+                  minWidth="false"
+                  iconType="lettering"
+                  color="text"
+                  onClick={() => {}}
+                  aria-label={i18n.translate(
+                    'indexPatternFieldEditor.color.letteringButtonAriaLabel',
+                    {
+                      defaultMessage: 'Select a text color for item {index}',
+                      values: {
+                        index: item.index,
+                      },
+                    }
+                  )}
+                >
+                  <EuiIcon
+                    aria-label={color}
+                    color={color}
+                    size="l"
+                    type="stopFilled"
+                    data-test-subj={'buttonColorSwatchIcon'}
+                  />
+                </EuiButton>
+              }
+              secondaryInputDisplay="bottom"
             />
           );
         },
@@ -181,6 +214,32 @@ export class ColorFormatEditor extends DefaultFormatEditor<ColorFormatEditorForm
                   item.index
                 );
               }}
+              button={
+                <EuiButton
+                  minWidth="false"
+                  iconType="color"
+                  color="text"
+                  onClick={() => {}}
+                  aria-label={i18n.translate(
+                    'indexPatternFieldEditor.color.letteringButtonAriaLabel',
+                    {
+                      defaultMessage: 'Select a background color for item {index}',
+                      values: {
+                        index: item.index,
+                      },
+                    }
+                  )}
+                >
+                  <EuiIcon
+                    aria-label={color}
+                    color={color}
+                    size="l"
+                    type="stopFilled"
+                    data-test-subj={'buttonColorSwatchIcon'}
+                  />
+                </EuiButton>
+              }
+              secondaryInputDisplay="bottom"
             />
           );
         },
diff --git a/test/functional/apps/management/data_views/_field_formatter.ts b/test/functional/apps/management/data_views/_field_formatter.ts
index 1f7cd6c23a83..bd88d96f9700 100644
--- a/test/functional/apps/management/data_views/_field_formatter.ts
+++ b/test/functional/apps/management/data_views/_field_formatter.ts
@@ -403,8 +403,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
             beforeSave: async () => {
               await testSubjects.click('colorEditorAddColor');
               await testSubjects.setValue('~colorEditorKeyPattern', 'red');
-              await testSubjects.setValue('~colorEditorColorPicker', '#ffffff');
-              await testSubjects.setValue('~colorEditorBackgroundPicker', '#ff0000');
+              await testSubjects.click('~colorEditorColorPicker');
+              await testSubjects.setValue('~euiColorPickerInput_bottom', '#ffffff');
+              await testSubjects.click('~colorEditorBackgroundPicker');
+              await testSubjects.setValue('~euiColorPickerInput_bottom', '#ff0000');
             },
             expect: async (renderedValueContainer) => {
               const span = await renderedValueContainer.findByTagName('span');
diff --git a/test/functional/services/field_editor.ts b/test/functional/services/field_editor.ts
index 07bcaf98959b..0739159bcf91 100644
--- a/test/functional/services/field_editor.ts
+++ b/test/functional/services/field_editor.ts
@@ -90,9 +90,11 @@ export class FieldEditorService extends FtrService {
   public async setColorFormat(value: string, color: string, backgroundColor?: string) {
     await this.testSubjects.click('colorEditorAddColor');
     await this.testSubjects.setValue('~colorEditorKeyPattern', value);
-    await this.testSubjects.setValue('~colorEditorColorPicker', color);
+    await this.testSubjects.click('~colorEditorColorPicker');
+    await this.testSubjects.setValue('~euiColorPickerInput_bottom', color);
     if (backgroundColor) {
-      await this.testSubjects.setValue('~colorEditorBackgroundPicker', backgroundColor);
+      await this.testSubjects.click('~colorEditorBackgroundPicker');
+      await this.testSubjects.setValue('~euiColorPickerInput_bottom', backgroundColor);
     }
   }