[Lens] show the "Requires field" validation message for empty visuali…

…zation for inline editing (elastic#178393) Fixes elastic#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 <[email protected]>
kibanamachine · Mar 12, 2024 · d2d0c83 · d2d0c83
1 parent 322b9a4
commit d2d0c83
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/...k/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
@@ -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>