Merge branch 'opensearch-project:main' into boarderTop

Author: yyfamazon

public/components/incontext_insight/generate_popover_body.test.tsx

@@ -143,12 +143,12 @@ describe('GeneratePopoverBody', () => {
       expect.stringMatching(/^generated/)
     );
 
-    // insight tip icon is visible
-    const insightTipIcon = screen.getAllByLabelText('How was this generated?')[0];
-    expect(insightTipIcon).toBeInTheDocument();
+    // insight button is visible
+    const insightButton = screen.getAllByText('View insight')[0];
+    expect(insightButton).toBeInTheDocument();
 
-    // 2. Click insight tip icon to view insight
-    fireEvent.click(insightTipIcon);
+    // 2. Click insight button to view insight
+    fireEvent.click(insightButton);
     // title is back button + 'Insight With RAG'
     let backButton = getByLabelText('back-to-summary');
     expect(backButton).toBeInTheDocument();
@@ -223,8 +223,8 @@ describe('GeneratePopoverBody', () => {
       expect.stringMatching(/^generated/)
     );
 
-    // insight tip icon is not visible
-    expect(screen.queryAllByLabelText('How was this generated?')).toHaveLength(0);
+    // insight button is not visible
+    expect(screen.queryAllByLabelText('View insight')).toHaveLength(0);
     // Only call http post 1 time.
     expect(mockPost).toHaveBeenCalledTimes(1);
   });
@@ -285,8 +285,8 @@ describe('GeneratePopoverBody', () => {
     });
     // Show summary content although insight generation failed
     expect(getByText('Generated summary content')).toBeInTheDocument();
