[Lens] Add the bee

x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx

@@ -11,6 +11,7 @@ import React, { useMemo, memo, useContext, useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiPopover, EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import { Easteregg } from './easteregg';
 import { NativeRenderer } from '../../native_renderer';
 import { DragContext, DragDropIdentifier } from '../../drag_drop';
 import { StateSetter, DatasourceDataPanelProps, DatasourceMap } from '../../types';
@@ -97,6 +98,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
 
   return (
     <>
+      <Easteregg query={externalContext?.query} />
       {Object.keys(props.datasourceMap).length > 1 && (
         <EuiPopover
           id="datasource-switch"

x-pack/plugins/lens/public/editor_frame_service/editor_frame/easteregg/bee.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState, useEffect } from 'react';
+import beeImage from './elastic_elk_b.png';
+
+function Bee() {
+  const [position, setPosition] = useState({
+    top: 50 + Math.random() * 100,
+    left: 50 + Math.random() * 50,
+    vX: 3 + Math.random(),
+    vY: 0.5 + Math.random() * 0.5,
+  });
+
+  useEffect(() => {
+    let handle: number = 0;
+    function tick() {
+      handle = requestAnimationFrame(() => {
+        setPosition(({ top, left, vX, vY }) => {
+          let newVx = vX + Math.random() * 0.5 - 0.25;
+          let newVy = vY + Math.random() - 0.5;
+          if (top < 50) {
+            newVy = Math.abs(newVy);
+          }
+          if (top > window.innerHeight - 300) {
+            newVy = -1 * Math.abs(newVy);
+          }
+          if (left < 50) {
+            newVx = Math.abs(newVx);
+          }
+          if (left > window.innerWidth - 300) {
+            newVx = -1 * Math.abs(newVx);
+          }
+
+          return {
+            top: top + vY,
+            left: left + vX,
+            vX: newVx,
+            vY: newVy,
+          };
+        });
+        tick();
+      });
+    }
+    tick();
+    return () => {
+      cancelAnimationFrame(handle);
+    };
+  }, []);
+
+  return (
+    <img
+      src={beeImage}
+      alt="ELK-Bee"
+      title="Bzzzzzzz"
+      style={{
+        position: 'absolute',
+        width: '80px',
+        height: 'auto',
+        transform: position.vX > 0 ? 'scale(-1, 1)' : undefined,
+        top: position.top,
+        left: position.left,
+        zIndex: 999,
+      }}
+    />
+  );
+}
+
+// eslint-disable-next-line import/no-default-export
+export default Bee;

x-pack/plugins/lens/public/editor_frame_service/editor_frame/easteregg/index.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import type { Query } from '@kbn/es-query';
+import { EuiErrorBoundary } from '@elastic/eui';
+
+const Bee = React.lazy(() => import('./bee'));
+
+const ELK_BEE_REGEX = /^What\'s (an|(\d+)) elk bees?\?$/;
+
+function Bees({ query }: { query?: Query }) {
+  if (!query || typeof query !== 'object' || typeof query.query !== 'string') {
+    return null;
+  }
+  const match = ELK_BEE_REGEX.exec(query.query);
+  if (!match) {
+    return null;
+  }
+  let amount = parseInt(match[2] || '1', 10);
+  if (isNaN(amount)) {
+    amount = 1;
+  }
+  amount = Math.max(1, Math.min(50, amount));
+  return (
+    <React.Suspense fallback={false}>
+      {new Array(amount).fill(undefined).map((v, i) => (
+        <Bee key={i} />
+      ))}
+    </React.Suspense>
+  );
+}
+
+export function Easteregg(props: { query?: Query }) {
+  return (
+    // Do not break Lens for an easteregg
+    <EuiErrorBoundary style={{ display: 'none' }}>
+      <Bees {...props} />
+    </EuiErrorBoundary>
+  );
+}