D/2023 06 14 global drift

.github/CODEOWNERS

@@ -68,7 +68,6 @@ packages/kbn-ci-stats-reporter @elastic/kibana-operations
 packages/kbn-ci-stats-shipper-cli @elastic/kibana-operations
 packages/kbn-cli-dev-mode @elastic/kibana-operations
 x-pack/plugins/cloud_integrations/cloud_chat @elastic/kibana-core
-x-pack/plugins/cloud_integrations/cloud_chat_provider @elastic/kibana-core
 x-pack/plugins/cloud_integrations/cloud_data_migration @elastic/platform-onboarding
 x-pack/plugins/cloud_defend @elastic/kibana-cloud-security-posture
 x-pack/plugins/cloud_integrations/cloud_experiments @elastic/kibana-core

docs/developer/plugin-list.asciidoc

@@ -475,10 +475,6 @@ for inventory and topology purposes.
 |Integrates with DriftChat in order to provide live support to our Elastic Cloud users. This plugin should only run on Elastic Cloud.
 
 
-|{kib-repo}blob/{branch}/x-pack/plugins/cloud_integrations/cloud_chat_provider/README.md[cloudChatProvider]
-|This plugin exists as a workaround for using cloudChat plugin in plugins which can't have a direct dependency on security plugin.
-
-
 |{kib-repo}blob/{branch}/x-pack/plugins/cloud_integrations/cloud_data_migration/README.md[cloudDataMigration]
 |Static migration page where self-managed users can see text/copy about migrating to Elastic Cloud
 

package.json

@@ -173,7 +173,6 @@
     "@kbn/chart-icons": "link:packages/kbn-chart-icons",
     "@kbn/charts-plugin": "link:src/plugins/charts",
     "@kbn/cloud-chat-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat",
-    "@kbn/cloud-chat-provider-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat_provider",
     "@kbn/cloud-data-migration-plugin": "link:x-pack/plugins/cloud_integrations/cloud_data_migration",
     "@kbn/cloud-defend-plugin": "link:x-pack/plugins/cloud_defend",
     "@kbn/cloud-experiments-plugin": "link:x-pack/plugins/cloud_integrations/cloud_experiments",

packages/kbn-optimizer/limits.yml

@@ -11,7 +11,6 @@ pageLoadAssetSize:
   charts: 55000
   cloud: 21076
   cloudChat: 19894
-  cloudChatProvider: 17114
   cloudDataMigration: 19170
   cloudDefend: 18697
   cloudExperiments: 59358

src/plugins/home/kibana.jsonc

@@ -6,20 +6,8 @@
     "id": "home",
     "server": true,
     "browser": true,
-    "requiredPlugins": [
-      "dataViews",
-      "share",
-      "urlForwarding"
-    ],
-    "optionalPlugins": [
-      "usageCollection",
-      "customIntegrations",
-      "cloud",
-      "guidedOnboarding",
-      "cloudChatProvider"
-    ],
-    "requiredBundles": [
-      "kibanaReact"
-    ]
+    "requiredPlugins": ["dataViews", "share", "urlForwarding"],
+    "optionalPlugins": ["usageCollection", "customIntegrations", "cloud", "guidedOnboarding"],
+    "requiredBundles": ["kibanaReact"]
   }
 }

src/plugins/home/public/application/components/guided_onboarding/getting_started.tsx