-    // insight tip icon is not visible for this alert
-    expect(screen.queryAllByLabelText('How was this generated?')).toHaveLength(0);
+    // insight button is not visible for this alert
+    expect(screen.queryAllByLabelText('View insight')).toHaveLength(0);
   });
 
   it('should not display discover link if monitor type is not  query_level_monitor or bucket_level_monitor', async () => {

public/components/incontext_insight/generate_popover_body.tsx

@@ -18,6 +18,7 @@ import {
   EuiText,
   EuiTitle,
   EuiButton,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 import { useEffectOnce } from 'react-use';
 import { METRIC_TYPE } from '@osd/analytics';
@@ -263,12 +264,12 @@ export const GeneratePopoverBody: React.FC<{
     const content = showInsight && insightAvailable ? insight : summary;
     return content ? (
       <>
-        <EuiPanel paddingSize="s" hasBorder hasShadow={false} color="subdued">
+        <EuiPanel paddingSize="s" hasBorder hasShadow={false}>
           <EuiText className="incontextInsightGeneratePopoverContent" size="s">
             <EuiMarkdownFormat>{content}</EuiMarkdownFormat>
           </EuiText>
           <EuiSpacer size={'xs'} />
-          {renderInnerFooter()}
+          {renderInnerFooter(content)}
         </EuiPanel>
       </>
     ) : (
@@ -289,7 +290,7 @@ export const GeneratePopoverBody: React.FC<{
                   setShowInsight(false);
                 }}
                 type="arrowLeft"
-                color={'text'}
+                color="ghost"
               />
             ) : (
               <EuiIcon
@@ -320,7 +321,9 @@ export const GeneratePopoverBody: React.FC<{
     );
   };
 
-  const renderInnerFooter = () => {
+  const TraceButton = showInsight ? EuiButtonEmpty : EuiButton;
+
+  const renderInnerFooter = (contentToCopy: string) => {
     return (
       <EuiPopoverFooter className="incontextInsightGeneratePopoverFooter" paddingSize="none">
         {displayDiscoverButton && (
@@ -330,38 +333,28 @@ export const GeneratePopoverBody: React.FC<{
             })}
           </EuiButton>
         )}
-        {
-          <div
-            className="messageActionsWrapper"
-            style={{ display: showInsight ? 'none' : 'block' }}
+        {insightAvailable && (
+          <TraceButton
+            onClick={() => {
+              setShowInsight(!showInsight);
+            }}
+            size="s"
           >
-            <MessageActions
-              contentToCopy={summary}
-              showFeedback
-              showTraceIcon={insightAvailable}
-              onViewTrace={() => {
-                setShowInsight(true);
-              }}
-              usageCollection={usageCollection}
-              isOnTrace={showInsight}
-              metricAppName={metricAppName}
-            />
-          </div>
-        }
+            {showInsight
+              ? i18n.translate('assistantDashboards.incontextInsight.backToSummary', {
+                  defaultMessage: 'Back to summary',
+                })
+              : i18n.translate('assistantDashboards.incontextInsight.viewInsight', {
+                  defaultMessage: 'View insight',
+                })}
+          </TraceButton>
+        )}
         {
-          <div
-            className="messageActionsWrapper"
-            style={{ display: showInsight && insightAvailable ? 'block' : 'none' }}
-          >
+          <div className="messageActionsWrapper">
             <MessageActions
-              contentToCopy={insight}
+              contentToCopy={contentToCopy}
               showFeedback
-              showTraceIcon={insightAvailable}
-              onViewTrace={() => {
-                setShowInsight(false);
-              }}
               usageCollection={usageCollection}
-              isOnTrace={showInsight}
               metricAppName={metricAppName}
             />
           </div>

public/components/incontext_insight/index.scss

@@ -82,6 +82,19 @@
   }
 }
 
+.incontextInsightPopover {
+  // Color for $ouiColorDarkestShade that don't revert color for dark mode
+  background-color: #343741 !important;
+
+  .euiPopover__panelArrow:after {
+    border-right-color: #343741 !important;
+  }
+
+  .euiLoadingContent__singleLineBackground {
+    background: linear-gradient(137deg, #a1a5ae80 45%, #ffffff80 50%, #98a2b380 55%) !important;
+  }
+}
+
 .incontextInsightPopoverFooter {
   // TODO: Remove this one paddingSize is fixed
   padding: 4px 12px 8px !important;
@@ -92,6 +105,10 @@
   max-width: 486px;
   min-width: 486px;
   width: 100%;
+
+  .euiTitle {
+    color: $euiColorGhost;
+  }
 }
 
 .incontextInsightGeneratePopoverTitle {
@@ -111,6 +128,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: $euiSizeS;
 
   .buttonGroupDivider {
     height: 24px;

public/components/incontext_insight/index.tsx

@@ -339,6 +339,7 @@ export const IncontextInsight = ({
         anchorPosition="rightUp"
         offset={6}
         panelPaddingSize="s"
+        panelClassName="incontextInsightPopover"
       >
         {
           // For 'generate' type insights, we don't want to show this title but its own inner title

public/tabs/chat/messages/message_action.tsx

@@ -4,14 +4,7 @@
  */
 
 import React, { useCallback } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSmallButtonIcon,
-  EuiCopy,
-  EuiToolTip,
-  EuiButtonEmpty,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSmallButtonIcon, EuiCopy, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { IOutput, Interaction } from '../../../../common/types/chat_saved_object_attributes';
 import { useFeedback } from '../../../hooks/use_feed_back';
@@ -29,6 +22,7 @@ interface MessageActionsProps {
   showTraceIcon?: boolean;
   isOnTrace?: boolean;
   traceInteractionId?: string;
+  traceTip?: string;
   onViewTrace?: () => void;
   shouldActionBarVisibleOnHover?: boolean;
   isFullWidth?: boolean;
@@ -51,6 +45,7 @@ export const MessageActions: React.FC<MessageActionsProps> = ({
   showTraceIcon = false,
   isOnTrace = false,
   traceInteractionId = null,
+  traceTip = 'info',
   onViewTrace,
   shouldActionBarVisibleOnHover = false,
   isFullWidth = false,
@@ -111,6 +106,7 @@ export const MessageActions: React.FC<MessageActionsProps> = ({
   const feedbackTip = i18n.translate(`assistantDashboards.messageActions.feedbackTip`, {
     defaultMessage: 'We have successfully received your feedback. Thank you.',
   });
+
   const buttonConfigs = {
     copy: {
       show: !isFullWidth,
@@ -171,23 +167,18 @@ export const MessageActions: React.FC<MessageActionsProps> = ({
     },
     trace: {
       show: showTraceIcon && onViewTrace,
-      component: (
-        <EuiButtonEmpty
+      component: renderButtonWithTooltip(
+        traceTip,
+        <EuiSmallButtonIcon
           aria-label="How was this generated?"
           {...(traceInteractionId && {
             'data-test-subj': `trace-icon-${traceInteractionId}`,
           })}
           onClick={onViewTrace}
-          color="primary"
-        >
-          {isOnTrace
-            ? i18n.translate('assistantDashboards.incontextInsight.backToSummary', {
-                defaultMessage: 'Back to summary',
-              })
-            : i18n.translate('assistantDashboards.incontextInsight.viewInsightWithRAG', {
-                defaultMessage: 'View insight with RAG',
-              })}
-        </EuiButtonEmpty>
+          color={isOnTrace ? 'primary' : 'text'}
+          iconType="iInCircle"
+        />,
+        'trace'
       ),
     },
   };

release-notes/dashboards-assistant.release-notes-3.0.0.0-alpha1.md

@@ -26,6 +26,7 @@ Compatible with OpenSearch and OpenSearch Dashboards version 3.0.0-alpha1
 - Show error message if PPL query does not contain aggregation ([#499](https://github.com/opensearch-project/dashboards-assistant/pull/499))
 - Adjust the overall style of alert summary popover ([#501](https://github.com/opensearch-project/dashboards-assistant/pull/501))
 - Add http error instruction for t2ppl task ([#502](https://github.com/opensearch-project/dashboards-assistant/pull/502))
+- Change the background color, button position and text for alert summary popover ([#506](https://github.com/opensearch-project/dashboards-assistant/pull/506))
 - collect metrics for when t2viz triggered([#510](https://github.com/opensearch-project/dashboards-assistant/pull/510))
 
 ### Bug Fixes