Merge pull request #360 from devtron-labs/feat/release-app-configurations

RohitRaj011 · web-flow · commit 1642df5abd4a · 2024-10-21T15:37:47.000+05:30
feat: Release - Configurations Integration
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.4",
+    "version": "0.5.5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Common/CodeEditor/CodeEditor.tsx b/src/Common/CodeEditor/CodeEditor.tsx
@@ -348,7 +348,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                     <CodeEditorPlaceholder customLoader={customLoader} />
                 ) : (
                     <>
-                        {shebang && <div className="shebang">{shebang}</div>}
+                        {shebang && <div className="code-editor__shebang">{shebang}</div>}
                         {state.diffMode ? (
                             <MonacoDiffEditor
                                 original={
diff --git a/src/Common/CodeEditor/codeEditor.scss b/src/Common/CodeEditor/codeEditor.scss
@@ -159,3 +159,9 @@
         z-index: 9;
     }
 }
+
+.code-editor__shebang {
+    padding: 0 52px;
+    color: #151515;
+    opacity: 0.6;
+}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
@@ -29,7 +29,6 @@ export const DeploymentHistoryConfigDiff = ({
     wfrId,
     triggerHistory,
     setFullScreenView,
-    runSource,
     resourceId,
     renderRunSource,
 }: DeploymentHistoryConfigDiffProps) => {
@@ -167,7 +166,7 @@ export const DeploymentHistoryConfigDiff = ({
                     setFullScreenView={setFullScreenView}
                     convertVariables={convertVariables}
                     setConvertVariables={setConvertVariables}
-                    runSource={runSource}
+                    triggerHistory={triggerHistory}
                     resourceId={resourceId}
                     renderRunSource={renderRunSource}
                     hideDiffState={hideDiffState}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
@@ -26,7 +26,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
     previousWfrId,
     convertVariables,
     setConvertVariables,
-    runSource,
+    triggerHistory,
     renderRunSource,
     resourceId,
     isCompareDeploymentConfigNotAvailable,
@@ -60,7 +60,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
     const { currentDeployment, pipelineDeploymentsOptions } = getPipelineDeploymentsOptions({
         pipelineDeployments,
         wfrId,
-        runSource,
+        triggerHistory,
         renderRunSource,
         resourceId,
     })
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
@@ -15,7 +15,7 @@
  */
 
 import { useParams } from 'react-router-dom'
-import { Fragment, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { yamlComparatorBySortOrder } from '@Shared/Helpers'
 import { MODES, Toggle, YAMLStringify } from '../../../../Common'
@@ -111,11 +111,11 @@ const DeploymentHistoryDiffView = ({
         singleValue: DeploymentHistorySingleValue,
         dataTestId: string,
     ) => (
-        <div className={parentClassName}>
-            <div className="cn-6 pt-8 pl-16 pr-16 lh-16" data-testid={dataTestId}>
+        <div className={`${parentClassName} px-16 py-8`}>
+            <div className="cn-6 lh-16" data-testid={dataTestId}>
                 {singleValue.displayName}
             </div>
-            <div className="cn-9 fs-13 pb-8 pl-16 pr-16 lh-20 mh-28">{singleValue.value}</div>
+            <div className="cn-9 fs-13 lh-20 dc__word-break">{singleValue.value}</div>
         </div>
     )
 
@@ -150,7 +150,7 @@ const DeploymentHistoryDiffView = ({
                             const changeBGColor = previousConfigAvailable && currentValue?.value !== baseValue?.value
                             return (
                                 // eslint-disable-next-line react/no-array-index-key
-                                <Fragment key={`deployment-history-diff-view-${index}`}>
+                                <div key={`deployment-history-diff-view-${index}`} className="dc__contents">
                                     {!isUnpublished && currentValue?.value ? (
                                         renderDetailedValue(
                                             !isDeleteDraft && changeBGColor ? 'code-editor-red-diff' : '',
@@ -169,7 +169,7 @@ const DeploymentHistoryDiffView = ({
                                     ) : (
                                         <div className={isDeleteDraft ? 'code-editor-red-diff' : ''} />
                                     )}
-                                </Fragment>
+                                </div>
                             )
                         },
                     )}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
@@ -76,10 +76,10 @@ export const renderPipelineDeploymentOptionDescription = ({
     renderRunSource,
     resourceId,
     runSource,
-}: Pick<History, 'triggeredBy' | 'triggeredByEmail' | 'artifact' | 'stage'> &
-    Pick<DeploymentHistoryConfigDiffProps, 'renderRunSource' | 'resourceId' | 'runSource'>) => (
+}: Pick<History, 'triggeredBy' | 'triggeredByEmail' | 'artifact' | 'stage' | 'runSource'> &
+    Pick<DeploymentHistoryConfigDiffProps, 'renderRunSource' | 'resourceId'>) => (
     <div className="flexbox-col dc__gap-4">
-        <p className="m-0 fs-12 lh-20 cn-7 flex dc__gap-4">
+        <p className="m-0 fs-12 lh-20 cn-7 flex left dc__gap-4">
             <span className="dc__capitalize">{stage}</span>
             <span className="dc__bullet dc__bullet--d2" />
             {artifact && (
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts
@@ -3,15 +3,14 @@ import { Dispatch, SetStateAction } from 'react'
 import { DeploymentConfigDiffProps } from '@Shared/Components/DeploymentConfigDiff'
 import { EnvResourceType } from '@Shared/Services'
 
-import { History, HistoryLogsProps, RunSourceType } from '../types'
+import { History, HistoryLogsProps } from '../types'
 
 export interface DeploymentHistoryConfigDiffProps
     extends Required<Pick<HistoryLogsProps, 'renderRunSource' | 'resourceId'>> {
     appName: string
     envName: string
     pipelineId: number
     wfrId: number
-    runSource: RunSourceType
     triggerHistory: Map<number, History>
     setFullScreenView: (fullscreen: boolean) => void
 }
@@ -23,7 +22,7 @@ export type DeploymentHistoryDiffDetailedProps = Pick<
     Required<
         Pick<
             DeploymentHistoryConfigDiffProps,
-            'setFullScreenView' | 'wfrId' | 'envName' | 'renderRunSource' | 'resourceId' | 'runSource'
+            'setFullScreenView' | 'wfrId' | 'envName' | 'renderRunSource' | 'resourceId' | 'triggerHistory'
         >
     > & {
         pipelineDeployments: History[]
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts
@@ -31,8 +31,8 @@ export const getPipelineDeploymentsOptions = ({
     wfrId,
     renderRunSource,
     resourceId,
-    runSource,
-}: Required<Pick<DeploymentHistoryConfigDiffProps, 'renderRunSource' | 'runSource' | 'resourceId'>> & {
+    triggerHistory,
+}: Required<Pick<DeploymentHistoryConfigDiffProps, 'renderRunSource' | 'resourceId' | 'triggerHistory'>> & {
     pipelineDeployments: History[]
     wfrId: number
 }) => {
@@ -50,7 +50,7 @@ export const getPipelineDeploymentsOptions = ({
                 artifact,
                 renderRunSource,
                 resourceId,
-                runSource,
+                runSource: triggerHistory.get(id).runSource,
             }),
             startIcon: renderPipelineDeploymentStatusIcon(status),
         }),
diff --git a/src/Shared/Components/CICDHistory/TriggerOutput.tsx b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
@@ -601,7 +601,6 @@ const HistoryLogs: React.FC<HistoryLogsProps> = ({
                                 setFullScreenView={setFullScreenView}
                                 resourceId={resourceId}
                                 renderRunSource={renderRunSource}
-                                runSource={triggerDetails.runSource}
                             />
                         </Route>
                     )}
diff --git a/src/Shared/Components/CICDHistory/cicdHistory.scss b/src/Shared/Components/CICDHistory/cicdHistory.scss
@@ -114,8 +114,7 @@
 
 .deployment-diff__upper {
     display: grid;
-    grid-template-columns: 50% 50%;
-    grid-template-rows: auto;
+    grid-template-columns: repeat(2, 1fr);
     position: relative;
 
     &::after {
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
@@ -19,7 +19,9 @@ export const DeploymentConfigDiff = ({
     renderedInDrawer,
     ...resProps
 }: DeploymentConfigDiffProps) => (
-    <div className={`deployment-config-diff ${renderedInDrawer ? 'deployment-config-diff--drawer' : ''}`}>
+    <div
+        className={`deployment-config-diff dc__overflow-auto ${renderedInDrawer ? 'deployment-config-diff--drawer' : ''}`}
+    >
         <DeploymentConfigDiffNavigation
             isLoading={isLoading}
             collapsibleNavList={collapsibleNavList}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -5,6 +5,7 @@ import {
     ConfigMapSecretDataConfigDatumDTO,
     DeploymentTemplateDTO,
     EnvResourceType,
+    TemplateListDTO,
 } from '@Shared/Services'
 
 import { ManifestTemplateDTO } from '@Pages/Applications'
@@ -152,10 +153,14 @@ export type AppEnvDeploymentConfigListParams<IsManifestView> = (IsManifestView e
     ? {
           currentList: ManifestTemplateDTO
           compareList: ManifestTemplateDTO
+          compareToTemplateOptions?: never
+          compareWithTemplateOptions?: never
       }
     : {
           currentList: AppEnvDeploymentConfigDTO
           compareList: AppEnvDeploymentConfigDTO
+          compareToTemplateOptions?: TemplateListDTO[]
+          compareWithTemplateOptions?: TemplateListDTO[]
       }) & {
     getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string
     isManifestView?: IsManifestView
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -40,6 +40,22 @@ export const getDeploymentTemplateData = (data: DeploymentTemplateDTO) => {
     )
 }
 
+const getDeploymentTemplateAppMetricsAndTemplateVersion = (
+    data: DeploymentTemplateDTO,
+    templateOptions: TemplateListDTO[],
+) => {
+    const parsedDraftData = JSON.parse(data?.deploymentDraftData?.configData[0].draftMetadata.data || null)
+    const draftTemplateVersion = templateOptions?.find(
+        ({ chartRefId }) => parsedDraftData?.chartRefId === chartRefId,
+    )?.chartVersion
+
+    return {
+        isAppMetricsEnabled:
+            parsedDraftData || data ? parsedDraftData?.isAppMetricsEnabled || data?.isAppMetricsEnabled || false : null,
+        templateVersion: draftTemplateVersion || data?.templateVersion,
+    }
+}
+
 /**
  * Retrieves the draft data from the given configuration data object.
  *
@@ -338,7 +354,7 @@ const getDiffViewData = (
     }
 }
 
-const getDeploymentTemplateDiffViewData = (data: DeploymentTemplateDTO | null) => {
+const getDeploymentTemplateDiffViewData = (data: DeploymentTemplateDTO | null, templateOptions: TemplateListDTO[]) => {
     const _data = getDeploymentTemplateData(data)
     const codeEditorValue = {
         displayName: 'data',
@@ -347,8 +363,7 @@ const getDeploymentTemplateDiffViewData = (data: DeploymentTemplateDTO | null) =
 
     const diffViewData = prepareHistoryData(
         {
-            ...(data || {}),
-            isAppMetricsEnabled: data ? data.isAppMetricsEnabled || false : null,
+            ...getDeploymentTemplateAppMetricsAndTemplateVersion(data, templateOptions),
             codeEditorValue,
         },
         DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP.DEPLOYMENT_TEMPLATE.VALUE,
@@ -516,12 +531,39 @@ const getConfigMapSecretData = (
     return deploymentConfig
 }
 
-const getDeploymentTemplateResolvedData = (deploymentTemplate: DeploymentTemplateDTO) => {
+const getDeploymentTemplateResolvedData = (deploymentTemplate: DeploymentTemplateDTO): DeploymentTemplateDTO => {
     try {
         if (deploymentTemplate.deploymentDraftData) {
-            return JSON.parse(deploymentTemplate.deploymentDraftData.configData[0].draftMetadata.draftResolvedValue)
+            const parsedDraftResolvedData = JSON.parse(
+                deploymentTemplate.deploymentDraftData.configData[0].draftMetadata.draftResolvedValue,
+            )
+
+            return {
+                ...deploymentTemplate,
+                deploymentDraftData: {
+                    ...deploymentTemplate.deploymentDraftData,
+                    configData: [
+                        {
+                            ...deploymentTemplate.deploymentDraftData.configData[0],
+                            draftMetadata: {
+                                ...deploymentTemplate.deploymentDraftData.configData[0].draftMetadata,
+                                data: JSON.stringify({
+                                    ...JSON.parse(
+                                        deploymentTemplate.deploymentDraftData.configData[0].draftMetadata.data,
+                                    ),
+                                    envOverrideValues: parsedDraftResolvedData,
+                                }),
+                            },
+                        },
+                    ],
+                },
+            }
+        }
+
+        return {
+            ...deploymentTemplate,
+            data: deploymentTemplate.resolvedValue,
         }
-        return deploymentTemplate.resolvedValue
     } catch {
         return null
     }
@@ -545,19 +587,9 @@ const getConfigDataWithResolvedDeploymentTemplate = (
         return data
     }
 
-    const deploymentTemplateResolvedData = getDeploymentTemplateResolvedData(data.deploymentTemplate)
-
     return {
         ...data,
-        deploymentTemplate: {
-            ...data.deploymentTemplate,
-            ...(deploymentTemplateResolvedData
-                ? {
-                      data: deploymentTemplateResolvedData,
-                      deploymentDraftData: null,
-                  }
-                : {}),
-        },
+        deploymentTemplate: getDeploymentTemplateResolvedData(data.deploymentTemplate),
     }
 }
 
@@ -579,6 +611,8 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
     getNavItemHref,
     isManifestView,
     convertVariables = false,
+    compareToTemplateOptions,
+    compareWithTemplateOptions,
 }: AppEnvDeploymentConfigListParams<ManifestView>): {
     configList: DeploymentConfigDiffProps['configList']
     navList: DeploymentConfigDiffProps['navList']
@@ -593,8 +627,14 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
             compareList as AppEnvDeploymentConfigListParams<false>['compareList'],
             convertVariables,
         )
-        const currentDeploymentData = getDeploymentTemplateDiffViewData(compareToObject.deploymentTemplate)
-        const compareDeploymentData = getDeploymentTemplateDiffViewData(compareWithObject.deploymentTemplate)
+        const currentDeploymentData = getDeploymentTemplateDiffViewData(
+            compareToObject.deploymentTemplate,
+            compareToTemplateOptions,
+        )
+        const compareDeploymentData = getDeploymentTemplateDiffViewData(
+            compareWithObject.deploymentTemplate,
+            compareWithTemplateOptions,
+        )
 
         const deploymentTemplateData = {
             id: EnvResourceType.DeploymentTemplate,

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "0.5.4",`
	`3`	`+ "version": "0.5.5",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -159,3 +159,9 @@`
`159`	`159`	`z-index: 9;`
`160`	`160`	`}`
`161`	`161`	`}`
	`162`	`+`
	`163`	`+.code-editor__shebang {`
	`164`	`+ padding: 0 52px;`
	`165`	`+ color: #151515;`
	`166`	`+ opacity: 0.6;`
	`167`	`+}`