[Lens] [Metric] Improve "Supporting visualization" section

x-pack/platform/plugins/private/translations/translations/de-DE.json

@@ -23295,8 +23295,6 @@
     "xpack.lens.messagesButton.label.warnings": "{warningCount} {warningCount, plural, one {warning} other {warnings}}",
     "xpack.lens.metric.addLayer": "Visualisierung",
     "xpack.lens.metric.breakdownBy": "Aufschlüsselung nach",
-    "xpack.lens.metric.color": "Farbe",
-    "xpack.lens.metric.colorByValue.label": "Farbe nach Nutzen",
     "xpack.lens.metric.colorMode.dynamic": "Dynamisch",
     "xpack.lens.metric.colorMode.static": "Statisch",
     "xpack.lens.metric.headingLabel": "Wert",

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -23607,8 +23607,6 @@
     "xpack.lens.messagesButton.label.warnings": "{warningCount} {warningCount, plural, one {warning} other {avertissements}}",
     "xpack.lens.metric.addLayer": "Visualisation",
     "xpack.lens.metric.breakdownBy": "Répartir par",
-    "xpack.lens.metric.color": "Couleur",
-    "xpack.lens.metric.colorByValue.label": "Couleur par valeur",
     "xpack.lens.metric.colorMode.dynamic": "Dynamique",
     "xpack.lens.metric.colorMode.static": "Statique",
     "xpack.lens.metric.headingLabel": "Valeur",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -23636,8 +23636,6 @@
     "xpack.lens.messagesButton.label.warnings": "{warningCount}{warningCount, plural, one {warning} other {件の警告}}",
     "xpack.lens.metric.addLayer": "ビジュアライゼーション",
     "xpack.lens.metric.breakdownBy": "分類する",
-    "xpack.lens.metric.color": "色",
-    "xpack.lens.metric.colorByValue.label": "値別の色",
     "xpack.lens.metric.colorMode.dynamic": "動的",
     "xpack.lens.metric.colorMode.static": "静的",
     "xpack.lens.metric.headingLabel": "値",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -23624,8 +23624,6 @@
     "xpack.lens.messagesButton.label.warnings": "{warningCount} 个{warningCount, plural, one {警告} other {警告}}",
     "xpack.lens.metric.addLayer": "可视化",
     "xpack.lens.metric.breakdownBy": "细分方式",
-    "xpack.lens.metric.color": "颜色",
-    "xpack.lens.metric.colorByValue.label": "按值上色",
     "xpack.lens.metric.colorMode.dynamic": "动态",
     "xpack.lens.metric.colorMode.static": "静态",
     "xpack.lens.metric.headingLabel": "值",

x-pack/platform/plugins/shared/lens/public/visualizations/metric/dimension_editor.test.tsx

