feat: git repo url handling

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.19.0-pre-5",
+        "@devtron-labs/devtron-fe-common-lib": "1.19.0-beta-7",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/App/Configurations/WorkflowEditor/CreateCICDPipeline/CIStepperContent.tsx

@@ -162,7 +162,7 @@ export const CIStepperContent = ({
                 <InfoBlock variant="success" description="Build pipeline is created" size={ComponentSizeType.medium} />
             )}
             {materials.map((material, index) => {
-                const { id, name, type, isRegex, value, regex, gitMaterialId } = material
+                const { id, name, type, isRegex, value, regex, gitMaterialId, url } = material
 
                 const isBranchRegex = type === SourceTypeMap.BranchRegex || isRegex
                 const isBranchFixed = type === SourceTypeMap.BranchFixed && !isRegex
@@ -183,6 +183,7 @@ export const CIStepperContent = ({
                     <Fragment key={id}>
                         <SourceMaterialsSelector
                             repoName={name}
+                            gitURL={url}
                             sourceTypePickerProps={{
                                 inputId: 'ci-pipeline-sourceType',
                                 label: 'Source Type',

src/Pages/App/Configurations/WorkflowEditor/SourceMaterialsSelector/SourceMaterialsSelector.tsx

@@ -14,19 +14,20 @@
  * limitations under the License.
  */
 
-import { ComponentSizeType, CustomInput, Icon, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
+import { ComponentSizeType, CustomInput, GitProviderIcon, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
 
 import { SourceMaterialsSelectorProps } from './types'
 
 export const SourceMaterialsSelector = ({
     repoName,
     sourceTypePickerProps,
     branchInputProps,
+    gitURL,
 }: SourceMaterialsSelectorProps) => (
     <div className="flexbox-col dc__gap-8">
         {repoName && (
             <div className="flex left dc__gap-8">
-                <Icon name="ic-git" color={null} size={24} />
+                <GitProviderIcon gitRepoUrl={gitURL} size={24} />
                 <p className="m-0 fs-13 lh-20 fw-6 cn-9 dc__truncate">{repoName}</p>
             </div>
         )}

src/Pages/App/Configurations/WorkflowEditor/SourceMaterialsSelector/types.ts

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import { CustomInputProps, SelectPickerProps } from '@devtron-labs/devtron-fe-common-lib'
+import { CustomInputProps, MaterialType, SelectPickerProps } from '@devtron-labs/devtron-fe-common-lib'
 
-export interface SourceMaterialsSelectorProps {
-    repoName?: string
+type CommonSourceTypeProps = {
     sourceTypePickerProps: Omit<
         SelectPickerProps<string | number, false>,
         'required' | 'isClearable' | 'closeMenuOnSelect' | 'size'
@@ -26,3 +25,13 @@ export interface SourceMaterialsSelectorProps {
         hideInput?: boolean
     }
 }
+
+export type SourceMaterialsSelectorProps =
+    | (CommonSourceTypeProps & {
+          repoName: string
+          gitURL: MaterialType['url']
+      })
+    | (CommonSourceTypeProps & {
+          repoName?: never
+          gitURL?: never
+      })

src/components/CIPipelineN/Build.tsx

@@ -55,12 +55,14 @@ export const Build = ({
                             ...mat,
                             value: '',
                             regex: event.target.value,
+                            gitURL: mat?.url,
                         }
                     }
                     return {
                         ...mat,
                         regex: '',
                         value: event.target.value,
+                        gitURL: mat?.url,
                     }
                 }
                 return mat

src/components/app/details/appDetails/DeployedCommitCard.tsx

@@ -20,7 +20,6 @@ import {
     getCITriggerInfo,
     getParsedCIMaterialInfo,
     GitProviderIcon,
-    GitProviderType,
     Icon,
     LoadingCard,
     useQuery,
@@ -77,9 +76,7 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
                                     </div>
                                 </div>
                             </div>
-                            <GitProviderIcon gitProvider={GitProviderType.GIT} size={24} />
-                            {/* @TODO: This should be dynamic, dependent on the source */}
-                            {/* <GitHub className="github-icon" /> */}
+                            <GitProviderIcon gitRepoUrl={lastCommit?.commitURL} size={24} />
                         </div>
                         <div className="app-details-info-card__bottom-container dc__content-space">
                             <span className="app-details-info-card__bottom-container__message fs-12 fw-4">

src/components/ciPipeline/SourceMaterials.tsx

@@ -141,6 +141,7 @@ export const SourceMaterials = ({
                                         ).message,
                                     autoFocus: index === 0,
                                 }}
+                                gitURL={mat?.url}
                             />
                             {isBranchRegex && (
                                 <InfoBlock description="Branch Regex allows you to easily switch between branches matching the configured regex before triggering the build pipeline." />

src/components/ciPipeline/ciPipeline.service.ts

@@ -135,7 +135,7 @@ function getPipelineBaseMetaConfiguration(
     isTemplateView: AppConfigProps['isTemplateView'],
 ): Promise<any> {
     return getSourceConfig(appId, queryParams, isTemplateView).then((response) => {
-        const materials = response?.result?.material?.map((mat) => {
+        const materials: MaterialType[] = response?.result?.material?.map((mat: MaterialType) => {
             return {
                 id: 0,
                 gitMaterialId: mat.id,
@@ -146,6 +146,7 @@ function getPipelineBaseMetaConfiguration(
                 gitMaterialName: mat.name,
                 gitProviderId: mat.gitProviderId,
                 gitHostId: 0,
+                url: mat.url,
             }
         })
         const _baseCiPipelineSourceTypeOptions = CiPipelineSourceTypeBaseOptions.map((obj) => ({ ...obj }))
@@ -348,8 +349,6 @@ export function deleteCIPipeline(
     gitMaterials,
     appId: number,
     workflowId: number,
-    isExternalCI: boolean,
-    webhookConditionList,
     isTemplateView: AppConfigProps['isTemplateView'],
 ) {
     const updatedCI = {
@@ -456,6 +455,7 @@ function createMaterialList(ciPipeline, gitMaterials: MaterialType[], gitHost: G
                     gitHostId: gitHost ? gitHost.id : 0,
                     regex: mat.source.regex,
                     isRegex: mat.isRegex,
+                    url: mat.url || gitMaterials?.[0].url, // Required BE support till then will be getting url from another api
                 }
             }) || []
     }
@@ -477,6 +477,7 @@ function createMaterialList(ciPipeline, gitMaterials: MaterialType[], gitHost: G
                 gitHostId: mat.gitHostId,
                 gitProviderId: mat.gitProviderId,
                 isRegex: mat.isRegex,
+                url: mat.url,
             })
         }
     }
@@ -563,7 +564,7 @@ function migrateOldData(
 function parseCIResponse(
     responseCode: number,
     ciPipeline,
-    gitMaterials,
+    gitMaterials: MaterialType[],
     gitHost,
     webhookEvents,
     ciPipelineSourceTypeOptions,

src/components/gitProvider/GitProvider.tsx

@@ -30,7 +30,6 @@ import {
     ToastManager,
     SelectPicker,
     ComponentSizeType,
-    renderMaterialIcon,
     ERROR_STATUS_CODE,
     Button,
     ButtonStyleType,
@@ -42,6 +41,7 @@ import {
     InfoBlock,
     DTSwitchProps,
     DTSwitch,
+    GitProviderIcon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -325,9 +325,7 @@ const CollapsedList = ({
             >
                 <List.Logo>
                     {id && (
-                        <div className="">
-                            <span className="mr-8">{renderMaterialIcon(url)}</span>
-                        </div>
+                        <GitProviderIcon gitRepoUrl={url} />
                     )}
                     {!id && collapsed && <Add className="icon-dim-24 fcb-5 dc__vertical-align-middle" />}
                 </List.Logo>
@@ -472,7 +470,6 @@ const GitForm = ({
         },
     })
 
-    const [deleting, setDeleting] = useState(false)
     const [confirmation, setConfirmation] = useState(false)
 
     const isTLSInitiallyConfigured = id && enableTLSVerification

src/components/material/MaterialView.tsx

@@ -37,6 +37,7 @@ import {
     ButtonComponentType,
     Icon,
     InfoBlock,
+    GitProviderIcon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { MaterialViewProps, MaterialViewState } from './material.types'
@@ -605,7 +606,7 @@ export class MaterialView extends Component<MaterialViewProps, MaterialViewState
         ...provider,
         value: provider.id,
         label: provider.name,
-        startIcon: renderMaterialIcon(provider.url),
+        startIcon: <GitProviderIcon gitRepoUrl={provider.url} />,
     })
 
     handleGitProviderChange: SelectPickerProps['onChange'] = (selected) => {

src/components/workflowEditor/Workflow.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Component } from 'react'
-import { RouteComponentProps, Link, generatePath } from 'react-router-dom'
+import { Link, generatePath } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
 import { CINode } from './nodes/CINode'
 import { CDNode } from './nodes/CDNode'
@@ -40,19 +40,15 @@ import {
     noop,
     WorkflowNodeType,
     PipelineType,
-    AddPipelineType,
-    SelectedNode,
     ConditionalWrap,
     ChangeCIPayloadType,
-    CIPipelineNodeType,
     URLS as CommonURLS,
-    AppConfigProps,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICInput } from '../../assets/icons/ic-input.svg'
 import { ReactComponent as ICMoreOption } from '../../assets/icons/ic-more-option.svg'
 import { ReactComponent as ICDelete } from '../../assets/icons/ic-delete-interactive.svg'
 import { ReactComponent as ICEdit } from '../../assets/icons/ic-pencil.svg'
-import { WorkflowPositionState } from './types'
+import { WorkflowProps, WorkflowState } from './types'
 import { CHANGE_CI_TOOLTIP } from './constants'
 
 const ApprovalNodeEdge = importComponentFromFELibrary('ApprovalNodeEdge')
@@ -63,55 +59,6 @@ const getParsedPluginPolicyConsequenceData = importComponentFromFELibrary(
     'function',
 )
 
-export interface WorkflowProps
-    extends RouteComponentProps<{ appId: string; workflowId?: string; ciPipelineId?: string; cdPipelineId?: string }>,
-        Required<Pick<AppConfigProps, 'isTemplateView'>> {
-    nodes: CommonNodeAttr[]
-    id: number
-    name: string
-    startX: number
-    startY: number
-    width: number | string
-    height: number | string
-    showDeleteDialog: (workflowId: number) => void
-    handleCDSelect: (
-        workflowId: number | string,
-        ciPipelineId: number | string,
-        parentPipelineType: string,
-        parentPipelineId: number | string,
-        isWebhookCD?: boolean,
-        childPipelineId?: number | string,
-        addType?: AddPipelineType,
-    ) => void
-    openEditWorkflow: (event, workflowId: number) => string
-    handleCISelect: (workflowId: string | number, type: CIPipelineNodeType) => void
-    addCIPipeline: (type: CIPipelineNodeType) => void
-    addWebhookCD: (workflowId?: number | string) => void
-    cdWorkflowList?: any[]
-    showWebhookTippy?: boolean
-    hideWebhookTippy?: () => void
-    isJobView?: boolean
-    envList?: any[]
-    filteredCIPipelines?: any[]
-    addNewPipelineBlocked?: boolean
-    handleChangeCI?: (changeCIPayload: ChangeCIPayloadType) => void
-    selectedNode?: SelectedNode
-    handleSelectedNodeChange?: (selectedNode: SelectedNode) => void
-    appName?: string
-    getWorkflows?: () => void
-    refreshParentWorkflows?: () => void
-    reloadEnvironments?: () => void
-    workflowPositionState?: WorkflowPositionState
-    handleDisplayLoader?: () => void
-    isOffendingPipelineView?: boolean
-}
-
-interface WorkflowState {
-    top: number
-    left: number
-    showCIMenu: boolean
-}
-
 export class Workflow extends Component<WorkflowProps, WorkflowState> {
     constructor(props) {
         super(props)

src/components/workflowEditor/nodes/CINode.tsx

@@ -17,54 +17,19 @@
 import { Component, ReactElement } from 'react'
 import {
     WorkflowNodeType,
-    SelectedNode,
-    CommonNodeAttr,
     ConditionalWrap,
     Icon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
-import { Link, RouteComponentProps } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import ToggleCDSelectButton from '../ToggleCDSelectButton'
 import { ReactComponent as Warning } from '../../../assets/icons/ic-warning.svg'
 import { ReactComponent as ICLinkedCINode } from '../../../assets/icons/ic-node-build-linked.svg'
 import { ReactComponent as IcLink } from '../../../assets/icons/ic-link.svg'
 import { DEFAULT_ENV } from '../../app/details/triggerView/Constants'
 import { URLS } from '../../../config'
 import { getLinkedCITippyContent } from '../../../Pages/Shared/LinkedCIDetailsModal/utils'
-import { WorkflowProps } from '../Workflow'
-
-export interface CINodeProps extends RouteComponentProps<{}>, Pick<WorkflowProps, 'isOffendingPipelineView' | 'isTemplateView'> {
-    x: number
-    y: number
-    width: number
-    height: number
-    id: number
-    title: string
-    type: string
-    description: string
-    workflowId: number
-    triggerType: string
-    isLinkedCI: boolean
-    isExternalCI: boolean
-    isJobCI: boolean
-    isTrigger: boolean
-    linkedCount: number
-    downstreams: CommonNodeAttr[]
-    to: string
-    toggleCDMenu: () => void
-    configDiffView?: boolean
-    hideWebhookTippy?: () => void
-    isJobView?: boolean
-    showPluginWarning?: boolean
-    envList?: any[]
-    filteredCIPipelines?: any[]
-    addNewPipelineBlocked?: boolean
-    handleSelectedNodeChange?: (selectedNode: SelectedNode) => void
-    selectedNode?: SelectedNode
-    isLastNode?: boolean
-    appId: string
-    getWorkflows: () => void
-}
+import { CINodeProps } from './types'
 
 export class CINode extends Component<CINodeProps> {
     handleLinkedCIWorkflowChipClick = (e) => {

src/components/workflowEditor/nodes/StaticNode.tsx

@@ -14,28 +14,10 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { GIT_BRANCH_NOT_CONFIGURED } from '../../../config'
 import { CiPipelineSourceConfig, GitProviderIcon, GitProviderType } from '@devtron-labs/devtron-fe-common-lib'
-
-export interface StaticNodeProps {
-    x: number
-    y: number
-    branch: string
-    icon: string
-    id: string
-    url: string
-    title: string
-    height: number
-    width: number
-    downstreams: any[]
-    sourceType: string
-    regex?: string
-    primaryBranchAfterRegex?: string
-    to?: string
-    handleGoToWorkFlowEditor?: (e?: any) => void
-}
-
+import { StaticNodeProps } from './types'
 export class StaticNode extends Component<StaticNodeProps> {
     renderCardContent() {
         return (