Skip to content

Commit ee88a9e

Browse files
shivani170shivani170
authored
Merge pull request #1627 from devtron-labs/config-diff-navigation
feat: replace all showConfigDiff state with param mode
2 parents 34e6168 + d0bec2b commit ee88a9e

File tree

4 files changed

+145
-44
lines changed

4 files changed

+145
-44
lines changed

‎src/components/app/details/triggerView/TriggerView.utils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const LAST_SAVED_CONFIG_OPTION = {
4040
infoText: 'Use last saved configuration to deploy',
4141
}
4242

43-
const LATEST_TRIGGER_CONFIG_OPTION = {
43+
export const LATEST_TRIGGER_CONFIG_OPTION = {
4444
label: 'Last deployed config',
4545
value: DeploymentWithConfigType.LATEST_TRIGGER_CONFIG,
4646
infoText: 'Retain currently deployed configuration',

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

Lines changed: 107 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,10 @@ import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManag
7373
import { ModuleStatus } from '../../../v2/devtronStackManager/DevtronStackManager.type'
7474
import { DropdownIndicator, Option } from '../../../v2/common/ReactSelect.utils'
7575
import {
76+
DEPLOYMENT_CONFIGURATION_NAV_MAP,
7677
LAST_SAVED_CONFIG_OPTION,
7778
SPECIFIC_TRIGGER_CONFIG_OPTION,
79+
LATEST_TRIGGER_CONFIG_OPTION,
7880
checkForDiff,
7981
getDeployConfigOptions,
8082
processResolvedPromise,
@@ -87,6 +89,7 @@ import { EMPTY_STATE_STATUS, TOAST_BUTTON_TEXT_VIEW_DETAILS } from '../../../../
8789
import { abortEarlierRequests, getInitialState } from './cdMaterials.utils'
8890
import { getLastExecutionByArtifactAppEnv } from '../../../../services/service'
8991
import AnnouncementBanner from '../../../common/AnnouncementBanner'
92+
import { useRouteMatch } from 'react-router-dom'
9093

9194
const ApprovalInfoTippy = importComponentFromFELibrary('ApprovalInfoTippy')
9295
const ExpireApproval = importComponentFromFELibrary('ExpireApproval')
@@ -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" && searchParams.deploy && searchParams.config
186190
/* ------------ Utils required in useEffect ------------*/
187191
const getSecurityModuleStatus = async () => {
188192
try {
@@ -197,7 +201,7 @@ export default function CDMaterial({
197201
}
198202

199203
const getWfrId = (initSelectedMaterial?: CDMaterialType) => {
200-
if (state.selectedConfigToDeploy.value === DeploymentWithConfigType.LATEST_TRIGGER_CONFIG) {
204+
if (state.selectedConfigToDeploy?.value === DeploymentWithConfigType.LATEST_TRIGGER_CONFIG && state.recentDeploymentConfig) {
201205
return state.recentDeploymentConfig.wfrId
202206
}
203207

@@ -241,7 +245,12 @@ export default function CDMaterial({
241245
checkingDiff: false,
242246
}))
243247
},
244-
)
248+
).catch((error) => {
249+
showError(error)
250+
})
251+
.finally(() => {
252+
setState((prevState) => ({ ...prevState, checkingDiff: false }))
253+
})
245254
}
246255

247256
const setSearchValue = (searchValue: string) => {
@@ -395,18 +404,37 @@ export default function CDMaterial({
395404
// The above states are derived from material so no need to make a state for them and shift the config diff here
396405
}, [material])
397406

407+
const getInitialSelectedConfigToDeploy = () => {
408+
if (
409+
(materialType === MATERIAL_TYPE.rollbackMaterialList && !searchParams.deploy) ||
410+
searchParams.deploy === DeploymentWithConfigType.SPECIFIC_TRIGGER_CONFIG
411+
) {
412+
return SPECIFIC_TRIGGER_CONFIG_OPTION
413+
}
414+
if (searchParams.deploy === DeploymentWithConfigType.LATEST_TRIGGER_CONFIG) {
415+
return LATEST_TRIGGER_CONFIG_OPTION
416+
}
417+
return LAST_SAVED_CONFIG_OPTION
418+
}
398419
useEffect(() => {
399420
setState((prevState) => ({
400421
...prevState,
401422
isRollbackTrigger: materialType === MATERIAL_TYPE.rollbackMaterialList,
402423
isSelectImageTrigger: materialType === MATERIAL_TYPE.inputMaterialList,
403424
selectedConfigToDeploy:
404-
materialType === MATERIAL_TYPE.rollbackMaterialList
405-
? SPECIFIC_TRIGGER_CONFIG_OPTION
406-
: LAST_SAVED_CONFIG_OPTION,
425+
getInitialSelectedConfigToDeploy(),
407426
}))
408427
}, [materialType])
409428

429+
useEffect(() => {
430+
if (searchParams.deploy) {
431+
setState((prevState) => ({
432+
...prevState,
433+
selectedConfigToDeploy: getInitialSelectedConfigToDeploy(),
434+
}))
435+
}
436+
}, [searchParams.deploy])
437+
410438
useEffect(() => {
411439
setState((prevState) => ({
412440
...prevState,
@@ -722,19 +750,37 @@ export default function CDMaterial({
722750
state.latestDeploymentConfig?.deploymentTemplate &&
723751
state.latestDeploymentConfig.pipelineStrategy)
724752

753+
const getConfigToDeployValue = () => {
754+
if (searchParams.deploy) {
755+
return searchParams.deploy
756+
} else {
757+
if (materialType === MATERIAL_TYPE.rollbackMaterialList) {
758+
return DeploymentWithConfigType.SPECIFIC_TRIGGER_CONFIG
759+
} else {
760+
return DeploymentWithConfigType.LAST_SAVED_CONFIG
761+
}
762+
}
763+
}
764+
725765
const canReviewConfig = () =>
726766
(state.recentDeploymentConfig?.deploymentTemplate &&
727767
state.recentDeploymentConfig.pipelineStrategy &&
728768
(state.selectedConfigToDeploy.value === DeploymentWithConfigType.LATEST_TRIGGER_CONFIG ||
729769
isConfigPresent())) ||
730770
!state.recentDeploymentConfig
731771

732-
const reviewConfig = () => {
733-
if (canReviewConfig()) {
734-
setState((prevState) => ({
735-
...prevState,
736-
showConfigDiffView: !prevState.showConfigDiffView,
737-
}))
772+
const onClickSetInitialParams = (modeParamValue: string) => {
773+
if (canReviewConfig) {
774+
const newParams = {
775+
...searchParams,
776+
mode: modeParamValue,
777+
config: DEPLOYMENT_CONFIGURATION_NAV_MAP.DEPLOYMENT_TEMPLATE.key,
778+
deploy: getConfigToDeployValue(),
779+
}
780+
781+
history.push({
782+
search: new URLSearchParams(newParams).toString(),
783+
})
738784
}
739785
}
740786

@@ -765,16 +811,26 @@ export default function CDMaterial({
765811
: state.specificDeploymentConfig
766812
}
767813

814+
const setConfigParams = (deploy: string) => {
815+
const newParams = {
816+
...searchParams,
817+
deploy,
818+
}
819+
history.push({
820+
search: new URLSearchParams(newParams).toString(),
821+
})
822+
}
823+
768824
const handleConfigSelection = (selected) => {
769825
if (selected.value !== state.selectedConfigToDeploy.value) {
770826
const _diffOptions = checkForDiff(state.recentDeploymentConfig, getBaseTemplateConfiguration(selected))
771-
772827
setState((prevState) => ({
773828
...prevState,
774-
selectedConfigToDeploy: selected,
829+
selectedConfigToDeploy: selected ? selected : getInitialSelectedConfigToDeploy(),
775830
diffFound: _diffOptions && Object.values(_diffOptions).some((d) => d),
776831
diffOptions: _diffOptions,
777832
}))
833+
setConfigParams(selected.value)
778834
}
779835
}
780836

@@ -898,7 +954,7 @@ export default function CDMaterial({
898954
appId,
899955
Number(getCDArtifactId()),
900956
e,
901-
state.selectedConfigToDeploy?.value,
957+
state.selectedConfigToDeploy.value,
902958
getWfrId(),
903959
)
904960
return
@@ -1007,7 +1063,7 @@ export default function CDMaterial({
10071063
const getTriggerBodyHeight = (isApprovalConfigured: boolean) => {
10081064
const subHeight = window?._env_?.ANNOUNCEMENT_BANNER_MSG ? 37 : 0
10091065

1010-
if (state.showConfigDiffView) {
1066+
if (showConfigDiffView) {
10111067
return `calc(100vh - 141px - ${subHeight}px)`
10121068
}
10131069
if (
@@ -1896,7 +1952,7 @@ export default function CDMaterial({
18961952
} ${isLastDeployedOption ? 'pt-10 pb-10' : 'pt-7 pb-7'}`}
18971953
disabled={state.checkingDiff}
18981954
type="button"
1899-
onClick={reviewConfig}
1955+
onClick={() => onClickSetInitialParams('review-config')}
19001956
>
19011957
{!isLastDeployedOption && (state.recentDeploymentConfig !== null || state.checkingDiff) && (
19021958
<div
@@ -1965,7 +2021,7 @@ export default function CDMaterial({
19652021
<div
19662022
className={`trigger-modal__trigger ${
19672023
(!state.isRollbackTrigger && !state.isSelectImageTrigger) ||
1968-
state.showConfigDiffView ||
2024+
showConfigDiffView ||
19692025
stageType === DeploymentNodeType.PRECD ||
19702026
stageType === DeploymentNodeType.POSTCD
19712027
? 'flex right'
@@ -1974,7 +2030,7 @@ export default function CDMaterial({
19742030
>
19752031
{!hideConfigDiffSelector &&
19762032
(state.isRollbackTrigger || state.isSelectImageTrigger) &&
1977-
!state.showConfigDiffView &&
2033+
!showConfigDiffView &&
19782034
stageType === DeploymentNodeType.CD && (
19792035
<div className="flex left dc__border br-4 h-42">
19802036
<div className="flex">
@@ -2058,36 +2114,49 @@ export default function CDMaterial({
20582114
)
20592115
}
20602116

2117+
const renderTriggerViewConfigDiff = () => {
2118+
if (state.checkingDiff) {
2119+
return <Progressing pageLoader />
2120+
}
2121+
2122+
return (
2123+
<TriggerViewConfigDiff
2124+
currentConfiguration={state.recentDeploymentConfig}
2125+
baseTemplateConfiguration={getBaseTemplateConfiguration()}
2126+
selectedConfigToDeploy={state.selectedConfigToDeploy}
2127+
handleConfigSelection={handleConfigSelection}
2128+
isConfigAvailable={isConfigAvailable}
2129+
diffOptions={state.diffOptions}
2130+
isRollbackTriggerSelected={state.isRollbackTrigger}
2131+
isRecentConfigAvailable={state.recentDeploymentConfig !== null}
2132+
canReviewConfig={showConfigDiffView && canReviewConfig()}
2133+
/>
2134+
)
2135+
}
2136+
20612137
const renderTriggerBody = (isApprovalConfigured: boolean) => (
20622138
<div
2063-
className={`trigger-modal__body ${state.showConfigDiffView && canReviewConfig() ? 'p-0' : ''}`}
2139+
className={`trigger-modal__body ${showConfigDiffView && canReviewConfig() ? 'p-0' : ''}`}
20642140
style={{
20652141
height: getTriggerBodyHeight(isApprovalConfigured),
20662142
}}
20672143
>
2068-
{state.showConfigDiffView && canReviewConfig() ? (
2069-
<TriggerViewConfigDiff
2070-
currentConfiguration={state.recentDeploymentConfig}
2071-
baseTemplateConfiguration={getBaseTemplateConfiguration()}
2072-
selectedConfigToDeploy={state.selectedConfigToDeploy}
2073-
handleConfigSelection={handleConfigSelection}
2074-
isConfigAvailable={isConfigAvailable}
2075-
diffOptions={state.diffOptions}
2076-
isRollbackTriggerSelected={state.isRollbackTrigger}
2077-
isRecentConfigAvailable={state.recentDeploymentConfig !== null}
2078-
/>
2079-
) : (
2080-
renderMaterialList(isApprovalConfigured)
2081-
)}
2144+
{showConfigDiffView && canReviewConfig()
2145+
? renderTriggerViewConfigDiff()
2146+
: renderMaterialList(isApprovalConfigured)}
20822147
</div>
20832148
)
20842149

20852150
const renderCDModal = (isApprovalConfigured: boolean) => (
20862151
<>
20872152
<div className="trigger-modal__header">
2088-
{state.showConfigDiffView ? (
2153+
{showConfigDiffView ? (
20892154
<div className="flex left">
2090-
<button type="button" className="dc__transparent icon-dim-24" onClick={reviewConfig}>
2155+
<button
2156+
type="button"
2157+
className="dc__transparent icon-dim-24"
2158+
onClick={() => onClickSetInitialParams('list')}
2159+
>
20912160
<BackIcon />
20922161
</button>
20932162
<div className="flex column left ml-16">
@@ -2107,7 +2176,7 @@ export default function CDMaterial({
21072176
</button>
21082177
</div>
21092178

2110-
{!state.showConfigDiffView && window?._env_?.ANNOUNCEMENT_BANNER_MSG && (
2179+
{!showConfigDiffView && window?._env_?.ANNOUNCEMENT_BANNER_MSG && (
21112180
<AnnouncementBanner parentClassName="cd-trigger-announcement" isCDMaterial />
21122181
)}
21132182

@@ -2202,13 +2271,13 @@ export default function CDMaterial({
22022271
if (material.length > 0) {
22032272
return isFromBulkCD ? (
22042273
<>
2205-
{!state.showConfigDiffView && window?._env_?.ANNOUNCEMENT_BANNER_MSG && (
2274+
{!showConfigDiffView && window?._env_?.ANNOUNCEMENT_BANNER_MSG && (
22062275
<AnnouncementBanner parentClassName="cd-trigger-announcement" isCDMaterial />
22072276
)}
22082277
{renderTriggerBody(isApprovalConfigured)}
22092278
</>
22102279
) : (
2211-
renderCDModal(isApprovalConfigured)
2280+
renderCDModal(isApprovalConfigured)
22122281
)
22132282
}
22142283

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

Lines changed: 36 additions & 5 deletions
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'
@@ -15,6 +15,7 @@ import { TriggerViewConfigDiffProps } from '../types'
1515
import { ReactComponent as ManifestIcon } from '../../../../../assets/icons/ic-file-code.svg'
1616
import { ReactComponent as DownArrowFull } from '../../../../../assets/icons/ic-down-arrow-full.svg'
1717
import { ReactComponent as ViewVariablesIcon } from '../../../../../assets/icons/ic-view-variable-toggle.svg'
18+
import { useHistory } from 'react-router-dom'
1819

1920
export default function TriggerViewConfigDiff({
2021
currentConfiguration,
@@ -25,9 +26,13 @@ export default function TriggerViewConfigDiff({
2526
diffOptions,
2627
isRollbackTriggerSelected,
2728
isRecentConfigAvailable,
29+
canReviewConfig
2830
}: TriggerViewConfigDiffProps) {
31+
const { searchParams } = useSearchString()
32+
const history = useHistory()
33+
2934
const [activeSideNavOption, setActiveSideNavOption] = useState(
30-
DEPLOYMENT_CONFIGURATION_NAV_MAP.DEPLOYMENT_TEMPLATE.key,
35+
searchParams.config,
3136
)
3237
const [convertVariables, setConvertVariables] = useState<boolean>(false) // toggle to show/hide variable values
3338
const [isVariableAvailable, setIsVariableAvailable] = useState<boolean>(false) // check if variable snapshot is {} or not
@@ -50,9 +55,23 @@ export default function TriggerViewConfigDiff({
5055
const [secretOptionCollapsed, setSecretOptionCollapsed] = useState<boolean>(false)
5156
const [currentData, setCurrentData] = useState<any>({}) // store codeEditorValue of current(lhs) and base(rhs) config
5257

58+
useEffect(() => {
59+
if (canReviewConfig && searchParams.config) {
60+
const newSearchParams = {
61+
...searchParams,
62+
config: searchParams.config,
63+
}
64+
history.push({
65+
search: new URLSearchParams(newSearchParams).toString(),
66+
})
67+
//handling the case when the user directly lands on the deployment history page
68+
handleNavOptionSelection(null, newSearchParams.config)
69+
}
70+
}, [canReviewConfig, searchParams.config])
71+
5372
useEffect(() => {
5473
handleConfigToDeploySelection()
55-
}, [selectedConfigToDeploy])
74+
}, [selectedConfigToDeploy, searchParams.deploy])
5675

5776
useEffect(() => {
5877
if (Object.keys(currentData).length === 0) {
@@ -74,8 +93,8 @@ export default function TriggerViewConfigDiff({
7493

7594
if (!getNavOptions(navParentChildKeys[0]).includes(navParentChildKeys[1])) {
7695
setConvertVariables(false)
77-
setActiveSideNavOption(DEPLOYMENT_CONFIGURATION_NAV_MAP.DEPLOYMENT_TEMPLATE.key)
78-
handleNavOptionSelection(null, DEPLOYMENT_CONFIGURATION_NAV_MAP.DEPLOYMENT_TEMPLATE.key)
96+
setActiveSideNavOption(searchParams.config)
97+
handleNavOptionSelection(null, searchParams.config)
7998
return
8099
}
81100
}
@@ -139,8 +158,20 @@ export default function TriggerViewConfigDiff({
139158
/*
140159
set the current(lhs) and base(rhs) config value in code editor for the selected nav option, runs every on nav option selection
141160
*/
161+
162+
const setParamsValue = ( configVal: string) => {
163+
const newParams = {
164+
...searchParams,
165+
config: configVal,
166+
}
167+
history.push({
168+
search: new URLSearchParams(newParams).toString(),
169+
})
170+
}
171+
142172
const handleNavOptionSelection = (e, navConfigKey?: string) => {
143173
const dataValue = navConfigKey || e?.target?.dataset?.value
174+
setParamsValue(dataValue)
144175
if (dataValue) {
145176
setConvertVariables(false)
146177
setActiveSideNavOption(dataValue)

0 commit comments

Comments
 (0)