Skip to content

Commit 59051ee

Browse files
shivani170Elessar1802
shivani170
authored and
Elessar1802
committed
replace all showConfigDiff state with param mode
1 parent bfd1944 commit 59051ee

File tree

4 files changed

+91
-17
lines changed

4 files changed

+91
-17
lines changed

‎src/components/app/details/triggerView/TriggerView.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -729,6 +729,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
729729
if (!isApprovalNode) {
730730
newParams.set('node-type', nodeType)
731731
}
732+
newParams.set('mode', 'list')
732733
this.props.history.push({
733734
search: newParams.toString(),
734735
})

‎src/components/app/details/triggerView/cdMaterial.tsx

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ import { EMPTY_STATE_STATUS, TOAST_BUTTON_TEXT_VIEW_DETAILS } from '../../../../
8787
import { abortEarlierRequests, getInitialState } from './cdMaterials.utils'
8888
import { getLastExecutionByArtifactAppEnv } from '../../../../services/service'
8989
import AnnouncementBanner from '../../../common/AnnouncementBanner'
90+
import { useRouteMatch } from 'react-router-dom'
9091

9192
const ApprovalInfoTippy = importComponentFromFELibrary('ApprovalInfoTippy')
9293
const ExpireApproval = importComponentFromFELibrary('ExpireApproval')
@@ -128,6 +129,7 @@ export default function CDMaterial({
128129
const { searchParams } = useSearchString()
129130
// Add dep here
130131
const { isSuperAdmin } = useSuperAdmin()
132+
const match = useRouteMatch()
131133

132134
const searchImageTag = searchParams.search
133135

@@ -137,6 +139,7 @@ export default function CDMaterial({
137139
const [isConsumedImageAvailable, setIsConsumedImageAvailable] = useState<boolean>(false)
138140
// Should be able to abort request using useAsync
139141
const abortControllerRef = useRef(new AbortController())
142+
// const [mode, setMode] = useState<string>(searchParams.mode)
140143

141144
// TODO: Ask if pipelineId always changes on change of app else add appId as dependency
142145
const [loadingMaterials, materialsResult, materialsError, reloadMaterials] = useAsync(
@@ -183,6 +186,7 @@ export default function CDMaterial({
183186
const userApprovalConfig = materialsResult?.userApprovalConfig
184187
const isApprovalConfigured = userApprovalConfig?.requiredCount > 0
185188
const canApproverDeploy = materialsResult?.canApproverDeploy ?? false
189+
const showConfigDiffView = searchParams.mode === "review-config"
186190
/* ------------ Utils required in useEffect ------------*/
187191
const getSecurityModuleStatus = async () => {
188192
try {
@@ -259,6 +263,18 @@ export default function CDMaterial({
259263
})
260264
}
261265

266+
const setParamsValue = (modeParamValue: string) => {
267+
const newParams = {
268+
...searchParams,
269+
mode: modeParamValue,
270+
config: 'deploymentTemplate',
271+
deploy: 'LAST_SAVED_CONFIG'.toLocaleLowerCase() //LATEST_TRIGGER_CONFIG
272+
}
273+
history.push({
274+
search: new URLSearchParams(newParams).toString(),
275+
})
276+
}
277+
262278
/* ------------ UseEffects ------------*/
263279
useEffect(() => {
264280
if (!loadingMaterials && materialsResult) {
@@ -729,12 +745,10 @@ export default function CDMaterial({
729745
isConfigPresent())) ||
730746
!state.recentDeploymentConfig
731747

732-
const reviewConfig = () => {
748+
const reviewConfig = (modeParamValue: string) => {
749+
// setMode(modeParamValue)
733750
if (canReviewConfig()) {
734-
setState((prevState) => ({
735-
...prevState,
736-
showConfigDiffView: !prevState.showConfigDiffView,
737-
}))
751+
setParamsValue(modeParamValue)
738752
}
739753
}
740754

@@ -765,10 +779,15 @@ export default function CDMaterial({
765779
: state.specificDeploymentConfig
766780
}
767781

782+
const redirectURLToInitial = (urlTo: string = '') => {
783+
const urlPrefix = match.url
784+
history.push(`${urlPrefix}/${urlTo}`)
785+
}
786+
768787
const handleConfigSelection = (selected) => {
769788
if (selected.value !== state.selectedConfigToDeploy.value) {
770789
const _diffOptions = checkForDiff(state.recentDeploymentConfig, getBaseTemplateConfiguration(selected))
771-
790+
redirectURLToInitial(selected.value)
772791
setState((prevState) => ({
773792
...prevState,
774793
selectedConfigToDeploy: selected,
@@ -1007,7 +1026,7 @@ export default function CDMaterial({
10071026
const getTriggerBodyHeight = (isApprovalConfigured: boolean) => {
10081027
const subHeight = window?._env_?.ANNOUNCEMENT_BANNER_MSG ? 37 : 0
10091028

1010-
if (state.showConfigDiffView) {
1029+
if (showConfigDiffView) {
10111030
return `calc(100vh - 141px - ${subHeight}px)`
10121031
}
10131032
if (
@@ -1896,7 +1915,7 @@ export default function CDMaterial({
18961915
} ${isLastDeployedOption ? 'pt-10 pb-10' : 'pt-7 pb-7'}`}
18971916
disabled={state.checkingDiff}
18981917
type="button"
1899-
onClick={reviewConfig}
1918+
onClick={() => reviewConfig('review-config')}
19001919
>
19011920
{!isLastDeployedOption && (state.recentDeploymentConfig !== null || state.checkingDiff) && (
19021921
<div
@@ -1965,7 +1984,7 @@ export default function CDMaterial({
19651984
<div
19661985
className={`trigger-modal__trigger ${
19671986
(!state.isRollbackTrigger && !state.isSelectImageTrigger) ||
1968-
state.showConfigDiffView ||
1987+
showConfigDiffView ||
19691988
stageType === DeploymentNodeType.PRECD ||
19701989
stageType === DeploymentNodeType.POSTCD
19711990
? 'flex right'
@@ -1974,7 +1993,7 @@ export default function CDMaterial({
19741993
>
19751994
{!hideConfigDiffSelector &&
19761995
(state.isRollbackTrigger || state.isSelectImageTrigger) &&
1977-
!state.showConfigDiffView &&
1996+
!showConfigDiffView &&
19781997
stageType === DeploymentNodeType.CD && (
19791998
<div className="flex left dc__border br-4 h-42">
19801999
<div className="flex">
@@ -2060,12 +2079,12 @@ export default function CDMaterial({
20602079

20612080
const renderTriggerBody = (isApprovalConfigured: boolean) => (
20622081
<div
2063-
className={`trigger-modal__body ${state.showConfigDiffView && canReviewConfig() ? 'p-0' : ''}`}
2082+
className={`trigger-modal__body ${showConfigDiffView && canReviewConfig() ? 'p-0' : ''}`}
20642083
style={{
20652084
height: getTriggerBodyHeight(isApprovalConfigured),
20662085
}}
20672086
>
2068-
{state.showConfigDiffView && canReviewConfig() ? (
2087+
{showConfigDiffView && canReviewConfig() ? (
20692088
<TriggerViewConfigDiff
20702089
currentConfiguration={state.recentDeploymentConfig}
20712090
baseTemplateConfiguration={getBaseTemplateConfiguration()}
@@ -2075,6 +2094,7 @@ export default function CDMaterial({
20752094
diffOptions={state.diffOptions}
20762095
isRollbackTriggerSelected={state.isRollbackTrigger}
20772096
isRecentConfigAvailable={state.recentDeploymentConfig !== null}
2097+
history={history}
20782098
/>
20792099
) : (
20802100
renderMaterialList(isApprovalConfigured)
@@ -2085,9 +2105,9 @@ export default function CDMaterial({
20852105
const renderCDModal = (isApprovalConfigured: boolean) => (
20862106
<>
20872107
<div className="trigger-modal__header">
2088-
{state.showConfigDiffView ? (
2108+
{showConfigDiffView ? (
20892109
<div className="flex left">
2090-
<button type="button" className="dc__transparent icon-dim-24" onClick={reviewConfig}>
2110+
<button type="button" className="dc__transparent icon-dim-24" onClick={() => reviewConfig('list')}>
20912111
<BackIcon />
20922112
</button>
20932113
<div className="flex column left ml-16">
@@ -2107,7 +2127,7 @@ export default function CDMaterial({
21072127
</button>
21082128
</div>
21092129

2110-
{!state.showConfigDiffView && window?._env_?.ANNOUNCEMENT_BANNER_MSG && (
2130+
{!showConfigDiffView && window?._env_?.ANNOUNCEMENT_BANNER_MSG && (
21112131
<AnnouncementBanner parentClassName="cd-trigger-announcement" isCDMaterial />
21122132
)}
21132133

@@ -2202,7 +2222,7 @@ export default function CDMaterial({
22022222
if (material.length > 0) {
22032223
return isFromBulkCD ? (
22042224
<>
2205-
{!state.showConfigDiffView && window?._env_?.ANNOUNCEMENT_BANNER_MSG && (
2225+
{!showConfigDiffView && window?._env_?.ANNOUNCEMENT_BANNER_MSG && (
22062226
<AnnouncementBanner parentClassName="cd-trigger-announcement" isCDMaterial />
22072227
)}
22082228
{renderTriggerBody(isApprovalConfigured)}

‎src/components/app/details/triggerView/triggerViewConfigDiff/TriggerViewConfigDiff.tsx

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Fragment, useEffect, useState } from 'react'
22
import YAML from 'yaml'
33
import Tippy from '@tippyjs/react'
4-
import { Toggle } from '@devtron-labs/devtron-fe-common-lib'
4+
import { Toggle, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
55
import { DeploymentHistorySingleValue } from '../../cdDetails/cd.type'
66
import CodeEditor from '../../../../CodeEditor/CodeEditor'
77
import { MODES } from '../../../../../config'
@@ -25,6 +25,7 @@ export default function TriggerViewConfigDiff({
2525
diffOptions,
2626
isRollbackTriggerSelected,
2727
isRecentConfigAvailable,
28+
history
2829
}: TriggerViewConfigDiffProps) {
2930
const [activeSideNavOption, setActiveSideNavOption] = useState(
3031
DEPLOYMENT_CONFIGURATION_NAV_MAP.DEPLOYMENT_TEMPLATE.key,
@@ -49,7 +50,37 @@ export default function TriggerViewConfigDiff({
4950
const [configMapOptionCollapsed, setConfigMapOptionCollapsed] = useState<boolean>(false)
5051
const [secretOptionCollapsed, setSecretOptionCollapsed] = useState<boolean>(false)
5152
const [currentData, setCurrentData] = useState<any>({}) // store codeEditorValue of current(lhs) and base(rhs) config
53+
const { searchParams } = useSearchString()
5254

55+
useEffect(() => {
56+
const dataValue = searchParams.config?.replace('-', '/')
57+
setParamsValue(dataValue.replace('/', '-'))
58+
if (dataValue) {
59+
setConvertVariables(false)
60+
setActiveSideNavOption(dataValue)
61+
62+
const { rhsData, lhsData } = getCurrentConfiguration(dataValue)
63+
setCurrentData({
64+
rhsData,
65+
lhsData,
66+
})
67+
68+
const _isVariableAvailable =
69+
Object.keys(rhsData?.variableSnapshot || {}).length !== 0 ||
70+
Object.keys(lhsData?.variableSnapshot || {}).length !== 0
71+
setIsVariableAvailable(_isVariableAvailable)
72+
73+
const editorValuesRHS = convertVariables ? rhsData?.resolvedValue : rhsData?.value
74+
const editorValuesLHS = convertVariables ? lhsData?.resolvedValue : lhsData?.value
75+
setEditorValues({
76+
displayName: rhsData?.displayName || lhsData?.displayName,
77+
value: editorValuesRHS ? YAML.stringify(JSON.parse(editorValuesRHS)) : '',
78+
defaultValue: editorValuesLHS ? YAML.stringify(JSON.parse(editorValuesLHS)) : '',
79+
})
80+
}
81+
82+
}, [])
83+
5384
useEffect(() => {
5485
handleConfigToDeploySelection()
5586
}, [selectedConfigToDeploy])
@@ -139,8 +170,20 @@ export default function TriggerViewConfigDiff({
139170
/*
140171
set the current(lhs) and base(rhs) config value in code editor for the selected nav option, runs every on nav option selection
141172
*/
173+
174+
const setParamsValue = ( configVal: string) => {
175+
const newParams = {
176+
...searchParams,
177+
config: configVal,
178+
}
179+
history.push({
180+
search: new URLSearchParams(newParams).toString(),
181+
})
182+
}
183+
142184
const handleNavOptionSelection = (e, navConfigKey?: string) => {
143185
const dataValue = navConfigKey || e?.target?.dataset?.value
186+
setParamsValue(dataValue.replace('/', '-'))
144187
if (dataValue) {
145188
setConvertVariables(false)
146189
setActiveSideNavOption(dataValue)

‎src/components/app/details/triggerView/types.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import { DeploymentHistoryDetail } from '../cdDetails/cd.type'
2020
import { CIMaterialType } from './MaterialHistory'
2121
import { Environment } from '../../../cdPipeline/cdPipeline.types'
2222
import { WorkflowDimensions } from './config'
23+
import React from 'react'
24+
import { History as ReactRouterHistory } from 'history'
2325

2426
export interface CDMaterialProps extends RouteComponentProps<{}> {
2527
material?: CDMaterialType[]
@@ -667,6 +669,7 @@ export interface TriggerViewConfigDiffProps {
667669
diffOptions: Record<string, boolean>
668670
isRollbackTriggerSelected: boolean
669671
isRecentConfigAvailable: boolean
672+
history: ReactRouterHistory
670673
}
671674

672675
export const MATERIAL_TYPE = {
@@ -725,3 +728,10 @@ export interface AddDimensionsToDownstreamDeploymentsParams {
725728
startX: number
726729
startY: number
727730
}
731+
732+
export interface NewParams {
733+
'cd-node': string
734+
'node-type': string
735+
mode: string
736+
search?: string
737+
}

0 commit comments

Comments
 (0)