refactor: code optimization

Author: RohitRaj011

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

@@ -92,6 +92,10 @@ export const CreateCICDPipeline = ({
     const { deploymentAppType, selectedEnvironment } = cd
 
     // HANDLERS
+    const handleOnEscape = () => {
+        onClose()
+    }
+
     const handleReloadNoGitOpsRepoConfiguredModalClose = () => {
         setReloadNoGitOpsRepoConfiguredModal(false)
     }
@@ -265,8 +269,7 @@ export const CreateCICDPipeline = ({
         }
     }
 
-    const handleCreateWorkflow = () =>
-        cdNodeCreateError ? createWorkflow({ shouldCreateCINode: false }) : createWorkflow({ shouldCreateCINode: true })
+    const handleCreateWorkflow = () => createWorkflow({ shouldCreateCINode: !cdNodeCreateError })
 
     // RESET
     const resetStateToDefault = () => {
@@ -331,7 +334,7 @@ export const CreateCICDPipeline = ({
                 open={open}
                 width={800}
                 onClose={onClose}
-                onEscape={onClose}
+                onEscape={handleOnEscape}
             >
                 <GenericModal.Header title="Build and deploy from source code" />
                 <GenericModal.Body>

src/Pages/App/Configurations/WorkflowEditor/CreateCICDPipeline/service.ts

@@ -2,7 +2,6 @@ import {
     DeploymentAppTypes,
     DeploymentStrategy,
     getEnvironmentListMinPublic,
-    getIsRequestAborted,
     ModuleNameMap,
     ModuleStatus,
     ReleaseMode,
@@ -128,9 +127,7 @@ export const getCICDPipelineInitData = async (appId: string): Promise<CreateCICD
 
         return { ci, cd }
     } catch (err) {
-        if (!getIsRequestAborted(err)) {
-            showError(err)
-        }
+        showError(err)
         throw err
     }
 }

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

@@ -11,7 +11,7 @@ export const SourceMaterialsSelector = ({
         {repoName && (
             <div className="flex left dc__gap-8">
                 <Icon name="ic-git" color={null} size={24} />
-                <p className="m-0 fs-13 lh-20 fw-6 cn-9">{repoName}</p>
+                <p className="m-0 fs-13 lh-20 fw-6 cn-9 dc__truncate">{repoName}</p>
             </div>
         )}
         <div className="dc__grid-cols-2 dc__gap-12">

src/components/ciPipeline/SourceMaterials.tsx

@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useMemo, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
 import {
     CiPipelineSourceTypeOption,
     InfoBlock,
-    MaterialType,
     SelectPickerProps,
     SourceTypeMap,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -44,24 +43,22 @@ export const SourceMaterials = ({
 }: SourceMaterialsProps) => {
     // STATES
     const [isProviderChanged, setProviderChanged] = useState(false)
-    const [materials, setMaterials] = useState<MaterialType[]>(initialMaterials)
 
     // HOOKS
     const location = useLocation()
 
     // CONSTANTS
     const isLinkedCI = location.pathname.includes('linked-ci')
-    const isMultiGit = materials.length > 1
-
-    useEffect(() => {
+    const isMultiGit = initialMaterials.length > 1
+    const materials = useMemo(() => {
         const webhookTypeMaterial = initialMaterials.find((material) => material.type === SourceTypeMap.WEBHOOK)
 
         if (isMultiGit && webhookTypeMaterial) {
-            setMaterials([webhookTypeMaterial])
-        } else {
-            setMaterials(initialMaterials)
+            return [webhookTypeMaterial]
         }
-    }, [initialMaterials])
+
+        return initialMaterials
+    }, [isMultiGit, initialMaterials])
 
     // HANDLERS
     const onBlur = async () => {
@@ -127,7 +124,7 @@ export const SourceMaterials = ({
         <div className="flexbox-col dc__gap-16">
             <h3 className="m-0 fs-14 lh-20 fw-6 cn-9">Select code source</h3>
             {materials.map((material, index) => {
-                const mat = material
+                const mat = structuredClone(material)
                 const isBranchRegex = mat.type === SourceTypeMap.BranchRegex || mat.isRegex
                 const isBranchFixed = mat.type === SourceTypeMap.BranchFixed && !mat.isRegex
                 const _selectedWebhookEvent =

src/components/ciPipeline/ciPipeline.service.ts

@@ -37,7 +37,7 @@ import {
 import { Routes, ViewType } from '../../config'
 import { getSourceConfig, getWebhookDataMetaConfig } from '../../services/service'
 import { CiPipelineSourceTypeBaseOptions } from '../CIPipelineN/ciPipeline.utils'
-import { CIPipelineBuildType, PatchAction } from './types'
+import { CIPipelineBuildType, CIPipelineInitData, PatchAction } from './types'
 import { safeTrim } from '../../util/Util'
 
 const emptyStepsData = () => {
@@ -64,9 +64,7 @@ export function getInitData(
     includeWebhookData: boolean = false,
     isJobCard: boolean,
     isTemplateView: AppConfigProps['isTemplateView'],
-): Promise<{
-    result: { form: PipelineFormType; loadingData: boolean; isAdvanced: boolean; isBlobStorageConfigured: boolean }
-}> {
+): Promise<CIPipelineInitData> {
     return Promise.all([
         getCIPipelineNameSuggestion(appId, isTemplateView),
         getPipelineMetaConfiguration(appId.toString(), includeWebhookData, true, isJobCard, isTemplateView),

src/components/ciPipeline/types.ts

@@ -423,3 +423,12 @@ export interface WebhookConditionType {
     deleteWebhookCondition: (index: number) => void
     canEditSelectorCondition: boolean
 }
+
+export interface CIPipelineInitData {
+    result: {
+        form: PipelineFormType
+        loadingData: boolean
+        isAdvanced: boolean
+        isBlobStorageConfigured: boolean
+    }
+}

src/css/mixins.scss

@@ -49,3 +49,17 @@
         }
     }
 }
+
+@mixin divider($name, $color) {
+    &__#{$name} {
+        width: 1px;
+        min-height: 16px;
+        background-color: var(#{$color});
+
+        &--horizontal {
+            width: 100%;
+            min-height: 1px;
+            background-color: var(#{$color});
+        }
+    }
+}

src/css/themeUtils.scss

@@ -150,45 +150,8 @@
 }
 
 .divider {
-    &__primary {
-        width: 1px;
-        min-height: 16px;
-        background-color: var(--divider-primary);
-
-        &--horizontal {
-            width: 100%;
-            min-height: 1px;
-            background-color: var(--divider-primary);
-        }
-    }
-
-    &__primary-translucent {
-        width: 1px;
-        min-height: 16px;
-        background-color: var(--divider-primary-translucent);
-    }
-
-    &__secondary {
-        width: 1px;
-        min-height: 16px;
-        background-color: var(--divider-secondary);
-
-        &--horizontal {
-            width: 100%;
-            min-height: 1px;
-            background-color: var(--divider-secondary);
-        }
-    }
-
-    &__secondary-translucent {
-        width: 1px;
-        min-height: 16px;
-        background-color: var(--divider-secondary-translucent);
-
-        &--horizontal {
-            width: 100%;
-            min-height: 1px;
-            background-color: var(--divider-secondary-translucent);
-        }
-    }
+    @include divider("primary", "--divider-primary");
+    @include divider("primary-translucent", "--divider-primary-translucent");
+    @include divider("secondary", "--divider-secondary");
+    @include divider("secondary-translucent", "--divider-secondary-translucent");
 }