[engagement] Create Engagement plugin PoC

.buildkite/scripts/steps/storybooks/build_and_upload.js

@@ -20,6 +20,7 @@ const STORYBOOKS = [
   'dashboard_enhanced',
   'dashboard',
   'data_enhanced',
+  'engagement',
   'embeddable',
   'expression_error',
   'expression_image',

.i18nrc.json

@@ -15,6 +15,7 @@
     "dataViews": "src/plugins/data_views",
     "devTools": "src/plugins/dev_tools",
     "discover": "src/plugins/discover",
+    "engagement": "src/plugins/engagement",
     "embeddableApi": "src/plugins/embeddable",
     "embeddableExamples": "examples/embeddable_examples",
     "esQuery": "packages/kbn-es-query/src",

docs/developer/plugin-list.asciidoc

@@ -90,6 +90,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |Embeddables are re-usable widgets that can be rendered on dashboard, but also in other apps. Developers can embed them directly in their plugin. End users can dynamically add them to embeddable _containers_.
 
 
+|{kib-repo}blob/{branch}/src/plugins/engagement/README.md[engagement]
+|A Kibana plugin
+
+
 |{kib-repo}blob/{branch}/src/plugins/es_ui_shared/README.md[esUiShared]
 |This plugin contains reusable code in the form of self-contained modules (or libraries). Each of these modules exports a set of functionality relevant to the domain of the module.
 

src/dev/storybook/aliases.ts

@@ -18,6 +18,7 @@ export const storybookAliases = {
   dashboard: 'src/plugins/dashboard/.storybook',
   data_enhanced: 'x-pack/plugins/data_enhanced/.storybook',
   discover: 'src/plugins/discover/.storybook',
+  engagement: 'src/plugins/engagement/.storybook',
   embeddable: 'src/plugins/embeddable/.storybook',
   expression_error: 'src/plugins/expression_error/.storybook',
   expression_image: 'src/plugins/expression_image/.storybook',

src/plugins/custom_integrations/storybook/index.ts

@@ -7,6 +7,6 @@
  */
 
 export {
-  getCustomIntegrationsContextDecorator as getStorybookContextDecorator,
-  getCustomIntegrationsContextProvider as getStorybookContextProvider,
+  getCustomIntegrationsContextDecorator,
+  getCustomIntegrationsContextProvider,
 } from '../storybook/decorator';

src/plugins/engagement/.i18nrc.json

@@ -0,0 +1,7 @@
+{
+  "prefix": "engagement",
+  "paths": {
+    "engagement": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}

src/plugins/engagement/.storybook/decorator.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { DecoratorFn } from '@storybook/react';
+import { getSharedUXContextProvider } from '../../shared_ux/.storybook/decorators';
+import { ServicesProvider } from '../public/services';
+import type { EngagementServices } from '../public/services';
+
+// TODO: move to a storybook implementation of the service using parameters.
+const services: EngagementServices = {
+  chat: {
+    enabled: true,
+    chatURL: 'https://elasticcloud-production-chat-us-east-1.s3.amazonaws.com/drift-iframe.html',
+    userID: '53877975',
+    userEmail: '[email protected]',
+    identityJWT:
+      'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI1Mzg3Nzk3NSIsImV4cCI6MTY0MjUxNDc0Mn0.CcAZbD8R865UmoHGi27wKn0aH1bzkZXhX449yyDH2Vk',
+  },
+};
+
+export const getEngagementContextDecorator: DecoratorFn = (storyFn, context) => {
+  const SharedUXProvider = getSharedUXContextProvider();
+  const EngagementProvider = getEngagementContextProvider();
+  return (
+    <SharedUXProvider>
+      <EngagementProvider>{storyFn()}</EngagementProvider>
+    </SharedUXProvider>
+  );
+};
+
+export const getEngagementContextProvider: () => React.FC =
+  () =>
+  ({ children }) =>
+    <ServicesProvider {...services}>{children}</ServicesProvider>;

src/plugins/engagement/.storybook/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+export { getEngagementContextDecorator, getEngagementContextProvider } from './decorator';

src/plugins/engagement/.storybook/main.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { defaultConfig } from '@kbn/storybook';
+
+module.exports = defaultConfig;

src/plugins/engagement/.storybook/manager.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
+import { PANEL_ID } from '@storybook/addon-actions';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'Engagement Storybook',
+    brandUrl: 'https://github.com/elastic/kibana/tree/main/src/plugins/engagement',
+  }),
+  showPanel: true.valueOf,
+  selectedPanel: PANEL_ID,
+});

src/plugins/engagement/.storybook/preview.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { addDecorator } from '@storybook/react';
+import { getEngagementContextDecorator } from './decorator';
+
+addDecorator(getEngagementContextDecorator);

src/plugins/engagement/README.md

