[Lens] Add a better drag/drop illustration (elastic#78245) (elastic#7…

…8425) Fixes elastic#76021
paul-tavares · Sep 24, 2020 · a6eed6e · a6eed6e
1 parent c911c54
commit a6eed6e
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 53 deletions.
diff --git a/x-pack/plugins/lens/public/assets/drop_illustration.tsx b/x-pack/plugins/lens/public/assets/drop_illustration.tsx
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_workspace_panel_wrapper.scss
@@ -6,6 +6,7 @@
   margin-bottom: $euiSize;
   display: flex;
   flex-direction: column;
+  position: relative; // For positioning the dnd overlay
 
   .lnsWorkspacePanelWrapper__pageContentHeader {
     @include euiTitle('xs');
@@ -24,8 +25,7 @@
     display: flex;
     align-items: stretch;
     justify-content: stretch;
-    overflow: auto;
-    position: relative;
+    overflow: hidden;
 
     > * {
       flex: 1 1 100%;
@@ -37,6 +37,91 @@
   }
 }
 
+.lnsWorkspacePanel__dragDrop {
+  // Disable the coloring of the DnD for this element as we'll
+  // Color the whole panel instead
+  background-color: transparent !important; // sass-lint:disable-line no-important
+}
+
+.lnsExpressionRenderer {
+  .lnsDragDrop-isDropTarget & {
+    transition: filter $euiAnimSpeedNormal ease-in-out, opacity $euiAnimSpeedNormal ease-in-out;
+    filter: blur($euiSizeXS);
+    opacity: .25;
+  }
+}
+
+.lnsWorkspacePanel__emptyContent {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color $euiAnimSpeedNormal ease-in-out;
+
+  .lnsDragDrop-isDropTarget & {
+    background-color: transparentize($euiColorSecondary, .9);
+
+    p {
+      transition: filter $euiAnimSpeedNormal ease-in-out;
+      filter: blur(5px);
+    }
+  }
+
+  .lnsDragDrop-isActiveDropTarget & {
+    background-color: transparentize($euiColorSecondary, .75);
+
+    .lnsDropIllustration__hand {
+      animation: pulseArrowContinuous 1.5s ease-in-out 0s infinite normal forwards;
+    }
+  }
+
+  &.lnsWorkspacePanel__emptyContent-onTop p {
+    display: none;
+  }
+}
+
 .lnsWorkspacePanelWrapper__toolbar {
   margin-bottom: 0;
 }
+
+.lnsDropIllustration__adjustFill {
+  fill: $euiColorFullShade;
+}
+
+.lnsWorkspacePanel__dropIllustration {
+  overflow: visible; // Shows arrow animation when it gets out of bounds
+  margin-top: $euiSizeL;
+  margin-bottom: $euiSizeXXL;
+  // Drop shadow values is a dupe of @euiBottomShadowMedium but used as a filter
+  // Hard-coded px values OK (@cchaos)
+  // sass-lint:disable-block indentation
+  filter:
+    drop-shadow(0 6px 12px transparentize($euiShadowColor, .8))
+    drop-shadow(0 4px 4px transparentize($euiShadowColor, .8))
+    drop-shadow(0 2px 2px transparentize($euiShadowColor, .8));
+}
+
+.lnsDropIllustration__hand {
+  animation: pulseArrow 5s ease-in-out 0s infinite normal forwards;
+}
+
+@keyframes pulseArrow {
+  0% { transform: translateY(0%); }
+  65% { transform: translateY(0%); }
+  72% { transform: translateY(10%); }
+  79% { transform: translateY(7%); }
+  86% { transform: translateY(10%); }
+  95% { transform: translateY(0); }
+}
+
+@keyframes pulseArrowContinuous {
+  0% { transform: translateY(10%); }
+  25% { transform: translateY(15%); }
+  50% { transform: translateY(10%); }
+  75% { transform: translateY(15%); }
+  100% { transform: translateY(10%); }
+}
diff --git a/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -5,17 +5,10 @@
  */
 
 import React, { useState, useEffect, useMemo, useContext, useCallback } from 'react';