@@ -43,8 +43,7 @@ const skipText = i18n.translate('home.guidedOnboarding.gettingStarted.skip.butto
 });
 
 export const GettingStarted = () => {
-  const { application, trackUiMetric, chrome, guidedOnboardingService, cloud, cloudChat } =
-    getServices();
+  const { application, trackUiMetric, chrome, guidedOnboardingService, cloud } = getServices();
 
   const [guidesState, setGuidesState] = useState<GuideState[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -227,7 +226,6 @@ export const GettingStarted = () => {
             {skipText}
           </EuiLink>
         </div>
-        {cloudChat?.Chat && <cloudChat.Chat />}
       </EuiPageTemplate.Section>
     </KibanaPageTemplate>
   );

src/plugins/home/public/application/kibana_services.ts

@@ -22,7 +22,6 @@ import { DataViewsContract } from '@kbn/data-views-plugin/public';
 import { SharePluginSetup } from '@kbn/share-plugin/public';
 import { GuidedOnboardingApi } from '@kbn/guided-onboarding-plugin/public';
 import { CloudSetup } from '@kbn/cloud-plugin/public';
-import { CloudChatProviderPluginStart } from '@kbn/cloud-chat-provider-plugin/public';
 import { TutorialService } from '../services/tutorials';
 import { AddDataService } from '../services/add_data';
 import { FeatureCatalogueRegistry } from '../services/feature_catalogue';
@@ -54,7 +53,6 @@ export interface HomeKibanaServices {
   welcomeService: WelcomeService;
   guidedOnboardingService?: GuidedOnboardingApi;
   cloud?: CloudSetup;
-  cloudChat?: CloudChatProviderPluginStart;
 }
 
 let services: HomeKibanaServices | null = null;

src/plugins/home/public/plugin.ts

@@ -22,7 +22,6 @@ import type { GuidedOnboardingPluginStart } from '@kbn/guided-onboarding-plugin/
 import { AppNavLinkStatus } from '@kbn/core/public';
 import { SharePluginSetup } from '@kbn/share-plugin/public';
 import type { CloudSetup } from '@kbn/cloud-plugin/public';
-import type { CloudChatProviderPluginStart } from '@kbn/cloud-chat-provider-plugin/public';
 import { PLUGIN_ID, HOME_APP_BASE_PATH } from '../common/constants';
 import { setServices } from './application/kibana_services';
 import { ConfigSchema } from '../config';
@@ -43,7 +42,6 @@ export interface HomePluginStartDependencies {
   dataViews: DataViewsPublicPluginStart;
   urlForwarding: UrlForwardingStart;
   guidedOnboarding: GuidedOnboardingPluginStart;
-  cloudChatProvider?: CloudChatProviderPluginStart;
 }
 
 export interface HomePluginSetupDependencies {
@@ -82,10 +80,8 @@ export class HomePublicPlugin
         const trackUiMetric = usageCollection
           ? usageCollection.reportUiCounter.bind(usageCollection, 'Kibana_home')
           : () => {};
-        const [
-          coreStart,
-          { dataViews, urlForwarding: urlForwardingStart, guidedOnboarding, cloudChatProvider },
-        ] = await core.getStartServices();
+        const [coreStart, { dataViews, urlForwarding: urlForwardingStart, guidedOnboarding }] =
+          await core.getStartServices();
         setServices({
           share,
           trackUiMetric,
@@ -110,7 +106,6 @@ export class HomePublicPlugin
           welcomeService: this.welcomeService,
           guidedOnboardingService: guidedOnboarding.guidedOnboardingApi,
           cloud,
-          cloudChat: cloudChatProvider,
         });
         coreStart.chrome.docTitle.change(
           i18n.translate('home.pageTitle', { defaultMessage: 'Home' })

src/plugins/home/tsconfig.json

@@ -30,7 +30,6 @@
     "@kbn/ebt-tools",
     "@kbn/core-analytics-server",
     "@kbn/storybook",
-    "@kbn/cloud-chat-provider-plugin",
     "@kbn/shared-ux-router",
     "@kbn/core-http-common",
   ],

tsconfig.base.json

@@ -130,8 +130,6 @@
       "@kbn/cli-dev-mode/*": ["packages/kbn-cli-dev-mode/*"],
       "@kbn/cloud-chat-plugin": ["x-pack/plugins/cloud_integrations/cloud_chat"],
       "@kbn/cloud-chat-plugin/*": ["x-pack/plugins/cloud_integrations/cloud_chat/*"],
-      "@kbn/cloud-chat-provider-plugin": ["x-pack/plugins/cloud_integrations/cloud_chat_provider"],
-      "@kbn/cloud-chat-provider-plugin/*": ["x-pack/plugins/cloud_integrations/cloud_chat_provider/*"],
       "@kbn/cloud-data-migration-plugin": ["x-pack/plugins/cloud_integrations/cloud_data_migration"],
       "@kbn/cloud-data-migration-plugin/*": ["x-pack/plugins/cloud_integrations/cloud_data_migration/*"],
       "@kbn/cloud-defend-plugin": ["x-pack/plugins/cloud_defend"],

x-pack/plugins/cloud_integrations/cloud_chat/kibana.jsonc

@@ -13,8 +13,10 @@
       "chat"
     ],
     "requiredPlugins": [
-      "cloud",
-      "cloudChatProvider"
+      "cloud"
+    ],
+    "requiredBundles": [
+      "kibanaReact"
     ],
     "optionalPlugins": [
       "security"

x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/chat.tsx

@@ -5,88 +5,68 @@
  * 2.0.
  */
 
-import React, { useRef, useState } from 'react';
-import { css } from '@emotion/react';
-
+import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonEmpty } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
-
-import { useChatConfig } from './use_chat_config';
+import { WhenIdle } from './when_idle';
+import { useChatConfig, ChatApi } from './use_chat_config';
+export type { ChatApi } from './use_chat_config';
 
 export interface Props {
   /** Handler invoked when chat is hidden by someone. */
   onHide?: () => void;
   /** Handler invoked when the chat widget signals it is ready. */
-  onReady?: () => void;
+  onReady?: (chatApi: ChatApi) => void;
   /** Handler invoked when the chat widget signals to be resized. */
   onResize?: () => void;
+  /** Handler invoked when the playbook is fired. */
+  onPlaybookFired?: () => void;
+  /** The offset from the top of the page to the chat widget. */
+  topOffset?: number;
 }
 
 /**
  * A component that will display a trigger that will allow the user to chat with a human operator,
  * when the service is enabled; otherwise, it renders nothing.
  */
-export const Chat = ({ onHide = () => {}, onReady, onResize }: Props) => {
-  const config = useChatConfig({ onReady, onResize });
-  const ref = useRef<HTMLDivElement>(null);
-  const [isClosed, setIsClosed] = useState(false);
+export const Chat = ({
+  onHide = () => {},
+  onReady,
+  onResize,
+  onPlaybookFired,
+  topOffset = 0,
+}: Props) => {
+  const config = useChatConfig({ onReady, onResize, onPlaybookFired });
 
-  if (!config.enabled || isClosed) {
+  if (!config.enabled) {
     return null;
   }
 
-  const { isReady, isResized, style } = config;
-  const { right } = style;
-
-  const buttonCSS = css`
-    bottom: ${euiThemeVars.euiSizeXS};
-    position: fixed;
-    right: calc(${right} + ${euiThemeVars.euiSizeXS});
-    visibility: ${isReady && isResized ? 'visible' : 'hidden'};
-  `;
-
-  const button = (
-    <EuiButtonEmpty
-      css={buttonCSS}
-      data-test-subj="cloud-chat-hide"
-      name="cloudChatHide"
-      onClick={() => {
-        onHide();
-        setIsClosed(true);
-      }}
-      size="xs"
-    >
-      {i18n.translate('xpack.cloudChat.hideChatButtonLabel', {
-        defaultMessage: 'Hide chat',
-      })}
-    </EuiButtonEmpty>
-  );
-
-  const containerCSS = css`
-    bottom: ${euiThemeVars.euiSizeXL};
-    position: fixed;
-    right: ${euiThemeVars.euiSizeXL};
-    z-index: ${euiThemeVars.euiZMaskBelowHeader - 1};
-
-    &:focus [name='cloudChatHide'],
-    &:hover [name='cloudChatHide'] {
-      visibility: visible;
-    }
-  `;
-
   return (
-    <div css={containerCSS} ref={ref} data-test-subj="cloud-chat">
-      {button}
+    <WhenIdle>
       <iframe
         data-test-subj="cloud-chat-frame"
         title={i18n.translate('xpack.cloudChat.chatFrameTitle', {
           defaultMessage: 'Chat',
         })}
         src={config.src}
         ref={config.ref}
-        style={config.style}
+        style={
+          config.isReady
+            ? {
+                position: 'fixed',
+                ...config.style,
+                // reset default button positioning
+                bottom: 'auto',
+                inset: 'initial',
+                // force position to the top and of the page
+                top: topOffset,
+                right: 0,
+                // TODO: if the page height is smaller than widget height + topOffset,
+                // the widget will be cut off from the bottom.
+              }
+            : { display: 'none' }
+        }
       />
-    </div>
+    </WhenIdle>
   );
 };

x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/index.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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, { Suspense } from 'react';
+import { EuiErrorBoundary } from '@elastic/eui';
+import type { Props } from './chat';
+export type { ChatApi, Props } from './chat';
+
+/**
+ * A suspense-compatible version of the Chat component.
+ */
+export const LazyChat = React.lazy(() => import('./chat').then(({ Chat }) => ({ default: Chat })));
+
+/**
+ * A lazily-loaded component that will display a trigger that will allow the user to chat with a
+ * human operator when the service is enabled; otherwise, it renders nothing.
+ */
+export const Chat = (props: Props) => (
+  <EuiErrorBoundary>
+    <Suspense fallback={<></>}>
+      <LazyChat {...props} />
+    </Suspense>
+  </EuiErrorBoundary>
+);