[Dashboard usability] Shiny add panel highlight (#223614)

Adds a neat shiny Borealis-ish effect that shows up when a new panel is added to a Dashboard

Co-authored-by: Marta Bondyra <[email protected]>

Author: ThomThomson

src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_hover_actions_styles.tsx

@@ -50,7 +50,8 @@ export const useHoverActionStyles = (isEditMode: boolean, showBorder?: boolean)
           `
         : css`
             .embPanel {
-              outline: 1px solid transparent; // necessary for outline-color transition
+              outline: var(--internalBorderStyle); // necessary for outline-color transition
+              outline-color: transparent; // necessary for outline-color transition
               z-index: ${euiTheme.levels.content}; // necessary for z-index transition
               // delay hiding border on hover out to match delay on hover actions
               transition: outline-color ${euiTheme.animation.extraFast},

src/platform/plugins/shared/dashboard/public/dashboard_api/track_panel.ts

@@ -9,6 +9,8 @@
 
 import { BehaviorSubject, Subject } from 'rxjs';
 
+export const highlightAnimationDuration = 2000;
+
 export function initializeTrackPanel(untilLoaded: (id: string) => Promise<undefined>) {
   const expandedPanelId$ = new BehaviorSubject<string | undefined>(undefined);
   const focusedPanelId$ = new BehaviorSubject<string | undefined>(undefined);
@@ -51,7 +53,7 @@ export function initializeTrackPanel(untilLoaded: (id: string) => Promise<undefi
           // Removes the class after the highlight animation finishes
           setTimeout(() => {
             panelRef.classList.remove('dshDashboardGrid__item--highlighted');
-          }, 5000);
+          }, highlightAnimationDuration);
         });
       }
       highlightPanelId$.next(undefined);

src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.tsx

@@ -285,6 +285,9 @@ const dashboardGridStyles = {
         '.embPanel__content, .embPanel, .embPanel__hoverActionsAnchor, .lnsExpressionRenderer': {
           borderRadius: 0,
         },
+        '.embPanel__content, .embPanel__header': {
+          backgroundColor: euiTheme.colors.backgroundBasePlain,
+        },
       },
       // drag handle visibility when dashboard is in edit mode or a panel is expanded
       '&.dshLayout-withoutMargins:not(.dshLayout--editing), .dshDashboardGrid__item--expanded, .dshDashboardGrid__item--blurred, .dshDashboardGrid__item--focused':

src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid_item.tsx

@@ -8,18 +8,19 @@
  */
 
 import { EuiLoadingChart, UseEuiTheme } from '@elastic/eui';
-import { css, keyframes } from '@emotion/react';
+import { css } from '@emotion/react';
+import { useMemoizedStyles } from '@kbn/core/public';
 import { EmbeddableRenderer } from '@kbn/embeddable-plugin/public';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import classNames from 'classnames';
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useMemoizedStyles } from '@kbn/core/public';
 import { DashboardPanelState } from '../../../common';
 import { useDashboardApi } from '../../dashboard_api/use_dashboard_api';
 import { useDashboardInternalApi } from '../../dashboard_api/use_dashboard_internal_api';
 import { presentationUtilService } from '../../services/kibana_services';
-import { DASHBOARD_MARGIN_SIZE } from './constants';
 import { printViewportVisStyles } from '../print_styles';
+import { DASHBOARD_MARGIN_SIZE } from './constants';
+import { getHighlightStyles } from './highlight_styles';
 
 type DivProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>;
 
