feat: DeploymentConfigDiff

 - DeploymentConfigDiffNavigation - add support for tabs
 - DeploymentConfigDiff.utils - add manifest data utils
 - DeploymentConfigDiffMain - add support for error screen

Author: RohitRaj011

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx

@@ -1,6 +1,6 @@
 import { DeploymentConfigDiffNavigation } from './DeploymentConfigDiffNavigation'
 import { DeploymentConfigDiffMain } from './DeploymentConfigDiffMain'
-import { DeploymentConfigDiffProps } from './types'
+import { DeploymentConfigDiffProps } from './DeploymentConfigDiff.types'
 import './DeploymentConfigDiff.scss'
 
 export const DeploymentConfigDiff = ({
@@ -11,6 +11,7 @@ export const DeploymentConfigDiff = ({
     goBackURL,
     navHeading,
     navHelpText,
+    tabConfig,
     ...resProps
 }: DeploymentConfigDiffProps) => (
     <div className="deployment-config-diff">
@@ -21,6 +22,7 @@ export const DeploymentConfigDiff = ({
             goBackURL={goBackURL}
             navHeading={navHeading}
             navHelpText={navHelpText}
+            tabConfig={tabConfig}
         />
         <DeploymentConfigDiffMain isLoading={isLoading} configList={configList} {...resProps} />
     </div>

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss

@@ -21,6 +21,13 @@
         height: calc(100vh - 122px);
         overflow: auto;
 
+        &__heading {
+            display: grid;
+            // -15px to accommodate the right side bar of the code-editor
+            grid-template-columns: calc(50% - 15px) calc(50% - 15px);
+            grid-template-rows: auto;
+        }
+
         &__comparison {
             margin: 16px 0 0;
         }
@@ -29,4 +36,18 @@
     & .react-monaco-editor-container {
         min-height: 100px;
     }
+
+    &__tab-list {
+        list-style: none;
+    }
+
+    &__tab {
+        &, &:hover {
+            color: var(--N700);
+        }
+
+        &--active, &--active:hover {
+            color: var(--N900);
+        }
+    }
 }

src/Shared/Components/DeploymentConfigDiff/types.ts renamed to src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts

@@ -1,6 +1,13 @@
 import { SortingOrder } from '@Common/Constants'
 
-import { ConfigMapSecretDataConfigDatumDTO, DeploymentTemplateDTO } from '@Shared/Services'
+import {
+    AppEnvDeploymentConfigDTO,
+    ConfigMapSecretDataConfigDatumDTO,
+    DeploymentTemplateDTO,
+    EnvResourceType,
+    ManifestTemplateDTO,
+} from '@Shared/Services'
+
 import { DeploymentHistoryDetail } from '../CICDHistory'
 import { CollapsibleListConfig, CollapsibleListItem } from '../CollapsibleList'
 import { SelectPickerProps } from '../SelectPicker'
@@ -45,6 +52,11 @@ export interface DeploymentConfigDiffNavigationCollapsibleItem
 
 export interface DeploymentConfigDiffProps {
     isLoading?: boolean
+    errorConfig?: {
+        error: boolean
+        code: number
+        reload: () => void
+    }
     configList: DeploymentConfigListItem[]
     headerText?: string
     scrollIntoViewId?: string
@@ -62,18 +74,31 @@ export interface DeploymentConfigDiffProps {
     goBackURL?: string
     navHeading: string
     navHelpText?: string
+    tabConfig?: {
+        tabs: {
+            value: string
+            href: string
+        }[]
+        onClick: (tab: string) => void
+    }
 }
 
 export interface DeploymentConfigDiffNavigationProps
     extends Pick<
         DeploymentConfigDiffProps,
-        'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText'
+        'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText' | 'tabConfig'
     > {}
 
 export interface DeploymentConfigDiffMainProps
     extends Pick<
         DeploymentConfigDiffProps,
-        'isLoading' | 'headerText' | 'configList' | 'scrollIntoViewId' | 'selectorsConfig' | 'sortingConfig'
+        | 'isLoading'
+        | 'errorConfig'
+        | 'headerText'
+        | 'configList'
+        | 'scrollIntoViewId'
+        | 'selectorsConfig'
+        | 'sortingConfig'
     > {}
 
 export interface DeploymentConfigDiffAccordionProps extends Pick<CollapseProps, 'onTransitionEnd'> {
@@ -88,3 +113,18 @@ export interface DeploymentConfigDiffAccordionProps extends Pick<CollapseProps,
 export type DiffHeadingDataType<DeploymentTemplate> = DeploymentTemplate extends true
     ? DeploymentTemplateDTO
     : ConfigMapSecretDataConfigDatumDTO
+
+export type AppEnvDeploymentConfigListParams<IsManifestView> = (IsManifestView extends true
+    ? {
+          currentList: ManifestTemplateDTO
+          compareList: ManifestTemplateDTO
+          sortOrder?: never
+      }
+    : {
+          currentList: AppEnvDeploymentConfigDTO
+          compareList: AppEnvDeploymentConfigDTO
+          sortOrder?: SortingOrder
+      }) & {
+    getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string
+    isManifestView?: IsManifestView
+}