@@ -158,23 +158,7 @@ describe('dimension editor', () => {
         />
       );
 
-      const colorModeGroup = screen.queryByRole('group', { name: /Color by value/i });
-      const staticColorPicker = screen.queryByTestId(SELECTORS.COLOR_PICKER);
-
-      const typeColor = async (color: string) => {
-        if (!staticColorPicker) {
-          throw new Error('Static color picker not found');
-        }
-        await userEvent.clear(staticColorPicker);
-        await userEvent.type(staticColorPicker, color);
-      };
-
-      const clearColor = async () => {
-        if (!staticColorPicker) {
-          throw new Error('Static color picker not found');
-        }
-        await userEvent.clear(staticColorPicker);
-      };
+      const getStaticColorPicker = () => screen.queryByTestId(SELECTORS.COLOR_PICKER);
 
       const iconSelect = screen.getByTestId('lns-icon-select');
       const setIcon = async (icon: string) => {
@@ -209,10 +193,7 @@ describe('dimension editor', () => {
       };
 
       return {
-        colorModeGroup,
-        staticColorPicker,
-        typeColor,
-        clearColor,
+        getStaticColorPicker,
         setIcon,
         clearIcon,
         ...rtlRender,
@@ -227,90 +208,12 @@ describe('dimension editor', () => {
       expect(screen.queryByTestId(SELECTORS.BREAKDOWN_EDITOR)).not.toBeInTheDocument();
     });
 
-    it('Color mode switch is shown when the primary metric is numeric', () => {
-      const { colorModeGroup } = renderPrimaryMetricEditor();
-      expect(colorModeGroup).toBeInTheDocument();
-    });
-
-    it('Color mode switch is not shown when the primary metric is non-numeric', () => {
-      const { colorModeGroup } = renderPrimaryMetricEditor({
+    it('static color control is visible when metric is non-numeric even if palette is set', () => {
+      const { getStaticColorPicker } = renderPrimaryMetricEditor({
         datasource: getNonNumericDatasource(),
+        state: { ...metricAccessorState, palette },
       });
-      expect(colorModeGroup).not.toBeInTheDocument();
-    });
-
-    it('Color mode switch is not shown when the primary metric is numeric but with array support', () => {
-      const { colorModeGroup } = renderPrimaryMetricEditor({
-        datasource: getNumericDatasourceWithArraySupport(),
-      });
-      expect(colorModeGroup).not.toBeInTheDocument();
-    });
-
-    describe('static color controls', () => {
-      it('is hidden when dynamic coloring is enabled', () => {
-        const { staticColorPicker } = renderPrimaryMetricEditor({
-          state: { ...metricAccessorState, palette },
-        });
-        expect(staticColorPicker).not.toBeInTheDocument();
-      });
-
-      it('is visible if palette is not defined', () => {
-        const { staticColorPicker } = renderPrimaryMetricEditor({
-          state: { ...metricAccessorState, palette: undefined },
-        });
-        expect(staticColorPicker).toBeInTheDocument();
-      });
-
-      it('is visible when metric is non-numeric even if palette is set', () => {
-        const { staticColorPicker } = renderPrimaryMetricEditor({
-          datasource: getNonNumericDatasource(),
-          state: { ...metricAccessorState, palette },
-        });
-        expect(staticColorPicker).toBeInTheDocument();
-      });
-
-      it('fills with default EUI visualization color value', () => {
-        const { staticColorPicker } = renderPrimaryMetricEditor({
-          state: {
-            ...metricAccessorState,
-            palette: undefined,
-            color: undefined,
-          },
-        });
-        expect(staticColorPicker).toHaveValue(euiLightVars.euiColorPrimary.toUpperCase());
-      });
-
-      it('fills with default vis text color', async () => {
-        const { staticColorPicker } = renderPrimaryMetricEditor({
-          state: {
-            ...metricAccessorState,
-            palette: undefined, // color by value static
-            trendlineLayerId: undefined,
-            showBar: false,
-            color: undefined,
-            applyColorTo: 'value',
-          },
-        });
-        expect(staticColorPicker).toHaveValue(euiThemeVars.euiColorVisText0.toUpperCase());
-      });
-
-      it('sets color', async () => {
-        const { typeColor, clearColor } = renderPrimaryMetricEditor({
-          state: { ...metricAccessorState, palette: undefined, color: faker.color.rgb() },
-        });
-
-        const newColor = faker.color.rgb().toUpperCase();
-        await typeColor(newColor);
-        await waitFor(() =>
-          expect(mockSetState).toHaveBeenCalledWith(expect.objectContaining({ color: newColor }))
-        );
-        await clearColor();
-        await waitFor(() =>
-          expect(mockSetState).toHaveBeenCalledWith(expect.objectContaining({ color: undefined }))
-        );
-
-        expect(mockSetState).toHaveBeenCalledTimes(2);
-      });
+      expect(getStaticColorPicker()).toBeInTheDocument();
     });
 
     describe('icon select', () => {
@@ -423,11 +326,11 @@ describe('dimension editor', () => {
       const getSelectedPalette = (name: string) =>
         screen.queryByRole('button', { name: new RegExp(name, 'i') });
 
-      const colorModeGroup = screen.getByRole('group', { name: /Color by value/i });
+      const colorModeGroup = screen.getByRole('group', { name: /Color mode/i });
       const clickOnColorMode = async (mode: 'none' | 'static' | 'dynamic') => {
         const colorByValueOption = getByTitle(colorModeGroup, mode, { exact: false });
         if (!colorByValueOption) {
-          throw new Error(`Supported color by value ${mode} not found`);
+          throw new Error(`Supported color mode ${mode} not found`);
         }
         await userEvent.click(colorByValueOption);
       };
@@ -1062,6 +965,24 @@ describe('dimension editor', () => {
         await userEvent.click(applyColorTo);
       };
 
+      const colorModeGroup = screen.queryByRole('group', { name: /Color mode/i });
+      const staticColorPicker = screen.queryByTestId(SELECTORS.COLOR_PICKER);
+
+      const typeColor = async (color: string) => {
+        if (!staticColorPicker) {
+          throw new Error('Static color picker not found');
+        }
+        await userEvent.clear(staticColorPicker);
+        await userEvent.type(staticColorPicker, color);
+      };
+
+      const clearColor = async () => {
+        if (!staticColorPicker) {
+          throw new Error('Static color picker not found');
+        }
+        await userEvent.clear(staticColorPicker);
+      };
+
       return {
         progressDirectionShowing: screen.queryByTestId('lnsMetric_progress_direction_buttons'),
         progressOptions: {
@@ -1073,6 +994,10 @@ describe('dimension editor', () => {
         applyColorToBtnGroup: screen.queryByTestId('lnsMetric_apply_color_to_buttons'),
         applyColorToOptions,
         clickOnApplyColorToOption,
+        colorModeGroup,
+        staticColorPicker,
+        typeColor,
+        clearColor,
         ...rtlRender,
       };
     }
@@ -1305,7 +1230,7 @@ describe('dimension editor', () => {
           expect(mockSetState).toHaveBeenCalledWith({ ...mockState, applyColorTo: 'background' });
         });
 
-        it('should show help message when color by value static, supporting visualization is panel, apply color to value', () => {
+        it('should show help message when color mode static, supporting visualization is panel, apply color to value', () => {
           renderAdditionalSectionEditor({
             state: {
               ...stateWOTrend,
@@ -1321,7 +1246,7 @@ describe('dimension editor', () => {
           );
         });
 
-        it('should show help message when color by value dynamic, supporting visualization is panel, apply color to value', () => {
+        it('should show help message when color mode dynamic, supporting visualization is panel, apply color to value', () => {
           renderAdditionalSectionEditor({
             state: {
               ...stateWOTrend,
@@ -1333,5 +1258,83 @@ describe('dimension editor', () => {
         });
       });
     });
+
+    it('Color mode switch is shown when the primary metric is numeric', () => {
+      const { colorModeGroup } = renderAdditionalSectionEditor();
+      expect(colorModeGroup).toBeInTheDocument();
+    });
+
+    it('Color mode switch is not shown when the primary metric is non-numeric', () => {
+      const { colorModeGroup } = renderAdditionalSectionEditor({
+        datasource: getNonNumericDatasource(),
+      });
+      expect(colorModeGroup).not.toBeInTheDocument();
+    });
+
+    it('Color mode switch is not shown when the primary metric is numeric but with array support', () => {
+      const { colorModeGroup } = renderAdditionalSectionEditor({
+        datasource: getNumericDatasourceWithArraySupport(),
+      });
+      expect(colorModeGroup).not.toBeInTheDocument();
+    });
+
+    describe('static color controls', () => {
+      it('is hidden when dynamic coloring is enabled', () => {
+        const { staticColorPicker } = renderAdditionalSectionEditor({
+          state: { ...metricAccessorState, palette },
+        });
+        expect(staticColorPicker).not.toBeInTheDocument();
+      });
+
+      it('is visible if palette is not defined', () => {
+        const { staticColorPicker } = renderAdditionalSectionEditor({
+          state: { ...metricAccessorState, palette: undefined },
+        });
+        expect(staticColorPicker).toBeInTheDocument();
+      });
+
+      it('fills with default EUI visualization color value', () => {
+        const { staticColorPicker } = renderAdditionalSectionEditor({
+          state: {
+            ...metricAccessorState,
+            palette: undefined,
+            color: undefined,
+          },
+        });
+        expect(staticColorPicker).toHaveValue(euiLightVars.euiColorPrimary.toUpperCase());
+      });
+
+      it('fills with default vis text color', async () => {
+        const { staticColorPicker } = renderAdditionalSectionEditor({
+          state: {
+            ...metricAccessorState,
+            palette: undefined,
+            trendlineLayerId: undefined,
+            showBar: false,
+            color: undefined,
+            applyColorTo: 'value',
+          },
+        });
+        expect(staticColorPicker).toHaveValue(euiThemeVars.euiColorVisText0.toUpperCase());
+      });
+
+      it('sets color', async () => {
+        const { typeColor, clearColor } = renderAdditionalSectionEditor({
+          state: { ...metricAccessorState, palette: undefined, color: faker.color.rgb() },
+        });
+
+        const newColor = faker.color.rgb().toUpperCase();
+        await typeColor(newColor);
+        await waitFor(() =>
+          expect(mockSetState).toHaveBeenCalledWith(expect.objectContaining({ color: newColor }))
+        );
+        await clearColor();
+        await waitFor(() =>
+          expect(mockSetState).toHaveBeenCalledWith(expect.objectContaining({ color: undefined }))
+        );
+
+        expect(mockSetState).toHaveBeenCalledTimes(2);
+      });
+    });
   });
 });