Merge pull request #288 from devtron-labs/feat/manifest-config-diff

feat: Manifest Config Diff - Comparison of Manifest Output

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.5",
+    "version": "0.3.6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -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.component.tsx

@@ -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,14 @@
     & .react-monaco-editor-container {
         min-height: 100px;
     }
+
+    &__tab-list {
+        label {
+            flex-grow: 1
+        }
+
+        .radio__item-label {
+            justify-content: center;
+        }
+    }
 }

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss

@@ -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,29 @@ export interface DeploymentConfigDiffProps {
     goBackURL?: string
     navHeading: string
     navHelpText?: string
+    tabConfig?: {
+        tabs: string[]
+        activeTab: 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 +111,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
+}