[Drift] Add to security/get_started and observability/overview (#159797)

## Summary Partially address https://github.com/elastic/kibana/issues/158835 Fix https://github.com/elastic/kibana/issues/159800 We're adding Drift to a couple of "high value" pages identified by the CSE team https://github.com/elastic/kibana/issues/158835. For now we don't add Drift globally because we have a bunch of concerns we need to resolve first https://github.com/elastic/kibana/issues/159691 <img width="1624" alt="Screenshot 2023-06-15 at 16 14 17" src="2729984d-9d54-466e-9166-6afc79ea3c68"> <img width="1624" alt="Screenshot 2023-06-15 at 16 14 32" src="77e77d70-a091-42bc-8ac0-ee7a684e2830"> To see how the chat bubble looks, you can use these URLs with my dummy test drift account: - https://dosant-pr-159797-d-2023-06-16-drift-more.kbndev.co/app/observability/overview - https://dosant-pr-159797-d-2023-06-16-drift-more.kbndev.co/app/security/get_started
2025-04-23 17:28:26 -04:00 · 2023-06-19 14:02:21 +02:00 · 2023-06-19 14:02:21 +02:00 · 3a27239fbe
commit 3a27239fbe
parent 8e6bf6338f
12 changed files with 111 additions and 58 deletions
--- a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/chat.tsx
+++ b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/chat.tsx
@ -37,10 +37,10 @@ export const Chat = ({ onHide = () => {}, onReady, onResize }: Props) => {
  }

  const { isReady, isResized, style } = config;
-  const { bottom, height, right } = style;
+  const { right } = style;

  const buttonCSS = css`
-    bottom: calc(${bottom} + ${height});
+    bottom: ${euiThemeVars.euiSizeXS};
    position: fixed;
    right: calc(${right} + ${euiThemeVars.euiSizeXS});
    visibility: ${isReady && isResized ? 'visible' : 'hidden'};
--- a/x-pack/plugins/observability/kibana.jsonc
+++ b/x-pack/plugins/observability/kibana.jsonc
@ -29,8 +29,8 @@
      "unifiedSearch",
      "visualizations"
    ],
-    "optionalPlugins": ["discover", "home", "licensing", "usageCollection"],
-    "requiredBundles": ["data", "kibanaReact", "kibanaUtils", "unifiedSearch"],
+    "optionalPlugins": ["discover", "home", "licensing", "usageCollection", "cloud"],
+    "requiredBundles": ["data", "kibanaReact", "kibanaUtils", "unifiedSearch", "cloudChat"],
    "extraPublicDirs": ["common"]
  }
 }
--- a/x-pack/plugins/observability/public/application/index.tsx
+++ b/x-pack/plugins/observability/public/application/index.tsx
@ -85,43 +85,50 @@ export const renderApp = ({

  const ApplicationUsageTrackingProvider =
    usageCollection?.components.ApplicationUsageTrackingProvider ?? React.Fragment;
+  const CloudProvider = plugins.cloud?.CloudContextProvider ?? React.Fragment;
+
  ReactDOM.render(
    <EuiErrorBoundary>
      <ApplicationUsageTrackingProvider>
        <KibanaThemeProvider theme$={theme$}>
-          <KibanaContextProvider
-            services={{
-              ...core,
-              ...plugins,
-              storage: new Storage(localStorage),
-              isDev,
-              kibanaVersion,
-            }}
-          >
-            <PluginContext.Provider
-              value={{
-                config,
-                appMountParameters,
-                observabilityRuleTypeRegistry,
-                ObservabilityPageTemplate,
+          <CloudProvider>
+            <KibanaContextProvider
+              services={{
+                ...core,
+                ...plugins,
+                storage: new Storage(localStorage),
+                isDev,
+                kibanaVersion,
              }}
            >
-              <Router history={history}>
-                <EuiThemeProvider darkMode={isDarkMode}>
-                  <i18nCore.Context>
-                    <RedirectAppLinks application={core.application} className={APP_WRAPPER_CLASS}>
-                      <QueryClientProvider client={queryClient}>
-                        <HasDataContextProvider>
-                          <App />
-                        </HasDataContextProvider>
-                        <HideableReactQueryDevTools />
-                      </QueryClientProvider>
-                    </RedirectAppLinks>
-                  </i18nCore.Context>
-                </EuiThemeProvider>
-              </Router>
-            </PluginContext.Provider>
-          </KibanaContextProvider>
+              <PluginContext.Provider
+                value={{
+                  config,
+                  appMountParameters,
+                  observabilityRuleTypeRegistry,
+                  ObservabilityPageTemplate,
+                }}
+              >
+                <Router history={history}>
+                  <EuiThemeProvider darkMode={isDarkMode}>
+                    <i18nCore.Context>
+                      <RedirectAppLinks
+                        application={core.application}
+                        className={APP_WRAPPER_CLASS}
+                      >
+                        <QueryClientProvider client={queryClient}>
+                          <HasDataContextProvider>
+                            <App />
+                          </HasDataContextProvider>
+                          <HideableReactQueryDevTools />
+                        </QueryClientProvider>
+                      </RedirectAppLinks>
+                    </i18nCore.Context>
+                  </EuiThemeProvider>
+                </Router>
+              </PluginContext.Provider>
+            </KibanaContextProvider>
+          </CloudProvider>
        </KibanaThemeProvider>
      </ApplicationUsageTrackingProvider>
    </EuiErrorBoundary>,
--- a/x-pack/plugins/observability/public/pages/overview/overview.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/overview.tsx
@ -11,6 +11,7 @@ import { BoolQuery } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { AlertConsumers } from '@kbn/rule-data-utils';
 import { useBreadcrumbs, useFetcher } from '@kbn/observability-shared-plugin/public';
+import { Chat } from '@kbn/cloud-chat-plugin/public';

 import { useKibana } from '../../utils/kibana_react';
 import { LoadingObservability } from '../../components/loading_observability';
@ -240,6 +241,8 @@ export function OverviewPage() {
      {isDataAssistantFlyoutVisible ? (
        <DataAssistantFlyout onClose={() => setIsDataAssistantFlyoutVisible(false)} />
      ) : null}
+
+      <Chat />
    </ObservabilityPageTemplate>
  );
 }
--- a/x-pack/plugins/observability/public/plugin.ts
+++ b/x-pack/plugins/observability/public/plugin.ts
@ -26,6 +26,7 @@ import type { DiscoverStart } from '@kbn/discover-plugin/public';
 import type { EmbeddableStart } from '@kbn/embeddable-plugin/public';
 import type { HomePublicPluginSetup, HomePublicPluginStart } from '@kbn/home-plugin/public';
 import type { ChartsPluginStart } from '@kbn/charts-plugin/public';
+import type { CloudStart } from '@kbn/cloud-plugin/public';
 import type {
  ObservabilitySharedPluginSetup,
  ObservabilitySharedPluginStart,
@ -117,6 +118,7 @@ export interface ObservabilityPublicPluginsStart {
  usageCollection: UsageCollectionSetup;
  unifiedSearch: UnifiedSearchPublicPluginStart;
  home?: HomePublicPluginStart;
+  cloud?: CloudStart;
 }

 export type ObservabilityPublicStart = ReturnType<Plugin['start']>;
--- a/x-pack/plugins/observability/tsconfig.json
+++ b/x-pack/plugins/observability/tsconfig.json
@ -75,7 +75,9 @@
    "@kbn/ui-actions-plugin",
    "@kbn/field-types",
    "@kbn/safer-lodash-set",
-    "@kbn/core-http-server"
+    "@kbn/core-http-server",
+    "@kbn/cloud-chat-plugin",
+    "@kbn/cloud-plugin"
  ],
  "exclude": [
    "target/**/*"
--- a/x-pack/plugins/security_solution/kibana.jsonc
+++ b/x-pack/plugins/security_solution/kibana.jsonc
@ -68,7 +68,8 @@
      "usageCollection",
      "lists",
      "ml",
-      "unifiedSearch"
+      "unifiedSearch",
+      "cloudChat"
    ],
    "extraPublicDirs": [
      "common"
--- a/x-pack/plugins/security_solution/public/app/app.tsx
+++ b/x-pack/plugins/security_solution/public/app/app.tsx
@ -153,23 +153,29 @@ const SecurityAppComponent: React.FC<SecurityAppComponentProps> = ({
  setHeaderActionMenu,
  store,
  theme$,
-}) => (
-  <KibanaContextProvider
-    services={{
-      appName: APP_NAME,
-      ...services,
-    }}
-  >
-    <StartApp
-      history={history}
-      onAppLeave={onAppLeave}
-      setHeaderActionMenu={setHeaderActionMenu}
-      store={store}
-      theme$={theme$}
+}) => {
+  const CloudProvider = services.cloud?.CloudContextProvider ?? React.Fragment;
+
+  return (
+    <KibanaContextProvider
+      services={{
+        appName: APP_NAME,
+        ...services,
+      }}
    >
-      {children}
-    </StartApp>
-  </KibanaContextProvider>
-);
+      <CloudProvider>
+        <StartApp
+          history={history}
+          onAppLeave={onAppLeave}
+          setHeaderActionMenu={setHeaderActionMenu}
+          store={store}
+          theme$={theme$}
+        >
+          {children}
+        </StartApp>
+      </CloudProvider>
+    </KibanaContextProvider>
+  );
+};

 export const SecurityApp = memo(SecurityAppComponent);
--- a/x-pack/plugins/security_solution/public/overview/pages/landing.tsx
+++ b/x-pack/plugins/security_solution/public/overview/pages/landing.tsx
@ -7,6 +7,7 @@

 import React, { memo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
+import { Chat } from '@kbn/cloud-chat-plugin/public';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { SecurityPageName } from '../../../common/constants';
 import { LandingPageComponent } from '../../common/components/landing_page';
@ -24,6 +25,7 @@ export const LandingPage = memo(() => {
          <LandingPageComponent />
        </PluginTemplateWrapper>
      )}
+      <Chat />
      <SpyRoute pageName={SecurityPageName.landing} />
    </>
  );
--- a/x-pack/plugins/security_solution/tsconfig.json
+++ b/x-pack/plugins/security_solution/tsconfig.json
@ -160,6 +160,7 @@
    "@kbn/url-state",
    "@kbn/ml-anomaly-utils",
    "@kbn/field-formats-plugin",
-    "@kbn/dev-proc-runner"
+    "@kbn/dev-proc-runner",
+    "@kbn/cloud-chat-plugin"
  ]
 }
--- a/x-pack/test/cloud_integration/config.ts
+++ b/x-pack/test/cloud_integration/config.ts
@ -95,7 +95,15 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
        'dateFormat:tz': 'UTC',
      },
    },
-    apps: kibanaFunctionalConfig.get('apps'),
+    apps: {
+      ...kibanaFunctionalConfig.get('apps'),
+      observability: {
+        pathname: '/app/observability',
+      },
+      security: {
+        pathname: '/app/security',
+      },
+    },
    screenshots: { directory: resolve(__dirname, 'screenshots') },

    junit: {
--- a/x-pack/test/cloud_integration/tests/chat.ts
+++ b/x-pack/test/cloud_integration/tests/chat.ts
@ -21,7 +21,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
    });

    it('chat widget is present on integrations page', async () => {
-      PageObjects.common.navigateToUrl('integrations', 'browse', {
+      await PageObjects.common.navigateToUrl('integrations', 'browse', {
        useActualUrl: true,
        shouldUseHashForSubUrl: false,
      });
@ -29,16 +29,37 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
    });

    it('chat widget is present on home getting_started page', async () => {
-      PageObjects.common.navigateToUrl('home', '/getting_started', {
+      await PageObjects.common.navigateToUrl('home', '/getting_started', {
        useActualUrl: true,
        shouldUseHashForSubUrl: true,
      });
      await testSubjects.existOrFail('cloud-chat');
    });

+    it('chat widget is present on management page', async () => {
+      await PageObjects.common.navigateToApp('management');
+      await testSubjects.existOrFail('cloud-chat');
+    });
+
    it('chat widget is present on management page', async () => {
      PageObjects.common.navigateToApp('management');
      await testSubjects.existOrFail('cloud-chat');
    });
+
+    it('chat widget is present on observability/overview page', async () => {
+      await PageObjects.common.navigateToUrl('observability', '/overview', {
+        useActualUrl: true,
+        shouldUseHashForSubUrl: true,
+      });
+      await testSubjects.existOrFail('cloud-chat');
+    });
+
+    it('chat widget is present on security/get_started page', async () => {
+      await PageObjects.common.navigateToUrl('security', '/get_started', {
+        useActualUrl: true,
+        shouldUseHashForSubUrl: true,
+      });
+      await testSubjects.existOrFail('cloud-chat');
+    });
  });
 }