@@ -219,12 +220,6 @@ const dashboardGridItemStyles = {
     css([
       {
         height: '100%',
-        '&.dshDashboardGrid__item--highlighted .embPanel': {
-          borderRadius: context.euiTheme.border.radius.small,
-          animationName: highlightOutline(context.euiTheme),
-          animationDuration: '4s',
-          animationTimingFunction: 'ease-out',
-        },
         // Remove padding in fullscreen mode
         '.kbnAppWrapper--hiddenChrome &.dshDashboardGrid__item--expanded': {
           padding: 0,
@@ -233,23 +228,11 @@ const dashboardGridItemStyles = {
           padding: 0,
         },
       },
+      getHighlightStyles(context),
       printViewportVisStyles(context),
     ]),
   focusPanelBlur: css({
     pointerEvents: 'none',
     opacity: '0.25',
   }),
 };
-
-const highlightOutline = (euiTheme: UseEuiTheme['euiTheme']) =>
-  keyframes({
-    '0%': {
-      outline: `solid ${euiTheme.size.xs} transparent`,
-    },
-    '25%': {
-      outline: `solid ${euiTheme.size.xs} ${euiTheme.colors.backgroundLightSuccess}`,
-    },
-    '100%': {
-      outline: `solid ${euiTheme.size.xs} transparent`,
-    },
-  });

src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/highlight_styles.tsx

@@ -0,0 +1,110 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { UseEuiTheme } from '@elastic/eui';
+import { css, keyframes } from '@emotion/react';
+import { highlightAnimationDuration } from '../../dashboard_api/track_panel';
+
+const borderSpinKeyframes = keyframes({
+  '0%': {
+    '--highlight-rotate': '0deg',
+    opacity: 0,
+  },
+  '10%, 60%': {
+    opacity: 1,
+  },
+  '100%': {
+    '--highlight-rotate': '180deg',
+    opacity: 0,
+  },
+});
+
+const getOutlineFadeKeyframes = ({ euiTheme }: UseEuiTheme) =>
+  keyframes({
+    '0%, 70%': {
+      outline: `${euiTheme.border.width.thin} dashed transparent`,
+    },
+    '100%': {
+      outline: `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`,
+    },
+  });
+
+const shineKeyframes = keyframes({
+  '0%': {
+    '--highlight-rotate': '0deg',
+    opacity: 0,
+  },
+  '10%': {
+    opacity: 0.7,
+  },
+  '100%': {
+    '--highlight-rotate': '180deg',
+    opacity: 0,
+  },
+});
+
+const highlightPropertyStyles = css`
+  @property --highlight-rotate {
+    syntax: '<angle>';
+    inherits: false;
+    initial-value: 0deg;
+  }
+`;
+
+export const getHighlightStyles = (context: UseEuiTheme) => {
+  const { euiTheme } = context;
+  const rotatingGradient = `
+    linear-gradient(var(--highlight-rotate), 
+    ${euiTheme.colors.borderBaseSuccess} 0%,
+    ${euiTheme.colors.borderBaseAccent} 46%,
+    ${euiTheme.colors.borderBaseAccentSecondary} 100%
+  )`;
+
+  const brightenInDarkMode = (brightness: number) =>
+    context.colorMode === 'DARK' ? `brightness(${brightness})` : '';
+
+  return css([
+    highlightPropertyStyles,
+    {
+      '&.dshDashboardGrid__item--highlighted .embPanel': {
+        position: 'relative',
+        overflow: 'visible !important',
+        backgroundColor: euiTheme.colors.backgroundBasePlain,
+        animation: `${getOutlineFadeKeyframes(context)} ${highlightAnimationDuration}ms ease-out`,
+      },
+      '&.dshDashboardGrid__item--highlighted .embPanel::before': {
+        content: `""`,
+        opacity: 0,
+        position: 'absolute',
+        left: '-5px',
+        top: '-5px',
+        'z-index': -1,
+        width: 'calc(100% + 10px)',
+        height: 'calc(100% + 10px)',
+        'background-image': rotatingGradient,
+        filter: brightenInDarkMode(1.5),
+        'border-radius': euiTheme.border.radius.medium,
+        animation: `${borderSpinKeyframes} ${highlightAnimationDuration}ms ease-out`,
+      },
+      '&.dshDashboardGrid__item--highlighted .embPanel::after': {
+        content: `""`,
+        opacity: 0,
+        position: 'absolute',
+        left: '-15px',
+        top: '-15px',
+        'z-index': -2,
+        width: 'calc(100% + 30px)',
+        height: 'calc(100% + 30px)',
+        'background-image': rotatingGradient,
+        filter: `${brightenInDarkMode(1.3)} blur(25px)`,
+        animation: `${shineKeyframes} ${highlightAnimationDuration}ms ease-out`,
+      },
+    },
+  ]);
+};

src/platform/plugins/shared/embeddable/public/add_from_library/open_add_from_library_flyout.tsx

@@ -41,6 +41,7 @@ export const openAddFromLibraryFlyout = ({
       core
     ),
     {
+      type: 'push',
       ownFocus: true,
       onClose: (overlayRef) => {
         if (onClose) onClose();