Assorted Tweaks + Telemetry (#165604)

elastic · Sep 4, 2023 · 63b7227 · 63b7227
1 parent be3f9bc
commit 63b7227
Show file tree

Hide file tree

Showing 22 changed files with 132 additions and 23 deletions.
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
@@ -49,6 +49,7 @@ export function ObservabilityAIAssistantActionMenuItem() {
     <>
       <EuiHeaderLink
         color="primary"
+        data-test-subj="observabilityAiAssistantNewChatHeaderLink"
         onClick={() => {
           setIsOpen(() => true);
         }}

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/buttons/ask_assistant_button.tsx b/x-pack/plugins/observability_ai_assistant/public/components/buttons/ask_assistant_button.tsx
@@ -56,14 +56,26 @@ export function AskAssistantButton({
   switch (variant) {
     case 'basic':
       return (
-        <EuiButton fill={fill} size={size} iconType="sparkles" onClick={onClick}>
+        <EuiButton
+          data-test-subj="observabilityAiAssistantAskAssistantButton"
+          fill={fill}
+          size={size}
+          iconType="sparkles"
+          onClick={onClick}
+        >
           {buttonLabel}
         </EuiButton>
       );
 
     case 'empty':
       return (
-        <EuiButtonEmpty size={size} flush={flush} iconType="sparkles" onClick={onClick}>
+        <EuiButtonEmpty
+          data-test-subj="observabilityAiAssistantAskAssistantButton"
+          size={size}
+          flush={flush}
+          iconType="sparkles"
+          onClick={onClick}
+        >
           {buttonLabel}
         </EuiButtonEmpty>
       );
@@ -89,8 +101,9 @@ export function AskAssistantButton({
                 defaultMessage: 'Elastic Assistant',
               }
             )}
-            iconType="sparkles"
+            data-test-subj="observabilityAiAssistantAskAssistantButtonButtonIcon"
             display={fill ? 'fill' : 'base'}
+            iconType="sparkles"
             size={size}
             style={{ minWidth: 'auto' }}
             onClick={onClick}

diff --git a/...rvability_ai_assistant/public/components/buttons/hide_expand_conversation_list_button.tsx b/...rvability_ai_assistant/public/components/buttons/hide_expand_conversation_list_button.tsx
@@ -14,7 +14,12 @@ export type HideExpandConversationListButtonProps = React.ComponentProps<typeof
 
 export function HideExpandConversationListButton(props: HideExpandConversationListButtonProps) {
   return (
-    <EuiButtonEmpty iconType={props.isExpanded ? 'menuLeft' : 'menuRight'} size="xs" {...props}>
+    <EuiButtonEmpty
+      data-test-subj="observabilityAiAssistantHideExpandConversationListButton"
+      iconType={props.isExpanded ? 'menuLeft' : 'menuRight'}
+      size="xs"
+      {...props}
+    >
       {props.isExpanded
         ? i18n.translate('xpack.observabilityAiAssistant.hideExpandConversationButton.hide', {
             defaultMessage: 'Hide chats',

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/buttons/new_chat_button.tsx b/x-pack/plugins/observability_ai_assistant/public/components/buttons/new_chat_button.tsx
@@ -10,7 +10,12 @@ import { i18n } from '@kbn/i18n';
 
 export function NewChatButton(props: React.ComponentProps<typeof EuiButton>) {
   return (
-    <EuiButton {...props} fill iconType="discuss">
+    <EuiButton
+      data-test-subj="observabilityAiAssistantNewChatButton"
+      fill
+      iconType="discuss"
+      {...props}
+    >
       {i18n.translate('xpack.observabilityAiAssistant.newChatButton', {
         defaultMessage: 'New chat',
       })}

diff --git a/...ugins/observability_ai_assistant/public/components/buttons/regenerate_response_button.tsx b/...ugins/observability_ai_assistant/public/components/buttons/regenerate_response_button.tsx
@@ -11,7 +11,12 @@ import { i18n } from '@kbn/i18n';
 
 export function RegenerateResponseButton(props: Partial<EuiButtonEmptyProps>) {
   return (
-    <EuiButtonEmpty size="s" {...props} iconType="sparkles">
+    <EuiButtonEmpty
+      size="s"
+      data-test-subj="observabilityAiAssistantRegenerateResponseButton"
+      iconType="sparkles"
+      {...props}
+    >
       {i18n.translate('xpack.observabilityAiAssistant.regenerateResponseButtonLabel', {
         defaultMessage: 'Regenerate',
       })}

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/buttons/start_chat_button.tsx b/x-pack/plugins/observability_ai_assistant/public/components/buttons/start_chat_button.tsx
@@ -10,7 +10,13 @@ import { i18n } from '@kbn/i18n';
 
 export function StartChatButton(props: React.ComponentProps<typeof EuiButton>) {
   return (
-    <EuiButton {...props} fill iconType="discuss" size="s">
+    <EuiButton
+      data-test-subj="observabilityAiAssistantStartChatButton"
+      fill
+      iconType="discuss"
+      size="s"
+      {...props}
+    >
       {i18n.translate('xpack.observabilityAiAssistant.insight.response.startChat', {
         defaultMessage: 'Start chat',
       })}

diff --git a/...k/plugins/observability_ai_assistant/public/components/buttons/stop_generating_button.tsx b/...k/plugins/observability_ai_assistant/public/components/buttons/stop_generating_button.tsx
@@ -11,7 +11,13 @@ import { i18n } from '@kbn/i18n';
 
 export function StopGeneratingButton(props: Partial<EuiButtonEmptyProps>) {
   return (
-    <EuiButtonEmpty size="s" {...props} iconType="stop" color="text">
+    <EuiButtonEmpty
+      data-test-subj="observabilityAiAssistantStopGeneratingButton"
+      color="text"
+      iconType="stop"
+      size="s"
+      {...props}
+    >
       {i18n.translate('xpack.observabilityAiAssistant.stopGeneratingButtonLabel', {
         defaultMessage: 'Stop generating',
       })}

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_actions_menu.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_actions_menu.tsx
@@ -57,6 +57,7 @@ export function ChatActionsMenu({
       isOpen={isOpen}
       button={
         <EuiButtonIcon
+          data-test-subj="observabilityAiAssistantChatActionsMenuButtonIcon"
           disabled={disabled}
           iconType="boxesVertical"
           onClick={toggleActionsMenu}
@@ -141,6 +142,7 @@ export function ChatActionsMenu({
                 <ConnectorSelectorBase {...connectors} />
                 <EuiSpacer size="m" />
                 <EuiButton
+                  data-test-subj="observabilityAiAssistantChatActionsMenuManageConnectorsButton"
                   href={connectorsManagementHref}
                   iconSide="right"
                   iconType="arrowRight"
@@ -177,6 +179,7 @@ export function ChatActionsMenu({
                       }
                     )}{' '}
                     <EuiLink
+                      data-test-subj="observabilityAiAssistantChatActionsMenuLearnMoreLink"
                       external
                       target="_blank"
                       href="https://www.elastic.co/guide/en/machine-learning/current/ml-nlp-elser.html"
@@ -225,7 +228,12 @@ export function ChatActionsMenu({
 
                     <EuiSpacer size="m" />
 
-                    <EuiButton href={modelsManagementHref} fullWidth size="s">
+                    <EuiButton
+                      data-test-subj="observabilityAiAssistantChatActionsMenuGoToMachineLearningButton"
+                      fullWidth
+                      href={modelsManagementHref}
+                      size="s"
+                    >
                       {i18n.translate(
                         'xpack.observabilityAiAssistant.chatHeader.actions.connectorManagement',
                         {

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.tsx
@@ -78,6 +78,7 @@ export function ChatFlyout({
           >
             {conversationId ? (
               <EuiLink
+                data-test-subj="observabilityAiAssistantChatFlyoutOpenConversationLink"
                 href={router.link('/conversations/{conversationId}', {
                   path: { conversationId },
                 })}
@@ -87,7 +88,10 @@ export function ChatFlyout({
                 })}
               </EuiLink>
             ) : (
-              <EuiLink href={router.link('/conversations/new')}>
+              <EuiLink
+                data-test-subj="observabilityAiAssistantChatFlyoutGoToConversationsLink"
+                href={router.link('/conversations/new')}
+              >
                 {i18n.translate('xpack.observabilityAiAssistant.conversationListDeepLinkLabel', {
                   defaultMessage: 'Go to conversations',
                 })}

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item_actions.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item_actions.tsx
@@ -53,6 +53,7 @@ export function ChatItemActions({
             }
           )}
           color="text"
+          data-test-subj="observabilityAiAssistantChatItemActionsEditPromptButton"
           display={editing ? 'fill' : 'empty'}
           iconType="documentEdit"
           onClick={onToggleEdit}
@@ -68,6 +69,7 @@ export function ChatItemActions({
             }
           )}
           color="text"
+          data-test-subj="observabilityAiAssistantChatItemActionsInspectPromptButton"
           display={expanded ? 'fill' : 'empty'}
           iconType={expanded ? 'eyeClosed' : 'eye'}
           onClick={onToggleExpand}
@@ -85,6 +87,7 @@ export function ChatItemActions({
                 }
               )}
               color="text"
+              data-test-subj="observabilityAiAssistantChatItemActionsCopyMessageButton"
               iconType="copyClipboard"
               display={isPopoverOpen === 'copy' ? 'fill' : 'empty'}
               onClick={() => {

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_prompt_editor.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_prompt_editor.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   EuiButtonEmpty,
   EuiButtonIcon,
@@ -18,7 +19,6 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { CodeEditor } from '@kbn/kibana-react-plugin/public';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { MessageRole, type Message } from '../../../common';
 import { useJsonEditorModel } from '../../hooks/use_json_editor_model';
 import { FunctionListPopover } from './function_list_popover';
@@ -51,6 +51,7 @@ export function ChatPromptEditor({
   const [functionPayload, setFunctionPayload] = useState<string | undefined>(
     initialFunctionPayload
   );
+  const [functionEditorLineCount, setFunctionEditorLineCount] = useState<number>(0);
 
   const { model, initialJsonString } = useJsonEditorModel({
     functionName: selectedFunctionName,
@@ -59,16 +60,20 @@ export function ChatPromptEditor({
 
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
-  useEffect(() => {
-    setFunctionPayload(initialJsonString);
-  }, [initialJsonString, selectedFunctionName]);
+  const recalculateFunctionEditorLineCount = useCallback(() => {
+    const newLineCount = model?.getLineCount() || 0;
+    if (newLineCount !== functionEditorLineCount) {
+      setFunctionEditorLineCount(newLineCount);
+    }
+  }, [functionEditorLineCount, model]);
 
   const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setPrompt(event.currentTarget.value);
   };
 
   const handleChangeFunctionPayload = (params: string) => {
     setFunctionPayload(params);
+    recalculateFunctionEditorLineCount();
   };
 
   const handleClearSelection = () => {
@@ -91,7 +96,7 @@ export function ChatPromptEditor({
   };
 
   const handleSubmit = useCallback(async () => {
-    if (loading) {
+    if (loading || !prompt?.trim()) {
       return;
     }
     const currentPrompt = prompt;
@@ -129,6 +134,14 @@ export function ChatPromptEditor({
     }
   }, [functionPayload, loading, onSubmit, prompt, selectedFunctionName]);
 
+  useEffect(() => {
+    setFunctionPayload(initialJsonString);
+  }, [initialJsonString, selectedFunctionName]);
+
+  useEffect(() => {
+    recalculateFunctionEditorLineCount();
+  }, [model, recalculateFunctionEditorLineCount]);
+
   useEffect(() => {
     const keyboardListener = (event: KeyboardEvent) => {
       if (!event.shiftKey && event.key === keys.ENTER && (prompt || selectedFunctionName)) {
@@ -174,6 +187,7 @@ export function ChatPromptEditor({
                 <EuiFlexItem grow={false}>
                   {selectedFunctionName ? (
                     <EuiButtonEmpty
+                      data-test-subj="observabilityAiAssistantChatPromptEditorEmptySelectionButton"
                       iconType="cross"
                       iconSide="right"
                       size="xs"
@@ -193,8 +207,9 @@ export function ChatPromptEditor({
                 <EuiPanel borderRadius="none" color="subdued" hasShadow={false} paddingSize="xs">
                   <CodeEditor
                     aria-label="payloadEditor"
+                    data-test-subj="observabilityAiAssistantChatPromptEditorCodeEditor"
                     fullWidth
-                    height="120px"
+                    height={functionEditorLineCount > 8 ? '200px' : '120px'}
                     languageId="json"
                     isCopyable
                     languageConfiguration={{
@@ -238,6 +253,8 @@ export function ChatPromptEditor({
                 </EuiPanel>
               ) : (
                 <EuiTextArea
+                  data-test-subj="observabilityAiAssistantChatPromptEditorTextArea"
+                  css={{ maxHeight: 200 }}
                   disabled={disabled}
                   fullWidth
                   inputRef={textAreaRef}
@@ -256,8 +273,9 @@ export function ChatPromptEditor({
         <EuiFlexItem grow={false}>
           <EuiSpacer size="xl" />
           <EuiButtonIcon
+            data-test-subj="observabilityAiAssistantChatPromptEditorButtonIcon"
             aria-label="Submit"
-            disabled={selectedFunctionName ? false : !prompt || loading || disabled}
+            disabled={selectedFunctionName ? false : !prompt?.trim() || loading || disabled}
             display={
               selectedFunctionName ? (functionPayload ? 'fill' : 'base') : prompt ? 'fill' : 'base'
             }

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_timeline.stories.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_timeline.stories.tsx
@@ -39,6 +39,7 @@ const Template: ComponentStory<typeof Component> = (props: ChatTimelineProps) =>
       <EuiSpacer />
 
       <EuiButton
+        data-test-subj="observabilityAiAssistantTemplateAddMessageButton"
         onClick={() => setCount(count >= 0 && count < props.items.length - 1 ? count + 1 : 0)}
       >
         Add message

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_welcome_panel.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_welcome_panel.tsx
@@ -51,6 +51,7 @@ export function ChatWelcomePanel({ knowledgeBase }: { knowledgeBase: UseKnowledg
 
         {!knowledgeBase.status.value?.ready ? (
           <EuiButton
+            data-test-subj="observabilityAiAssistantChatWelcomePanelSetUpKnowledgeBaseButton"
             color="primary"
             fill
             iconType={knowledgeBase.status.value?.ready ? 'checkInCircleFilled' : 'dotInCircle'}

diff --git a/...plugins/observability_ai_assistant/public/components/chat/experimental_feature_banner.tsx b/...plugins/observability_ai_assistant/public/components/chat/experimental_feature_banner.tsx
@@ -36,7 +36,12 @@ export function ExperimentalFeatureBanner() {
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton color="warning" href="https://ela.st/obs-ai-assistant" target="_blank">
+            <EuiButton
+              data-test-subj="observabilityAiAssistantExperimentalFeatureBannerGiveFeedbackButton"
+              color="warning"
+              href="https://ela.st/obs-ai-assistant"
+              target="_blank"
+            >
               {i18n.translate(
                 'xpack.observabilityAiAssistant.experimentalFunctionBanner.feedbackButton',
                 { defaultMessage: 'Give feedback' }

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/function_list_popover.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/function_list_popover.tsx
@@ -109,6 +109,7 @@ export function FunctionListPopover({
       anchorPosition="downLeft"
       button={
         <EuiButtonEmpty
+          data-test-subj="observabilityAiAssistantFunctionListPopoverButton"
           iconType="arrowRight"
           iconSide="right"
           size="xs"

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/incorrect_license_panel.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/incorrect_license_panel.tsx
@@ -53,7 +53,12 @@ export function IncorrectLicensePanel() {
         <EuiFlexItem>
           <EuiFlexGroup>
             <EuiFlexItem>
-              <EuiButton fill href="https://www.elastic.co/subscriptions" target="_blank">
+              <EuiButton
+                data-test-subj="observabilityAiAssistantIncorrectLicensePanelSubscriptionPlansButton"
+                fill
+                href="https://www.elastic.co/subscriptions"
+                target="_blank"
+              >
                 {i18n.translate(
                   'xpack.observabilityAiAssistant.incorrectLicense.subscriptionPlansButton',
                   {
@@ -63,7 +68,10 @@ export function IncorrectLicensePanel() {
               </EuiButton>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiButtonEmpty onClick={handleNavigateToLicenseManagement}>
+              <EuiButtonEmpty
+                data-test-subj="observabilityAiAssistantIncorrectLicensePanelManageLicenseButton"
+                onClick={handleNavigateToLicenseManagement}
+              >
                 {i18n.translate('xpack.observabilityAiAssistant.incorrectLicense.manageLicense', {
                   defaultMessage: 'Manage license',
                 })}

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/initial_setup_panel.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/initial_setup_panel.tsx
@@ -101,6 +101,7 @@ export function InitialSetupPanel({
                   />
                 ) : (
                   <EuiButton
+                    data-test-subj="observabilityAiAssistantInitialSetupPanelButton"
                     color={knowledgeBase.status.value?.ready ? 'success' : 'primary'}
                     fill
                     isLoading={knowledgeBase.isInstalling || knowledgeBase.status.loading}
@@ -187,7 +188,12 @@ export function InitialSetupPanel({
               }
               footer={
                 !connectors.connectors?.length ? (
-                  <EuiButton fill color="primary" href={connectorsManagementHref}>
+                  <EuiButton
+                    data-test-subj="observabilityAiAssistantInitialSetupPanelSetUpGenerativeAiConnectorButton"
+                    fill
+                    color="primary"
+                    href={connectorsManagementHref}
+                  >
                     {i18n.translate(
                       'xpack.observabilityAiAssistant.initialSetupPanel.setupConnector.buttonLabel',
                       {