Merge pull request #128 from lokanandaprabhu/feature/OCPBUGS-36260

OCPBUGS-36260: Tooltip on Pipeline when expression is not shows
openshift-pipelines · Jul 5, 2024 · 5636533 · 5636533
2 parents 4fda39e + f590df5
commit 5636533
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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');
+  }
+};