feat: refactor BranchRegexModal to use utility function for initial regex value and improve BuildImageHeader layout

Author: AbhishekA1509

src/components/app/details/triggerView/BranchRegexModal.tsx

@@ -38,6 +38,7 @@ import { getGitProviderIcon } from '@Components/common'
 import { REQUIRED_FIELD_MSG } from '../../../../config/constantMessaging'
 import { BRANCH_REGEX_MODAL_MESSAGING } from './Constants'
 import { BranchRegexModalProps, RegexValueType } from './types'
+import { getInitialRegexValue } from './utils'
 
 const renderRegexInfo = () => (
     <InfoBlock
@@ -65,19 +66,8 @@ const BranchRegexModal = ({
     workflowId,
     handleReload,
 }: BranchRegexModalProps) => {
-    const getInitialRegexValue = () => {
-        const initialValue: Record<number, RegexValueType> = {}
-        material.forEach((mat) => {
-            initialValue[mat.gitMaterialId] = {
-                value: mat.value,
-                isInvalid: mat.regex && !new RegExp(mat.regex).test(mat.value),
-            }
-        })
-        return initialValue
-    }
-
     const [isSavingRegexValue, setIsSavingRegexValue] = useState(false)
-    const [regexValue, setRegexValue] = useState<Record<number, RegexValueType>>(getInitialRegexValue)
+    const [regexValue, setRegexValue] = useState<Record<number, RegexValueType>>(getInitialRegexValue(material))
 
     const isRegexValueInvalid = (_cm): void => {
         const regExp = new RegExp(_cm.source.regex)

src/components/app/details/triggerView/BuildImageModal/BuildImageHeader.tsx

@@ -37,8 +37,7 @@ const BuildImageHeader = ({
             </div>
         ) : (
             <h2 className="m-0 fs-16 fw-6 lh-24 cn-9 dc__truncate">
-                {isJobView ? 'Job Pipeline' : 'Build Pipeline'}{' '}
-                {pipelineName && !isBulkTrigger ? `'${pipelineName}'` : ''}
+                {`${isJobView ? 'Job' : 'Build'} Pipeline ${pipelineName && !isBulkTrigger ? `'${pipelineName}'` : ''}`}
             </h2>
         )}
 

src/components/app/details/triggerView/BuildImageModal/BulkBuildImageModal.tsx

@@ -107,12 +107,12 @@ const BulkBuildImageModal = ({
             initialDataAbortControllerRef,
         )
 
-        setNumberOfAppsLoading(validWorkflows.length)
-
         if (ciMaterialPromiseList.length === 0) {
             return []
         }
 
+        setNumberOfAppsLoading(validWorkflows.length)
+
         const ciMaterialList =
             await ApiQueuingWithBatch<Awaited<ReturnType<typeof getCIMaterials>>>(ciMaterialPromiseList)
         const runtimeParamsList = await ApiQueuingWithBatch<RuntimePluginVariables[]>(runtimeParamsPromiseList)
@@ -456,10 +456,7 @@ const BulkBuildImageModal = ({
                 className="flexbox-col dc__content-space h-100 bg__modal--primary shadow__modal dc__overflow-auto bulk-ci-trigger-container"
                 onClick={stopPropagation}
             >
-                <div
-                    className="flexbox-col dc__content-space h-100 bg__modal--primary shadow__modal dc__overflow-auto bulk-ci-trigger"
-                    onClick={stopPropagation}
-                >
+                <div className="flexbox-col dc__content-space h-100 dc__overflow-auto bulk-ci-trigger">
                     <div className="flexbox-col dc__overflow-auto flex-grow-1">
                         <BuildImageHeader
                             showWebhookModal={showWebhookModal}

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

@@ -0,0 +1,14 @@
+import { CIMaterialType } from '@devtron-labs/devtron-fe-common-lib'
+
+import { RegexValueType } from './types'
+
+export const getInitialRegexValue = (materials: CIMaterialType[]) => {
+    const initialValue: Record<number, RegexValueType> = {}
+    materials.forEach((mat) => {
+        initialValue[mat.gitMaterialId] = {
+            value: mat.value,
+            isInvalid: mat.regex && !new RegExp(mat.regex).test(mat.value),
+        }
+    })
+    return initialValue
+}