From d2d0c83cd3d12fc8fbe2d46d44ab174995c0a5b1 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Date: Tue, 12 Mar 2024 11:05:02 +0100
Subject: [PATCH] [Lens] show the "Requires field" validation message for empty
 visualization for inline editing (#178393)

Fixes #178237

In inline editing, the 'requires field' message appears even when the
chart is empty. This behavior differs from the Lens editor, where the
message is not shown when the chart is empty. The reason for this
difference is that in Lens, we can easily start from an empty state and
the chart workspace reflects it. However, in the inline Lens editor, we
render the last correct state in the embeddable even if configuration is
empty.

Adding this warning will help users understand why the state in the
embeddable is desynchronized.

Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
---
 .../config_panel/layer_panel.test.tsx         | 32 +++++++++++++++++++
 .../editor_frame/config_panel/layer_panel.tsx | 10 +++---
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
index 08fb71bc59790..119e5216488f2 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
@@ -241,6 +241,38 @@ describe('LayerPanel', () => {
       expect(screen.getByText('Requires field')).toBeInTheDocument();
     });
 
+    it('should not render the required warning when the chart is empty', async () => {
+      mockVisualization.getConfiguration.mockReturnValue({
+        groups: [
+          {
+            ...defaultGroup,
+            groupLabel: 'B',
+            groupId: 'b',
+            requiredMinDimensionCount: 1,
+          },
+        ],
+      });
+
+      renderLayerPanel();
+      expect(screen.queryByText('Requires field')).not.toBeInTheDocument();
+    });
+
+    it('should render the required warning when the chart is empty but isInlineEditing', async () => {
+      mockVisualization.getConfiguration.mockReturnValue({
+        groups: [
+          {
+            ...defaultGroup,
+            groupLabel: 'B',
+            groupId: 'b',
+            requiredMinDimensionCount: 1,
+          },
+        ],
+      });
+
+      renderLayerPanel({ setIsInlineFlyoutVisible: jest.fn() });
+      expect(screen.queryByText('Requires field')).toBeInTheDocument();
+    });
+
     it('should tell the user to remove the correct number of dimensions', async () => {
       mockVisualization.getConfiguration.mockReturnValue({
         groups: [
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index 3c203cacff3ba..6ed48175ef224 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -76,6 +76,8 @@ export function LayerPanel(props: LayerPanelProps) {
     shouldDisplayChartSwitch,
   } = props;
 
+  const isInlineEditing = Boolean(props?.setIsInlineFlyoutVisible);
+
   const isSaveable = useLensSelector((state) => state.lens.isSaveable);
 
   const datasourceStates = useLensSelector(selectDatasourceStates);
@@ -434,7 +436,7 @@ export function LayerPanel(props: LayerPanelProps) {
             .map((group, groupIndex) => {
               let errorText: string = '';
 
-              if (!isEmptyLayer) {
+              if (!isEmptyLayer || isInlineEditing) {
                 if (
                   group.requiredMinDimensionCount &&
                   group.requiredMinDimensionCount > group.accessors.length
@@ -659,7 +661,7 @@ export function LayerPanel(props: LayerPanelProps) {
           handleClose={() => {
             setPanelSettingsOpen(false);
           }}
-          isInlineEditing={Boolean(props?.setIsInlineFlyoutVisible)}
+          isInlineEditing={isInlineEditing}
         >
           <div id={layerId}>
             <div className="lnsIndexPatternDimensionEditor--padded">
@@ -726,7 +728,7 @@ export function LayerPanel(props: LayerPanelProps) {
         isOpen={isDimensionPanelOpen}
         isFullscreen={isFullscreen}
         label={openColumnGroup?.dimensionEditorGroupLabel ?? (openColumnGroup?.groupLabel || '')}
-        isInlineEditing={Boolean(props?.setIsInlineFlyoutVisible)}
+        isInlineEditing={isInlineEditing}
         handleClose={closeDimensionEditor}
         panel={
           <>
@@ -786,7 +788,7 @@ export function LayerPanel(props: LayerPanelProps) {
                         addLayer: props.addLayer,
                         removeLayer: props.onRemoveLayer,
                         panelRef,
-                        isInlineEditing: Boolean(props?.setIsInlineFlyoutVisible),
+                        isInlineEditing,
                       }}
                     />
                   </div>