Merge pull request #1426 from devtron-labs/custom-tag-v2

feat: Custom tag v2

Author: shivani170

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.40",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.41",
         "@sentry/browser": "^7.3.1",
         "@sentry/integrations": "^7.3.1",
         "@sentry/tracing": "^7.3.1",

src/components/CIPipelineN/AdvancedConfigOptions.tsx

@@ -19,14 +19,14 @@ import { pipelineContext } from '../workflowEditor/workflowEditor'
 export default function AdvancedConfigOptions({
     ciPipeline,
     setDockerConfigOverridden,
-    imageTagValue,
-    setImageTagValue
 }: AdvancedConfigOptionsProps) {
     const {
         formData,
         setFormData,
         loadingState,
         setLoadingState,
+        formDataErrorObj,
+        setFormDataErrorObj
     } = useContext(pipelineContext)
     const [collapsedSection, setCollapsedSection] = useState<boolean>(false)
     const [allowOverride, setAllowOverride] = useState<boolean>(ciPipeline?.isDockerConfigOverridden ?? false)
@@ -276,7 +276,13 @@ export default function AdvancedConfigOptions({
                                     updateDockerConfigOverride={updateDockerConfigOverride}
                                 />
                             </div>
-                            <CustomImageTags imageTagValue={imageTagValue} setImageTagValue={setImageTagValue} />
+                            <CustomImageTags
+                                savedTagPattern={parentState.selectedCIPipeline.customTag?.tagPattern}
+                                formData={formData}
+                                setFormData={setFormData}
+                                formDataErrorObj={formDataErrorObj}
+                                setFormDataErrorObj={setFormDataErrorObj}
+                            />
 
                             {renderDockerArgs()}
                         </>

src/components/CIPipelineN/Build.tsx

@@ -19,8 +19,6 @@ export function Build({
     setDockerConfigOverridden,
     isJobView,
     getPluginData,
-    imageTagValue,
-    setImageTagValue,
 }: BuildType) {
     const {
         formData,
@@ -268,8 +266,6 @@ export function Build({
                     <AdvancedConfigOptions
                         ciPipeline={ciPipeline}
                         setDockerConfigOverridden={setDockerConfigOverridden}
-                        imageTagValue={imageTagValue}
-                        setImageTagValue={setImageTagValue}
                     />
                 </>
             )}

src/components/CIPipelineN/CIPipeline.tsx

@@ -58,7 +58,6 @@ import { PipelineFormDataErrorType, PipelineFormType } from '../workflowEditor/t
 import { Environment } from '../cdPipeline/cdPipeline.types'
 import { getEnvironmentListMinPublic } from '../../services/service'
 import { DEFAULT_ENV } from '../app/details/triggerView/Constants'
-import { ImageTagType } from './CustomImageTag.type'
 
 const processPluginData = importComponentFromFELibrary('processPluginData', null, 'function')
 const validatePlugins = importComponentFromFELibrary('validatePlugins', null, 'function')
@@ -132,9 +131,10 @@ export default function CIPipeline({
         },
         customTag: {
             tagPattern: '',
-            counterX: '',
+            counterX: '0',
         },
-        defaultTag: []
+        defaultTag: [],
+        enableCustomTag: false
     })
     const [formDataErrorObj, setFormDataErrorObj] = useState<PipelineFormDataErrorType>({
         name: { isValid: true },
@@ -172,12 +172,15 @@ export default function CIPipeline({
         scanEnabled: false,
         environmentId: 0,
         pipelineType: "",
+        customTag: {
+            tagPattern: '',
+            counterX: '',
+        },
     })
     const validationRules = new ValidationRules()
     const [isDockerConfigOverridden, setDockerConfigOverridden] = useState(false)
     const [mandatoryPluginData, setMandatoryPluginData] = useState<MandatoryPluginDataType>(null)
     const selectedBranchRef = useRef(null)
-    const [imageTagValue, setImageTagValue] = useState<string>(ImageTagType.Default)
 
     const mandatoryPluginsMap: Record<number, MandatoryPluginDetailType> = useMemo(() => {
         const _mandatoryPluginsMap: Record<number, MandatoryPluginDetailType> = {}
@@ -301,7 +304,6 @@ export default function CIPipeline({
                     validateStage(BuildStageVariable.Build, ciResponse.form)
                     validateStage(BuildStageVariable.PostBuild, ciResponse.form)
                     setFormData(ciResponse.form)
-                    setImageTagValue(ciResponse.form.customTag.tagPattern.length > 0 ? ImageTagType.Custom : ImageTagType.Default)
                     setCIPipeline(ciResponse.ciPipeline)
                     setIsAdvanced(true)
                     setPageState(ViewType.FORM)
@@ -575,7 +577,6 @@ export default function CIPipeline({
             false,
             formData.webhookConditionList,
             formData.ciPipelineSourceTypeOptions,
-            imageTagValue
         )
             .then((response) => {
                 if (response) {
@@ -813,8 +814,6 @@ export default function CIPipeline({
                                     setDockerConfigOverridden={setDockerConfigOverridden}
                                     isJobView={isJobCard}
                                     getPluginData={getPluginData}
-                                    setImageTagValue={setImageTagValue}
-                                    imageTagValue={imageTagValue}
                                 />
                             </Route>
                             <Redirect to={`${path}/build`} />

src/components/CIPipelineN/CustomImageTag.type.ts

@@ -1,16 +1,19 @@
 import React from 'react'
-
-export const ImageTagType = {
-    Default: 'DEFAULT',
-    Custom: 'CUSTOM',
-}
+import { PipelineFormDataErrorType, PipelineFormType } from '../workflowEditor/types'
+import { OptionType } from '@devtron-labs/devtron-fe-common-lib'
 
 export interface CustomTagType {
     tagPattern: string
     counterX: string
 }
 
 export interface CustomImageTagsType {
-    imageTagValue: string
-    setImageTagValue: React.Dispatch<React.SetStateAction<string>>
+    savedTagPattern?: string
+    formData: PipelineFormType
+    setFormData: React.Dispatch<React.SetStateAction<PipelineFormType>>
+    formDataErrorObj: PipelineFormDataErrorType
+    setFormDataErrorObj: React.Dispatch<React.SetStateAction<PipelineFormDataErrorType>>
+    isCDBuild?: boolean
+    selectedCDStageTypeValue?: OptionType
+    setSelectedCDStageTypeValue?: React.Dispatch<React.SetStateAction<OptionType>>
 }