+import classNames from 'classnames';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiImage,
-  EuiText,
-  EuiButtonEmpty,
-  EuiLink,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiButtonEmpty, EuiLink } from '@elastic/eui';
 import { CoreStart, CoreSetup } from 'kibana/public';
 import { ExecutionContextSearch } from 'src/plugins/expressions';
 import {
@@ -39,6 +32,7 @@ import { UiActionsStart } from '../../../../../../../src/plugins/ui_actions/publ
 import { VIS_EVENT_TO_TRIGGER } from '../../../../../../../src/plugins/visualizations/public';
 import { DataPublicPluginStart } from '../../../../../../../src/plugins/data/public';
 import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
+import { DropIllustration } from '../../../assets/drop_illustration';
 
 export interface WorkspacePanelProps {
   activeVisualizationId: string | null;
@@ -78,11 +72,6 @@ export function InnerWorkspacePanel({
   ExpressionRenderer: ExpressionRendererComponent,
   title,
 }: 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(
@@ -210,41 +199,54 @@ export function InnerWorkspacePanel({
 
   function renderEmptyWorkspace() {
     return (
-      <div className="eui-textCenter">
-        <EuiText textAlign="center" grow={false} color="subdued" data-test-subj="empty-workspace">
-          <h3>
-            <FormattedMessage
-              id="xpack.lens.editorFrame.emptyWorkspace"
-              defaultMessage="Drop some fields here to start"
-            />
-          </h3>
-          <EuiImage
-            style={{ width: 360 }}
-            url={core.http.basePath.prepend(emptyStateGraphicURL)}
-            alt=""
-          />
-          <p>
-            <FormattedMessage
-              id="xpack.lens.editorFrame.emptyWorkspaceHeading"
-              defaultMessage="Lens is a new tool for creating visualizations"
-            />
-          </p>
-          <p>
-            <small>
-              <EuiLink
-                href="https://www.elastic.co/products/kibana/feedback"
-                target="_blank"
-                external
-              >
-                <FormattedMessage
-                  id="xpack.lens.editorFrame.goToForums"
-                  defaultMessage="Make requests and give feedback"
-                />
-              </EuiLink>
-            </small>
-          </p>
-        </EuiText>
-      </div>
+      <EuiText
+        className={classNames('lnsWorkspacePanel__emptyContent')}
+        textAlign="center"
+        color="subdued"
+        data-test-subj="empty-workspace"
+        size="s"
+      >
+        <h2>
+          <strong>
+            {expression === null ? (
+              <FormattedMessage
+                id="xpack.lens.editorFrame.emptyWorkspace"
+                defaultMessage="Drop some fields here to start"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.lens.editorFrame.emptyWorkspaceSimple"
+                defaultMessage="Drop field here"
+              />
+            )}
+          </strong>
+        </h2>
+        <DropIllustration className="lnsWorkspacePanel__dropIllustration" />
+        {expression === null && (
+          <>
+            <p>
+              <FormattedMessage
+                id="xpack.lens.editorFrame.emptyWorkspaceHeading"
+                defaultMessage="Lens is a new tool for creating visualizations"
+              />
+            </p>
+            <p>
+              <small>
+                <EuiLink
+                  href="https://www.elastic.co/products/kibana/feedback"
+                  target="_blank"
+                  external
+                >
+                  <FormattedMessage
+                    id="xpack.lens.editorFrame.goToForums"
+                    defaultMessage="Make requests and give feedback"
+                  />
+                </EuiLink>
+              </small>
+            </p>
+          </>
+        )}
+      </EuiText>
     );
   }
 
@@ -330,12 +332,14 @@ export function InnerWorkspacePanel({
       visualizationMap={visualizationMap}
     >
       <DragDrop
+        className="lnsWorkspacePanel__dragDrop"
         data-test-subj="lnsWorkspace"
         draggable={false}
         droppable={Boolean(suggestionForDraggedField)}
         onDrop={onDrop}
       >
         {renderVisualization()}
+        {Boolean(suggestionForDraggedField) && expression !== null && renderEmptyWorkspace()}
       </DragDrop>
     </WorkspacePanelWrapper>
   );

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
@@ -196,7 +196,6 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
   return (
     <EuiPopover
       ownFocus
-      id="lnsFieldListPanel__field"
       className="lnsFieldItem__popoverAnchor"
       display="block"
       container={document.querySelector<HTMLElement>('.application') || undefined}

diff --git a/x-pack/plugins/lens/public/visualization_container.scss b/x-pack/plugins/lens/public/visualization_container.scss
@@ -1,3 +1,4 @@
 .lnsVisualizationContainer {
+  @include euiScrollBar;
   overflow: auto;
-}
+}