hide and show lock keys functionality

Mukul Tayal · Mukul Tayal · commit 4a11fc86aa94 · 2024-01-17T19:01:19.000+05:30
diff --git a/src/components/EnvironmentOverride/DeploymentTemplateOverrideForm.tsx b/src/components/EnvironmentOverride/DeploymentTemplateOverrideForm.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import YAML from 'yaml'
@@ -66,6 +66,9 @@ export default function DeploymentTemplateOverrideForm({
         allowed: false,
     })
     const [disableSaveEligibleChanges, setDisableSaveEligibleChanges] = useState(false)
+    const [hideLockedKeys, setHideLockedKeys] = useState(false)
+    const hideLockKeysToggled = useRef(false)
+
 
     useEffect(() => {
         // Reset editor value on delete override action
@@ -108,7 +111,7 @@ export default function DeploymentTemplateOverrideForm({
         if (state.showLockedTemplateDiff) {
             // if locked keys
             if (!lockedConfigKeysWithLockType.allowed) {
-                valuesOverride = getUnlockedJSON(lockedOverride, lockedConfigKeysWithLockType.config)
+                valuesOverride = getUnlockedJSON(lockedOverride, lockedConfigKeysWithLockType.config,true).newDocument
             } else {
                 // if allowed keys
                 valuesOverride = getLockedJSON(lockedOverride, lockedConfigKeysWithLockType.config)
@@ -606,6 +609,9 @@ export default function DeploymentTemplateOverrideForm({
                     convertVariables={convertVariablesOverride}
                     setConvertVariables={setConvertVariables}
                     groupedData={groupedData}
+                    hideLockedKeys={hideLockedKeys}
+                    lockedConfigKeysWithLockType={lockedConfigKeysWithLockType}
+                    hideLockKeysToggled={hideLockKeysToggled}
                 />
             )
         }
@@ -700,6 +706,10 @@ export default function DeploymentTemplateOverrideForm({
                 componentType={3}
                 setShowLockedDiffForApproval={setShowLockedDiffForApproval}
                 setLockedConfigKeysWithLockType={setLockedConfigKeysWithLockType}
+                setHideLockedKeys={setHideLockedKeys}
+                hideLockedKeys={hideLockedKeys}
+                hideLockKeysToggled={hideLockKeysToggled}
+                inValidYaml={state.unableToParseYaml}
             />
             {state.selectedTabIndex !== 2 && !state.showReadme && renderOverrideInfoStrip()}
             {renderValuesView()}
diff --git a/src/components/deploymentConfig/DeploymentConfig.tsx b/src/components/deploymentConfig/DeploymentConfig.tsx
@@ -1,4 +1,4 @@
-import React, { Reducer, createContext, useContext, useEffect, useReducer, useState } from 'react'
+import React, { Reducer, createContext, useContext, useEffect, useReducer, useRef, useState } from 'react'
 import { useHistory, useParams } from 'react-router'
 import { toast } from 'react-toastify'
 import {
@@ -87,6 +87,9 @@ export default function DeploymentConfig({
     )
     const [obj, , , error] = useJsonYaml(state.tempFormData, 4, 'yaml', true)
     const [, grafanaModuleStatus] = useAsync(() => getModuleInfo(ModuleNameMap.GRAFANA), [appId])
+    const [hideLockedKeys, setHideLockedKeys] = useState(false)
+    const hideLockKeysToggled = useRef(false)
+
     const readOnlyPublishedMode = state.selectedTabIndex === 1 && isProtected && !!state.latestDraft
     const baseDeploymentAbortController = new AbortController()
 
@@ -762,8 +765,8 @@ export default function DeploymentConfig({
 
         if(state.showLockedTemplateDiff) {
             // if locked keys 
-            if(!lockedConfigKeysWithLockType.allowed) {
-                valuesOverride = getUnlockedJSON(lockedOverride, lockedConfigKeysWithLockType.config)
+            if (!lockedConfigKeysWithLockType.allowed) {
+                valuesOverride = getUnlockedJSON(lockedOverride, lockedConfigKeysWithLockType.config, true).newDocument
             } else {
                 // if allowed keys
                 valuesOverride = getLockedJSON(lockedOverride, lockedConfigKeysWithLockType.config)
@@ -868,6 +871,9 @@ export default function DeploymentConfig({
                 convertVariables={state.convertVariables}
                 setConvertVariables={setConvertVariables}
                 groupedData={state.groupedOptionsData}
+                hideLockedKeys={hideLockedKeys}
+                lockedConfigKeysWithLockType={lockedConfigKeysWithLockType}
+                hideLockKeysToggled={hideLockKeysToggled}
             />
         )
     }
@@ -957,6 +963,11 @@ export default function DeploymentConfig({
                         setConvertVariables={setConvertVariables}
                         componentType={3}
                         setShowLockedDiffForApproval={setShowLockedDiffForApproval}
+                        setHideLockedKeys={setHideLockedKeys}
+                        hideLockedKeys={hideLockedKeys}
+                        setLockedConfigKeysWithLockType={setLockedConfigKeysWithLockType}
+                        hideLockKeysToggled={hideLockKeysToggled}
+                        inValidYaml={state.unableToParseYaml}
                     />
                     {renderValuesView()}
                     {state.showConfirmation && (
diff --git a/src/components/deploymentConfig/DeploymentTemplateView/DeploymentTemplateEditorView.tsx b/src/components/deploymentConfig/DeploymentTemplateView/DeploymentTemplateEditorView.tsx
@@ -7,7 +7,7 @@ import {
     CompareApprovalAndDraftSelectedOption,
 } from '../types'
 import { DEPLOYMENT_TEMPLATE_LABELS_KEYS, NO_SCOPED_VARIABLES_MESSAGE, getApprovalPendingOption } from '../constants'
-import { versionComparator } from '../../common'
+import { importComponentFromFELibrary, versionComparator } from '../../common'
 import { SortingOrder } from '../../app/types'
 import { getDefaultDeploymentTemplate, getDeploymentManisfest, getDeploymentTemplateData } from '../service'
 import YAML from 'yaml'
@@ -25,6 +25,8 @@ import { useParams } from 'react-router-dom'
 import { DeploymentConfigContext } from '../DeploymentConfig'
 import DeploymentTemplateGUIView from './DeploymentTemplateGUIView'
 import { toast } from 'react-toastify'
+import * as jsonpatch from 'fast-json-patch'
+const getLockFilteredTemplate = importComponentFromFELibrary('getLockFilteredTemplate', null, 'function')
 
 export default function DeploymentTemplateEditorView({
     isEnvOverride,
@@ -39,6 +41,9 @@ export default function DeploymentTemplateEditorView({
     convertVariables,
     setConvertVariables,
     groupedData,
+    hideLockedKeys,
+    lockedConfigKeysWithLockType,
+    hideLockKeysToggled
 }: DeploymentTemplateEditorViewProps) {
     const { appId, envId } = useParams<{ appId: string; envId: string }>()
     const { isUnSet, state, environments, dispatch } = useContext<DeploymentConfigContextType>(DeploymentConfigContext)
@@ -47,9 +52,9 @@ export default function DeploymentTemplateEditorView({
     const [filteredEnvironments, setFilteredEnvironments] = useState<DeploymentChartOptionType[]>([])
     const [filteredCharts, setFilteredCharts] = useState<DeploymentChartOptionType[]>([])
     const [globalChartRef, setGlobalChartRef] = useState(null)
+    const removedPatches = useRef<Array<jsonpatch.Operation>>([])
     const isDeleteDraftState = state.latestDraft?.action === 3 && state.selectedCompareOption?.id === +envId
     const baseDeploymentAbortController = useRef(null)
-
     const [showDraftData, setShowDraftData] = useState(false)
     const [draftManifestData, setDraftManifestData] = useState(null)
     const [draftLoading, setDraftLoading] = useState(false)
@@ -301,16 +306,29 @@ export default function DeploymentTemplateEditorView({
     const valueLHS = isIdMatch ? defaultValue : source[selectedOptionId] // fetch LHS data from respective cache store
 
     // final value for LHS
-    const lhs = convertVariables ? resolvedValuesLHS : valueLHS
+    let lhs = convertVariables ? resolvedValuesLHS : valueLHS
 
     // choose RHS value for comparison
     const shouldUseDraftData = state.selectedTabIndex !== 3 && showDraftData
     const selectedData = isValues ? state.tempFormData || state.draftValues : draftManifestData
     const valueRHS = shouldUseDraftData ? selectedData : value
 
     // final value for RHS
-    const rhs = convertVariables ? resolvedValuesRHS : valueRHS
-
+    let rhs = convertVariables ? resolvedValuesRHS : valueRHS
+    if (getLockFilteredTemplate) {
+        const { updatedLHS, updatedRHS } = getLockFilteredTemplate(
+            hideLockedKeys,
+            lhs,
+            rhs,
+            lockedConfigKeysWithLockType,
+            removedPatches,
+            hideLockKeysToggled,
+            state.unableToParseYaml,
+        )
+        lhs = updatedLHS
+        rhs = updatedRHS
+    }
+    
     const renderCodeEditorHeading = () => (
         <CodeEditor.Header
             className={`code-editor__header flex left p-0-imp ${getOverrideClass()}`}
diff --git a/src/components/deploymentConfig/types.tsx b/src/components/deploymentConfig/types.tsx
@@ -219,6 +219,9 @@ export interface DeploymentTemplateEditorViewProps {
     convertVariables?: boolean
     setConvertVariables?: (convertVariables: boolean) => void
     groupedData?: any
+    hideLockedKeys: boolean
+    lockedConfigKeysWithLockType: ConfigKeysWithLockType
+    hideLockKeysToggled: React.MutableRefObject<boolean>
 }
 
 export interface DeploymentConfigContextType {

Original file line number	Diff line number	Diff line change
`@@ -219,6 +219,9 @@ export interface DeploymentTemplateEditorViewProps {`
`219`	`219`	`convertVariables?: boolean`
`220`	`220`	`setConvertVariables?: (convertVariables: boolean) => void`
`221`	`221`	`groupedData?: any`
	`222`	`+ hideLockedKeys: boolean`
	`223`	`+ lockedConfigKeysWithLockType: ConfigKeysWithLockType`
	`224`	`+ hideLockKeysToggled: React.MutableRefObject<boolean>`
`222`	`225`	`}`
`223`	`226`
`224`	`227`	`export interface DeploymentConfigContextType {`