@@ -0,0 +1,5 @@
+# engagement
+
+A Kibana plugin
+
+---

src/plugins/engagement/common/index.ts

@@ -0,0 +1,14 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+export const PLUGIN_ID = 'engagement';
+
+export const GET_CHAT_TOKEN_ROUTE_PATH = '/internal/engagement/chat_token';
+export interface GetChatTokenResponseBody {
+  token: string;
+}

src/plugins/engagement/kibana.json

@@ -0,0 +1,16 @@
+{
+  "id": "engagement",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "owner": {
+    "name": "Shared UX",
+    "githubTeam": "shared-ux"
+  },
+  "description": "A plugin for engaging with the active user.",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [
+    "sharedUX"
+  ],
+  "optionalPlugins": []
+}

src/plugins/engagement/public/components/iframe_chat/iframe_chat.stories.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { Chat } from './iframe_chat';
+
+export default {
+  title: 'IFRAME Chat',
+  description: '',
+  parameters: {},
+};
+
+export const Component = () => {
+  return (
+    <div>
+      <Chat />
+    </div>
+  );
+};

src/plugins/engagement/public/components/iframe_chat/iframe_chat.tsx

@@ -0,0 +1,136 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useEffect, useRef, useState, CSSProperties } from 'react';
+import { css } from '@emotion/react';
+import { useChat } from '../../services';
+
+type UseChatType =
+  | { enabled: false }
+  | {
+      enabled: true;
+      src: string;
+      ref: React.MutableRefObject<HTMLIFrameElement | null>;
+      style: CSSProperties;
+    };
+
+const MESSAGE_READY = 'driftIframeReady';
+const MESSAGE_RESIZE = 'driftIframeResize';
+const MESSAGE_SET_CONTEXT = 'driftSetContext';
+
+const iframeStyle = css`
+  position: fixed;
+  botton: 30px;
+  right: 30px;
+  display: block;
+`;
+
+// We're sending a lot of information to the frame, so this method puts together the specific
+// properties, 1/ to avoid leaking too much, and 2/ to enumerate precisely what we're sending.
+const getContext = () => {
+  const { location, navigator, innerHeight, innerWidth } = window;
+  const { hash, host, hostname, href, origin, pathname, port, protocol, search } = location;
+  const { language, userAgent } = navigator;
+  const { title, referrer } = document;
+
+  return {
+    window: {
+      location: {
+        hash,
+        host,
+        hostname,
+        href,
+        origin,
+        pathname,
+        port,
+        protocol,
+        search,
+      },
+      navigator: { language, userAgent },
+      innerHeight,
+      innerWidth,
+    },
+    document: {
+      title,
+      referrer,
+    },
+  };
+};
+
+const useFrame = (): UseChatType => {
+  const ref = useRef<HTMLIFrameElement>(null);
+  const chat = useChat();
+  const [style, setStyle] = useState<CSSProperties>({});
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent): void => {
+      const { current: chatIframe } = ref;
+
+      if (
+        !chat.enabled ||
+        !chatIframe?.contentWindow ||
+        event.source !== chatIframe?.contentWindow
+      ) {
+        return;
+      }
+
+      const { data: message } = event;
+      const context = getContext();
+
+      switch (message.type) {
+        case MESSAGE_READY: {
+          const user = {
+            id: chat.userID,
+            attributes: {
+              email: chat.userEmail,
+            },
+            jwt: chat.identityJWT,
+          };
+
+          chatIframe.contentWindow.postMessage(
+            {
+              type: MESSAGE_SET_CONTEXT,
+              data: { context, user },
+            },
+            '*'
+          );
+          break;
+        }
+
+        case MESSAGE_RESIZE: {
+          const styles = message.data.styles || ({} as CSSProperties);
+          setStyle({ ...style, ...styles });
+          break;
+        }
+
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => window.removeEventListener('message', handleMessage);
+  }, [chat, style]);
+
+  if (chat.enabled) {
+    return { enabled: true, src: chat.chatURL, ref, style };
+  }
+
+  return { enabled: false };
+};
+
+export const Chat = () => {
+  const frameProps = useFrame();
+
+  if (!frameProps.enabled) {
+    return null;
+  }
+
+  return <iframe css={iframeStyle} data-test-id="iframe-chat" title="engagement" {...frameProps} />;
+};

src/plugins/engagement/public/components/iframe_chat/index.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+/* eslint-disable import/no-default-export */
+
+import { Chat } from './iframe_chat';
+export { Chat } from './iframe_chat';
+
+/**
+ * Exporting the Chat component as a default export so it can be loaded by React.lazy.
+ */
+export default Chat;

src/plugins/engagement/public/components/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { withSuspense } from '../../../shared_ux/public';
+
+export const LazyEngagementChat = React.lazy(() => import('./iframe_chat'));
+export const EngagementChat = withSuspense(LazyEngagementChat);