[Security Solution] expandable flyout - add tooltip to expandable pan…

…el link titles (elastic#166737)
kibanamachine · Sep 22, 2023 · e7c4a84 · e7c4a84
1 parent db2e9d0
commit e7c4a84
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 25 deletions.
diff --git a/...k/plugins/security_solution/public/flyout/right/components/analyzer_preview_container.tsx b/...k/plugins/security_solution/public/flyout/right/components/analyzer_preview_container.tsx
@@ -64,7 +64,17 @@ export const AnalyzerPreviewContainer: React.FC = () => {
           />
         ),
         iconType: 'timeline',
-        ...(isEnabled && { callback: goToAnalyzerTab }),
+        ...(isEnabled && {
+          link: {
+            callback: goToAnalyzerTab,
+            tooltip: (
+              <FormattedMessage
+                id="xpack.securitySolution.flyout.right.visualizations.analyzerPreview.analyzerPreviewTooltip"
+                defaultMessage="Show analyzer graph"
+              />
+            ),
+          },
+        }),
       }}
       data-test-subj={ANALYZER_PREVIEW_TEST_ID}
     >

diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.tsx
@@ -90,7 +90,15 @@ export const CorrelationsOverview: React.FC = () => {
             defaultMessage="Correlations"
           />
         ),
-        callback: goToCorrelationsTab,
+        link: {
+          callback: goToCorrelationsTab,
+          tooltip: (
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.right.insights.correlations.overviewTooltip"
+              defaultMessage="Show all correlations"
+            />
+          ),
+        },
         iconType: 'arrowStart',
       }}
       data-test-subj={CORRELATIONS_TEST_ID}

diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/entities_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/entities_overview.tsx
@@ -52,7 +52,15 @@ export const EntitiesOverview: React.FC = () => {
               defaultMessage="Entities"
             />
           ),
-          callback: goToEntitiesTab,
+          link: {
+            callback: goToEntitiesTab,
+            tooltip: (
+              <FormattedMessage
+                id="xpack.securitySolution.flyout.right.insights.entities.entitiesTooltip"
+                defaultMessage="Show all entities"
+              />
+            ),
+          },
           iconType: 'arrowStart',
         }}
         data-test-subj={INSIGHTS_ENTITIES_TEST_ID}

diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.tsx
@@ -31,7 +31,7 @@ export const PrevalenceOverview: FC = () => {
     useRightPanelContext();
   const { openLeftPanel } = useExpandableFlyoutContext();
 
-  const goToCorrelationsTab = useCallback(() => {
+  const goPrevalenceTab = useCallback(() => {
     openLeftPanel({
       id: LeftPanelKey,
       path: {
@@ -76,7 +76,15 @@ export const PrevalenceOverview: FC = () => {
             defaultMessage="Prevalence"
           />
         ),
-        callback: goToCorrelationsTab,
+        link: {
+          callback: goPrevalenceTab,
+          tooltip: (
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.right.insights.prevalence.prevalenceTooltip"
+              defaultMessage="Show all prevalence"
+            />
+          ),
+        },
         iconType: 'arrowStart',
       }}
       content={{ loading, error }}

diff --git a/...ck/plugins/security_solution/public/flyout/right/components/session_preview_container.tsx b/...ck/plugins/security_solution/public/flyout/right/components/session_preview_container.tsx
@@ -130,7 +130,17 @@ export const SessionPreviewContainer: FC = () => {
           />
         ),
         iconType: 'timeline',
-        ...(isEnabled && { callback: goToSessionViewTab }),
+        ...(isEnabled && {
+          link: {
+            callback: goToSessionViewTab,
+            tooltip: (
+              <FormattedMessage
+                id="xpack.securitySolution.flyout.right.visualizations.sessionPreview.sessionPreviewTooltip"
+                defaultMessage="Show session viewer"
+              />
+            ),
+          },
+        }),
       }}
       data-test-subj={SESSION_PREVIEW_TEST_ID}
     >

diff --git a/...plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.tsx b/...plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.tsx
@@ -55,7 +55,15 @@ export const ThreatIntelligenceOverview: FC = () => {
             defaultMessage="Threat intelligence"
           />
         ),
-        callback: goToThreatIntelligenceTab,
+        link: {
+          callback: goToThreatIntelligenceTab,
+          tooltip: (
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.right.insights.threatIntelligence.threatIntelligenceTooltip"
+              defaultMessage="Show all threat intelligence"
+            />
+          ),
+        },
         iconType: 'arrowStart',
       }}
       data-test-subj={INSIGHTS_THREAT_INTELLIGENCE_TEST_ID}

diff --git a/x-pack/plugins/security_solution/public/flyout/shared/components/expandable_panel.tsx b/x-pack/plugins/security_solution/public/flyout/shared/components/expandable_panel.tsx
@@ -18,6 +18,7 @@ import {
   EuiText,
   EuiLoadingSpinner,
   useEuiTheme,
+  EuiToolTip,
 } from '@elastic/eui';
 import type { IconType } from '@elastic/eui';
 import { css } from '@emotion/react';
@@ -28,10 +29,16 @@ export interface ExpandablePanelPanelProps {
      * String value of the title to be displayed in the header of panel
      */
     title: string | React.ReactNode;
-    /**
-     * Callback function to be called when the title is clicked
-     */
-    callback?: () => void;
+    link?: {
+      /**
+       * Callback function to be called when the title is clicked
+       */
+      callback: () => void;
+      /**
+       * Tooltip text to be displayed around the title link
+       */
+      tooltip: React.ReactNode;
+    };
     /**
      * Icon string for displaying the specified icon in the header
      */
@@ -74,7 +81,7 @@ export interface ExpandablePanelPanelProps {
  * The component can be expanded or collapsed by clicking on the chevron icon on the left of the title.
  */
 export const ExpandablePanel: React.FC<ExpandablePanelPanelProps> = ({
-  header: { title, callback, iconType, headerContent },
+  header: { title, link, iconType, headerContent },
   content: { loading, error } = { loading: false, error: false },
   expand: { expandable, expandedOnFirstRender } = {
     expandable: false,
@@ -116,7 +123,7 @@ export const ExpandablePanel: React.FC<ExpandablePanelPanelProps> = ({
           <EuiFlexItem grow={false}>{expandable && children && toggleIcon}</EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiIcon
-              color={callback ? 'primary' : 'text'}
+              color={link?.callback ? 'primary' : 'text'}
               type={iconType}
               css={css`
                 margin: ${euiTheme.size.s} 0;
@@ -125,17 +132,19 @@ export const ExpandablePanel: React.FC<ExpandablePanelPanelProps> = ({
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            {callback ? (
-              <EuiLink
-                css={css`
-                  font-size: 12px;
-                  font-weight: 700;
-                `}
-                data-test-subj={`${dataTestSubj}TitleLink`}
-                onClick={callback}
-              >
-                {title}
-              </EuiLink>
+            {link?.callback ? (
+              <EuiToolTip content={link?.tooltip}>
+                <EuiLink
+                  css={css`
+                    font-size: 12px;
+                    font-weight: 700;
+                  `}
+                  data-test-subj={`${dataTestSubj}TitleLink`}
+                  onClick={link?.callback}
+                >
+                  {title}
+                </EuiLink>
+              </EuiToolTip>
             ) : (
               <EuiTitle size="xxxs">
                 <EuiText data-test-subj={`${dataTestSubj}TitleText`}>{title}</EuiText>
@@ -145,7 +154,17 @@ export const ExpandablePanel: React.FC<ExpandablePanelPanelProps> = ({
         </EuiFlexGroup>
       </EuiFlexItem>
     ),
-    [dataTestSubj, expandable, children, toggleIcon, callback, iconType, euiTheme.size.s, title]
+    [
+      dataTestSubj,
+      expandable,
+      children,
+      toggleIcon,
+      link?.callback,
+      iconType,
+      euiTheme.size.s,
+      link?.tooltip,
+      title,
+    ]
   );
 
   const headerRightSection = useMemo(