Merge pull request #554 from devtron-labs/feat/config-drift-state

feat: move config drift modal from route to state

Author: arunjaindev

package-lock.json

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

package.json

@@ -78,7 +78,6 @@ export const URLS = {
     GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables',
     GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts',
     NETWORK_STATUS_INTERFACE: '/network-status-interface',
-    CONFIG_DRIFT: 'config-drift',
     RESOURCE_BROWSER: '/resource-browser',
     COMPARE_CLUSTERS: '/compare-clusters',
 }

src/Common/Constants.ts

@@ -16,8 +16,6 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { useHistory } from 'react-router-dom'
-import { URLS } from '@Common/Constants'
 import { ReactComponent as InfoIcon } from '../../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as Chat } from '../../../Assets/Icon/ic-chat-circle-dots.svg'
 import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER, NodeFilters } from './types'
@@ -30,10 +28,9 @@ import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 const AppStatusDetailsChart = ({
     filterRemoveHealth = false,
     showFooter,
-    showConfigDriftInfo = false,
+    handleOpenConfigDriftModal,
     onClose,
 }: AppStatusDetailsChartType) => {
-    const history = useHistory()
     const _appDetails = IndexStore.getAppDetails()
     const [currentFilter, setCurrentFilter] = useState<string>(ALL_RESOURCE_KIND_FILTER)
     const [flattenedNodes, setFlattenedNodes] = useState([])
@@ -42,7 +39,7 @@ const AppStatusDetailsChart = ({
 
     const handleCompareDesiredManifest = () => {
         onClose()
-        history.push(`${URLS.APP}/${appId}${URLS.DETAILS}/${envId}/${URLS.APP_DETAILS_K8}/${URLS.CONFIG_DRIFT}`)
+        handleOpenConfigDriftModal()
     }
 
     const nodes: AggregatedNodes = useMemo(
@@ -151,7 +148,7 @@ const AppStatusDetailsChart = ({
                                         {nodeDetails.status ? nodeDetails.status : nodeDetails.health.status}
                                     </div>
                                     <div className="flexbox-col dc__gap-4">
-                                        {showConfigDriftInfo && nodeDetails.hasDrift && (
+                                        {handleOpenConfigDriftModal && nodeDetails.hasDrift && (
                                             <div className="flexbox dc__gap-8 dc__align-items-center">
                                                 <span className="fs-13 fw-4 lh-20 cy-7">Config drift detected</span>
                                                 {onClose && appId && envId && (

src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx

@@ -560,7 +560,7 @@ export interface DeploymentHistorySidebarType {
 export interface AppStatusDetailsChartType {
     filterRemoveHealth?: boolean
     showFooter: boolean
-    showConfigDriftInfo?: boolean
+    handleOpenConfigDriftModal?: () => void
     onClose?: () => void
 }
 

src/Shared/Components/CICDHistory/types.tsx

@@ -113,7 +113,7 @@ const ConfirmationModalBody = ({
                         />
                     )}
                 </div>
-                <div className="p-16 dc__gap-12 flexbox dc__content-end">
+                <div className="px-20 py-16 dc__gap-12 flexbox dc__content-end">
                     {secondaryButtonConfig && (
                         <Button
                             dataTestId="confirmation-modal-secondary-button"