Replace CSS with component property

Signed-off-by: Heng Qian <[email protected]>
opensearch-project · Sep 10, 2024 · cde988b · cde988b
1 parent d94e244
commit cde988b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 76 deletions.
diff --git a/public/components/incontext_insight/generate_popover_body.test.tsx b/public/components/incontext_insight/generate_popover_body.test.tsx
@@ -94,7 +94,7 @@ describe('GeneratePopoverBody', () => {
     // 2. Click insight tip icon to view insight
     fireEvent.click(insightTipIcon);
     // title is back button + 'Insight With RAG'
-    const backButton = getByLabelText('back-to-summary');
+    let backButton = getByLabelText('back-to-summary');
     expect(backButton).toBeInTheDocument();
     expect(getByText('Insight With RAG')).toBeInTheDocument();
 
@@ -110,6 +110,7 @@ describe('GeneratePopoverBody', () => {
     expect(mockToasts.addDanger).not.toHaveBeenCalled();
 
     // 3. Click back button to view summary
+    backButton = getByLabelText('back-to-summary');
     fireEvent.click(backButton);
     expect(queryByText('Generated insight content')).toBeNull();
     expect(queryByText('Generated summary content')).toBeInTheDocument();

diff --git a/public/components/incontext_insight/generate_popover_body.tsx b/public/components/incontext_insight/generate_popover_body.tsx
@@ -6,10 +6,9 @@
 import React, { useState } from 'react';
 import { i18n } from '@osd/i18n';
 import {
-  EuiBadge,
-  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiIcon,
   EuiIconTip,
   EuiLoadingContent,
   EuiMarkdownFormat,
@@ -18,6 +17,7 @@ import {
   EuiPopoverTitle,
   EuiSpacer,
   EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import { useEffectOnce } from 'react-use';
 import { IncontextInsight as IncontextInsightInput } from '../../types';
@@ -167,44 +167,34 @@ export const GeneratePopoverBody: React.FC<{
   const renderInnerTitle = () => {
     return (
       <EuiPopoverTitle className="incontextInsightGeneratePopoverTitle" paddingSize="l">
-        {showInsight ? (
-          <EuiFlexGroup gutterSize="none">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
+        <EuiFlexGroup gutterSize="xs" alignItems="center">
+          <EuiFlexItem grow={false}>
+            {showInsight ? (
+              <EuiIcon
                 aria-label="back-to-summary"
-                flush="left"
-                size="xs"
+                size="m"
                 onClick={() => {
                   setShowInsight(false);
                 }}
-                iconType="arrowLeft"
-                iconSide={'left'}
+                type="arrowLeft"
                 color={'text'}
-              >
-                {i18n.translate('assistantDashboards.incontextInsight.InsightWithRAG', {
-                  defaultMessage: 'Insight With RAG',
-                })}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        ) : (
-          <EuiFlexGroup gutterSize="none">
-            <EuiFlexItem>
-              <div>
-                <EuiBadge
-                  aria-label="alert-assistant"
-                  color="hollow"
-                  iconType={shiny_sparkle}
-                  iconSide="left"
-                >
+              />
+            ) : (
+              <EuiIcon aria-label="alert-assistant" color="hollow" size="l" type={shiny_sparkle} />
+            )}
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText>
+              <EuiTitle size="xxs">
+                <h6>
                   {i18n.translate('assistantDashboards.incontextInsight.Summary', {
-                    defaultMessage: 'Summary',
+                    defaultMessage: showInsight ? 'Insight With RAG' : 'Summary',
                   })}
-                </EuiBadge>
-              </div>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        )}
+                </h6>
+              </EuiTitle>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiPopoverTitle>
     );
   };

diff --git a/public/components/incontext_insight/index.scss b/public/components/incontext_insight/index.scss
@@ -115,52 +115,11 @@
 .incontextInsightGeneratePopoverTitle {
   // TODO: Remove this one paddingSize is fixed
   padding: 0 !important;
+  padding-left: 5px !important;
   margin-bottom: 0 !important;
   min-height: 30px;
   max-height: 30px;
   border: none;
-
-  :first-child {
-    border: none;
-  }
-
-  .euiBadge__text {
-    text-transform: none;
-    font-weight: bold;
-    font-size: 15px;
-  }
-
-  .euiBadge__icon {
-    margin: 2px 0 2px 0;
-  }
-
-  .euiIcon--small {
-    height: 100%;
-    width: 22px;
-    padding: 2px 0;
-  }
-
-  .euiButtonEmpty{
-    padding-inline: 8px;
-
-    .euiButtonEmpty__content {
-      margin-block: 2px;
-      padding-block: 2px;
-
-      .euiIcon--small {
-        height: 100%;
-        width: 16px;
-        padding: 2px 0;
-      }
-
-      .euiButtonEmpty__text {
-        margin-inline-start: 4px;
-        text-transform: none;
-        font-weight: bold;
-        font-size: 15px;
-      }
-    }
-  }
 }
 
 .incontextInsightGeneratePopoverFooter{