From f590df571ce01601ce307503e729c7696f956375 Mon Sep 17 00:00:00 2001
From: Lokananda Prabhu <lprabhu@redhat.com>
Date: Tue, 2 Jul 2024 13:38:12 +0530
Subject: [PATCH] Added tooltip for WhenDecorator

---
 .../pipeline-topology/PipelineTaskNode.tsx      |  8 ++++++--
 src/components/pipeline-topology/utils.ts       | 17 ++++++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/pipeline-topology/PipelineTaskNode.tsx b/src/components/pipeline-topology/PipelineTaskNode.tsx
index f8d17c1a..ff81ebe7 100644
--- a/src/components/pipeline-topology/PipelineTaskNode.tsx
+++ b/src/components/pipeline-topology/PipelineTaskNode.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Tooltip } from '@patternfly/react-core';
 import {
   DEFAULT_LAYER,
@@ -29,6 +30,7 @@ import {
 } from '../pipelines-details/pipeline-step-utils';
 import { PipelineVisualizationStepList } from '../pipelines-details/PipelineVisualizationStepList';
 import { resourcePathFromModel } from '../utils/utils';
+import { getTooltipContent } from './utils';
 import './PipelineTaskNode.scss';
 
 type PipelineTaskNodeProps = {
@@ -42,6 +44,7 @@ const PipelineTaskNode: React.FunctionComponent<PipelineTaskNodeProps> = ({
   contextMenuOpen,
   ...rest
 }) => {
+  const { t } = useTranslation('plugin__pipelines-console-plugin');
   const data = element.getData();
   const [hover, hoverRef] = useHover();
   const taskRef = React.useRef();
@@ -124,6 +127,7 @@ const PipelineTaskNode: React.FunctionComponent<PipelineTaskNodeProps> = ({
   }, [data]);
 
   const hasTaskIcon = !!(data.taskIconClass || data.taskIcon);
+  const tooltipContent = getTooltipContent(data.task?.status?.reason, t);
   const whenDecorator = data.whenStatus ? (
     <WhenDecorator
       element={element}
@@ -133,6 +137,7 @@ const PipelineTaskNode: React.FunctionComponent<PipelineTaskNodeProps> = ({
           ? DEFAULT_WHEN_OFFSET + (element.getBounds().height - 4) * 0.75
           : DEFAULT_WHEN_OFFSET
       }
+      toolTip={tooltipContent}
     />
   ) : null;
 
@@ -189,8 +194,7 @@ const PipelineTaskNode: React.FunctionComponent<PipelineTaskNodeProps> = ({
         ref={hoverRef}
       >
         <Tooltip
-          position="bottom"
-          enableFlip={false}
+          enableFlip={true}
           triggerRef={taskRef}
           content={
             <PipelineVisualizationStepList
diff --git a/src/components/pipeline-topology/utils.ts b/src/components/pipeline-topology/utils.ts
index 86bffc61..28847c40 100644
--- a/src/components/pipeline-topology/utils.ts
+++ b/src/components/pipeline-topology/utils.ts
@@ -10,7 +10,7 @@ import {
 } from '@patternfly/react-topology';
 import * as dagre from 'dagre';
 import * as _ from 'lodash';
-
+import { TFunction } from 'react-i18next';
 import {
   ComputedStatus,
   PipelineKind,
@@ -733,3 +733,18 @@ export const getWhenExpressionDiamondState = (
   }
   return { tooltipContent, diamondColor };
 };
+
+export const getTooltipContent = (
+  statusReason: ComputedStatus,
+  t: TFunction,
+): string => {
+  switch (statusReason) {
+    case ComputedStatus.Succeeded:
+    case ComputedStatus.Failed:
+      return t('When expression was met');
+    case ComputedStatus.Skipped:
+      return t('When expression was not met');
+    default:
+      return t('When expression');
+  }
+};