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

… empty visualization for inline editing
elastic · Mar 11, 2024 · eeecfe0 · eeecfe0
1 parent 9500c3b
commit eeecfe0
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>