Merge pull request #1536 from devtron-labs/feat/workflow-environment-list-tippy

feat: add support for tooltip in addCDButtons

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.45-beta-18",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.45-beta-27",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
         "@rjsf/validator-ajv8": "^5.13.3",

src/components/app/details/triggerView/workflow.service.ts

@@ -14,7 +14,7 @@ import { TriggerType, DEFAULT_STATUS, GIT_BRANCH_NOT_CONFIGURED } from '../../..
 import { isEmpty } from '../../../common'
 import { WebhookDetailsType } from '../../../ciPipeline/Webhook/types'
 import { getExternalCIList } from '../../../ciPipeline/Webhook/webhook.service'
-import { CommonNodeAttr, TriggerTypeMap, WorkflowNodeType, PipelineType } from '@devtron-labs/devtron-fe-common-lib'
+import { CommonNodeAttr, TriggerTypeMap, WorkflowNodeType, PipelineType, DownstreamNodesEnvironmentsType } from '@devtron-labs/devtron-fe-common-lib'
 import { CIPipelineBuildType } from '../../../ciPipeline/types'
 import { BlackListedCI } from '../../../workflowEditor/types'
 
@@ -348,10 +348,17 @@ function addDownstreams(workflows: WorkflowType[]) {
 
             if (!!parentNode) {
                 const _downstream = type + '-' + node.id
+                const environmentDetails: DownstreamNodesEnvironmentsType = {
+                    environmentId: node.environmentId,
+                    environmentName: node.environmentName,
+                }
+
                 if (parentNode.postNode) {
                     parentNode.postNode.downstreams.push(_downstream)
+                    parentNode.postNode.downstreamEnvironments?.push(environmentDetails)
                 } else {
                     parentNode.downstreams.push(_downstream)
+                    parentNode.downstreamEnvironments?.push(environmentDetails)
                 }
                 parentNode.downstreamNodes.push(node)
             }
@@ -453,6 +460,7 @@ function ciPipelineToNode(ciPipeline: CiPipeline, dimensions: WorkflowDimensions
             url: '',
             id: `${WorkflowNodeType.GIT}-${materialName}-${index}`,
             downstreams: [`${WorkflowNodeType.CI}-${ciPipeline.id}`],
+            downstreamEnvironments: [],
             type: WorkflowNodeType.GIT,
             icon: 'git',
             branch: getStaticCurrentBranchName(ciMaterial),
@@ -486,6 +494,7 @@ function ciPipelineToNode(ciPipeline: CiPipeline, dimensions: WorkflowDimensions
         type: WorkflowNodeType.CI,
         inputMaterialList: [],
         downstreams: [],
+        downstreamEnvironments: [],
         isExternalCI: ciPipeline.isExternal,
         // Can't rely on pipelineType for legacy pipelines, so using parentCiPipeline as well
         isLinkedCI: ciPipeline.pipelineType !== PipelineType.LINKED_CD && !!ciPipeline.parentCiPipeline,
@@ -517,6 +526,7 @@ function webhookToNode(webhookDetails: WebhookDetailsType, dimensions: WorkflowD
         type: WorkflowNodeType.WEBHOOK,
         inputMaterialList: [],
         downstreams: [],
+        downstreamEnvironments: [],
         isExternalCI: true,
         isLinkedCI: false,
         linkedCount: 0,
@@ -545,6 +555,7 @@ function cdPipelineToNode(cdPipeline: CdPipeline, dimensions: WorkflowDimensions
             activeIn: false,
             activeOut: false,
             downstreams: [`${WorkflowNodeType.CD}-${cdPipeline.id}`],
+            downstreamEnvironments: [],
             type: WorkflowNodeType.PRE_CD,
             status: cdPipeline.preDeployStage?.status || cdPipeline.preStage?.status || DEFAULT_STATUS,
             triggerType: TriggerTypeMap[trigger],
@@ -581,6 +592,7 @@ function cdPipelineToNode(cdPipeline: CdPipeline, dimensions: WorkflowDimensions
         activeIn: false,
         activeOut: false,
         downstreams: cdDownstreams,
+        downstreamEnvironments: [],
         type: WorkflowNodeType.CD,
         status: DEFAULT_STATUS,
         triggerType: TriggerTypeMap[trigger],
@@ -624,6 +636,7 @@ function cdPipelineToNode(cdPipeline: CdPipeline, dimensions: WorkflowDimensions
             activeIn: false,
             activeOut: false,
             downstreams: [],
+            downstreamEnvironments: [],
             type: WorkflowNodeType.POST_CD,
             status: cdPipeline.postDeployStage?.status || cdPipeline.postStage?.status || DEFAULT_STATUS,
             triggerType: TriggerTypeMap[trigger],

src/components/common/edge/rectangularEdge.tsx

@@ -36,6 +36,7 @@ interface EdgeProps {
     ciPipelineId?: number | string
     isWebhookCD?: boolean
     isParallelEdge?: boolean
+    leftTooltipContent?: string
 }
 
 interface LineDots {
@@ -171,6 +172,7 @@ export default class Edge extends Component<EdgeProps> {
                     endNode={this.props.endNode}
                     startNode={this.props.startNode}
                     handleAddCD={this.handleAddCDClick}
+                    tooltipContent={this.props.leftTooltipContent}
                 />
                 <AddCDButton
                     position={AddCDPositions.RIGHT}

src/components/workflowEditor/Workflow.tsx

@@ -474,6 +474,14 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
         }, [])
     }
 
+    getAddCDButtonTooltipContent = (node: NodeAttr): string => {
+        const environments = node.downstreamEnvironments?.map((env) => env.environmentName) ?? []
+        const environmentsString = environments.slice(0, 3).join('\n')
+        const moreEnvCount = environments.length - 3
+        const moreEnvString = moreEnvCount > 0 ? `\n+${moreEnvCount}` : ''
+        return `before pipelines\n${environmentsString} ${moreEnvString}`
+    }
+
     onClickNodeEdge = ({
         nodeId,
         nodesWithBufferHeight,
@@ -558,6 +566,7 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
             const addCDButtons =
                 selectedNodeEndNodes.length > 1 ? [AddCDPositions.LEFT, AddCDPositions.RIGHT] : [AddCDPositions.RIGHT]
 
+            const leftTooltipContent = this.getAddCDButtonTooltipContent(startNode)
             if (ApprovalNodeEdge) {
                 edgeList.push(
                     <ApprovalNodeEdge
@@ -572,6 +581,7 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
                         ciPipelineId={workflowCIPipelineId}
                         isParallelEdge
                         isWebhookCD={isWebhookCD}
+                        leftTooltipContent={leftTooltipContent}
                     />,
                 )
             } else {
@@ -589,6 +599,7 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
                         ciPipelineId={workflowCIPipelineId}
                         isParallelEdge
                         isWebhookCD={isWebhookCD}
+                        leftTooltipContent={leftTooltipContent}
                     />,
                 )
             }

src/css/base.scss

@@ -266,6 +266,9 @@ a:focus {
 .dc__white-space-pre {
     white-space: pre;
 }
+.dc__white-space-pre-wrap {
+    white-space: pre-wrap;
+}
 
 .dc__hyphens-auto {
     -ms-hyphens: auto;