[7.x] [Lens] Field item hovers, empty state graphic, and operation not applicable callout (#46864)

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx

@@ -250,6 +250,7 @@ export function EditorFrame(props: EditorFrameProps) {
               visualizationMap={props.visualizationMap}
               dispatch={dispatch}
               ExpressionRenderer={props.ExpressionRenderer}
+              core={props.core}
             />
           </WorkspacePanelWrapper>
         )

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx

@@ -266,7 +266,7 @@ export function SuggestionPanel({
               }}
             >
               {i18n.translate('xpack.lens.sugegstion.confirmSuggestionLabel', {
-                defaultMessage: 'Confirm and reload suggestions',
+                defaultMessage: 'Reload suggestions',
               })}
             </EuiButtonEmpty>
           </EuiFlexItem>

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-
 import { ExpressionRendererProps } from '../../../../../../../src/legacy/core_plugins/expressions/public';
 import { Visualization, FramePublicAPI, TableSuggestion } from '../../types';
 import {
@@ -20,6 +19,7 @@ import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { DragDrop, ChildDragDropProvider } from '../../drag_drop';
 import { Ast } from '@kbn/interpreter/common';
+import { coreMock } from 'src/core/public/mocks';
 
 const waitForPromises = () => new Promise(resolve => setTimeout(resolve));
 
@@ -59,10 +59,11 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
-    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(1);
+    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
     expect(instance.find(expressionRendererMock)).toHaveLength(0);
   });
 
@@ -80,10 +81,11 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
-    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(1);
+    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
     expect(instance.find(expressionRendererMock)).toHaveLength(0);
   });
 
@@ -101,10 +103,11 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
-    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(1);
+    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
     expect(instance.find(expressionRendererMock)).toHaveLength(0);
   });
 
@@ -136,6 +139,7 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
@@ -230,6 +234,7 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
@@ -307,6 +312,7 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
@@ -355,6 +361,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -394,6 +401,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -438,6 +446,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -485,6 +494,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -542,6 +552,7 @@ describe('workspace_panel', () => {
             visualizationState={{}}
             dispatch={mockDispatch}
             ExpressionRenderer={expressionRendererMock}
+            core={coreMock.createSetup()}
           />
         </ChildDragDropProvider>
       );

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx

@@ -6,8 +6,9 @@
 
 import React, { useState, useEffect, useMemo, useContext } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiImage, EuiText } from '@elastic/eui';
 import { toExpression } from '@kbn/interpreter/common';
+import { CoreStart, CoreSetup } from 'src/core/public';
 import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins/expressions/public';
 import { Action } from './state_management';
 import { Datasource, Visualization, FramePublicAPI } from '../../types';
@@ -32,6 +33,7 @@ export interface WorkspacePanelProps {
   framePublicAPI: FramePublicAPI;
   dispatch: (action: Action) => void;
   ExpressionRenderer: ExpressionRenderer;
+  core: CoreStart | CoreSetup;
 }
 
 export const WorkspacePanel = debouncedComponent(InnerWorkspacePanel);
