feat: Release - Configurations Integration

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",

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={

src/Common/CodeEditor/codeEditor.scss

@@ -159,3 +159,9 @@
         z-index: 9;
     }
 }
+
+.code-editor__shebang {
+    padding: 0 52px;
+    color: #151515;
+    opacity: 0.6;
+}

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}

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,
     })

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>
                             )
                         },
                     )}

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 && (

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[]

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),
         }),

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>
                     )}

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 {

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}

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

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,