feat: webhook UI

package.json

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

src/Common/Common.service.ts

@@ -520,7 +520,7 @@ export function getWebhookEventsForEventId(eventId: string | number) {
  */
 export const getGitBranchUrl = (gitUrl: string, branchName: string): string | null => {
     if (!gitUrl) return null
-    const trimmedGitUrl = gitUrl.trim().replace(/\/$/, '') // Remove any trailing slash
+    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}`

src/Common/Helper.tsx

@@ -651,10 +651,7 @@ export const powerSetOfSubstringsFromStart = (strings: string[], regex: RegExp)
     })
 
 export const convertJSONPointerToJSONPath = (pointer: string) =>
-    pointer
-        .replace(/\/([\*0-9]+)\//g, '[$1].')
-        .replace(/\//g, '.')
-        .replace(/\./, '$.')
+    unescapePathComponent(pointer.replace(/\/([\*0-9]+)\//g, '[$1].').replace(/\//g, '.').replace(/\./, '$.'))
 
 export const flatMapOfJSONPaths = (
     paths: string[],
@@ -988,3 +985,42 @@ export const getBranchIcon = (sourceType, _isRegex?: boolean, webhookEventName?:
     }
     return branchIcon
 }
+
+// TODO: Might need to expose sandbox and referrer policy
+export const getSanitizedIframe = (iframeString: string) =>
+    DOMPurify.sanitize(iframeString, {
+        ADD_TAGS: ['iframe'],
+        ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
+    })
+
+/**
+ * This method adds default attributes to iframe - title, loading ="lazy", width="100%", height="100%"
+ */
+export const getIframeWithDefaultAttributes = (iframeString: string, defaultName?: string): string => {
+    const parentDiv = document.createElement('div')
+    parentDiv.innerHTML = getSanitizedIframe(iframeString)
+
+
+    const iframe = parentDiv.querySelector('iframe')
+    if (iframe) {
+        if (!iframe.hasAttribute('title') && !!defaultName) {
+            iframe.setAttribute('title', defaultName)
+        }
+
+        if (!iframe.hasAttribute('loading')) {
+            iframe.setAttribute('loading', 'lazy')
+        }
+
+        if (!iframe.hasAttribute('width')) {
+            iframe.setAttribute('width', '100%')
+        }
+
+        if (!iframe.hasAttribute('height')) {
+            iframe.setAttribute('height', '100%')
+        }
+
+        return parentDiv.innerHTML
+    }
+
+    return iframeString
+}

src/Shared/Components/CICDHistory/CiPipelineSourceConfig.tsx

@@ -119,7 +119,7 @@ export const CiPipelineSourceConfig = ({
     }, [])
 
     return (
-        <div className={`flex left ${showTooltip ? 'branch-name' : ''}  ${rootClassName}`}>
+        <div className={`flex left ${showTooltip ? 'fw-5' : ''}  ${rootClassName}`}>
             {loading && showIcons && <span className="dc__loading-dots">loading</span>}
             {!loading && (
                 <div className="flex dc__gap-4">
@@ -156,7 +156,7 @@ export const CiPipelineSourceConfig = ({
                                     </>
                                 )}
                                 {baseText && (
-                                    <span className="cursor dc__border-dashed--n3-bottom fw-6 lh-20 fs-13">
+                                    <span className="dc__border-dashed--n3-bottom fw-6 fs-13 lh-19-imp">
                                         {baseText}
                                     </span>
                                 )}

src/Shared/Components/GitCommitInfoGeneric/GitCommitInfoGeneric.tsx

@@ -15,7 +15,6 @@
  */
 
 /* eslint-disable eqeqeq */
-import { useState } from 'react'
 import moment from 'moment'
 import Tippy from '@tippyjs/react'
 import ClipboardButton from '@Common/ClipboardButton/ClipboardButton'
@@ -29,7 +28,7 @@ import { ReactComponent as Check } from '@Icons/ic-check-circle.svg'
 import { ReactComponent as Abort } from '@Icons/ic-abort.svg'
 import { SourceTypeMap, createGitCommitUrl, getGitBranchUrl } from '@Common/Common.service'
 import { stopPropagation } from '@Common/Helper'
-import { DATE_TIME_FORMATS } from '@Common/Constants'
+import { DATE_TIME_FORMATS, GitProviderType } from '@Common/Constants'
 import { ReactComponent as Tag } from '@Icons/ic-tag.svg'
 import { getLowerCaseObject, getWebhookDate } from '@Shared/Helpers'
 import { ReactComponent as Hash } from '@Icons/ic-hash.svg'
@@ -48,8 +47,6 @@ const GitCommitInfoGeneric = ({
     index,
     isExcluded = false,
 }: GitCommitInfoGenericProps) => {
-    const [showSeeMore, setShowSeeMore] = useState(true)
-
     const lowerCaseCommitInfo = getLowerCaseObject(commitInfo)
     const _isWebhook =
         materialSourceType === SourceTypeMap.WEBHOOK ||
@@ -75,19 +72,21 @@ const GitCommitInfoGeneric = ({
             </a>
         ) : null
 
-    function renderBasicGitCommitInfoForWebhook() {
+    function renderBasicGitCommitInfoForWebhook(isPRWebhook?: boolean) {
         const _date = getWebhookDate(materialSourceType, commitInfo)
         return (
             <div className="flex column dc__gap-4 w-100">
-                <div className="flex left lh-20 dc__gap-8 w-100">
-                    <PullRequestIcon className="icon-dim-16" />
-                    <div className="flex left dc__gap-4">
-                        Merge commit into&nbsp;
-                        {renderBranchName(_webhookData.data['target branch name'])}
-                        &nbsp;from&nbsp;
-                        {renderBranchName(_webhookData.data['source branch name'])}
+                {isPRWebhook ? (
+                    <div className="flex left lh-20 dc__gap-8 w-100">
+                        <PullRequestIcon className="icon-dim-16" />
+                        <div className="flex left dc__gap-4">
+                            Merge commit into&nbsp;
+                            {renderBranchName(_webhookData.data['target branch name'])}
+                            &nbsp;from&nbsp;
+                            {renderBranchName(_webhookData.data['source branch name'])}
+                        </div>
                     </div>
-                </div>
+                ) : null}
                 {_webhookData.data.author ? (
                     <div className="material-history__text lh-20 flex left dc__gap-8 w-100">
                         <PersonIcon className="icon-dim-16" /> {_webhookData.data.author}
@@ -109,80 +108,6 @@ const GitCommitInfoGeneric = ({
         )
     }
 
-    function renderMoreDataForWebhook(_moreData) {
-        return !showSeeMore ? (
-            <div className="material-history__all-changes">
-                <div className="material-history__body mt-4">
-                    {Object.keys(_moreData).map((_key, idx) => {
-                        let classes
-                        if (idx % 2 == 0) {
-                            classes = 'bcn-1'
-                        }
-                        return (
-                            <div
-                                key={_key}
-                                className={`material-history__text material-history__grid left pt-4 pb-4 ${classes}`}
-                            >
-                                <div>{_key}</div>
-                                <div>{_moreData[_key]}</div>
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        ) : null
-    }
-
-    function renderSeeMoreButtonForWebhook() {
-        return (
-            <button
-                type="button"
-                className="fs-12 fw-6 pt-12 mt-12 pl-12 pr-12 w-100 bcn-0 flex left br-4 dc__box-shadow-top cb-5 dc__no-border"
-                onClick={(event) => {
-                    event.stopPropagation()
-                    setShowSeeMore(!showSeeMore)
-                }}
-            >
-                {showSeeMore ? 'See More' : 'See Less'}
-            </button>
-        )
-    }
-
-    function handleMoreDataForWebhook() {
-        const _moreData = {}
-        if (_webhookData.eventactiontype === WEBHOOK_EVENT_ACTION_TYPE.MERGED) {
-            Object.keys(_webhookData.data).forEach((_key) => {
-                if (
-                    _key != 'author' &&
-                    _key != 'date' &&
-                    _key != 'git url' &&
-                    _key != 'source branch name' &&
-                    _key != 'source checkout' &&
-                    _key != 'target branch name' &&
-                    _key != 'target checkout' &&
-                    _key != 'title'
-                ) {
-                    _moreData[_key] = _webhookData.data[_key]
-                }
-            })
-        } else if (_webhookData.eventactiontype === WEBHOOK_EVENT_ACTION_TYPE.NON_MERGED) {
-            Object.keys(_webhookData.data).forEach((_key) => {
-                if (_key !== 'author' && _key !== 'date' && _key !== 'target checkout') {
-                    _moreData[_key] = _webhookData.data[_key]
-                }
-            })
-        }
-
-        const _hasMoreData = Object.keys(_moreData).length > 0
-
-        return (
-            <>
-                {_hasMoreData && renderMoreDataForWebhook(_moreData)}
-                {_hasMoreData && renderSeeMoreButtonForWebhook()}
-            </>
-        )
-    }
-
     const matSelectionText = (): JSX.Element => {
         if (isExcluded) {
             return (
@@ -218,10 +143,10 @@ const GitCommitInfoGeneric = ({
         _webhookData.data.title ? <span className="flex left cn-9 fw-6 fs-13">{_webhookData.data.title}</span> : null
 
     const renderPullRequestId = (pullRequestUrl: string) => {
-        const pullRequestId = pullRequestUrl.split('/').pop()
+        const pullRequestId = pullRequestUrl?.split('/').pop()
 
         return (
-            <div className="w-100">
+            <div className="w-100 flex left dc__gap-4">
                 <a
                     href={pullRequestUrl}
                     target="_blank"
@@ -231,14 +156,17 @@ const GitCommitInfoGeneric = ({
                 >
                     <Hash /> <span>{Number.isNaN(pullRequestId) ? 'PR' : pullRequestId}</span>
                 </a>
+                <span className="git-commit-info-generic__copy dc__visibility-hidden p-2" data-testid="git-commit-copy">
+                    <ClipboardButton content={pullRequestUrl} />
+                </span>
             </div>
         )
     }
 
-    const renderTagCreationId = () => (
+    const renderTagCreationId = (tagRequestUrl: string) => (
         <div className="commit-hash px-6 dc__w-fit-content dc__gap-4 fs-13">
             <Tag className="icon-dim-14 scb-5" />
-            {_webhookData.data['target checkout']}
+            {tagRequestUrl}
         </div>
     )
 
@@ -252,32 +180,38 @@ const GitCommitInfoGeneric = ({
         return null
     }
 
-    const renderPRInfoCard = () =>
-        _isWebhook &&
-        _webhookData.eventactiontype === WEBHOOK_EVENT_ACTION_TYPE.MERGED && (
-            <div className="flex column left dc__gap-8">
-                <div className="flex dc__content-space w-100">
-                    {renderPullRequestId(_webhookData.data['git url'])}
-                    {getCheckUncheckIcon()}
-                </div>
-                {renderWebhookTitle()}
-                {renderBasicGitCommitInfoForWebhook()}
-                {handleMoreDataForWebhook()}
+    const renderPRInfoCard = () => (
+        <div className="flex column left dc__gap-8">
+            <div className="flex dc__content-space w-100">
+                {renderPullRequestId(_webhookData.data['git url'])}
+                {getCheckUncheckIcon()}
             </div>
-        )
+            {renderWebhookTitle()}
+            {renderBasicGitCommitInfoForWebhook(true)}
+        </div>
+    )
 
-    const renderTagInfoCard = () =>
-        _isWebhook &&
-        _webhookData.eventactiontype === WEBHOOK_EVENT_ACTION_TYPE.NON_MERGED && (
-            <>
-                <div className="flex left dc__content-space">
-                    {renderTagCreationId()}
-                    {getCheckUncheckIcon()}
-                </div>
-                {renderBasicGitCommitInfoForWebhook()}
-                {handleMoreDataForWebhook()}
-            </>
-        )
+    const renderTagInfoCard = () => (
+        <>
+            <div className="flex left dc__content-space">
+                {renderTagCreationId(_webhookData.data['target checkout'])}
+                {getCheckUncheckIcon()}
+            </div>
+            {renderBasicGitCommitInfoForWebhook()}
+        </>
+    )
+
+    const renderWebhookGitInfoCard = () => {
+        if (!_isWebhook) return null
+
+        const isMerged = _webhookData.eventactiontype === WEBHOOK_EVENT_ACTION_TYPE.MERGED
+
+        if (materialUrl.includes(GitProviderType.GITLAB)) {
+            // TODO: This is a temporary fix for the issue where the eventActionType data incorrect
+            return isMerged ? renderTagInfoCard() : renderPRInfoCard()
+        }
+        return isMerged ? renderPRInfoCard() : renderTagInfoCard()
+    }
 
     return (
         <div className="git-commit-info-generic__wrapper cn-9 fs-12">
@@ -351,9 +285,7 @@ const GitCommitInfoGeneric = ({
                         </div>
                     </>
                 )}
-
-                {renderPRInfoCard()}
-                {renderTagInfoCard()}
+                {renderWebhookGitInfoCard()}
             </div>
         </div>
     )