@@ -46,8 +48,14 @@ export function InnerWorkspacePanel({
   datasourceStates,
   framePublicAPI,
   dispatch,
+  core,
   ExpressionRenderer: ExpressionRendererComponent,
 }: WorkspacePanelProps) {
+  const IS_DARK_THEME = core.uiSettings.get('theme:darkMode');
+  const emptyStateGraphicURL = IS_DARK_THEME
+    ? '/plugins/lens/assets/lens_app_graphic_dark_2x.png'
+    : '/plugins/lens/assets/lens_app_graphic_light_2x.png';
+
   const dragDropContext = useContext(DragContext);
 
   const suggestionForDraggedField = useMemo(() => {
@@ -87,12 +95,25 @@ export function InnerWorkspacePanel({
 
   function renderEmptyWorkspace() {
     return (
-      <p data-test-subj="empty-workspace">
-        <FormattedMessage
-          id="xpack.lens.editorFrame.emptyWorkspace"
-          defaultMessage="This is the workspace panel. Drop fields here"
+      <EuiText textAlign="center" grow={false} color="subdued" data-test-subj="empty-workspace">
+        <h3>
+          <FormattedMessage
+            id="xpack.lens.editorFrame.emptyWorkspaceHeading"
+            defaultMessage="Create a visualization"
+          />
+        </h3>
+        <EuiImage
+          style={{ width: 360 }}
+          url={core.http.basePath.prepend(emptyStateGraphicURL)}
+          alt=""
         />
-      </p>
+        <p>
+          <FormattedMessage
+            id="xpack.lens.editorFrame.emptyWorkspace"
+            defaultMessage="Drop some fields here."
+          />
+        </p>
+      </EuiText>
     );
   }
 

x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss

@@ -23,9 +23,14 @@
   flex-grow: 0;
 }
 
+/**
+ * 1. Don't cut off the shadow of the field items
+ */
+
 .lnsInnerIndexPatternDataPanel__listWrapper {
   @include euiOverflowShadow;
   @include euiScrollBar;
+  margin-left: -$euiSize; /* 1 */
   position: relative;
   flex-grow: 1;
   overflow: auto;
@@ -35,8 +40,8 @@
   padding-top: $euiSizeS;
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  left: $euiSize; /* 1 */
+  right: $euiSizeXS; /* 1 */
 }
 
 .lnsInnerIndexPatternDataPanel__filterButton {

x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss

@@ -1,27 +1,61 @@
 .lnsFieldItem {
   @include euiFontSizeS;
-  background: $euiColorEmptyShade;
+  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
   border-radius: $euiBorderRadius;
   margin-bottom: $euiSizeXS;
-  transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  &:hover {
-    @include euiBottomShadowMedium;
-    z-index: 2;
-    cursor: grab;
-  }
 }
 
-.lnsFieldItem--missing {
-  background: $euiColorLightestShade;
+.lnsFieldItem__popoverAnchor:hover,
+.lnsFieldItem__popoverAnchor:focus,
+.lnsFieldItem__popoverAnchor:focus-within {
+  @include euiBottomShadowMedium;
+  border-radius: $euiBorderRadius;
+  z-index: 2;
 }
 
-.lnsFieldItem__name {
-  margin-left: $euiSizeXS;
+.lnsFieldItem--missing {
+  background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade);
+  color: $euiColorDarkShade;
 }
 
 .lnsFieldItem__info {
+  border-radius: $euiBorderRadius - 1px;
   padding: $euiSizeS;
+  display: flex;
+  align-items: flex-start;
+  transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance,
+              background-color $euiAnimSpeedFast $euiAnimSlightResistance; // sass-lint:disable-line indentation
+
+  .lnsFieldItem__name {
+    margin-left: $euiSizeXS;
+    flex-grow: 1;
+  }
+
+  .lnsFieldListPanel__fieldIcon,
+  .lnsFieldItem__infoIcon {
+    flex-shrink: 0;
+  }
+
+  .lnsFieldListPanel__fieldIcon {
+    margin-top: 2px;
+  }
+
+  .lnsFieldItem__infoIcon {
+    visibility: hidden;
+  }
+
+  &:hover,
+  &:focus {
+    cursor: grab;
+
+    .lnsFieldItem__infoIcon {
+      visibility: visible;
+    }
+  }
+}
+
+.lnsFieldItem__info-isOpen {
+  @include euiFocusRing;
 }
 
 .lnsFieldItem__topValue {
@@ -45,3 +79,8 @@
   min-width: 260px;
   max-width: 300px;
 }
+
+.lnsFieldItem__popoverButtonGroup {
+  // Enforce lowercase for buttons or else some browsers inherit all caps from popover title
+  text-transform: none;
+}

x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx

@@ -492,16 +492,20 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
               })}
 
               {!localState.isLoading && paginatedFields.length === 0 && (
-                <EuiText>
-                  {showEmptyFields
-                    ? i18n.translate('xpack.lens.indexPatterns.hiddenFieldsLabel', {
-                        defaultMessage:
-                          'No fields have data with the current filters. You can show fields without data using the filters above.',
-                      })
-                    : i18n.translate('xpack.lens.indexPatterns.noFieldsLabel', {
-                        defaultMessage: 'No fields can be visualized from {title}',
-                        values: { title: currentIndexPattern.title },
-                      })}
+                <EuiText size="s" color="subdued">
+                  <p>
+                    <strong>
+                      {showEmptyFields
+                        ? i18n.translate('xpack.lens.indexPatterns.hiddenFieldsLabel', {
+                            defaultMessage:
+                              'No fields have data with the current filters. You can show fields without data using the filters above.',
+                          })
+                        : i18n.translate('xpack.lens.indexPatterns.noFieldsLabel', {
+                            defaultMessage: 'No fields in {title} can be visualized.',
+                            values: { title: currentIndexPattern.title },
+                          })}
+                    </strong>
+                  </p>
                 </EuiText>
               )}
             </div>

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx

@@ -96,7 +96,7 @@ describe('IndexPatternDimensionPanel', () => {
           columnOrder: ['col1'],
           columns: {
             col1: {
-              label: 'Date Histogram of timestamp',
+              label: 'Date histogram of timestamp',
               dataType: 'date',
               isBucketed: true,
 
@@ -280,7 +280,7 @@ describe('IndexPatternDimensionPanel', () => {
       'Incompatible'
     );
 
-    expect(options.find(({ name }) => name === 'Date Histogram')!['data-test-subj']).toContain(
+    expect(options.find(({ name }) => name === 'Date histogram')!['data-test-subj']).toContain(
       'Incompatible'
     );
   });
@@ -822,7 +822,7 @@ describe('IndexPatternDimensionPanel', () => {
         .find(EuiSideNav)
         .prop('items')[0]
         .items.map(({ name }) => name)
-    ).toEqual(['Unique count', 'Average', 'Count', 'Filter Ratio', 'Maximum', 'Minimum', 'Sum']);
+    ).toEqual(['Unique count', 'Average', 'Count', 'Filter ratio', 'Maximum', 'Minimum', 'Sum']);
   });
 
   it('should add a column on selection of a field', () => {
@@ -973,7 +973,7 @@ describe('IndexPatternDimensionPanel', () => {
             columnOrder: ['col1'],
             columns: {
               col1: {
-                label: 'Date Histogram of timestamp',
+                label: 'Date histogram of timestamp',
                 dataType: 'date',
                 isBucketed: true,