Merge pull request #2653 from devtron-labs/feat/webhook-external-image

feat: TriggerView - Webhook Node - add image button UI

Author: AbhishekA1509

src/components/app/details/triggerView/config.ts

@@ -17,6 +17,9 @@
 import { createContext } from 'react'
 import { DeploymentNodeType } from '@devtron-labs/devtron-fe-common-lib'
 import { TriggerViewContextType } from './types'
+import { importComponentFromFELibrary } from '@Components/common'
+
+const WebhookAddImageButton = importComponentFromFELibrary('WebhookAddImageButton', null, 'function')
 
 export const TriggerViewContext = createContext<TriggerViewContextType>({
     invalidateCache: false,
@@ -100,6 +103,16 @@ export const WorkflowTrigger = {
         distanceX: 60,
         distanceY: 25,
     } as NodeDimension,
+    ...(WebhookAddImageButton
+        ? {
+              webhookNodeSize: {
+                  nodeHeight: 94,
+                  nodeWidth: 200,
+                  distanceX: 60,
+                  distanceY: 20,
+              } as NodeDimension,
+          }
+        : {}),
     workflow: {
         distanceY: 16,
         distanceX: 0,
@@ -129,6 +142,7 @@ export interface WorkflowDimensions {
     externalCINodeSizes?: NodeDimension
     linkedCINodeSizes?: NodeDimension
     cDNodeSizes: NodeDimension
+    webhookNodeSize?: NodeDimension
     workflow: Offset
 }
 

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

@@ -147,18 +147,16 @@ export const getInitialWorkflows = ({
         })
     }
     if (isJobView) {
-        return Promise.all([getWorkflowList(id, null, false), getCIConfig(id, false)]).then(
-            ([workflow, ciConfig]) => {
-                return processWorkflow(
-                    workflow.result as WorkflowResult,
-                    ciConfig.result as CiPipelineResult,
-                    null,
-                    null,
-                    dimensions,
-                    workflowOffset,
-                )
-            },
-        )
+        return Promise.all([getWorkflowList(id, null, false), getCIConfig(id, false)]).then(([workflow, ciConfig]) => {
+            return processWorkflow(
+                workflow.result as WorkflowResult,
+                ciConfig.result as CiPipelineResult,
+                null,
+                null,
+                dimensions,
+                workflowOffset,
+            )
+        })
     }
     return Promise.all([
         getWorkflowList(id, filteredEnvIds, isTemplateView),
@@ -644,8 +642,10 @@ function webhookToNode(webhookDetails: WebhookDetailsType, dimensions: WorkflowD
         id: String(webhookDetails.id),
         x: 0,
         y: 0,
-        height: dimensions.staticNodeSizes.nodeHeight,
-        width: dimensions.staticNodeSizes.nodeWidth,
+        height: dimensions.webhookNodeSize
+            ? dimensions.webhookNodeSize.nodeHeight
+            : dimensions.staticNodeSizes.nodeHeight,
+        width: dimensions.webhookNodeSize ? dimensions.webhookNodeSize.nodeWidth : dimensions.staticNodeSizes.nodeWidth,
         title: 'Webhook',
         status: DEFAULT_STATUS,
         type: WorkflowNodeType.WEBHOOK,

src/components/app/details/triggerView/workflow/Workflow.tsx

@@ -124,6 +124,7 @@ export class Workflow extends Component<WorkflowProps> {
                 key={`webhook-${node.id}`}
                 id={node.id}
                 isTemplateView={false}
+                showAddImageButton
             />
         )
     }
@@ -386,11 +387,7 @@ export class Workflow extends Component<WorkflowProps> {
                             </span>
 
                             <div className="dc__separated-flexbox">
-                                {BulkDeployLink && numberOfCDNodes > 1 && (
-                                    <BulkDeployLink
-                                        workflowId={this.props.id}
-                                    />
-                                )}
+                                {BulkDeployLink && numberOfCDNodes > 1 && <BulkDeployLink workflowId={this.props.id} />}
 
                                 {ImagePromotionLink && (
                                     <ImagePromotionLink
@@ -402,7 +399,6 @@ export class Workflow extends Component<WorkflowProps> {
                                     />
                                 )}
                             </div>
-
                         </>
                     )}
                 </div>

src/components/workflowEditor/nodes/WebhookNode.tsx

@@ -15,13 +15,22 @@
  */
 
 import { ReactElement, useState } from 'react'
-import { WorkflowNodeType, ConditionalWrap, TARGET_IDS, TippyTheme, TippyCustomized } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    WorkflowNodeType,
+    ConditionalWrap,
+    TARGET_IDS,
+    TippyTheme,
+    TippyCustomized,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { Link } from 'react-router-dom'
 import ToggleCDSelectButton from '../ToggleCDSelectButton'
 import { ReactComponent as Webhook } from '../../../assets/icons/ic-CIWebhook.svg'
 import { WebhookNodeProps } from '../types'
 import { ReactComponent as ICCIWebhook } from '@Icons/ic-CIWebhook.svg'
 import { DOCUMENTATION } from '@Config/constants'
+import { importComponentFromFELibrary } from '@Components/common'
+
+const WebhookAddImageButton = importComponentFromFELibrary('WebhookAddImageButton', null, 'function')
 
 export const WebhookNode = ({
     x,
@@ -38,12 +47,15 @@ export const WebhookNode = ({
     isLastNode,
     isReadonlyView = false,
     isTemplateView,
+    showAddImageButton = false,
 }: WebhookNodeProps) => {
     const [isWebhookTippyOpen, setIsWebhookTippyOpen] = useState(false)
 
     const selectedNodeKey = `${selectedNode?.nodeType}-${selectedNode?.id}`
     const currentNodeKey = `${WorkflowNodeType.WEBHOOK}-${id ?? ''}`
 
+    const showWebhookAddImageButton = WebhookAddImageButton && showAddImageButton
+
     const addNewCD = (event): void => {
         event.preventDefault()
         event.stopPropagation()
@@ -63,7 +75,7 @@ export const WebhookNode = ({
     }
 
     const toggleIsWebhookTippyOpen = () => {
-        setIsWebhookTippyOpen(prev => !prev)
+        setIsWebhookTippyOpen((prev) => !prev)
     }
 
     const renderWrapWithLinkOrTippy = (children: ReactElement) =>
@@ -90,7 +102,7 @@ export const WebhookNode = ({
                 {children}
             </Link>
         )
-    
+
     const handleCardClick = () => {
         if (isTemplateView) {
             toggleIsWebhookTippyOpen()
@@ -102,11 +114,16 @@ export const WebhookNode = ({
 
         return (
             <ConditionalWrap condition={shouldWrap} wrap={renderWrapWithLinkOrTippy}>
-                <div className={`workflow-node pl-10 ${shouldWrap ? 'cursor' : ''}`} onClick={handleCardClick}>
+                <div
+                    className={`workflow-node ${showWebhookAddImageButton ? 'flexbox-col dc__gap-10 p-12' : 'pl-10'} ${shouldWrap ? 'cursor' : ''}`}
+                    onClick={handleCardClick}
+                >
                     <div className="workflow-node__title flex workflow-node__title--no-margin h-100">
-                        <div className="workflow-node__full-width-minus-Icon p-12">
+                        <div
+                            className={`workflow-node__full-width-minus-Icon ${!showWebhookAddImageButton ? 'p-12' : ''}`}
+                        >
                             <span className="workflow-node__text-light">Webhook</span>
-                            <div className="dc__ellipsis-left">External source</div>
+                            <div className="dc__ellipsis-left lh-16">External source</div>
                         </div>
 
                         <Webhook className="icon-dim-20 mr-12" />
@@ -121,6 +138,7 @@ export const WebhookNode = ({
                             />
                         )}
                     </div>
+                    {showWebhookAddImageButton && <WebhookAddImageButton dataTestId={id} onClick={() => {}} />}
                 </div>
             </ConditionalWrap>
         )

src/components/workflowEditor/types.ts

@@ -202,6 +202,7 @@ export interface WebhookNodeProps extends Required<Pick<AppConfigProps, 'isTempl
      * @default false
      */
     isReadonlyView?: boolean
+    showAddImageButton?: boolean
 }
 
 export interface WebhookTippyType {