Merge pull request #362 from devtron-labs/feat/webhook-ui

feat: webhook UI

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -18,7 +18,7 @@ import moment from 'moment'
 import { RuntimeParamsAPIResponseType, RuntimeParamsListItemType } from '@Shared/types'
 import { getIsManualApprovalSpecific, sanitizeUserApprovalConfig, stringComparatorBySortOrder } from '@Shared/Helpers'
 import { get, post } from './Api'
-import { ROUTES } from './Constants'
+import { GitProviderType, ROUTES } from './Constants'
 import { getUrlWithSearchParams, sortCallback } from './Helper'
 import {
     TeamList,
@@ -250,7 +250,7 @@ const getImageApprovalPolicyDetailsFromMaterialResult = (cdMaterialsResult): Ima
     const validGroups = userApprovalConfig.userGroups.map((group) => group.identifier)
 
     // Have moved from Object.keys(imageApprovalUsersInfo) to approvalUsers since backend is not filtering out the users without approval
-    // TODO: This check should be on BE. Need to remove this once BE is updated 
+    // TODO: This check should be on BE. Need to remove this once BE is updated
     const usersList = approvalUsers.filter((user) => user !== DefaultUserKey.system)
     const groupIdentifierToUsersMap = usersList.reduce(
         (acc, user) => {
@@ -511,3 +511,19 @@ export function getWebhookEventsForEventId(eventId: string | number) {
     const URL = `${ROUTES.GIT_HOST_EVENT}/${eventId}`
     return get(URL)
 }
+
+/**
+ *
+ * @param gitUrl Git URL of the repository
+ * @param branchName Branch name
+ * @returns URL to the branch in the Git repository
+ */
+export const getGitBranchUrl = (gitUrl: string, branchName: string): string | null => {
+    if (!gitUrl) return null
+    const trimmedGitUrl = gitUrl.trim().replace(/\.git$/, '').replace(/\/$/, '') // Remove any trailing slash
+    if (trimmedGitUrl.includes(GitProviderType.GITLAB)) return `${trimmedGitUrl}/-/tree/${branchName}`
+    else if (trimmedGitUrl.includes(GitProviderType.GITHUB)) return `${trimmedGitUrl}/tree/${branchName}`
+    else if (trimmedGitUrl.includes(GitProviderType.BITBUCKET)) return `${trimmedGitUrl}/branch/${branchName}`
+    else if (trimmedGitUrl.includes(GitProviderType.AZURE)) return `${trimmedGitUrl}/src/branch/${branchName}`
+    return null
+}

src/Assets/Icon/ic-hash.svg

@@ -558,3 +558,20 @@ export const VULNERABILITIES_SORT_PRIORITY = {
 
 // TODO: might not work need to verify
 export const IS_PLATFORM_MAC_OS = window.navigator.userAgent.toUpperCase().includes('MAC')
+
+/**
+ * Git provider types
+ */
+
+export enum GitProviderType {
+    GITHUB = 'github',
+    GITLAB = 'gitlab',
+    BITBUCKET = 'bitbucket',
+    AZURE = 'azure',
+    GITEA = 'gitea',
+}
+
+/**
+ * Formats the schema removing any irregularity in the existing schema
+ */
+export const getFormattedSchema = (schema?: string) => JSON.stringify(JSON.parse(schema ?? '{}'), null, 2)

src/Assets/Icon/ic-pull-request.svg

@@ -40,8 +40,15 @@ import {
     ToastManager,
     ToastVariantType,
     versionComparatorBySortOrder,
+    WebhookEventNameType,
 } from '../Shared'
-import { ReactComponent as ArrowDown } from '../Assets/Icon/ic-chevron-down.svg'
+import { ReactComponent as ArrowDown } from '@Icons/ic-chevron-down.svg'
+import webhookIcon from '@Icons/ic-webhook.svg'
+import branchIcon from '@Icons/ic-branch.svg'
+import regexIcon from '@Icons/ic-regex.svg'
+import pullRequest from '@Icons/ic-pull-request.svg'
+import tagIcon from '@Icons/ic-tag.svg'
+import { SourceTypeMap } from '@Common/Common.service'
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
     if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
@@ -956,6 +963,29 @@ export const throttle = <T extends (...args: unknown[]) => unknown>(
     }
 }
 
+/**
+ *
+ * @param sourceType - SourceTypeMap
+ * @param _isRegex - boolean
+ * @param webhookEventName - WebhookEventNameType
+ * @returns - Icon
+ */
+export const getBranchIcon = (sourceType, _isRegex?: boolean, webhookEventName?: string) => {
+    if (sourceType === SourceTypeMap.WEBHOOK) {
+        if (webhookEventName === WebhookEventNameType.PULL_REQUEST) {
+            return pullRequest
+        }
+        if (webhookEventName === WebhookEventNameType.TAG_CREATION) {
+            return tagIcon
+        }
+        return webhookIcon
+    }
+    if (sourceType === SourceTypeMap.BranchRegex || _isRegex) {
+        return regexIcon
+    }
+    return branchIcon
+}
+
 // TODO: Might need to expose sandbox and referrer policy
 export const getSanitizedIframe = (iframeString: string) =>
     DOMPurify.sanitize(iframeString, {

src/Assets/Icon/ic-tag.svg

@@ -16,24 +16,11 @@
 
 import { useState, useEffect, ReactNode } from 'react'
 import Tippy from '@tippyjs/react'
-import { getWebhookEventsForEventId, SourceTypeMap } from '../../../Common'
+import { ReactComponent as Info } from '@Icons/ic-info-outlined.svg'
+import { getBranchIcon, getWebhookEventsForEventId, SourceTypeMap } from '../../../Common'
 import { GIT_BRANCH_NOT_CONFIGURED, DEFAULT_GIT_BRANCH_VALUE } from './constants'
-import webhookIcon from '../../../Assets/Icon/ic-webhook.svg'
-import branchIcon from '../../../Assets/Icon/ic-branch.svg'
-import { ReactComponent as Info } from '../../../Assets/Icon/ic-info-outlined.svg'
-import regexIcon from '../../../Assets/Icon/ic-regex.svg'
 import { buildHoverHtmlForWebhook } from './utils'
-
-export interface CIPipelineSourceConfigInterface {
-    sourceType
-    sourceValue
-    showTooltip?: boolean
-    showIcons?: boolean
-    baseText?: string
-    regex?: any
-    isRegex?: boolean
-    primaryBranchAfterRegex?: string
-}
+import { CIPipelineSourceConfigInterface } from './types'
 
 export const CiPipelineSourceConfig = ({
     sourceType,
@@ -44,11 +31,12 @@ export const CiPipelineSourceConfig = ({
     regex,
     isRegex,
     primaryBranchAfterRegex,
+    rootClassName = '',
 }: CIPipelineSourceConfigInterface) => {
     const _isWebhook = sourceType === SourceTypeMap.WEBHOOK
     const _isRegex = sourceType === SourceTypeMap.BranchRegex || !!regex || isRegex
 
-    const [sourceValueBase, setSourceValueBase] = useState<ReactNode>('')
+    const [sourceValueBase, setSourceValueBase] = useState('')
     const [sourceValueAdv, setSourceValueAdv] = useState<ReactNode>('')
     const [loading, setLoading] = useState(!!_isWebhook)
 
@@ -97,7 +85,7 @@ export const CiPipelineSourceConfig = ({
             )}
         </>
     )
-    // for non webhook case, data is already set in use state initialisation
+    // for non webhook case, data is already set in use state initialization
     function _init() {
         if (!_isWebhook) {
             return
@@ -130,16 +118,14 @@ export const CiPipelineSourceConfig = ({
         regexTippyContent()
     }, [])
 
-    const isRegexOrBranchIcon = _isRegex ? regexIcon : branchIcon
-
     return (
-        <div className={`flex left ${showTooltip ? 'branch-name' : ''}`}>
+        <div className={`flex left ${showTooltip ? 'fw-5' : ''}  ${rootClassName}`}>
             {loading && showIcons && <span className="dc__loading-dots">loading</span>}
             {!loading && (
                 <div className="flex dc__gap-4">
                     {showIcons && (
                         <img
-                            src={_isWebhook ? webhookIcon : isRegexOrBranchIcon}
+                            src={getBranchIcon(sourceType, _isRegex, sourceValueBase)}
                             alt="branch"
                             className="icon-dim-12"
                         />
@@ -170,7 +156,7 @@ export const CiPipelineSourceConfig = ({
                                     </>
                                 )}
                                 {baseText && (
-                                    <span className="cursor" style={{ borderBottom: '1px solid #3b444c' }}>
+                                    <span className="dc__border-dashed--n3-bottom fw-6 fs-13 lh-19-imp">
                                         {baseText}
                                     </span>
                                 )}

src/Common/Common.service.ts

@@ -791,3 +791,15 @@ export type CreateMarkupPropsType =
 export type TriggerHistoryFilterCriteriaType = `${string}|${string}|${string}`[]
 export const terminalStatus = new Set(['error', 'healthy', 'succeeded', 'cancelled', 'failed', 'aborted'])
 export const statusSet = new Set(['starting', 'running', 'pending'])
+
+export interface CIPipelineSourceConfigInterface {
+    sourceType: string
+    sourceValue: any // TODO: need to make source value consistent
+    showTooltip?: boolean
+    showIcons?: boolean
+    baseText?: string
+    regex?: any
+    isRegex?: boolean
+    primaryBranchAfterRegex?: string
+    rootClassName?: string
+}