[8.13] [Observability AI Assistant] Mobile fixes (#177154) (#177238)

# Backport This will backport the following commits from `main` to `8.13`: - [[Observability AI Assistant] Mobile fixes (#177154)](#177154)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Coen Warmer <coen.warmer@gmail.com>
elastic · Feb 19, 2024 · dca2f55 · dca2f55
1 parent 08c27fd
commit dca2f55
Show file tree

Hide file tree

Showing 19 changed files with 287 additions and 134 deletions.
diff --git a/x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx b/x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx
@@ -23,12 +23,7 @@ import { InspectorHeaderLink } from './inspector_header_link';
 import { Labs } from './labs';
 
 export function ApmHeaderActionMenu() {
-  const {
-    core,
-    plugins,
-    config,
-    observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
-  } = useApmPluginContext();
+  const { core, plugins, config } = useApmPluginContext();
   const { search } = window.location;
   const { application, http } = core;
   const { basePath } = http;
@@ -101,9 +96,6 @@ export function ApmHeaderActionMenu() {
         })}
       </EuiHeaderLink>
       <InspectorHeaderLink />
-      {ObservabilityAIAssistantActionMenuItem ? (
-        <ObservabilityAIAssistantActionMenuItem />
-      ) : null}
     </EuiHeaderLinks>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/routing/app_root/index.tsx b/x-pack/plugins/apm/public/components/routing/app_root/index.tsx
