From 38c50932170db856192be47e0d5cd8582fa89ac3 Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Tue, 8 Oct 2024 13:08:10 +0530
Subject: [PATCH 01/11] feat: DeploymentConfigDiff - logic refactor for
 resolving deployment template data as per API changes

---
 .../DeploymentHistoryConfigDiff.tsx           | 103 +++---------------
 .../DeploymentHistoryDiffView.tsx             |   2 +-
 .../DeploymentConfigDiff.types.ts             |   2 -
 .../DeploymentConfigDiff.utils.tsx            |  49 +++++----
 src/Shared/Services/app.service.ts            |   6 +-
 src/Shared/Services/app.types.ts              |   5 -
 6 files changed, 48 insertions(+), 119 deletions(-)

diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
index e006e7941..2fa335e30 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
@@ -1,7 +1,7 @@
-import { useMemo, useRef, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
 
-import { getAppEnvDeploymentConfigList, getDeploymentTemplateValues } from '@Shared/Components/DeploymentConfigDiff'
+import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
 import { useAsync } from '@Common/Helper'
 import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
 import { groupArrayByObjectKey } from '@Shared/Helpers'
@@ -9,7 +9,6 @@ import ErrorScreenManager from '@Common/ErrorScreenManager'
 import { Progressing } from '@Common/Progressing'
 import { useUrlFilters } from '@Common/Hooks'
 
-import { abortPreviousRequests, getIsRequestAborted } from '@Common/Api'
 import { DeploymentHistoryConfigDiffCompare } from './DeploymentHistoryConfigDiffCompare'
 import { DeploymentHistoryConfigDiffProps, DeploymentHistoryConfigDiffQueryParams } from './types'
 import { getPipelineDeploymentsWfrIds, getPipelineDeployments, parseDeploymentHistoryDiffSearchParams } from './utils'
@@ -38,9 +37,6 @@ export const DeploymentHistoryConfigDiff = ({
     )
     const isPreviousDeploymentConfigAvailable = !!previousWfrId
 
-    // REFS
-    const deploymentTemplateResolvedDataAbortControllerRef = useRef(new AbortController())
-
     // URL FILTERS
     const { compareWfrId } = useUrlFilters<string, DeploymentHistoryConfigDiffQueryParams>({
         parseSearchParams: parseDeploymentHistoryDiffSearchParams(previousWfrId),
@@ -83,68 +79,13 @@ export const DeploymentHistoryConfigDiff = ({
         [currentWfrId, compareWfrId],
     )
 
-    const [
-        deploymentTemplateResolvedDataLoader,
-        deploymentTemplateResolvedData,
-        deploymentTemplateResolvedDataErr,
-        reloadDeploymentTemplateResolvedData,
-    ] = useAsync(
-        () =>
-            abortPreviousRequests(
-                () =>
-                    Promise.all([
-                        getAppEnvDeploymentConfig({
-                            params: {
-                                configArea: 'ResolveData',
-                                appName,
-                                envName,
-                            },
-                            payload: {
-                                values: getDeploymentTemplateValues(
-                                    compareDeploymentConfig[0].result?.deploymentTemplate,
-                                ),
-                            },
-                            signal: deploymentTemplateResolvedDataAbortControllerRef.current?.signal,
-                        }),
-                        getAppEnvDeploymentConfig({
-                            params: {
-                                configArea: 'ResolveData',
-                                appName,
-                                envName,
-                            },
-                            payload: {
-                                values: getDeploymentTemplateValues(
-                                    compareDeploymentConfig[1].result?.deploymentTemplate,
-                                ),
-                            },
-                            signal: deploymentTemplateResolvedDataAbortControllerRef.current?.signal,
-                        }),
-                    ]),
-                deploymentTemplateResolvedDataAbortControllerRef,
-            ),
-        [convertVariables, compareDeploymentConfig],
-        convertVariables && !!compareDeploymentConfig,
-    )
-
     // METHODS
-    const reload = () => {
-        reloadCompareDeploymentConfig()
-        reloadDeploymentTemplateResolvedData()
-    }
-
     const getNavItemHref = (resourceType: EnvResourceType, resourceName: string) =>
         `${generatePath(path, { ...params })}/${resourceType}${resourceName ? `/${resourceName}` : ''}${search}`
 
     // Generate the deployment history config list
     const deploymentConfigList = useMemo(() => {
-        const isDeploymentTemplateLoaded = !deploymentTemplateResolvedDataLoader && deploymentTemplateResolvedData
-        const isComparisonDataLoaded = !compareDeploymentConfigLoader && compareDeploymentConfig
-
-        const shouldLoadData = convertVariables
-            ? isComparisonDataLoaded && isDeploymentTemplateLoaded
-            : isComparisonDataLoaded
-
-        if (shouldLoadData) {
+        if (!compareDeploymentConfigLoader && compareDeploymentConfig) {
             const compareList = isPreviousDeploymentConfigAvailable
                 ? compareDeploymentConfig[1].result
                 : {
@@ -160,46 +101,29 @@ export const DeploymentHistoryConfigDiff = ({
                 compareList,
                 getNavItemHref,
                 convertVariables,
-                ...(convertVariables
-                    ? {
-                          currentDeploymentTemplateResolvedData: deploymentTemplateResolvedData[0].result,
-                          compareDeploymentTemplateResolvedData: deploymentTemplateResolvedData[1].result,
-                      }
-                    : {}),
             })
             return configData
         }
 
         return null
-    }, [
-        isPreviousDeploymentConfigAvailable,
-        compareDeploymentConfigErr,
-        compareDeploymentConfig,
-        convertVariables,
-        deploymentTemplateResolvedDataLoader,
-        deploymentTemplateResolvedData,
-    ])
+    }, [isPreviousDeploymentConfigAvailable, compareDeploymentConfigErr, compareDeploymentConfig, convertVariables])
 
     const groupedDeploymentConfigList = useMemo(
         () => (deploymentConfigList ? groupArrayByObjectKey(deploymentConfigList.configList, 'groupHeader') : []),
         [deploymentConfigList],
     )
 
-    const isLoading = compareDeploymentConfigLoader || deploymentTemplateResolvedDataLoader
-    const isError =
-        compareDeploymentConfigErr ||
-        (deploymentTemplateResolvedDataErr && !getIsRequestAborted(deploymentTemplateResolvedDataErr))
-
+    const isLoading = compareDeploymentConfigLoader || (!compareDeploymentConfigErr && !deploymentConfigList)
     return (
         <Switch>
             <Route path={`${path}/:resourceType(${Object.values(EnvResourceType).join('|')})/:resourceName?`}>
                 <DeploymentHistoryConfigDiffCompare
                     {...deploymentConfigList}
-                    isLoading={isLoading || (!isError && !deploymentConfigList)}
+                    isLoading={isLoading}
                     errorConfig={{
-                        code: compareDeploymentConfigErr?.code || deploymentTemplateResolvedDataErr?.code,
-                        error: isError && !isLoading,
-                        reload,
+                        code: compareDeploymentConfigErr?.code,
+                        error: compareDeploymentConfigErr && !compareDeploymentConfigLoader,
+                        reload: reloadCompareDeploymentConfig,
                     }}
                     envName={envName}
                     wfrId={wfrId}
@@ -214,11 +138,14 @@ export const DeploymentHistoryConfigDiff = ({
                 />
             </Route>
             <Route>
-                {isError && !isLoading ? (
-                    <ErrorScreenManager code={compareDeploymentConfigErr?.code} reload={reload} />
+                {compareDeploymentConfigErr && !compareDeploymentConfigLoader ? (
+                    <ErrorScreenManager
+                        code={compareDeploymentConfigErr?.code}
+                        reload={reloadCompareDeploymentConfig}
+                    />
                 ) : (
                     <div className="p-16 flexbox-col dc__gap-16 bcn-0 h-100">
-                        {isLoading || (!isError && !deploymentConfigList) ? (
+                        {isLoading ? (
                             <Progressing fullHeight size={48} />
                         ) : (
                             <>
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
index 3e98d5e6d..5b48a0068 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
@@ -86,7 +86,7 @@ const DeploymentHistoryDiffView = ({
 
     const renderDeploymentDiffViaCodeEditor = () => (
         <CodeEditor
-            key={`${sortBy}-${sortOrder}`}
+            key={JSON.stringify(editorValuesLHS)}
             value={editorValuesRHS}
             defaultValue={editorValuesLHS}
             adjustEditorHeightToContent
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
index 8ff0aee29..a8b593f7c 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -151,6 +151,4 @@ export type AppEnvDeploymentConfigListParams<IsManifestView> = (IsManifestView e
     getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string
     isManifestView?: IsManifestView
     convertVariables?: boolean
-    currentDeploymentTemplateResolvedData?: AppEnvDeploymentConfigDTO
-    compareDeploymentTemplateResolvedData?: AppEnvDeploymentConfigDTO
 }
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
index 814748e0e..86bd91338 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -515,20 +515,42 @@ const getConfigMapSecretData = (
     return deploymentConfig
 }
 
+const getDeploymentTemplateResolvedData = (deploymentTemplate: DeploymentTemplateDTO) => {
+    try {
+        if (deploymentTemplate.deploymentDraftData) {
+            return JSON.parse(deploymentTemplate.deploymentDraftData.configData[0].draftMetadata.draftResolvedValue)
+        }
+        return deploymentTemplate.resolvedValue
+    } catch {
+        return null
+    }
+}
+
 const getConfigDataWithResolvedDeploymentTemplate = (
-    data: AppEnvDeploymentConfigListParams<false>['currentList'],
-    resolvedData: AppEnvDeploymentConfigListParams<false>['currentDeploymentTemplateResolvedData'],
-) =>
-    data && resolvedData?.deploymentTemplate
+    data: AppEnvDeploymentConfigListParams<false>['compareList'],
+    convertVariables: boolean,
+) => {
+    if (!data.deploymentTemplate) {
+        return data
+    }
+
+    const deploymentTemplateResolvedData = getDeploymentTemplateResolvedData(data.deploymentTemplate)
+
+    return convertVariables
         ? {
               ...data,
               deploymentTemplate: {
                   ...data.deploymentTemplate,
-                  deploymentDraftData: null,
-                  data: resolvedData.deploymentTemplate.resolvedValue,
+                  ...(deploymentTemplateResolvedData
+                      ? {
+                            data: deploymentTemplateResolvedData,
+                            deploymentDraftData: null,
+                        }
+                      : {}),
               },
           }
         : data
+}
 
 /**
  * Generates a list of deployment configurations for application environments and identifies changes between the current and compare lists.
@@ -548,8 +570,6 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
     getNavItemHref,
     isManifestView,
     convertVariables = false,
-    currentDeploymentTemplateResolvedData,
-    compareDeploymentTemplateResolvedData,
 }: AppEnvDeploymentConfigListParams<ManifestView>): {
     configList: DeploymentConfigDiffProps['configList']
     navList: DeploymentConfigDiffProps['navList']
@@ -558,11 +578,11 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
     if (!isManifestView) {
         const compareToObject = getConfigDataWithResolvedDeploymentTemplate(
             currentList as AppEnvDeploymentConfigListParams<false>['currentList'],
-            currentDeploymentTemplateResolvedData,
+            convertVariables,
         )
         const compareWithObject = getConfigDataWithResolvedDeploymentTemplate(
             compareList as AppEnvDeploymentConfigListParams<false>['compareList'],
-            compareDeploymentTemplateResolvedData,
+            convertVariables,
         )
         const currentDeploymentData = getDeploymentTemplateDiffViewData(compareToObject.deploymentTemplate)
         const compareDeploymentData = getDeploymentTemplateDiffViewData(compareWithObject.deploymentTemplate)
@@ -736,15 +756,6 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
     }
 }
 
-export const getDeploymentTemplateValues = (deploymentTemplate: DeploymentTemplateDTO) => {
-    try {
-        const data = getDeploymentTemplateData(deploymentTemplate)
-        return JSON.stringify(data)
-    } catch {
-        return null
-    }
-}
-
 export const getDefaultVersionAndPreviousDeploymentOptions = (data: TemplateListDTO[]) =>
     data.reduce<{ previousDeployments: TemplateListDTO[]; defaultVersions: TemplateListDTO[] }>(
         (acc, curr) => ({
diff --git a/src/Shared/Services/app.service.ts b/src/Shared/Services/app.service.ts
index 2978f4120..a244b84f6 100644
--- a/src/Shared/Services/app.service.ts
+++ b/src/Shared/Services/app.service.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ROUTES, ResponseType, get, getUrlWithSearchParams, post, showError } from '../../Common'
+import { ROUTES, ResponseType, get, getUrlWithSearchParams, showError } from '../../Common'
 import {
     CIMaterialInfoDTO,
     CIMaterialInfoType,
@@ -57,11 +57,9 @@ export const getArtifactInfo = async (
 
 export const getAppEnvDeploymentConfig = ({
     params,
-    payload,
     signal,
 }: {
     params: AppEnvDeploymentConfigPayloadType
-    payload?: { values: string }
     signal?: AbortSignal
 }): Promise<ResponseType<AppEnvDeploymentConfigDTO>> =>
-    post(getUrlWithSearchParams(ROUTES.CONFIG_DATA, params), payload, { signal })
+    get(getUrlWithSearchParams(ROUTES.CONFIG_DATA, params), { signal })
diff --git a/src/Shared/Services/app.types.ts b/src/Shared/Services/app.types.ts
index 68f84a040..2f4a8b4d3 100644
--- a/src/Shared/Services/app.types.ts
+++ b/src/Shared/Services/app.types.ts
@@ -252,11 +252,6 @@ export type AppEnvDeploymentConfigPayloadType =
           resourceName?: string
           configArea?: 'AppConfiguration'
       }
-    | {
-          appName: string
-          envName: string
-          configArea: 'ResolveData'
-      }
     | {
           appName: string
           envName: string

From e3a92750953d37a3d2598209e020fa7ecb74fafd Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Sun, 13 Oct 2024 15:31:10 +0530
Subject: [PATCH 02/11] feat: DeploymentHistoryConfigDiff - uat changes, code
 refactor

---
 .../DeploymentHistoryConfigDiff.tsx           | 20 +++++----
 .../DeploymentHistoryConfigDiffCompare.tsx    | 45 +++++++++++--------
 .../DeploymentHistoryDiffView.tsx             |  9 ++--
 .../DeploymentHistoryConfigDiff/helpers.tsx   |  6 +--
 .../DeploymentHistoryConfigDiff/utils.ts      |  7 ++-
 src/Shared/Components/CICDHistory/types.tsx   |  7 ++-
 .../CollapsibleList.component.tsx             |  2 +-
 .../DeploymentConfigDiff.types.ts             |  2 +
 .../DeploymentConfigDiffMain.tsx              | 15 +++++--
 .../DeploymentConfigDiffNavigation.tsx        |  2 +-
 src/Shared/Services/app.types.ts              |  1 +
 11 files changed, 74 insertions(+), 42 deletions(-)

diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
index 2fa335e30..9e46bd163 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react'
 import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
 
 import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
-import { useAsync } from '@Common/Helper'
+import { capitalizeFirstLetter, useAsync } from '@Common/Helper'
 import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
 import { groupArrayByObjectKey } from '@Shared/Helpers'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
@@ -114,17 +114,20 @@ export const DeploymentHistoryConfigDiff = ({
     )
 
     const isLoading = compareDeploymentConfigLoader || (!compareDeploymentConfigErr && !deploymentConfigList)
+    const errorConfig = {
+        code: compareDeploymentConfigErr?.code,
+        error: compareDeploymentConfigErr && !compareDeploymentConfigLoader,
+        message: capitalizeFirstLetter(compareDeploymentConfigErr?.errors[0]?.userMessage || ''),
+        reload: reloadCompareDeploymentConfig,
+    }
+
     return (
         <Switch>
             <Route path={`${path}/:resourceType(${Object.values(EnvResourceType).join('|')})/:resourceName?`}>
                 <DeploymentHistoryConfigDiffCompare
                     {...deploymentConfigList}
                     isLoading={isLoading}
-                    errorConfig={{
-                        code: compareDeploymentConfigErr?.code,
-                        error: compareDeploymentConfigErr && !compareDeploymentConfigLoader,
-                        reload: reloadCompareDeploymentConfig,
-                    }}
+                    errorConfig={errorConfig}
                     envName={envName}
                     wfrId={wfrId}
                     previousWfrId={previousWfrId}
@@ -140,8 +143,9 @@ export const DeploymentHistoryConfigDiff = ({
             <Route>
                 {compareDeploymentConfigErr && !compareDeploymentConfigLoader ? (
                     <ErrorScreenManager
-                        code={compareDeploymentConfigErr?.code}
-                        reload={reloadCompareDeploymentConfig}
+                        code={errorConfig.code}
+                        subtitle={errorConfig.message}
+                        reload={errorConfig.reload}
                     />
                 ) : (
                     <div className="p-16 flexbox-col dc__gap-16 bcn-0 h-100">
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
index 51ec5ae79..6578cfee1 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
@@ -64,24 +64,32 @@ export const DeploymentHistoryConfigDiffCompare = ({
     }
 
     const selectorsConfig: DeploymentConfigDiffProps['selectorsConfig'] = {
-        primaryConfig: [
-            {
-                id: 'deployment-config-diff-deployment-selector',
-                type: 'selectPicker',
-                selectPickerProps: {
-                    name: 'deployment-config-diff-deployment-selector',
-                    inputId: 'deployment-config-diff-deployment-selector',
-                    classNamePrefix: 'deployment-config-diff-deployment-selector',
-                    variant: SelectPickerVariantType.BORDER_LESS,
-                    options: pipelineDeploymentsOptions,
-                    placeholder: 'Select Deployment',
-                    value: getSelectPickerOptionByValue(pipelineDeploymentsOptions, compareWfrId, null),
-                    onChange: deploymentSelectorOnChange,
-                    showSelectedOptionIcon: false,
-                    menuSize: ComponentSizeType.large,
-                },
-            },
-        ],
+        primaryConfig: pipelineDeploymentsOptions.length
+            ? [
+                  {
+                      id: 'deployment-config-diff-deployment-selector',
+                      type: 'selectPicker',
+                      selectPickerProps: {
+                          name: 'deployment-config-diff-deployment-selector',
+                          inputId: 'deployment-config-diff-deployment-selector',
+                          classNamePrefix: 'deployment-config-diff-deployment-selector',
+                          variant: SelectPickerVariantType.BORDER_LESS,
+                          options: pipelineDeploymentsOptions,
+                          placeholder: 'Select Deployment',
+                          value: getSelectPickerOptionByValue(pipelineDeploymentsOptions, compareWfrId, null),
+                          onChange: deploymentSelectorOnChange,
+                          showSelectedOptionIcon: false,
+                          menuSize: ComponentSizeType.large,
+                      },
+                  },
+              ]
+            : [
+                  {
+                      id: 'no-previous-deployment',
+                      type: 'string',
+                      text: 'No previous deployment',
+                  },
+              ],
         secondaryConfig: [
             {
                 id: 'base-configuration',
@@ -109,6 +117,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
             {...props}
             showDetailedDiffState
             navHeading={`Comparing ${envName}`}
+            headerText={!pipelineDeploymentsOptions.length ? '' : undefined} // using `undefined` to ensure component picks default value
             navHelpText={
                 compareWfrId
                     ? `Showing diff in configuration deployed on: ${pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId).label} & ${currentDeployment}`
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
index 5b48a0068..95f227858 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
@@ -34,10 +34,11 @@ const DeploymentHistoryDiffView = ({
     isUnpublished,
     isDeleteDraft,
     rootClassName,
-    sortBy = '',
-    sortOrder = null,
+    sortingConfig,
+    codeEditorKey,
 }: DeploymentTemplateHistoryType) => {
     const { historyComponent, historyComponentName } = useParams<DeploymentHistoryParamsType>()
+    const { sortBy, sortOrder } = sortingConfig ?? { sortBy: '', sortOrder: null }
 
     const [convertVariables, setConvertVariables] = useState(false)
 
@@ -86,7 +87,7 @@ const DeploymentHistoryDiffView = ({
 
     const renderDeploymentDiffViaCodeEditor = () => (
         <CodeEditor
-            key={JSON.stringify(editorValuesLHS)}
+            key={codeEditorKey}
             value={editorValuesRHS}
             defaultValue={editorValuesLHS}
             adjustEditorHeightToContent
@@ -177,7 +178,7 @@ const DeploymentHistoryDiffView = ({
             {(currentConfiguration?.codeEditorValue?.value || baseTemplateConfiguration?.codeEditorValue?.value) && (
                 <div className="en-2 bw-1 br-4 mt-16">
                     <div
-                        className="code-editor-header-value pl-16 pr-16 pt-12 pb-12 fs-13 fw-6 cn-9 bcn-0 dc__top-radius-4 dc__border-bottom"
+                        className="code-editor-header-value px-12 py-8 fs-13 fw-6 cn-9 bcn-0 dc__top-radius-4 dc__border-bottom"
                         data-testid="configuration-link-comparison-body-heading"
                     >
                         <span>{baseTemplateConfiguration?.codeEditorValue?.displayName}</span>
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
index 05d77a985..eed9612bf 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
@@ -29,7 +29,7 @@ export const renderDeploymentHistoryConfig = (
     heading: string,
     pathname: string,
 ) => (
-    <div className="dc__border br-4">
+    <div className="dc__border br-4 dc__overflow-hidden">
         {heading && (
             <div className="px-16 py-8 dc__border-bottom-n1">
                 <h4 className="m-0 cn-7 fs-12 lh-20 fw-6">{heading}</h4>
@@ -41,7 +41,7 @@ export const renderDeploymentHistoryConfig = (
             return (
                 <NavLink
                     key={id}
-                    className={`cursor dc__no-decor px-16 py-12 flex dc__content-space ${index !== config.length - 1 ? 'dc__border-bottom-n1' : ''}`}
+                    className={`cursor dc__no-decor px-16 py-12 flex dc__content-space dc__hover-n50 ${index !== config.length - 1 ? 'dc__border-bottom-n1' : ''}`}
                     to={href}
                 >
                     <p className="m-0 flex dc__gap-8">
@@ -73,7 +73,7 @@ export const renderPipelineDeploymentOptionDescription = ({
     runSource,
 }: Pick<History, 'triggeredBy' | 'triggeredByEmail' | 'artifact' | 'stage'> &
     Pick<DeploymentHistoryConfigDiffProps, 'renderRunSource' | 'resourceId' | 'runSource'>) => (
-    <div>
+    <div className="flexbox-col dc__gap-4">
         <p className="m-0 fs-12 lh-20 cn-7 flex dc__gap-4">
             <span className="dc__capitalize">{stage}</span>
             <span className="dc__bullet dc__bullet--d2" />
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts
index a9be8f4e7..149815ff4 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts
@@ -10,7 +10,12 @@ import { DeploymentHistoryConfigDiffProps } from './types'
 
 export const getPipelineDeployments = (triggerHistory: DeploymentHistoryConfigDiffProps['triggerHistory']) =>
     Array.from(triggerHistory)
-        .filter(([, value]) => value?.stage === DeploymentStageType.DEPLOY)
+        .filter(
+            ([, value]) =>
+                // TODO: check with Prakash when API returns this erro
+                // (!value.message || value.message !== 'pg: no rows in result set') &&
+                value.stage === DeploymentStageType.DEPLOY,
+        )
         .map(([, value]) => value)
 
 export const getPipelineDeploymentsWfrIds = ({
diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx
index e2e05633c..329a763f4 100644
--- a/src/Shared/Components/CICDHistory/types.tsx
+++ b/src/Shared/Components/CICDHistory/types.tsx
@@ -488,8 +488,11 @@ export interface DeploymentTemplateHistoryType {
     isUnpublished?: boolean
     isDeleteDraft?: boolean
     rootClassName?: string
-    sortBy?: string
-    sortOrder?: SortingOrder
+    codeEditorKey?: React.Key
+    sortingConfig?: {
+        sortBy: string
+        sortOrder: SortingOrder
+    }
 }
 export interface DeploymentHistoryDetailRes extends ResponseType {
     result?: DeploymentHistoryDetail
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx
index 0460df09b..020a79db2 100644
--- a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx
+++ b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx
@@ -45,7 +45,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                 >
                                     <headerIconConfig.Icon
                                         {...headerIconConfig.props}
-                                        className={`icon-dim-20 ${headerIconConfig.props?.className || ''}`}
+                                        className={`icon-dim-20 p-2 ${headerIconConfig.props?.className || ''}`}
                                     />
                                 </button>
                             </ConditionalWrap>
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
index a8b593f7c..b86ed4edf 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -65,6 +65,8 @@ export interface DeploymentConfigDiffProps {
     errorConfig?: {
         error: boolean
         code: number
+        message?: string
+        redirectURL?: string
         reload: () => void
     }
     configList: DeploymentConfigListItem[]
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
index c45fc619d..9d7a945b3 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
@@ -186,7 +186,7 @@ export const DeploymentConfigDiffMain = ({
                                 <div className="px-12 py-6">{secondaryHeading}</div>
                             </div>
                             <CodeEditor
-                                key={`${sortingConfig?.sortOrder}-${scopeVariablesConfig?.convertVariables}`}
+                                key={`${sortingConfig?.sortBy}-${sortingConfig?.sortOrder}-${scopeVariablesConfig?.convertVariables}`}
                                 diffView
                                 defaultValue={primaryList.codeEditorValue.value}
                                 value={secondaryList.codeEditorValue.value}
@@ -206,12 +206,12 @@ export const DeploymentConfigDiffMain = ({
                                 </div>
                             )}
                             <DeploymentHistoryDiffView
+                                codeEditorKey={`${sortingConfig?.sortBy}-${sortingConfig?.sortOrder}-${scopeVariablesConfig?.convertVariables}`}
                                 baseTemplateConfiguration={secondaryList}
                                 currentConfiguration={primaryList}
                                 previousConfigAvailable
                                 rootClassName={`${primaryHeading && secondaryHeading ? 'dc__no-top-radius dc__no-top-border' : ''}`}
-                                sortBy={sortingConfig?.sortBy}
-                                sortOrder={sortingConfig?.sortOrder}
+                                sortingConfig={sortingConfig}
                             />
                         </div>
                     )}
@@ -239,7 +239,14 @@ export const DeploymentConfigDiffMain = ({
                 </div>
             </div>
             <div className="deployment-config-diff__main-content dc__overflow-y-auto">
-                {errorConfig?.error && <ErrorScreenManager code={errorConfig.code} reload={errorConfig.reload} />}
+                {errorConfig?.error && (
+                    <ErrorScreenManager
+                        code={errorConfig.code}
+                        subtitle={errorConfig.message}
+                        redirectURL={errorConfig.redirectURL}
+                        reload={errorConfig.reload}
+                    />
+                )}
                 {!errorConfig?.error &&
                     (isLoading ? (
                         <Progressing fullHeight size={48} />
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
index d03722d40..627c3bde7 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
@@ -44,7 +44,7 @@ export const DeploymentConfigDiffNavigation = ({
                 ? {
                       iconConfig: {
                           Icon: showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff,
-                          props: { className: 'icon-dim-16 dc__no-shrink' },
+                          props: { className: 'dc__no-shrink' },
                           tooltipProps: {
                               content: showDetailedDiffState
                                   ? diffStateTooltipTextMap[diffState]
diff --git a/src/Shared/Services/app.types.ts b/src/Shared/Services/app.types.ts
index 2f4a8b4d3..cf3d4f31a 100644
--- a/src/Shared/Services/app.types.ts
+++ b/src/Shared/Services/app.types.ts
@@ -278,6 +278,7 @@ export interface TemplateListDTO {
     finishedOn?: string
     status?: string
     pipelineId?: number
+    wfrId?: number
 }
 
 export interface ManifestTemplateDTO {

From b180a0ce55ae05b39462d735255d10d7b8090023 Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Sun, 13 Oct 2024 16:25:42 +0530
Subject: [PATCH 03/11] feat: Collapse - add Collapse component,
 DeploymentConfigDiff - handling for scrolling selected config into view

---
 .../DeploymentHistoryConfigDiffCompare.tsx    | 12 ++-
 src/Shared/Components/Collapse/Collapse.tsx   | 43 ++++++++++-
 .../DeploymentConfigDiffAccordion.tsx         | 73 +++++++++----------
 .../DeploymentConfigDiffMain.tsx              | 15 +++-
 4 files changed, 92 insertions(+), 51 deletions(-)

diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
index 6578cfee1..d0a2be2e4 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
@@ -11,7 +11,11 @@ import {
 } from '@Shared/Components/SelectPicker'
 import { ComponentSizeType } from '@Shared/constants'
 
-import { DeploymentHistoryDiffDetailedProps, DeploymentHistoryConfigDiffQueryParams } from './types'
+import {
+    DeploymentHistoryDiffDetailedProps,
+    DeploymentHistoryConfigDiffQueryParams,
+    DeploymentHistoryConfigDiffRouteParams,
+} from './types'
 import { getPipelineDeploymentsOptions, parseDeploymentHistoryDiffSearchParams } from './utils'
 
 export const DeploymentHistoryConfigDiffCompare = ({
@@ -28,7 +32,8 @@ export const DeploymentHistoryConfigDiffCompare = ({
     ...props
 }: DeploymentHistoryDiffDetailedProps) => {
     // HOOKS
-    const { path, params } = useRouteMatch()
+    const { path, params } = useRouteMatch<DeploymentHistoryConfigDiffRouteParams>()
+    const { resourceType, resourceName } = params
 
     // URL FILTERS
     const { compareWfrId, updateSearchParams, sortBy, sortOrder, handleSorting } = useUrlFilters<
@@ -118,12 +123,13 @@ export const DeploymentHistoryConfigDiffCompare = ({
             showDetailedDiffState
             navHeading={`Comparing ${envName}`}
             headerText={!pipelineDeploymentsOptions.length ? '' : undefined} // using `undefined` to ensure component picks default value
+            scrollIntoViewId={`${resourceType}${resourceName ? `-${resourceName}` : ''}`}
             navHelpText={
                 compareWfrId
                     ? `Showing diff in configuration deployed on: ${pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId).label} & ${currentDeployment}`
                     : null
             }
-            goBackURL={generatePath(path.split('/:resourceType')[0], params)}
+            goBackURL={generatePath(path.split('/:resourceType')[0], { ...params })}
             selectorsConfig={selectorsConfig}
             sortingConfig={sortingConfig}
             scopeVariablesConfig={scopeVariablesConfig}
diff --git a/src/Shared/Components/Collapse/Collapse.tsx b/src/Shared/Components/Collapse/Collapse.tsx
index 26e9b8768..1f48e7661 100644
--- a/src/Shared/Components/Collapse/Collapse.tsx
+++ b/src/Shared/Components/Collapse/Collapse.tsx
@@ -1,6 +1,41 @@
+import { useEffect, useState, useRef, useMemo } from 'react'
+
 import { CollapseProps } from './types'
 
-export const Collapse = ({ expand, children }: CollapseProps) => (
-    // TODO: removed animation because of miscalculations (broken with auto editor height)
-    <div>{expand ? children : null}</div>
-)
+/**
+ * Collapse component for expanding/collapsing content with smooth transitions.
+ * Dynamically calculates and applies height based on the content, with support
+ * for callback execution when the transition ends.
+ */
+export const Collapse = ({ expand, onTransitionEnd, children }: CollapseProps) => {
+    // Ref to access the content container
+    const contentRef = useRef<HTMLDivElement>(null)
+    // State for dynamically calculated height
+    const [contentHeight, setContentHeight] = useState(0)
+
+    // Calculate and update content height when children change or initially on mount
+    useEffect(() => {
+        if (contentRef.current) {
+            const _contentHeight = contentRef.current.clientHeight || 0
+            setContentHeight(_contentHeight)
+        }
+    }, [children])
+
+    const collapseStyle = useMemo(
+        () => ({
+            // Set height based on the 'expand' prop
+            height: expand ? contentHeight : 0,
+            transition: 'height 200ms ease-out',
+            // Hide content overflow during collapse
+            overflow: 'hidden',
+        }),
+        [expand, contentHeight],
+    )
+
+    return (
+        <div style={collapseStyle} onTransitionEnd={onTransitionEnd}>
+            {/* Content container with reference to calculate height */}
+            <div ref={contentRef}>{children}</div>
+        </div>
+    )
+}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
index 57aea1524..ffd5e0b6b 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
@@ -1,48 +1,41 @@
-import { forwardRef } from 'react'
-
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 
 import { Collapse } from '../Collapse'
 import { DeploymentConfigDiffAccordionProps, DeploymentConfigDiffState } from './DeploymentConfigDiff.types'
 import { diffStateTextColorMap, diffStateTextMap } from './DeploymentConfigDiff.constants'
 
-export const DeploymentConfigDiffAccordion = forwardRef<HTMLDivElement, DeploymentConfigDiffAccordionProps>(
-    (
-        {
-            diffState,
-            showDetailedDiffState,
-            children,
-            title,
-            id,
-            isExpanded,
-            onClick,
-            onTransitionEnd,
-        }: DeploymentConfigDiffAccordionProps,
-        ref,
-    ) => (
-        <div ref={ref} id={id} className="dc__border br-4 deployment-config-diff__accordion">
-            <button
-                type="button"
-                className="dc__unset-button-styles px-16 py-10 flexbox dc__align-items-center dc__gap-8 w-100 br-4 bcn-50 dc__position-sticky dc__top-0 dc__zi-10"
-                aria-label="expand-collapse-btn"
-                onClick={onClick}
+export const DeploymentConfigDiffAccordion = ({
+    diffState,
+    showDetailedDiffState,
+    children,
+    title,
+    id,
+    isExpanded,
+    onClick,
+    onTransitionEnd,
+}: DeploymentConfigDiffAccordionProps) => (
+    <div id={id} className="dc__border br-4 deployment-config-diff__accordion">
+        <button
+            type="button"
+            className="dc__unset-button-styles px-16 py-10 flexbox dc__align-items-center dc__gap-8 w-100 br-4 bcn-50 dc__position-sticky dc__top-0 dc__zi-10"
+            aria-label="expand-collapse-btn"
+            onClick={onClick}
+        >
+            <ICCaretDown
+                className="icon-dim-16 fsn-6 rotate"
+                style={{ ['--rotateBy' as string]: isExpanded ? '360deg' : '270deg' }}
+            />
+            <p className="m-0 cn-9 fs-13 lh-20">{title}</p>
+            <p
+                className={`m-0 fs-13 lh-20 fw-6 ${showDetailedDiffState ? diffStateTextColorMap[diffState] : (diffState !== DeploymentConfigDiffState.NO_DIFF && 'cy-7') || 'cg-7'}`}
             >
-                <ICCaretDown
-                    className="icon-dim-16 fsn-6 rotate"
-                    style={{ ['--rotateBy' as string]: isExpanded ? '360deg' : '270deg' }}
-                />
-                <p className="m-0 cn-9 fs-13 lh-20">{title}</p>
-                <p
-                    className={`m-0 fs-13 lh-20 fw-6 ${showDetailedDiffState ? diffStateTextColorMap[diffState] : (diffState !== DeploymentConfigDiffState.NO_DIFF && 'cy-7') || 'cg-7'}`}
-                >
-                    {showDetailedDiffState
-                        ? diffStateTextMap[diffState]
-                        : `${diffState !== DeploymentConfigDiffState.NO_DIFF ? 'Has' : 'No'} difference`}
-                </p>
-            </button>
-            <Collapse expand={isExpanded} onTransitionEnd={onTransitionEnd}>
-                {children}
-            </Collapse>
-        </div>
-    ),
+                {showDetailedDiffState
+                    ? diffStateTextMap[diffState]
+                    : `${diffState !== DeploymentConfigDiffState.NO_DIFF ? 'Has' : 'No'} difference`}
+            </p>
+        </button>
+        <Collapse expand={isExpanded} onTransitionEnd={onTransitionEnd}>
+            {children}
+        </Collapse>
+    </div>
 )
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
index 9d7a945b3..b825d7009 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
@@ -1,4 +1,4 @@
-import { Fragment, TransitionEvent, useEffect, useState } from 'react'
+import { Fragment, useEffect, useRef, useState } from 'react'
 import Tippy from '@tippyjs/react'
 
 import { ReactComponent as ICSortArrowDown } from '@Icons/ic-sort-arrow-down.svg'
@@ -19,6 +19,7 @@ import {
     DeploymentConfigDiffMainProps,
     DeploymentConfigDiffSelectPickerProps,
     DeploymentConfigDiffState,
+    DeploymentConfigDiffAccordionProps,
 } from './DeploymentConfigDiff.types'
 
 export const DeploymentConfigDiffMain = ({
@@ -35,6 +36,10 @@ export const DeploymentConfigDiffMain = ({
     // STATES
     const [expandedView, setExpandedView] = useState<Record<string | number, boolean>>({})
 
+    // REFS
+    /** Ref to track if the element should scroll into view after expanding */
+    const scrollIntoViewAfterExpand = useRef(false)
+
     const handleAccordionClick = (id: string) => () => {
         setExpandedView({
             ...expandedView,
@@ -42,8 +47,9 @@ export const DeploymentConfigDiffMain = ({
         })
     }
 
-    const handleTransitionEnd = (id: string) => (e: TransitionEvent<HTMLDivElement>) => {
-        if (e.target === e.currentTarget && scrollIntoViewId === id) {
+    const onTransitionEnd: DeploymentConfigDiffAccordionProps['onTransitionEnd'] = (e) => {
+        if (scrollIntoViewAfterExpand.current && e.target === e.currentTarget) {
+            scrollIntoViewAfterExpand.current = false
             const element = document.querySelector(`#${scrollIntoViewId}`)
             element?.scrollIntoView({ block: 'start' })
         }
@@ -65,6 +71,7 @@ export const DeploymentConfigDiffMain = ({
 
     useEffect(() => {
         if (scrollIntoViewId) {
+            scrollIntoViewAfterExpand.current = true
             setExpandedView((prev) => ({ ...prev, [scrollIntoViewId]: true }))
         }
     }, [scrollIntoViewId])
@@ -176,7 +183,7 @@ export const DeploymentConfigDiffMain = ({
                     isExpanded={expandedView[id]}
                     diffState={diffState}
                     onClick={handleAccordionClick(id)}
-                    onTransitionEnd={handleTransitionEnd(id)}
+                    onTransitionEnd={onTransitionEnd}
                     showDetailedDiffState={showDetailedDiffState}
                 >
                     {singleView ? (

From 90c527f1e83f799e451d90b5e41887c7811a3c89 Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Sun, 13 Oct 2024 16:38:19 +0530
Subject: [PATCH 04/11] chore: version bump

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5fabfab8a..1663f883c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.0",
+    "version": "0.5.0-beta-3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "0.5.0",
+            "version": "0.5.0-beta-3",
             "license": "ISC",
             "dependencies": {
                 "@types/react-dates": "^21.8.6",
diff --git a/package.json b/package.json
index 39d63d669..4b422b6e9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.0",
+    "version": "0.5.0-beta-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

From 0765c0ca4a8f660ed9119a6dd0051587c8de6f02 Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Mon, 14 Oct 2024 17:55:02 +0530
Subject: [PATCH 05/11] refactor: DeploymentHistoryConfigDiff - Handle case for
 no configuration present in deployments; fix: Collapse - add resizeObserver
 to correctly calculate dynamic height; feat: DeploymentConfigDiff - add
 hideDiffState prop to hide the configuration diff status

---
 src/Common/ChartVersionAndTypeSelector.tsx    |  1 -
 .../DeploymentHistoryConfigDiff.tsx           | 76 +++++++++++++------
 .../DeploymentHistoryConfigDiffCompare.tsx    |  3 +-
 .../DeploymentHistoryConfigDiff/helpers.tsx   |  3 +-
 .../DeploymentHistoryConfigDiff/types.ts      |  2 +-
 .../DeploymentHistoryConfigDiff/utils.ts      | 15 ++--
 .../Components/CICDHistory/TriggerOutput.tsx  |  2 +-
 src/Shared/Components/CICDHistory/service.tsx |  7 +-
 src/Shared/Components/Collapse/Collapse.tsx   | 73 +++++++++++-------
 .../DeploymentConfigDiff.component.tsx        |  3 +
 .../DeploymentConfigDiff.types.ts             |  5 +-
 .../DeploymentConfigDiff.utils.tsx            | 12 ++-
 .../DeploymentConfigDiffAccordion.tsx         | 17 +++--
 .../DeploymentConfigDiffMain.tsx              |  5 +-
 .../DeploymentConfigDiffNavigation.tsx        |  5 +-
 15 files changed, 152 insertions(+), 77 deletions(-)

diff --git a/src/Common/ChartVersionAndTypeSelector.tsx b/src/Common/ChartVersionAndTypeSelector.tsx
index ac40e8c24..15c7efe83 100644
--- a/src/Common/ChartVersionAndTypeSelector.tsx
+++ b/src/Common/ChartVersionAndTypeSelector.tsx
@@ -70,7 +70,6 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
     return (
         <div className="flex">
             <div className="chart-type-options flex" data-testid="chart-type-options">
-                <span className="cn-7 mr-4">Chart Type</span>
                 <SelectPicker
                     inputId='chart-type-select'
                     label='Chart Type'
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
index 9e46bd163..fa3e69b09 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
@@ -2,16 +2,23 @@ import { useMemo, useState } from 'react'
 import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
 
 import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
-import { capitalizeFirstLetter, useAsync } from '@Common/Helper'
+import { useAsync } from '@Common/Helper'
 import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
 import { groupArrayByObjectKey } from '@Shared/Helpers'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
 import { Progressing } from '@Common/Progressing'
 import { useUrlFilters } from '@Common/Hooks'
+import { GenericEmptyState } from '@Common/index'
 
 import { DeploymentHistoryConfigDiffCompare } from './DeploymentHistoryConfigDiffCompare'
 import { DeploymentHistoryConfigDiffProps, DeploymentHistoryConfigDiffQueryParams } from './types'
-import { getPipelineDeploymentsWfrIds, getPipelineDeployments, parseDeploymentHistoryDiffSearchParams } from './utils'
+import {
+    getPipelineDeploymentsWfrIds,
+    getPipelineDeployments,
+    parseDeploymentHistoryDiffSearchParams,
+    isDeploymentHistoryConfigDiffNotFoundError,
+    getDeploymentHistoryConfigDiffError,
+} from './utils'
 import { renderDeploymentHistoryConfig } from './helpers'
 
 export const DeploymentHistoryConfigDiff = ({
@@ -47,14 +54,9 @@ export const DeploymentHistoryConfigDiff = ({
 
     // ASYNC CALLS
     // Load comparison deployment data
-    const [
-        compareDeploymentConfigLoader,
-        compareDeploymentConfig,
-        compareDeploymentConfigErr,
-        reloadCompareDeploymentConfig,
-    ] = useAsync(
+    const [compareDeploymentConfigLoader, compareDeploymentConfig, , reloadCompareDeploymentConfig] = useAsync(
         () =>
-            Promise.all([
+            Promise.allSettled([
                 getAppEnvDeploymentConfig({
                     params: {
                         appName,
@@ -86,15 +88,18 @@ export const DeploymentHistoryConfigDiff = ({
     // Generate the deployment history config list
     const deploymentConfigList = useMemo(() => {
         if (!compareDeploymentConfigLoader && compareDeploymentConfig) {
-            const compareList = isPreviousDeploymentConfigAvailable
-                ? compareDeploymentConfig[1].result
-                : {
-                      configMapData: null,
-                      deploymentTemplate: null,
-                      secretsData: null,
-                      isAppAdmin: false,
-                  }
-            const currentList = compareDeploymentConfig[0].result
+            const compareList =
+                isPreviousDeploymentConfigAvailable && compareDeploymentConfig[1].status === 'fulfilled'
+                    ? compareDeploymentConfig[1].value.result
+                    : {
+                          configMapData: null,
+                          deploymentTemplate: null,
+                          secretsData: null,
+                          isAppAdmin: false,
+                      }
+
+            const currentList =
+                compareDeploymentConfig[0].status === 'fulfilled' ? compareDeploymentConfig[0].value.result : null
 
             const configData = getAppEnvDeploymentConfigList({
                 currentList,
@@ -106,21 +111,44 @@ export const DeploymentHistoryConfigDiff = ({
         }
 
         return null
-    }, [isPreviousDeploymentConfigAvailable, compareDeploymentConfigErr, compareDeploymentConfig, convertVariables])
+    }, [isPreviousDeploymentConfigAvailable, compareDeploymentConfigLoader, compareDeploymentConfig, convertVariables])
+
+    const compareDeploymentConfigErr = useMemo(
+        () =>
+            !compareDeploymentConfigLoader && compareDeploymentConfig
+                ? getDeploymentHistoryConfigDiffError(compareDeploymentConfig[0]) ||
+                  getDeploymentHistoryConfigDiffError(compareDeploymentConfig[1])
+                : null,
+        [compareDeploymentConfigLoader, compareDeploymentConfig],
+    )
 
     const groupedDeploymentConfigList = useMemo(
         () => (deploymentConfigList ? groupArrayByObjectKey(deploymentConfigList.configList, 'groupHeader') : []),
         [deploymentConfigList],
     )
 
+    /** Hide diff state if the previous deployment config is unavailable or returns a 404 error. */
+    const hideDiffState =
+        !isPreviousDeploymentConfigAvailable ||
+        (compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[1]))
+    // LOADING
     const isLoading = compareDeploymentConfigLoader || (!compareDeploymentConfigErr && !deploymentConfigList)
+    // ERROR CONFIG
     const errorConfig = {
         code: compareDeploymentConfigErr?.code,
         error: compareDeploymentConfigErr && !compareDeploymentConfigLoader,
-        message: capitalizeFirstLetter(compareDeploymentConfigErr?.errors[0]?.userMessage || ''),
         reload: reloadCompareDeploymentConfig,
     }
 
+    // TODO: get null state from Utkarsh
+    if (compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[0])) {
+        return (
+            <div className="flex bcn-0 h-100">
+                <GenericEmptyState title="No Configuration Found" />
+            </div>
+        )
+    }
+
     return (
         <Switch>
             <Route path={`${path}/:resourceType(${Object.values(EnvResourceType).join('|')})/:resourceName?`}>
@@ -138,15 +166,12 @@ export const DeploymentHistoryConfigDiff = ({
                     runSource={runSource}
                     resourceId={resourceId}
                     renderRunSource={renderRunSource}
+                    hideDiffState={hideDiffState}
                 />
             </Route>
             <Route>
                 {compareDeploymentConfigErr && !compareDeploymentConfigLoader ? (
-                    <ErrorScreenManager
-                        code={errorConfig.code}
-                        subtitle={errorConfig.message}
-                        reload={errorConfig.reload}
-                    />
+                    <ErrorScreenManager code={errorConfig.code} reload={errorConfig.reload} />
                 ) : (
                     <div className="p-16 flexbox-col dc__gap-16 bcn-0 h-100">
                         {isLoading ? (
@@ -162,6 +187,7 @@ export const DeploymentHistoryConfigDiff = ({
                                             groupedDeploymentConfigList[groupHeader],
                                             groupHeader !== 'UNGROUPED' ? groupHeader : null,
                                             pathname,
+                                            hideDiffState,
                                         ),
                                     )}
                                 </div>
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
index d0a2be2e4..3257f73b2 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
@@ -63,6 +63,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
         renderRunSource,
         resourceId,
     })
+    const previousDeployment = pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId)
 
     const deploymentSelectorOnChange = ({ value }: SelectPickerOptionType<number>) => {
         updateSearchParams({ compareWfrId: value })
@@ -126,7 +127,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
             scrollIntoViewId={`${resourceType}${resourceName ? `-${resourceName}` : ''}`}
             navHelpText={
                 compareWfrId
-                    ? `Showing diff in configuration deployed on: ${pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId).label} & ${currentDeployment}`
+                    ? `Showing diff in configuration deployed on: ${previousDeployment?.label || 'N/A'} & ${currentDeployment}`
                     : null
             }
             goBackURL={generatePath(path.split('/:resourceType')[0], { ...params })}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
index eed9612bf..131547282 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
@@ -28,6 +28,7 @@ export const renderDeploymentHistoryConfig = (
     config: DeploymentConfigDiffProps['configList'],
     heading: string,
     pathname: string,
+    hideDiffState: boolean,
 ) => (
     <div className="dc__border br-4 dc__overflow-hidden">
         {heading && (
@@ -48,7 +49,7 @@ export const renderDeploymentHistoryConfig = (
                         <ICFileCode className="icon-dim-20 scn-6" />
                         <span className="cb-5 fs-13 lh-20">{name || title}</span>
                     </p>
-                    {renderState(diffState)}
+                    {!hideDiffState && renderState(diffState)}
                 </NavLink>
             )
         })}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts
index 717487cd9..5408f81cc 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts
@@ -18,7 +18,7 @@ export interface DeploymentHistoryConfigDiffProps
 
 export type DeploymentHistoryDiffDetailedProps = Pick<
     DeploymentConfigDiffProps,
-    'collapsibleNavList' | 'configList' | 'errorConfig' | 'isLoading' | 'navList'
+    'collapsibleNavList' | 'configList' | 'errorConfig' | 'isLoading' | 'navList' | 'hideDiffState'
 > &
     Required<
         Pick<
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts
index 149815ff4..21a41d472 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.ts
@@ -1,6 +1,6 @@
 import moment from 'moment'
 
-import { DATE_TIME_FORMATS } from '@Common/Constants'
+import { DATE_TIME_FORMATS, ERROR_STATUS_CODE } from '@Common/Constants'
 import { DeploymentStageType } from '@Shared/constants'
 import { SelectPickerOptionType } from '@Shared/Components/SelectPicker'
 
@@ -10,12 +10,7 @@ import { DeploymentHistoryConfigDiffProps } from './types'
 
 export const getPipelineDeployments = (triggerHistory: DeploymentHistoryConfigDiffProps['triggerHistory']) =>
     Array.from(triggerHistory)
-        .filter(
-            ([, value]) =>
-                // TODO: check with Prakash when API returns this erro
-                // (!value.message || value.message !== 'pg: no rows in result set') &&
-                value.stage === DeploymentStageType.DEPLOY,
-        )
+        .filter(([, value]) => value.stage === DeploymentStageType.DEPLOY)
         .map(([, value]) => value)
 
 export const getPipelineDeploymentsWfrIds = ({
@@ -70,3 +65,9 @@ export const getPipelineDeploymentsOptions = ({
 export const parseDeploymentHistoryDiffSearchParams = (compareWfrId: number) => (searchParams: URLSearchParams) => ({
     compareWfrId: +(searchParams.get('compareWfrId') || compareWfrId),
 })
+
+export const isDeploymentHistoryConfigDiffNotFoundError = <T extends unknown>(res: PromiseSettledResult<T>) =>
+    res.status === 'rejected' && res.reason?.code === ERROR_STATUS_CODE.NOT_FOUND
+
+export const getDeploymentHistoryConfigDiffError = <T extends unknown>(res: PromiseSettledResult<T>) =>
+    res.status === 'rejected' && res.reason?.code !== ERROR_STATUS_CODE.NOT_FOUND ? res.reason : null
diff --git a/src/Shared/Components/CICDHistory/TriggerOutput.tsx b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
index bb8fc3864..790799ea2 100644
--- a/src/Shared/Components/CICDHistory/TriggerOutput.tsx
+++ b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
@@ -297,7 +297,7 @@ const StartDetails = ({
 
     return (
         <div className="w-100 pr-20 flex column left dc__border-bottom-n1">
-            <div className="flexbox dc__gap-8 dc__align-items-center pb-12">
+            <div className="flexbox dc__gap-8 dc__align-items-center pb-12 flex-wrap">
                 <div className="flex left dc__gap-4 cn-9 fs-13 fw-6 lh-20">
                     <div className="flex left dc__no-shrink dc__gap-4" data-testid="deployment-history-start-heading">
                         <div>Start</div>
diff --git a/src/Shared/Components/CICDHistory/service.tsx b/src/Shared/Components/CICDHistory/service.tsx
index 437e67ae9..1683ecbf1 100644
--- a/src/Shared/Components/CICDHistory/service.tsx
+++ b/src/Shared/Components/CICDHistory/service.tsx
@@ -197,8 +197,11 @@ export const prepareConfigMapAndSecretData = (
         let typeValue = 'Environment Variable'
         if (rawData.type === 'volume') {
             typeValue = 'Data Volume'
-            if (rawData.mountPath) {
-                secretValues['mountPath'] = { displayName: 'Volume mount path', value: rawData.mountPath }
+            if (rawData.mountPath || rawData.defaultMountPath) {
+                secretValues['mountPath'] = {
+                    displayName: 'Volume mount path',
+                    value: rawData.mountPath ?? rawData.defaultMountPath,
+                }
             }
             if (rawData.subPath) {
                 secretValues['subPath'] = { displayName: 'Set SubPath', value: 'Yes' }
diff --git a/src/Shared/Components/Collapse/Collapse.tsx b/src/Shared/Components/Collapse/Collapse.tsx
index 1f48e7661..273dd55a3 100644
--- a/src/Shared/Components/Collapse/Collapse.tsx
+++ b/src/Shared/Components/Collapse/Collapse.tsx
@@ -1,40 +1,61 @@
-import { useEffect, useState, useRef, useMemo } from 'react'
-
+import { useEffect, useRef, useState } from 'react'
 import { CollapseProps } from './types'
 
 /**
- * Collapse component for expanding/collapsing content with smooth transitions.
- * Dynamically calculates and applies height based on the content, with support
- * for callback execution when the transition ends.
+ * Collapse component for smoothly expanding or collapsing its content.
+ * Dynamically calculates the content height and applies smooth transitions.
+ * It also supports a callback when the transition ends.
  */
 export const Collapse = ({ expand, onTransitionEnd, children }: CollapseProps) => {
-    // Ref to access the content container
+    // Reference to the content container to calculate its height
     const contentRef = useRef<HTMLDivElement>(null)
-    // State for dynamically calculated height
-    const [contentHeight, setContentHeight] = useState(0)
 
-    // Calculate and update content height when children change or initially on mount
+    // State to store the dynamic height of the content; initially set to 0 if collapsed
+    const [contentHeight, setContentHeight] = useState<number>(!expand ? 0 : null)
+
+    /**
+     * Effect to observe changes in the content size when expanded and recalculate the height.
+     * Uses a ResizeObserver to handle dynamic content size changes.
+     */
     useEffect(() => {
-        if (contentRef.current) {
-            const _contentHeight = contentRef.current.clientHeight || 0
-            setContentHeight(_contentHeight)
+        if (!contentHeight || !expand || !contentRef.current) {
+            return null
         }
-    }, [children])
-
-    const collapseStyle = useMemo(
-        () => ({
-            // Set height based on the 'expand' prop
-            height: expand ? contentHeight : 0,
-            transition: 'height 200ms ease-out',
-            // Hide content overflow during collapse
-            overflow: 'hidden',
-        }),
-        [expand, contentHeight],
-    )
+
+        const resizeObserver = new ResizeObserver((entries) => {
+            // Update the height when content size changes
+            setContentHeight(entries[0].contentRect.height)
+        })
+
+        // Observe the content container for resizing
+        resizeObserver.observe(contentRef.current)
+
+        // Clean up the observer when the component unmounts or content changes
+        return () => {
+            resizeObserver.disconnect()
+        }
+    }, [contentHeight, expand])
+
+    /**
+     * Effect to handle the initial setting of content height during expansion or collapse.
+     * Sets height to the content's full height when expanded, or 0 when collapsed.
+     */
+    useEffect(() => {
+        if (expand) {
+            // Set the content height when expanded
+            setContentHeight(contentRef.current?.getBoundingClientRect().height)
+        } else {
+            // Collapse content by setting the height to 0
+            setContentHeight(0)
+        }
+    }, [expand])
 
     return (
-        <div style={collapseStyle} onTransitionEnd={onTransitionEnd}>
-            {/* Content container with reference to calculate height */}
+        <div
+            style={{ height: contentHeight, overflow: 'hidden', transition: 'height 200ms ease-out' }}
+            onTransitionEnd={onTransitionEnd}
+        >
+            {/* The container that holds the collapsible content */}
             <div ref={contentRef}>{children}</div>
         </div>
     )
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
index fd445efcf..b41828d84 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
@@ -13,6 +13,7 @@ export const DeploymentConfigDiff = ({
     navHelpText,
     tabConfig,
     showDetailedDiffState,
+    hideDiffState,
     renderedInDrawer,
     ...resProps
 }: DeploymentConfigDiffProps) => (
@@ -26,11 +27,13 @@ export const DeploymentConfigDiff = ({
             navHelpText={navHelpText}
             tabConfig={tabConfig}
             showDetailedDiffState={showDetailedDiffState}
+            hideDiffState={hideDiffState}
         />
         <DeploymentConfigDiffMain
             isLoading={isLoading}
             configList={configList}
             showDetailedDiffState={showDetailedDiffState}
+            hideDiffState={hideDiffState}
             {...resProps}
         />
     </div>
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
index b86ed4edf..ca67ce0cc 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -71,6 +71,7 @@ export interface DeploymentConfigDiffProps {
     }
     configList: DeploymentConfigListItem[]
     showDetailedDiffState?: boolean
+    hideDiffState?: boolean
     headerText?: string
     scrollIntoViewId?: string
     selectorsConfig: {
@@ -111,6 +112,7 @@ export interface DeploymentConfigDiffNavigationProps
         | 'navHelpText'
         | 'tabConfig'
         | 'showDetailedDiffState'
+        | 'hideDiffState'
     > {}
 
 export interface DeploymentConfigDiffMainProps
@@ -125,10 +127,11 @@ export interface DeploymentConfigDiffMainProps
         | 'sortingConfig'
         | 'scopeVariablesConfig'
         | 'showDetailedDiffState'
+        | 'hideDiffState'
     > {}
 
 export type DeploymentConfigDiffAccordionProps = Pick<CollapseProps, 'onTransitionEnd'> &
-    Pick<DeploymentConfigDiffProps, 'showDetailedDiffState'> & {
+    Pick<DeploymentConfigDiffProps, 'showDetailedDiffState' | 'hideDiffState'> & {
         id: string
         title: string
         children: React.ReactNode
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
index 86bd91338..cbcf62107 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -529,7 +529,17 @@ const getDeploymentTemplateResolvedData = (deploymentTemplate: DeploymentTemplat
 const getConfigDataWithResolvedDeploymentTemplate = (
     data: AppEnvDeploymentConfigListParams<false>['compareList'],
     convertVariables: boolean,
-) => {
+): AppEnvDeploymentConfigListParams<false>['compareList'] => {
+    if (!data) {
+        return {
+            deploymentTemplate: null,
+            configMapData: null,
+            isAppAdmin: null,
+            secretsData: null,
+            pipelineConfigData: null,
+        }
+    }
+
     if (!data.deploymentTemplate) {
         return data
     }
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
index ffd5e0b6b..a13f67817 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
@@ -7,6 +7,7 @@ import { diffStateTextColorMap, diffStateTextMap } from './DeploymentConfigDiff.
 export const DeploymentConfigDiffAccordion = ({
     diffState,
     showDetailedDiffState,
+    hideDiffState,
     children,
     title,
     id,
@@ -26,13 +27,15 @@ export const DeploymentConfigDiffAccordion = ({
                 style={{ ['--rotateBy' as string]: isExpanded ? '360deg' : '270deg' }}
             />
             <p className="m-0 cn-9 fs-13 lh-20">{title}</p>
-            <p
-                className={`m-0 fs-13 lh-20 fw-6 ${showDetailedDiffState ? diffStateTextColorMap[diffState] : (diffState !== DeploymentConfigDiffState.NO_DIFF && 'cy-7') || 'cg-7'}`}
-            >
-                {showDetailedDiffState
-                    ? diffStateTextMap[diffState]
-                    : `${diffState !== DeploymentConfigDiffState.NO_DIFF ? 'Has' : 'No'} difference`}
-            </p>
+            {!hideDiffState && (
+                <p
+                    className={`m-0 fs-13 lh-20 fw-6 ${showDetailedDiffState ? diffStateTextColorMap[diffState] : (diffState !== DeploymentConfigDiffState.NO_DIFF && 'cy-7') || 'cg-7'}`}
+                >
+                    {showDetailedDiffState
+                        ? diffStateTextMap[diffState]
+                        : `${diffState !== DeploymentConfigDiffState.NO_DIFF ? 'Has' : 'No'} difference`}
+                </p>
+            )}
         </button>
         <Collapse expand={isExpanded} onTransitionEnd={onTransitionEnd}>
             {children}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
index b825d7009..fe2bf119d 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
@@ -32,6 +32,7 @@ export const DeploymentConfigDiffMain = ({
     scrollIntoViewId,
     scopeVariablesConfig,
     showDetailedDiffState,
+    hideDiffState,
 }: DeploymentConfigDiffMainProps) => {
     // STATES
     const [expandedView, setExpandedView] = useState<Record<string | number, boolean>>({})
@@ -49,9 +50,10 @@ export const DeploymentConfigDiffMain = ({
 
     const onTransitionEnd: DeploymentConfigDiffAccordionProps['onTransitionEnd'] = (e) => {
         if (scrollIntoViewAfterExpand.current && e.target === e.currentTarget) {
-            scrollIntoViewAfterExpand.current = false
             const element = document.querySelector(`#${scrollIntoViewId}`)
             element?.scrollIntoView({ block: 'start' })
+            // Reset ref after scrolling into view
+            scrollIntoViewAfterExpand.current = false
         }
     }
 
@@ -185,6 +187,7 @@ export const DeploymentConfigDiffMain = ({
                     onClick={handleAccordionClick(id)}
                     onTransitionEnd={onTransitionEnd}
                     showDetailedDiffState={showDetailedDiffState}
+                    hideDiffState={hideDiffState}
                 >
                     {singleView ? (
                         <>
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
index 627c3bde7..7b0764bce 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
@@ -26,6 +26,7 @@ export const DeploymentConfigDiffNavigation = ({
     navHelpText,
     tabConfig,
     showDetailedDiffState,
+    hideDiffState,
 }: DeploymentConfigDiffNavigationProps) => {
     // STATES
     const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({})
@@ -40,7 +41,7 @@ export const DeploymentConfigDiffNavigation = ({
         isExpanded: expandedIds[resListItem.id],
         items: items.map(({ diffState, ...resItem }) => ({
             ...resItem,
-            ...(diffState !== DeploymentConfigDiffState.NO_DIFF
+            ...(!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF
                 ? {
                       iconConfig: {
                           Icon: showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff,
@@ -121,7 +122,7 @@ export const DeploymentConfigDiffNavigation = ({
                         onClick={onClick}
                     >
                         <span className="dc__truncate">{title}</span>
-                        {diffState !== DeploymentConfigDiffState.NO_DIFF && (
+                        {!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF && (
                             <Tippy
                                 className="default-tt"
                                 content={

From fd6437bc2d529047ba747c94c7a23c66924b1623 Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Mon, 14 Oct 2024 17:58:35 +0530
Subject: [PATCH 06/11] chore: version bump

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1663f883c..28d983a3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.0-beta-3",
+    "version": "0.5.0-beta-5",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "0.5.0-beta-3",
+            "version": "0.5.0-beta-5",
             "license": "ISC",
             "dependencies": {
                 "@types/react-dates": "^21.8.6",
diff --git a/package.json b/package.json
index 4b422b6e9..b87893156 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.0-beta-3",
+    "version": "0.5.0-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

From ac348540936493a281461b15e4576bc40ccc45b4 Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Tue, 15 Oct 2024 13:17:31 +0530
Subject: [PATCH 07/11] feat: DeploymentHistoryConfigDiff - add NullState for
 previous/current deployment not available & required changes to
 DeploymentConfigDiff

---
 src/Common/ChartVersionAndTypeSelector.tsx    |  8 ++--
 .../DeploymentHistoryConfigDiff.tsx           | 46 +++++++++++++------
 .../DeploymentHistoryConfigDiffCompare.tsx    | 23 +++++++---
 .../DeploymentHistoryConfigDiff/helpers.tsx   |  6 ++-
 .../DeploymentHistoryConfigDiff/types.ts      |  1 +
 .../CollapsibleList.component.tsx             |  6 ++-
 .../CollapsibleList/CollapsibleList.types.ts  |  4 ++
 .../DeploymentConfigDiff.component.tsx        |  2 +
 .../DeploymentConfigDiff.types.ts             |  2 +
 .../DeploymentConfigDiffNavigation.tsx        | 17 +++++--
 10 files changed, 81 insertions(+), 34 deletions(-)

diff --git a/src/Common/ChartVersionAndTypeSelector.tsx b/src/Common/ChartVersionAndTypeSelector.tsx
index 15c7efe83..7272120ba 100644
--- a/src/Common/ChartVersionAndTypeSelector.tsx
+++ b/src/Common/ChartVersionAndTypeSelector.tsx
@@ -70,9 +70,9 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
     return (
         <div className="flex">
             <div className="chart-type-options flex" data-testid="chart-type-options">
+                <span className="cn-7 mr-4">Chart Type</span>
                 <SelectPicker
-                    inputId='chart-type-select'
-                    label='Chart Type'
+                    inputId="chart-type-select"
                     value={selectedChartType ?? chartTypeOptions[0]}
                     options={chartTypeOptions}
                     onChange={handleChartTypeChange}
@@ -80,9 +80,9 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
                 />
             </div>
             <div className="chart-version-options flex" data-testid="chart-version-options">
-            <span className="cn-7 mr-4">Chart Version</span>
+                <span className="cn-7 mr-4">Chart Version</span>
                 <SelectPicker
-                    inputId='chart-version-select'
+                    inputId="chart-version-select"
                     value={selectedChartVersion ?? chartVersionOptions[0]}
                     options={chartVersionOptions}
                     onChange={handleChartVersionChange}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
index fa3e69b09..104e2e2de 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react'
 import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
 
+import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
 import { useAsync } from '@Common/Helper'
 import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
@@ -8,7 +9,7 @@ import { groupArrayByObjectKey } from '@Shared/Helpers'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
 import { Progressing } from '@Common/Progressing'
 import { useUrlFilters } from '@Common/Hooks'
-import { GenericEmptyState } from '@Common/index'
+import { GenericEmptyState, InfoColourBar } from '@Common/index'
 
 import { DeploymentHistoryConfigDiffCompare } from './DeploymentHistoryConfigDiffCompare'
 import { DeploymentHistoryConfigDiffProps, DeploymentHistoryConfigDiffQueryParams } from './types'
@@ -127,10 +128,11 @@ export const DeploymentHistoryConfigDiff = ({
         [deploymentConfigList],
     )
 
+    /** Previous deployment config has 404 error. */
+    const hasPreviousDeploymentConfigNotFoundError =
+        compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[1])
     /** Hide diff state if the previous deployment config is unavailable or returns a 404 error. */
-    const hideDiffState =
-        !isPreviousDeploymentConfigAvailable ||
-        (compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[1]))
+    const hideDiffState = !isPreviousDeploymentConfigAvailable || hasPreviousDeploymentConfigNotFoundError
     // LOADING
     const isLoading = compareDeploymentConfigLoader || (!compareDeploymentConfigErr && !deploymentConfigList)
     // ERROR CONFIG
@@ -140,11 +142,13 @@ export const DeploymentHistoryConfigDiff = ({
         reload: reloadCompareDeploymentConfig,
     }
 
-    // TODO: get null state from Utkarsh
     if (compareDeploymentConfig && isDeploymentHistoryConfigDiffNotFoundError(compareDeploymentConfig[0])) {
         return (
             <div className="flex bcn-0 h-100">
-                <GenericEmptyState title="No Configuration Found" />
+                <GenericEmptyState
+                    title="Data not available"
+                    subTitle="Configurations used for this deployment execution is not available"
+                />
             </div>
         )
     }
@@ -167,6 +171,7 @@ export const DeploymentHistoryConfigDiff = ({
                     resourceId={resourceId}
                     renderRunSource={renderRunSource}
                     hideDiffState={hideDiffState}
+                    isCompareDeploymentConfigNotAvailable={hasPreviousDeploymentConfigNotFoundError}
                 />
             </Route>
             <Route>
@@ -179,16 +184,27 @@ export const DeploymentHistoryConfigDiff = ({
                         ) : (
                             <>
                                 <h3 className="fs-13 lh-20 fw-6 cn-9 m-0">
-                                    Showing configuration change with respect to previous deployment
+                                    {hideDiffState
+                                        ? 'Configurations used for this deployment trigger'
+                                        : 'Showing configuration change with respect to previous deployment'}
                                 </h3>
-                                <div className="flexbox-col dc__gap-12 dc__mxw-800">
-                                    {Object.keys(groupedDeploymentConfigList).map((groupHeader) =>
-                                        renderDeploymentHistoryConfig(
-                                            groupedDeploymentConfigList[groupHeader],
-                                            groupHeader !== 'UNGROUPED' ? groupHeader : null,
-                                            pathname,
-                                            hideDiffState,
-                                        ),
+                                <div className="flexbox-col dc__gap-16 dc__mxw-800">
+                                    <div className="flexbox-col dc__gap-12">
+                                        {Object.keys(groupedDeploymentConfigList).map((groupHeader) =>
+                                            renderDeploymentHistoryConfig(
+                                                groupedDeploymentConfigList[groupHeader],
+                                                groupHeader !== 'UNGROUPED' ? groupHeader : null,
+                                                pathname,
+                                                hideDiffState,
+                                            ),
+                                        )}
+                                    </div>
+                                    {hasPreviousDeploymentConfigNotFoundError && (
+                                        <InfoColourBar
+                                            classname="error_bar cn-9 fs-13 lh-20"
+                                            Icon={ICError}
+                                            message="Diff unavailable: Configurations for previous deployment not found."
+                                        />
                                     )}
                                 </div>
                             </>
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
index 3257f73b2..7d23c80fb 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx
@@ -29,6 +29,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
     runSource,
     renderRunSource,
     resourceId,
+    isCompareDeploymentConfigNotAvailable,
     ...props
 }: DeploymentHistoryDiffDetailedProps) => {
     // HOOKS
@@ -64,13 +65,14 @@ export const DeploymentHistoryConfigDiffCompare = ({
         resourceId,
     })
     const previousDeployment = pipelineDeploymentsOptions.find(({ value }) => value === compareWfrId)
+    const isPreviousDeploymentConfigAvailable = !!pipelineDeploymentsOptions.length
 
     const deploymentSelectorOnChange = ({ value }: SelectPickerOptionType<number>) => {
         updateSearchParams({ compareWfrId: value })
     }
 
     const selectorsConfig: DeploymentConfigDiffProps['selectorsConfig'] = {
-        primaryConfig: pipelineDeploymentsOptions.length
+        primaryConfig: isPreviousDeploymentConfigAvailable
             ? [
                   {
                       id: 'deployment-config-diff-deployment-selector',
@@ -105,6 +107,16 @@ export const DeploymentHistoryConfigDiffCompare = ({
         ],
     }
 
+    const getNavHelpText = () => {
+        if (isPreviousDeploymentConfigAvailable) {
+            return isCompareDeploymentConfigNotAvailable
+                ? `Diff unavailable: Configurations for deployment execution ‘${previousDeployment?.label || 'N/A'}’ not found`
+                : `Showing diff in configuration deployed on: ${previousDeployment?.label || 'N/A'} & ${currentDeployment}`
+        }
+
+        return null
+    }
+
     const onSorting = () => handleSorting(sortOrder !== SortingOrder.DESC ? 'sort-config' : '')
 
     const sortingConfig: DeploymentConfigDiffProps['sortingConfig'] = {
@@ -123,13 +135,10 @@ export const DeploymentHistoryConfigDiffCompare = ({
             {...props}
             showDetailedDiffState
             navHeading={`Comparing ${envName}`}
-            headerText={!pipelineDeploymentsOptions.length ? '' : undefined} // using `undefined` to ensure component picks default value
+            headerText={!isPreviousDeploymentConfigAvailable ? '' : undefined} // using `undefined` to ensure component picks default value
             scrollIntoViewId={`${resourceType}${resourceName ? `-${resourceName}` : ''}`}
-            navHelpText={
-                compareWfrId
-                    ? `Showing diff in configuration deployed on: ${previousDeployment?.label || 'N/A'} & ${currentDeployment}`
-                    : null
-            }
+            navHelpText={getNavHelpText()}
+            isNavHelpTextShowingError={isCompareDeploymentConfigNotAvailable}
             goBackURL={generatePath(path.split('/:resourceType')[0], { ...params })}
             selectorsConfig={selectorsConfig}
             sortingConfig={sortingConfig}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
index 131547282..140c8ecb8 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
@@ -47,7 +47,11 @@ export const renderDeploymentHistoryConfig = (
                 >
                     <p className="m-0 flex dc__gap-8">
                         <ICFileCode className="icon-dim-20 scn-6" />
-                        <span className="cb-5 fs-13 lh-20">{name || title}</span>
+                        <span
+                            className={`cb-5 fs-13 lh-20 ${diffState === DeploymentConfigDiffState.DELETED ? 'dc__strike-through' : ''}`}
+                        >
+                            {name || title}
+                        </span>
                     </p>
                     {!hideDiffState && renderState(diffState)}
                 </NavLink>
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts
index 5408f81cc..350ed7d50 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts
@@ -30,6 +30,7 @@ export type DeploymentHistoryDiffDetailedProps = Pick<
         previousWfrId: number
         convertVariables: boolean
         setConvertVariables: Dispatch<SetStateAction<boolean>>
+        isCompareDeploymentConfigNotAvailable?: boolean
     }
 
 export interface DeploymentHistoryConfigDiffQueryParams {
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx
index 020a79db2..e60d8edd6 100644
--- a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx
+++ b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx
@@ -60,7 +60,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                     </span>
                                 </div>
                             ) : (
-                                items.map(({ title, href, iconConfig, subtitle, onClick }) => (
+                                items.map(({ title, strikeThrough, href, iconConfig, subtitle, onClick }) => (
                                     <NavLink
                                         key={title}
                                         to={href}
@@ -74,7 +74,9 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                         }}
                                     >
                                         <div className="flexbox-col flex-grow-1 mw-none">
-                                            <span className="collapsible__item__title dc__truncate fs-13 lh-20">
+                                            <span
+                                                className={`collapsible__item__title dc__truncate fs-13 lh-20 ${strikeThrough ? 'dc__strike-through' : ''}`}
+                                            >
                                                 {title}
                                             </span>
                                             {subtitle && (
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
index be4944f82..e67b599ff 100644
--- a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
+++ b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
@@ -10,6 +10,10 @@ export interface CollapsibleListItem {
      * The subtitle of the list item.
      */
     subtitle?: string
+    /**
+     * If true, the title will be rendered with line-through.
+     */
+    strikeThrough?: boolean
     /**
      * Configuration for the icon.
      */
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
index b41828d84..d1989c32e 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
@@ -11,6 +11,7 @@ export const DeploymentConfigDiff = ({
     goBackURL,
     navHeading,
     navHelpText,
+    isNavHelpTextShowingError,
     tabConfig,
     showDetailedDiffState,
     hideDiffState,
@@ -25,6 +26,7 @@ export const DeploymentConfigDiff = ({
             goBackURL={goBackURL}
             navHeading={navHeading}
             navHelpText={navHelpText}
+            isNavHelpTextShowingError={isNavHelpTextShowingError}
             tabConfig={tabConfig}
             showDetailedDiffState={showDetailedDiffState}
             hideDiffState={hideDiffState}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
index ca67ce0cc..2c6c78f64 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -89,6 +89,7 @@ export interface DeploymentConfigDiffProps {
     goBackURL?: string
     navHeading: string
     navHelpText?: string
+    isNavHelpTextShowingError?: boolean
     tabConfig?: {
         tabs: string[]
         activeTab: string
@@ -110,6 +111,7 @@ export interface DeploymentConfigDiffNavigationProps
         | 'goBackURL'
         | 'navHeading'
         | 'navHelpText'
+        | 'isNavHelpTextShowingError'
         | 'tabConfig'
         | 'showDetailedDiffState'
         | 'hideDiffState'
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
index 7b0764bce..78f45c558 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
@@ -4,9 +4,10 @@ import Tippy from '@tippyjs/react'
 
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { ReactComponent as ICInfoOutlined } from '@Icons/ic-info-outlined.svg'
+import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import { StyledRadioGroup } from '@Common/index'
 
-import { CollapsibleList } from '../CollapsibleList'
+import { CollapsibleList, CollapsibleListConfig } from '../CollapsibleList'
 import { DeploymentConfigDiffNavigationProps, DeploymentConfigDiffState } from './DeploymentConfigDiff.types'
 import { diffStateIconMap, diffStateTooltipTextMap } from './DeploymentConfigDiff.constants'
 
@@ -24,6 +25,7 @@ export const DeploymentConfigDiffNavigation = ({
     goBackURL,
     navHeading,
     navHelpText,
+    isNavHelpTextShowingError,
     tabConfig,
     showDetailedDiffState,
     hideDiffState,
@@ -36,11 +38,12 @@ export const DeploymentConfigDiffNavigation = ({
     }, [collapsibleNavList])
 
     /** Collapsible List Config. */
-    const collapsibleListConfig = collapsibleNavList.map(({ items, ...resListItem }) => ({
+    const collapsibleListConfig = collapsibleNavList.map<CollapsibleListConfig>(({ items, ...resListItem }) => ({
         ...resListItem,
         isExpanded: expandedIds[resListItem.id],
-        items: items.map(({ diffState, ...resItem }) => ({
+        items: items.map<CollapsibleListConfig['items'][0]>(({ diffState, ...resItem }) => ({
             ...resItem,
+            strikeThrough: showDetailedDiffState && diffState === DeploymentConfigDiffState.DELETED,
             ...(!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF
                 ? {
                       iconConfig: {
@@ -145,9 +148,13 @@ export const DeploymentConfigDiffNavigation = ({
             {navHelpText && (
                 <div className="mt-8 py-6 px-8 flexbox dc__align-items-center dc__gap-8">
                     <span className="flex p-2 dc__align-self-start">
-                        <ICInfoOutlined className="icon-dim-16 fcn-6" />
+                        {isNavHelpTextShowingError ? (
+                            <ICError className="icon-dim-16 dc__no-shrink" />
+                        ) : (
+                            <ICInfoOutlined className="icon-dim-16 fcn-6 dc__no-shrink" />
+                        )}
                     </span>
-                    <p className="m-0 fs-12 lh-1-5 cn-9">{navHelpText}</p>
+                    <p className={`m-0 fs-12 lh-1-5 ${isNavHelpTextShowingError ? 'cr-5' : 'cn-9'}`}>{navHelpText}</p>
                 </div>
             )}
         </>

From 1ebf287e339e603e9e7955e603f0527c35874bcf Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Tue, 15 Oct 2024 13:19:32 +0530
Subject: [PATCH 08/11] chore: version bump

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 28d983a3d..bd5a24e31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.0-beta-5",
+    "version": "0.5.0-beta-6",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "0.5.0-beta-5",
+            "version": "0.5.0-beta-6",
             "license": "ISC",
             "dependencies": {
                 "@types/react-dates": "^21.8.6",
diff --git a/package.json b/package.json
index b87893156..90c0df155 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.0-beta-5",
+    "version": "0.5.0-beta-6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

From 41abc0aa3a94401ff1cb9303e470037cfaef4e7c Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Tue, 15 Oct 2024 17:33:34 +0530
Subject: [PATCH 09/11] fix: review fix

---
 src/Shared/Components/CICDHistory/service.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Shared/Components/CICDHistory/service.tsx b/src/Shared/Components/CICDHistory/service.tsx
index 1683ecbf1..2763c2eb1 100644
--- a/src/Shared/Components/CICDHistory/service.tsx
+++ b/src/Shared/Components/CICDHistory/service.tsx
@@ -200,7 +200,7 @@ export const prepareConfigMapAndSecretData = (
             if (rawData.mountPath || rawData.defaultMountPath) {
                 secretValues['mountPath'] = {
                     displayName: 'Volume mount path',
-                    value: rawData.mountPath ?? rawData.defaultMountPath,
+                    value: rawData.mountPath || rawData.defaultMountPath,
                 }
             }
             if (rawData.subPath) {

From 16211d500b8dcbd0185942d301fbc7da0fd1ddd2 Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Tue, 15 Oct 2024 18:31:54 +0530
Subject: [PATCH 10/11] refactor: DeploymentConfigDiff.utils - code refactor

---
 .../DeploymentConfigDiff.utils.tsx            | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
index cbcf62107..d28b31dc9 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -540,26 +540,24 @@ const getConfigDataWithResolvedDeploymentTemplate = (
         }
     }
 
-    if (!data.deploymentTemplate) {
-        return data
+    if (data.deploymentTemplate && convertVariables) {
+        const deploymentTemplateResolvedData = getDeploymentTemplateResolvedData(data.deploymentTemplate)
+
+        return {
+            ...data,
+            deploymentTemplate: {
+                ...data.deploymentTemplate,
+                ...(deploymentTemplateResolvedData
+                    ? {
+                          data: deploymentTemplateResolvedData,
+                          deploymentDraftData: null,
+                      }
+                    : {}),
+            },
+        }
     }
 
-    const deploymentTemplateResolvedData = getDeploymentTemplateResolvedData(data.deploymentTemplate)
-
-    return convertVariables
-        ? {
-              ...data,
-              deploymentTemplate: {
-                  ...data.deploymentTemplate,
-                  ...(deploymentTemplateResolvedData
-                      ? {
-                            data: deploymentTemplateResolvedData,
-                            deploymentDraftData: null,
-                        }
-                      : {}),
-              },
-          }
-        : data
+    return data
 }
 
 /**

From 5f784258cdf539195d1e10559a7e486ca12c6a8b Mon Sep 17 00:00:00 2001
From: Rohit Raj <rohit.raj@devtron.ai>
Date: Tue, 15 Oct 2024 18:35:16 +0530
Subject: [PATCH 11/11] refactor: DeploymentConfigDiff.utils - code refactor

---
 .../DeploymentConfigDiff.utils.tsx            | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
index d28b31dc9..a498d9671 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -540,24 +540,24 @@ const getConfigDataWithResolvedDeploymentTemplate = (
         }
     }
 
-    if (data.deploymentTemplate && convertVariables) {
-        const deploymentTemplateResolvedData = getDeploymentTemplateResolvedData(data.deploymentTemplate)
-
-        return {
-            ...data,
-            deploymentTemplate: {
-                ...data.deploymentTemplate,
-                ...(deploymentTemplateResolvedData
-                    ? {
-                          data: deploymentTemplateResolvedData,
-                          deploymentDraftData: null,
-                      }
-                    : {}),
-            },
-        }
+    if (!data.deploymentTemplate || !convertVariables) {
+        return data
     }
 
-    return data
+    const deploymentTemplateResolvedData = getDeploymentTemplateResolvedData(data.deploymentTemplate)
+
+    return {
+        ...data,
+        deploymentTemplate: {
+            ...data.deploymentTemplate,
+            ...(deploymentTemplateResolvedData
+                ? {
+                      data: deploymentTemplateResolvedData,
+                      deploymentDraftData: null,
+                  }
+                : {}),
+        },
+    }
 }
 
 /**