feat: move config drift modal from route to state

Author: arunjaindev

src/Common/Constants.ts

@@ -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/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx

@@ -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,
+    setShowConfigDriftModal,
     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}`)
+        setShowConfigDriftModal(true)
     }
 
     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 && (
+                                        {setShowConfigDriftModal && 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/types.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { CSSProperties, ReactElement } from 'react'
+import { CSSProperties, Dispatch, ReactElement, SetStateAction } from 'react'
 import { SupportedKeyboardKeysType } from '@Common/Hooks/UseRegisterShortcut/types'
 import {
     OptionType,
@@ -560,7 +560,7 @@ export interface DeploymentHistorySidebarType {
 export interface AppStatusDetailsChartType {
     filterRemoveHealth?: boolean
     showFooter: boolean
-    showConfigDriftInfo?: boolean
+    setShowConfigDriftModal?: Dispatch<SetStateAction<boolean>>
     onClose?: () => void
 }
 

src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx

@@ -112,7 +112,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"