@@ -21,6 +21,7 @@ import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config';
 import { euiDarkVars, euiLightVars } from '@kbn/ui-theme';
 import React from 'react';
 import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useKibanaEnvironmentContextProvider } from '../../../context/kibana_environment_context/use_kibana_environment_context';
 import { AnomalyDetectionJobsContextProvider } from '../../../context/anomaly_detection_jobs/anomaly_detection_jobs_context';
 import {
@@ -128,12 +129,23 @@ export function ApmAppRoot({
 }
 
 function MountApmHeaderActionMenu() {
-  const { setHeaderActionMenu, theme$ } =
-    useApmPluginContext().appMountParameters;
+  const {
+    appMountParameters: { setHeaderActionMenu, theme$ },
+    observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
+  } = useApmPluginContext();
 
   return (
     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-      <ApmHeaderActionMenu />
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexItem>
+          <ApmHeaderActionMenu />
+        </EuiFlexItem>
+        {ObservabilityAIAssistantActionMenuItem ? (
+          <EuiFlexItem>
+            <ObservabilityAIAssistantActionMenuItem />
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
     </HeaderMenuPortal>
   );
 }

diff --git a/...ploratory_view/public/components/shared/exploratory_view/components/action_menu/index.tsx b/...ploratory_view/public/components/shared/exploratory_view/components/action_menu/index.tsx
@@ -8,8 +8,10 @@
 import React from 'react';
 import { TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ExpViewActionMenuContent } from './action_menu';
 import { useExploratoryView } from '../../contexts/exploratory_view_config';
+import { useKibana } from '../../hooks/use_kibana';
 
 interface Props {
   timeRange?: { from: string; to: string };
@@ -18,9 +20,22 @@ interface Props {
 export function ExpViewActionMenu(props: Props) {
   const { setHeaderActionMenu, theme$ } = useExploratoryView();
 
+  const {
+    observabilityAIAssistant: { ObservabilityAIAssistantActionMenuItem },
+  } = useKibana().services;
+
   return (
     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-      <ExpViewActionMenuContent {...props} />
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexItem>
+          <ExpViewActionMenuContent {...props} />
+        </EuiFlexItem>
+        {ObservabilityAIAssistantActionMenuItem ? (
+          <EuiFlexItem>
+            <ObservabilityAIAssistantActionMenuItem />
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
     </HeaderMenuPortal>
   );
 }
diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 import { Routes, Route } from '@kbn/shared-ux-router';
@@ -74,22 +74,28 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
       {setHeaderActionMenu && theme$ && (
         <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-          <EuiHeaderLinks gutterSize="xs">
-            <EuiHeaderLink color={'text'} {...settingsLinkProps}>
-              {settingsTabTitle}
-            </EuiHeaderLink>
-            <LazyAlertDropdownWrapper />
-            <EuiHeaderLink
-              href={getUrlForApp('/integrations/browse')}
-              color="primary"
-              iconType="indexOpen"
-            >
-              {ADD_DATA_LABEL}
-            </EuiHeaderLink>
+          <EuiFlexGroup responsive={false} gutterSize="s">
+            <EuiFlexItem>
+              <EuiHeaderLinks gutterSize="xs">
+                <EuiHeaderLink color={'text'} {...settingsLinkProps}>
+                  {settingsTabTitle}
+                </EuiHeaderLink>
+                <LazyAlertDropdownWrapper />
+                <EuiHeaderLink
+                  href={getUrlForApp('/integrations/browse')}
+                  color="primary"
+                  iconType="indexOpen"
+                >
+                  {ADD_DATA_LABEL}
+                </EuiHeaderLink>
+              </EuiHeaderLinks>
+            </EuiFlexItem>
             {ObservabilityAIAssistantActionMenuItem ? (
-              <ObservabilityAIAssistantActionMenuItem />
+              <EuiFlexItem>
+                <ObservabilityAIAssistantActionMenuItem />
+              </EuiFlexItem>
             ) : null}
-          </EuiHeaderLinks>
+          </EuiFlexGroup>
         </HeaderMenuPortal>
       )}
 

diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -10,7 +10,13 @@ import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 import { Routes, Route } from '@kbn/shared-ux-router';
 
-import { EuiErrorBoundary, EuiHeaderLinks, EuiHeaderLink } from '@elastic/eui';
+import {
+  EuiErrorBoundary,
+  EuiHeaderLinks,
+  EuiHeaderLink,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 import { useKibana, useUiSetting } from '@kbn/kibana-react-plugin/public';
 import { HeaderMenuPortal, useLinkProps } from '@kbn/observability-shared-plugin/public';
 import { enableInfrastructureHostsView } from '@kbn/observability-plugin/common';
@@ -83,25 +89,33 @@ export const InfrastructurePage = () => {
                   />
                   {setHeaderActionMenu && theme$ && (
                     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-                      <EuiHeaderLinks gutterSize="xs">
-                        <EuiHeaderLink color={'text'} {...settingsLinkProps}>
-                          {settingsTabTitle}
-                        </EuiHeaderLink>
-                        <Route path={'/inventory'} component={AnomalyDetectionFlyout} />
-                        {config.featureFlags.alertsAndRulesDropdownEnabled && (
-                          <MetricsAlertDropdown />
-                        )}
-                        <EuiHeaderLink
-                          href={kibana.services?.application?.getUrlForApp('/integrations/browse')}
-                          color="primary"
-                          iconType="indexOpen"
-                        >
-                          {ADD_DATA_LABEL}
-                        </EuiHeaderLink>
+                      <EuiFlexGroup responsive={false} gutterSize="s">
+                        <EuiFlexItem>
+                          <EuiHeaderLinks gutterSize="xs">
+                            <EuiHeaderLink color={'text'} {...settingsLinkProps}>
+                              {settingsTabTitle}
+                            </EuiHeaderLink>
+                            <Route path={'/inventory'} component={AnomalyDetectionFlyout} />
+                            {config.featureFlags.alertsAndRulesDropdownEnabled && (
+                              <MetricsAlertDropdown />
+                            )}
+                            <EuiHeaderLink
+                              href={kibana.services?.application?.getUrlForApp(
+                                '/integrations/browse'
+                              )}
+                              color="primary"
+                              iconType="indexOpen"
+                            >
+                              {ADD_DATA_LABEL}
+                            </EuiHeaderLink>
+                          </EuiHeaderLinks>
+                        </EuiFlexItem>
                         {ObservabilityAIAssistantActionMenuItem ? (
-                          <ObservabilityAIAssistantActionMenuItem />
+                          <EuiFlexItem>
+                            <ObservabilityAIAssistantActionMenuItem />
+                          </EuiFlexItem>
                         ) : null}
-                      </EuiHeaderLinks>
+                      </EuiFlexGroup>
                     </HeaderMenuPortal>
                   )}
                   <Routes>

diff --git a/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu.tsx b/x-pack/plugins/observability/public/pages/overview/components/header_menu/header_menu.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { usePluginContext } from '../../../../hooks/use_plugin_context';
@@ -25,20 +25,26 @@ export function HeaderMenu(): React.ReactElement | null {
 
   return (
     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme.theme$}>
-      <EuiHeaderLinks>
-        <EuiHeaderLink
-          color="primary"
-          href={http.basePath.prepend('/app/integrations/browse')}
-          iconType="indexOpen"
-        >
-          {addDataLinkText}
-        </EuiHeaderLink>
-        {ObservabilityAIAssistantActionMenuItem ? <ObservabilityAIAssistantActionMenuItem /> : null}
-      </EuiHeaderLinks>
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        {ObservabilityAIAssistantActionMenuItem ? (
+          <EuiFlexItem>
+            <ObservabilityAIAssistantActionMenuItem />
+          </EuiFlexItem>
+        ) : null}
+        <EuiFlexItem>
+          <EuiHeaderLinks>
+            <EuiHeaderLink
+              color="primary"
+              href={http.basePath.prepend('/app/integrations/browse')}
+              iconType="indexOpen"
+            >
+              {i18n.translate('xpack.observability.home.addData', {
+                defaultMessage: 'Add integrations',
+              })}
+            </EuiHeaderLink>
+          </EuiHeaderLinks>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </HeaderMenuPortal>
   );
 }
-
-const addDataLinkText = i18n.translate('xpack.observability.home.addData', {
-  defaultMessage: 'Add integrations',
-});
diff --git a/...lugins/observability_ai_assistant/public/components/action_menu_item/action_menu_item.tsx b/...lugins/observability_ai_assistant/public/components/action_menu_item/action_menu_item.tsx
@@ -6,8 +6,15 @@
  */
 import React, { useEffect, useMemo, useState } from 'react';
 import datemath from '@elastic/datemath';
-import { EuiFlexGroup, EuiFlexItem, EuiHeaderLink, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHeaderLink,
+  EuiLoadingSpinner,
+  useCurrentEuiBreakpoint,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/css';
 import moment from 'moment';
 import { ObservabilityAIAssistantChatServiceProvider } from '../../context/observability_ai_assistant_chat_service_provider';
 import { useAbortableAsync } from '../../hooks/use_abortable_async';
@@ -16,8 +23,14 @@ import { AssistantAvatar } from '../assistant_avatar';
 import { ChatFlyout } from '../chat/chat_flyout';
 import { useKibana } from '../../hooks/use_kibana';
 
+const buttonLabelClassName = css`
+  display: none;
+`;
+
 export function ObservabilityAIAssistantActionMenuItem() {
   const service = useObservabilityAIAssistant();
+  const breakpoint = useCurrentEuiBreakpoint();
+
   const { plugins } = useKibana().services;
 
   const [isOpen, setIsOpen] = useState(false);
@@ -71,15 +84,15 @@ export function ObservabilityAIAssistantActionMenuItem() {
           setIsOpen(() => true);
         }}
       >
-        <EuiFlexGroup gutterSize="s" alignItems="center">
+        <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
           <EuiFlexItem grow={false}>
             {!isOpen || chatService.value ? (
               <AssistantAvatar size="xs" />
             ) : (
               <EuiLoadingSpinner size="m" />
             )}
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} className={breakpoint === 'xs' ? buttonLabelClassName : ''}>
             {i18n.translate('xpack.observabilityAiAssistant.actionMenuItemLabel', {
               defaultMessage: 'AI Assistant',
             })}

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx
@@ -154,13 +154,18 @@ export function ChatBody({
   }
 
   const containerClassName = css`
+    background: white;
     min-width: 0;
     max-height: 100%;
     max-width: ${startedFrom === 'conversationView'
       ? 1200 - 250 + 'px' // page template max width - conversation list width.
       : '100%'};
   `;
 
+  const headerContainerClassName = css`
+    padding-right: ${showLinkToConversationsApp ? '32px' : '0'};
+  `;
+
   const [stickToBottom, setStickToBottom] = useState(true);
 
   const isAtBottom = (parent: HTMLElement) =>
@@ -401,9 +406,10 @@ export function ChatBody({
     return (
       <EuiFlexGroup
         direction="column"
-        gutterSize="none"
         className={containerClassName}
+        gutterSize="none"
         justifyContent="center"
+        responsive={false}
       >
         <EuiFlexItem grow={false} className={chatBodyContainerClassNameWithError}>
           <EuiCallOut
@@ -425,7 +431,12 @@ export function ChatBody({
   }
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="none" className={containerClassName}>
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="none"
+      className={containerClassName}
+      responsive={false}
+    >
       <EuiFlexItem
         grow={false}
         className={conversation.error ? chatBodyContainerClassNameWithError : undefined}
@@ -446,7 +457,7 @@ export function ChatBody({
           </EuiCallOut>
         ) : null}
       </EuiFlexItem>
-      <EuiFlexItem grow={false} css={{ paddingRight: showLinkToConversationsApp ? '24px' : '0' }}>
+      <EuiFlexItem grow={false} className={headerContainerClassName}>
         <ChatHeader
           connectors={connectors}
           conversationId={