Skip to content

Commit f6cd528

Browse files
mukultayal135mukultayal135
authored
Merge pull request #1593 from devtron-labs/lock-config-v2
feat: Lock config v2
2 parents 2327bac + 53a0b86 commit f6cd528

File tree

6 files changed

+165
-24
lines changed

6 files changed

+165
-24
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "0.0.59",
7+
"@devtron-labs/devtron-fe-common-lib": "0.0.60",
88
"@rjsf/core": "^5.13.3",
99
"@rjsf/utils": "^5.13.3",
1010
"@rjsf/validator-ajv8": "^5.13.3",

‎src/components/EnvironmentOverride/DeploymentTemplateOverrideForm.tsx

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useMemo, useState } from 'react'
1+
import React, { useEffect, useMemo, useRef, useState } from 'react'
22
import { useParams } from 'react-router-dom'
33
import { toast } from 'react-toastify'
44
import YAML from 'yaml'
@@ -27,11 +27,14 @@ import {
2727
validateBasicView,
2828
} from '../deploymentConfig/DeploymentConfig.utils'
2929
import CodeEditor from '../CodeEditor/CodeEditor'
30+
import * as jsonpatch from 'fast-json-patch'
3031

3132
const ConfigToolbar = importComponentFromFELibrary('ConfigToolbar', DeploymentConfigToolbar)
3233
const SaveChangesModal = importComponentFromFELibrary('SaveChangesModal')
3334
const DeleteOverrideDraftModal = importComponentFromFELibrary('DeleteOverrideDraftModal')
3435
const DeploymentTemplateLockedDiff = importComponentFromFELibrary('DeploymentTemplateLockedDiff')
36+
const applyPatches=importComponentFromFELibrary('applyPatches', null, 'function')
37+
3538
export default function DeploymentTemplateOverrideForm({
3639
state,
3740
isConfigProtectionEnabled,
@@ -66,6 +69,9 @@ export default function DeploymentTemplateOverrideForm({
6669
allowed: false,
6770
})
6871
const [disableSaveEligibleChanges, setDisableSaveEligibleChanges] = useState(false)
72+
const [hideLockedKeys, setHideLockedKeys] = useState(false)
73+
const hideLockKeysToggled = useRef(false)
74+
const removedPatches = useRef<Array<jsonpatch.Operation>>([])
6975

7076
useEffect(() => {
7177
// Reset editor value on delete override action
@@ -105,10 +111,15 @@ export default function DeploymentTemplateOverrideForm({
105111

106112
const prepareDataToSave = (envOverrideValuesWithBasic, includeInDraft?: boolean) => {
107113
let valuesOverride = envOverrideValuesWithBasic || obj || state.duplicate
114+
115+
if (applyPatches && hideLockedKeys) {
116+
valuesOverride = applyPatches(valuesOverride, removedPatches.current)
117+
}
118+
108119
if (state.showLockedTemplateDiff) {
109120
// if locked keys
110121
if (!lockedConfigKeysWithLockType.allowed) {
111-
valuesOverride = getUnlockedJSON(lockedOverride, lockedConfigKeysWithLockType.config)
122+
valuesOverride = getUnlockedJSON(lockedOverride, lockedConfigKeysWithLockType.config, true).newDocument
112123
} else {
113124
// if allowed keys
114125
valuesOverride = getLockedJSON(lockedOverride, lockedConfigKeysWithLockType.config)
@@ -216,9 +227,10 @@ export default function DeploymentTemplateOverrideForm({
216227
//loading state for checking locked changes
217228
dispatch({ type: DeploymentConfigStateActionTypes.lockChangesLoading, payload: true })
218229
}
230+
const payload = prepareDataToSave(envOverrideValuesWithBasic, false)
219231
const deploymentTemplateResp = isConfigProtectionEnabled
220232
? await checkForProtectedLockedChanges()
221-
: await api(+appId, +envId, prepareDataToSave(envOverrideValuesWithBasic, false))
233+
: await api(+appId, +envId, payload)
222234
if (deploymentTemplateResp.result.isLockConfigError && !saveEligibleChanges) {
223235
//checking if any locked changes and opening drawer to show eligible and locked ones
224236
setLockedOverride(deploymentTemplateResp.result?.lockedOverride)
@@ -232,6 +244,11 @@ export default function DeploymentTemplateOverrideForm({
232244

233245
if (envOverrideValuesWithBasic) {
234246
editorOnChange(YAML.stringify(envOverrideValuesWithBasic, { indent: 2 }), true)
247+
} else {
248+
dispatch({
249+
type: DeploymentConfigStateActionTypes.tempFormData,
250+
payload: YAML.stringify(deploymentTemplateResp.result.envOverrideValues),
251+
})
235252
}
236253
toast.success(
237254
<div className="toast">
@@ -354,6 +371,7 @@ export default function DeploymentTemplateOverrideForm({
354371
openComparison: state.showReadme && state.selectedTabIndex === 2,
355372
},
356373
})
374+
hideLockKeysToggled.current = true
357375
}
358376

359377
const handleComparisonClick = () => {
@@ -366,6 +384,9 @@ export default function DeploymentTemplateOverrideForm({
366384
const handleTabSelection = (index: number) => {
367385
if (state.unableToParseYaml) return
368386

387+
//setting true to update codeditor values with current locked keys checkbox value
388+
hideLockKeysToggled.current = true
389+
369390
dispatch({
370391
type: DeploymentConfigStateActionTypes.selectedTabIndex,
371392
payload:
@@ -508,6 +529,9 @@ export default function DeploymentTemplateOverrideForm({
508529
: YAML.stringify(state.data.globalConfig, { indent: 2 })
509530
} else if (state.tempFormData) {
510531
codeEditorValue = state.tempFormData
532+
if (applyPatches && hideLockedKeys) {
533+
codeEditorValue = YAML.stringify(applyPatches(YAML.parse(state.tempFormData), removedPatches.current))
534+
}
511535
} else {
512536
const isOverridden = state.latestDraft?.action === 3 ? state.isDraftOverriden : !!state.duplicate
513537
codeEditorValue = isOverridden
@@ -571,6 +595,9 @@ export default function DeploymentTemplateOverrideForm({
571595
<DeploymentTemplateReadOnlyEditorView
572596
value={isValuesOverride ? getCodeEditorValue(true) : manifestDataRHS}
573597
isEnvOverride={true}
598+
lockedConfigKeysWithLockType={lockedConfigKeysWithLockType}
599+
hideLockedKeys={hideLockedKeys}
600+
removedPatches={removedPatches}
574601
/>
575602
)
576603
} else if (state.loadingManifestOverride) {
@@ -581,7 +608,7 @@ export default function DeploymentTemplateOverrideForm({
581608
)
582609
} else {
583610
return (
584-
<DeploymentTemplateEditorView
611+
< DeploymentTemplateEditorView
585612
isEnvOverride={true}
586613
value={isValuesOverride ? getCodeEditorValue(false) : manifestDataRHS}
587614
defaultValue={
@@ -606,6 +633,10 @@ export default function DeploymentTemplateOverrideForm({
606633
convertVariables={convertVariablesOverride}
607634
setConvertVariables={setConvertVariables}
608635
groupedData={groupedData}
636+
hideLockedKeys={hideLockedKeys}
637+
lockedConfigKeysWithLockType={lockedConfigKeysWithLockType}
638+
hideLockKeysToggled={hideLockKeysToggled}
639+
removedPatches={removedPatches}
609640
/>
610641
)
611642
}
@@ -703,6 +734,11 @@ export default function DeploymentTemplateOverrideForm({
703734
componentType={3}
704735
setShowLockedDiffForApproval={setShowLockedDiffForApproval}
705736
setLockedConfigKeysWithLockType={setLockedConfigKeysWithLockType}
737+
lockedConfigKeysWithLockType={lockedConfigKeysWithLockType}
738+
setHideLockedKeys={setHideLockedKeys}
739+
hideLockedKeys={hideLockedKeys}
740+
hideLockKeysToggled={hideLockKeysToggled}
741+
inValidYaml={state.unableToParseYaml}
706742
/>
707743
{state.selectedTabIndex !== 2 && !state.showReadme && renderOverrideInfoStrip()}
708744
{renderValuesView()}

‎src/components/deploymentConfig/DeploymentConfig.tsx

Lines changed: 61 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Reducer, createContext, useContext, useEffect, useReducer, useState } from 'react'
1+
import React, { Reducer, createContext, useContext, useEffect, useReducer, useRef, useState } from 'react'
22
import { useHistory, useParams } from 'react-router'
33
import { toast } from 'react-toastify'
44
import {
@@ -53,11 +53,13 @@ import { SaveConfirmationDialog, SuccessToastBody } from './DeploymentTemplateVi
5353
import { deploymentConfigReducer, initDeploymentConfigState } from './DeploymentConfigReducer'
5454
import DeploymentTemplateReadOnlyEditorView from './DeploymentTemplateView/DeploymentTemplateReadOnlyEditorView'
5555
import CodeEditor from '../CodeEditor/CodeEditor'
56+
import * as jsonpatch from 'fast-json-patch'
5657
const DeploymentTemplateLockedDiff = importComponentFromFELibrary('DeploymentTemplateLockedDiff')
5758
const ConfigToolbar = importComponentFromFELibrary('ConfigToolbar', DeploymentConfigToolbar)
5859
const SaveChangesModal = importComponentFromFELibrary('SaveChangesModal')
5960
const DraftComments = importComponentFromFELibrary('DraftComments')
6061
const getDraftByResourceName = importComponentFromFELibrary('getDraftByResourceName', null, 'function')
62+
const applyPatches = importComponentFromFELibrary('applyPatches', null, 'function')
6163

6264
export const DeploymentConfigContext = createContext<DeploymentConfigContextType>(null)
6365

@@ -87,8 +89,12 @@ export default function DeploymentConfig({
8789
)
8890
const [obj, , , error] = useJsonYaml(state.tempFormData, 4, 'yaml', true)
8991
const [, grafanaModuleStatus] = useAsync(() => getModuleInfo(ModuleNameMap.GRAFANA), [appId])
92+
const [hideLockedKeys, setHideLockedKeys] = useState(false)
93+
const hideLockKeysToggled = useRef(false)
94+
9095
const readOnlyPublishedMode = state.selectedTabIndex === 1 && isProtected && !!state.latestDraft
9196
const baseDeploymentAbortController = new AbortController()
97+
const removedPatches = useRef<Array<jsonpatch.Operation>>([])
9298

9399
const setIsValues = (value: boolean) => {
94100
dispatch({
@@ -208,6 +214,12 @@ export default function DeploymentConfig({
208214
payload: false,
209215
})
210216
})
217+
.finally(() => {
218+
dispatch({
219+
type: DeploymentConfigStateActionTypes.loading,
220+
payload: false,
221+
})
222+
})
211223
}
212224

213225
const fetchAllDrafts = (chartRefsData) => {
@@ -359,6 +371,16 @@ export default function DeploymentConfig({
359371
})
360372
}
361373
}
374+
const reload = () => {
375+
dispatch({
376+
type: DeploymentConfigStateActionTypes.loading,
377+
payload: {
378+
loading: true,
379+
},
380+
})
381+
setHideLockedKeys(false)
382+
initialise()
383+
}
362384

363385
async function fetchDeploymentTemplate() {
364386
dispatch({
@@ -575,6 +597,7 @@ export default function DeploymentConfig({
575597
})
576598
saveEligibleChangesCb && closeLockedDiffDrawerWithChildModal()
577599
state.showConfirmation && handleConfirmationDialog(false)
600+
setHideLockedKeys(false)
578601
}
579602
}
580603

@@ -638,6 +661,7 @@ export default function DeploymentConfig({
638661
openComparison: state.showReadme && state.selectedTabIndex === 2,
639662
},
640663
})
664+
hideLockKeysToggled.current = true
641665
}
642666

643667
const handleComparisonClick = () => {
@@ -684,6 +708,8 @@ export default function DeploymentConfig({
684708

685709
const handleTabSelection = (index: number) => {
686710
if (state.unableToParseYaml) return
711+
//setting true to update codeditor values with current locked keys checkbox value
712+
hideLockKeysToggled.current = true
687713

688714
dispatch({
689715
type: DeploymentConfigStateActionTypes.selectedTabIndex,
@@ -760,16 +786,19 @@ export default function DeploymentConfig({
760786
const prepareDataToSave = (skipReadmeAndSchema?: boolean) => {
761787
let valuesOverride = obj
762788

763-
if(state.showLockedTemplateDiff) {
764-
// if locked keys
765-
if(!lockedConfigKeysWithLockType.allowed) {
766-
valuesOverride = getUnlockedJSON(lockedOverride, lockedConfigKeysWithLockType.config)
789+
if (applyPatches && hideLockedKeys) {
790+
valuesOverride = applyPatches(valuesOverride, removedPatches.current)
791+
}
792+
793+
if (state.showLockedTemplateDiff) {
794+
// if locked keys
795+
if (!lockedConfigKeysWithLockType.allowed) {
796+
valuesOverride = getUnlockedJSON(lockedOverride, lockedConfigKeysWithLockType.config, true).newDocument
767797
} else {
768798
// if allowed keys
769799
valuesOverride = getLockedJSON(lockedOverride, lockedConfigKeysWithLockType.config)
770800
}
771801
}
772-
773802
const requestData = {
774803
...(state.chartConfig.chartRefId === state.selectedChart.id ? state.chartConfig : {}),
775804
appId: +appId,
@@ -835,7 +864,11 @@ export default function DeploymentConfig({
835864
if (isCompareAndApprovalState) {
836865
result = await fetchManifestData(state.draftValues)
837866
} else {
838-
result = await fetchManifestData(state.tempFormData)
867+
if (applyPatches && hideLockedKeys) {
868+
result = fetchManifestData(
869+
YAML.stringify(applyPatches(YAML.parse(state.tempFormData), removedPatches.current)),
870+
)
871+
} else result = await fetchManifestData(state.tempFormData)
839872
}
840873
return result
841874
}
@@ -844,7 +877,14 @@ export default function DeploymentConfig({
844877

845878
const renderEditorComponent = () => {
846879
if (readOnlyPublishedMode && !state.showReadme) {
847-
return <DeploymentTemplateReadOnlyEditorView value={state.publishedState?.tempFormData} />
880+
return (
881+
<DeploymentTemplateReadOnlyEditorView
882+
value={state.publishedState?.tempFormData}
883+
lockedConfigKeysWithLockType={lockedConfigKeysWithLockType}
884+
hideLockedKeys={hideLockedKeys}
885+
removedPatches={removedPatches}
886+
/>
887+
)
848888
}
849889

850890
if (state.loadingManifest) {
@@ -868,6 +908,10 @@ export default function DeploymentConfig({
868908
convertVariables={state.convertVariables}
869909
setConvertVariables={setConvertVariables}
870910
groupedData={state.groupedOptionsData}
911+
hideLockedKeys={hideLockedKeys}
912+
lockedConfigKeysWithLockType={lockedConfigKeysWithLockType}
913+
hideLockKeysToggled={hideLockKeysToggled}
914+
removedPatches={removedPatches}
871915
/>
872916
)
873917
}
@@ -907,7 +951,7 @@ export default function DeploymentConfig({
907951
isCiPipeline={isCiPipeline}
908952
toggleAppMetrics={toggleAppMetrics}
909953
isPublishedMode={readOnlyPublishedMode}
910-
reload={initialise}
954+
reload={reload}
911955
isValues={state.isValues}
912956
convertVariables={state.convertVariables}
913957
isSuperAdmin={isSuperAdmin}
@@ -953,13 +997,19 @@ export default function DeploymentConfig({
953997
isApprovalPending={state.latestDraft?.draftState === 4}
954998
approvalUsers={state.latestDraft?.approvers}
955999
showValuesPostfix={true}
956-
reload={initialise}
1000+
reload={reload}
9571001
isValues={state.isValues}
9581002
setIsValues={setIsValues}
9591003
convertVariables={state.convertVariables}
9601004
setConvertVariables={setConvertVariables}
9611005
componentType={3}
9621006
setShowLockedDiffForApproval={setShowLockedDiffForApproval}
1007+
setHideLockedKeys={setHideLockedKeys}
1008+
hideLockedKeys={hideLockedKeys}
1009+
setLockedConfigKeysWithLockType={setLockedConfigKeysWithLockType}
1010+
lockedConfigKeysWithLockType={lockedConfigKeysWithLockType}
1011+
hideLockKeysToggled={hideLockKeysToggled}
1012+
inValidYaml={state.unableToParseYaml}
9631013
/>
9641014
{renderValuesView()}
9651015
{state.showConfirmation && (
@@ -992,7 +1042,7 @@ export default function DeploymentConfig({
9921042
prepareDataToSave={prepareDataToSave}
9931043
toggleModal={toggleSaveChangesModal}
9941044
latestDraft={state.latestDraft}
995-
reload={initialise}
1045+
reload={reload}
9961046
closeLockedDiffDrawerWithChildModal={closeLockedDiffDrawerWithChildModal}
9971047
showAsModal={!state.showLockedTemplateDiff}
9981048
saveEligibleChangesCb={saveEligibleChangesCb}

0 commit comments

Comments
 (0)