feat: webhook UI

package.json

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

src/Common/Common.service.ts

@@ -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(/\/$/, '') // 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/Common/Constants.ts

@@ -555,3 +555,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/Shared/Components/CICDHistory/CiPipelineSourceConfig.tsx

@@ -170,7 +170,7 @@ export const CiPipelineSourceConfig = ({
                                     </>
                                 )}
                                 {baseText && (
-                                    <span className="cursor" style={{ borderBottom: '1px solid #3b444c' }}>
+                                    <span className="cursor dc__border-dashed--n3-bottom fw-6 lh-20 fs-13">
                                         {baseText}
                                     </span>
                                 )}

src/Shared/Components/KeyValueTable/KeyValueTable.scss

@@ -19,11 +19,11 @@
     gap: 1px;
 
     &.two-columns-top-row {
-        grid-template-columns: 20% 1fr;
+        grid-template-columns: 30% 1fr;
     }
 
     &.two-columns {
-        grid-template-columns: 20% 1fr;
+        grid-template-columns: 30% 1fr;
 
         .key-value-table__row:last-of-type {
             .key-value-table__cell:first-child,
@@ -41,7 +41,7 @@
     }
 
     &.three-columns {
-        grid-template-columns: 20% 1fr 32px;
+        grid-template-columns: 30% 1fr 32px;
 
         .key-value-table__row:last-of-type {
             .key-value-table__cell:first-child,

src/Shared/Components/MaterialHistory/MaterialHistory.component.tsx

@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import { getWebhookDate } from '@Shared/Helpers'
+import { MaterialHistoryType } from '@Shared/Services'
+import { useMemo } from 'react'
 import { SourceTypeMap } from '../../../Common'
 import { GitCommitInfoGeneric } from '../GitCommitInfoGeneric'
 import { MaterialHistoryProps } from './types'
@@ -32,22 +35,23 @@ const MaterialHistory = ({
         }
     }
 
-    const getMaterialHistoryMapWithTime = () => {
-        const historyTimeMap = {}
-
-        material.history?.forEach((history) => {
-            const newDate = history.date.substring(0, 16)
-
-            if (!historyTimeMap[newDate]) {
-                historyTimeMap[newDate] = []
-            }
-            historyTimeMap[newDate].push(history)
-        })
+    const materialHistoryMapWithTime = useMemo(
+        () =>
+            material.history.reduce<Record<string, MaterialHistoryType[]>>((acc, historyElem: MaterialHistoryType) => {
+                const isWebhook = material.type === SourceTypeMap.WEBHOOK
+                const newDate = isWebhook
+                    ? getWebhookDate(material.type, historyElem).substring(0, 16)
+                    : historyElem.date.substring(0, 16)
+                if (!acc[newDate]) {
+                    acc[newDate] = []
+                }
+                acc[newDate].push(historyElem)
+                return acc
+            }, {}),
+        [material.history, material.type],
+    )
 
-        return historyTimeMap
-    }
     // Retrieve the history map
-    const materialHistoryMapWithTime = getMaterialHistoryMapWithTime()
     // Retrieve the keys of the history map
     const dateKeys = Object.keys(materialHistoryMapWithTime)
 
@@ -58,8 +62,8 @@ const MaterialHistory = ({
             {dateKeys.map((date) => {
                 const historyList = materialHistoryMapWithTime[date]
                 return (
-                    <>
-                        {!isCommitInfoModal && material.type !== SourceTypeMap.WEBHOOK && (
+                    <div key={date} className="flexbox-col dc__gap-12 py-12 px-16">
+                        {!isCommitInfoModal && (
                             <div className="flex left dc__gap-8">
                                 <span className="fs-12 lh-18 cn-7 fw-6 w-130">{date}</span>
                                 <div className="h-1 bcn-2 w-100" />
@@ -87,13 +91,12 @@ const MaterialHistory = ({
                                         materialSourceType={material.type}
                                         selectedCommitInfo={selectCommit}
                                         materialSourceValue={material.value}
-                                        canTriggerBuild={!history.excluded}
                                         isExcluded={history.excluded}
                                     />
                                 </div>
                             )
                         })}
-                    </>
+                    </div>
                 )
             })}
         </>

src/Shared/Helpers.tsx

@@ -19,6 +19,7 @@ import { useEffect, useRef, useState, ReactElement } from 'react'
 import Tippy from '@tippyjs/react'
 import { Pair } from 'yaml'
 import moment from 'moment'
+import { MaterialHistoryType } from '@Shared/Services/app.types'
 import {
     handleUTCTime,
     ManualApprovalType,
@@ -30,6 +31,8 @@ import {
     PATTERNS,
     ZERO_TIME_STRING,
     noop,
+    SourceTypeMap,
+    DATE_TIME_FORMATS,
 } from '../Common'
 import {
     AggregationKeys,
@@ -852,3 +855,40 @@ export const groupArrayByObjectKey = <T extends Record<string, any>, K extends k
         },
         {} as Record<string, T[]>,
     )
+
+/**
+ * @description - Function to get the lower case object
+ * @param input - The input object
+ * @returns Record<string, any>
+ */
+export const getLowerCaseObject = (input): Record<string, any> => {
+    if (!input || typeof input !== 'object') {
+        return input
+    }
+    return Object.keys(input).reduce((acc, key) => {
+        const modifiedKey = key.toLowerCase()
+        const value = input[key]
+        if (value && typeof value === 'object') {
+            acc[modifiedKey] = getLowerCaseObject(value)
+        } else {
+            acc[modifiedKey] = value
+        }
+        return acc
+    }, {})
+}
+
+/**
+ * @description - Function to get the webhook date
+ * @param materialSourceType - The type of material source (e.g., WEBHOOK)
+ * @param history - The history object containing commit information
+ * @returns - Formatted webhook date if available, otherwise an empty string
+ */
+
+export const getWebhookDate = (materialSourceType: string, history: MaterialHistoryType): string => {
+    const lowerCaseCommitInfo = getLowerCaseObject(history)
+    const isWebhook = materialSourceType === SourceTypeMap.WEBHOOK || lowerCaseCommitInfo?.webhookdata?.id !== 0
+    const webhookData = isWebhook ? lowerCaseCommitInfo.webhookdata : {}
+
+    const _moment = moment(webhookData.data.date, 'YYYY-MM-DDTHH:mm:ssZ')
+    return _moment.isValid() ? _moment.format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT) : webhookData.data.date
+}

src/Shared/Services/app.types.ts

@@ -31,7 +31,7 @@ interface MaterialHistoryDTO {
     WebhookData: WebhookDataType
 }
 
-interface MaterialHistoryType {
+export interface MaterialHistoryType {
     commitURL: string
     commit: MaterialHistoryDTO['Commit']
     author: MaterialHistoryDTO['Author']
@@ -84,6 +84,7 @@ export interface CIMaterialType
     gitURL: CIMaterialDTO['url']
     history: MaterialHistoryType[]
     isSelected: boolean
+    gitMaterialUrl?: string
 }
 
 interface ImageCommentDTO {