chore: extract logic for managed fields from useEffect to handler in cluster terminal

Author: AbhishekA1509

src/components/ClusterNodes/ClusterManifest.tsx

@@ -11,6 +11,7 @@ import { ReactComponent as WarningIcon } from '../../assets/icons/ic-warning.svg
 import { ReactComponent as Close } from '../../assets/icons/ic-cross.svg'
 import { defaultManifestErrorText, manifestCommentsRegex } from './constants'
 import { EditModeType } from '../v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/constants'
+import { getTrimmedManifestData } from '../v2/appDetails/k8Resource/nodeDetail/nodeDetail.util'
 
 export default function ClusterManifest({
     terminalAccessId,
@@ -22,6 +23,9 @@ export default function ClusterManifest({
     selectTerminalTab,
     hideManagedFields,
 }: ClusterManifestType) {
+    // Manifest data with managed fields
+    const [originalManifest, setOriginalManifest] = useState('')
+    // Manifest data that we would be comparing with the edited manifest
     const [defaultManifest, setDefaultManifest] = useState('')
     const [manifestValue, setManifest] = useState('')
     const [loading, setLoading] = useState<boolean>(true)
@@ -33,8 +37,10 @@ export default function ClusterManifest({
             getClusterManifest(terminalAccessId)
                 .then((response) => {
                     const _manifest = YAML.stringify(response.result?.manifest)
-                    setDefaultManifest(_manifest)
-                    setManifest(_manifest)
+                    setOriginalManifest(_manifest)
+                    const trimmedManifest = YAML.stringify(getTrimmedManifestData(response.result?.manifest))
+                    setDefaultManifest(trimmedManifest)
+                    setManifest(trimmedManifest)
                     setLoading(false)
                     setManifestAvailable(true)
                 })
@@ -52,6 +58,7 @@ export default function ClusterManifest({
         }
     }, [terminalAccessId])
 
+    // NOTE: Check if we can replace this useEffect since manifestMode changes on events.
     useEffect(() => {
         const regex = manifestCommentsRegex
         if (manifestMode === EditModeType.NON_EDIT) {
@@ -80,6 +87,23 @@ export default function ClusterManifest({
         }
     }, [manifestMode])
 
+    const displayManifest = (() => {
+        if (manifestMode === EditModeType.NON_EDIT) {
+            if (hideManagedFields) {
+                return defaultManifest
+            }
+            return originalManifest
+        }
+
+        return manifestValue
+    })()
+
+    const handleEditorChange = (value: string) => {
+        if (manifestMode !== EditModeType.NON_EDIT) {
+            setManifest(value)
+        }
+    }
+
     const switchToEditMode = (): void => {
         setManifestMode(EditModeType.EDIT)
     }
@@ -112,10 +136,10 @@ export default function ClusterManifest({
                             defaultValue={defaultManifest}
                             theme="vs-dark--dt"
                             height="100%"
-                            value={manifestValue}
+                            value={displayManifest}
                             mode={MODES.YAML}
                             noParsing
-                            onChange={setManifest}
+                            onChange={handleEditorChange}
                             readOnly={manifestMode !== EditModeType.EDIT && manifestMode !== EditModeType.REVIEW}
                             diffView={manifestMode === EditModeType.REVIEW}
                         />

src/components/ClusterNodes/ClusterTerminal.tsx

@@ -821,23 +821,20 @@ export default function ClusterTerminal({
         }
     }
 
-    // TODO: Move into common component for deployment
-    const renderHideManagedFields = () => {
-        return (
-            <div className="pt-6 pb-6 pl-8 pr-8 top">
-                <Checkbox
-                    rootClassName="mb-0-imp h-20"
-                    isChecked={hideManagedFields}
-                    value={CHECKBOX_VALUE.CHECKED}
-                    onChange={handleToggleManagedFields}
-                >
-                    <span className="mr-5 cn-9 fs-12" data-testid="hide-pods-managed-fields">
-                        Hide Managed Fields
-                    </span>
-                </Checkbox>
-            </div>
-        )
-    }
+    const renderHideManagedFields = () => (
+        <div className="pt-6 pb-6 pl-12 pr-8 top">
+            <Checkbox
+                rootClassName="mb-0-imp h-18"
+                isChecked={hideManagedFields}
+                value={CHECKBOX_VALUE.CHECKED}
+                onChange={handleToggleManagedFields}
+            >
+                <span className="mr-5 cn-9 fs-12 lh-18" data-testid="hide-pods-managed-fields">
+                    Hide Managed Fields
+                </span>
+            </Checkbox>
+        </div>
+    )
 
     const closeManifetsPopup = (isClose: boolean): void => {
         setManifestButtonState(EditModeType.REVIEW)
@@ -846,6 +843,8 @@ export default function ClusterTerminal({
     }
 
     const hideShell: boolean = !(connectTerminal && isPodCreated && !selectedTabIndex)
+    const showManagedFieldsCheckbox: boolean =
+        selectedTabIndex === 2 && isManifestAvailable && manifestButtonState === EditModeType.NON_EDIT
 
     const fullScreenClassWrapper = isFullScreen ? 'cluster-full_screen' : 'cluster-terminal-view-container'
     const nodeDetailsPageClassWrapper = isNodeDetailsPage || isClusterDetailsPage ? '' : 'node-terminal'
@@ -975,7 +974,7 @@ export default function ClusterTerminal({
                 buttonSelectionState: manifestButtonState,
                 setManifestButtonState: setManifestButtonState,
             },
-            ...(selectedTabIndex === 2 && isManifestAvailable
+            ...(showManagedFieldsCheckbox
                 ? [
                       {
                           type: TerminalWrapperType.CUSTOM_COMPONENT,

src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx

@@ -23,9 +23,9 @@ import {
     EA_MANIFEST_SECRET_EDIT_MODE_INFO_TEXT,
     EA_MANIFEST_SECRET_INFO_TEXT,
 } from '../../../../../../config/constantMessaging'
-import { MANIFEST_KEY_FIELDS } from '../../../../../../config/constants'
 import { MODES } from '../../../../../../config'
 import { EMPTY_YAML_ERROR, SAVE_DATA_VALIDATION_ERROR_MSG } from '../../../../values/chartValuesDiff/ChartValuesView.constants'
+import { getTrimmedManifestData } from '../nodeDetail.util'
 
 function ManifestComponent({
     selectedTab,
@@ -138,7 +138,7 @@ function ManifestComponent({
             toggleManagedFields(false)
             const jsonManifestData = YAML.parse(activeManifestEditorData)
             if (jsonManifestData?.metadata?.managedFields) {
-                setTrimedManifestEditorData(trimManifestData(jsonManifestData))
+                setTrimedManifestEditorData(getTrimmedManifestData(jsonManifestData, true) as string)
             }
         }
     }, [isEditmode])
@@ -152,27 +152,16 @@ function ManifestComponent({
     useEffect(() => {
         setTrimedManifestEditorData(activeManifestEditorData)
         if (activeTab === 'Live manifest') {
-            let jsonManifestData = YAML.parse(activeManifestEditorData)
+            const jsonManifestData = YAML.parse(activeManifestEditorData)
             if (jsonManifestData?.metadata?.managedFields) {
                 toggleManagedFields(true)
                 if (hideManagedFields) {
-                    setTrimedManifestEditorData(trimManifestData(jsonManifestData))
+                    setTrimedManifestEditorData(getTrimmedManifestData(jsonManifestData, true) as string)
                 }
             }
         }
     }, [activeManifestEditorData, hideManagedFields, activeTab])
 
-    //For External
-    const trimManifestData = (jsonManifestData: object): string => {
-        const _trimedManifestData = JSON.stringify(jsonManifestData, (key, value) => {
-            if (key === MANIFEST_KEY_FIELDS.METADATA) {
-                value[MANIFEST_KEY_FIELDS.MANAGED_FIELDS] = undefined
-            }
-            return value
-        })
-        return _trimedManifestData
-    }
-
     const handleEditorValueChange = (codeEditorData: string) => {
         if (activeTab === 'Live manifest' && isEditmode) {
             setModifiedManifest(codeEditorData)

src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.type.ts

@@ -1,6 +1,7 @@
-import { OptionType } from '@devtron-labs/devtron-fe-common-lib';
+import { OptionType } from '@devtron-labs/devtron-fe-common-lib'
 import React from 'react'
-import {Options, OptionsBase } from "../../appDetails.type";
+import {Options, OptionsBase } from '../../appDetails.type'
+import { MANIFEST_KEY_FIELDS } from '../../../../../config'
 
 export enum NodeDetailTab {
     EVENTS = 'EVENTS',
@@ -68,3 +69,18 @@ export interface ResponsePayload {
         manifest: string
     }
 }
+
+
+interface ManagedFields {
+    [key: string]: any
+}
+
+interface ManifestMetadata {
+    [MANIFEST_KEY_FIELDS.MANAGED_FIELDS]?: ManagedFields[]
+    [key: string]: any
+}
+
+export interface ManifestData {
+    [MANIFEST_KEY_FIELDS.METADATA]?: ManifestMetadata
+    [key: string]: any
+}

src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.ts

@@ -9,9 +9,10 @@ import {
     SelectedResourceType,
 } from '../../appDetails.type'
 import IndexStore from '../../index.store'
-import { NodeDetailTab } from './nodeDetail.type'
+import { ManifestData, NodeDetailTab } from './nodeDetail.type'
 import { multiSelectStyles } from '../../../common/ReactSelectCustomization'
 import { sortOptionsByLabel } from '../../../../common'
+import { MANIFEST_KEY_FIELDS } from '../../../../../config'
 
 export const getNodeDetailTabs = (nodeType: NodeType, isResourceBrowserTab?: boolean) => {
     if (nodeType.toLowerCase() === NodeType.Pod.toLowerCase()) {
@@ -386,4 +387,22 @@ export const selectStyles = {
         ...base,
         padding: '0 8px',
     }),
-}
+}
+
+/**
+ * @description This function is used to trim the manifest data by removing the managed fields from the manifest data
+ */
+export const getTrimmedManifestData = (
+    manifestData: ManifestData,
+    returnAsString: boolean = false,
+): ManifestData | string => {
+    if (manifestData[MANIFEST_KEY_FIELDS.METADATA]) {
+        const { [MANIFEST_KEY_FIELDS.MANAGED_FIELDS]: _, ...metadata } = manifestData[MANIFEST_KEY_FIELDS.METADATA]
+
+        return returnAsString
+            ? JSON.stringify({ ...manifestData, [MANIFEST_KEY_FIELDS.METADATA]: metadata })
+            : { ...manifestData, [MANIFEST_KEY_FIELDS.METADATA]: metadata }
+    }
+
+    return returnAsString ? JSON.stringify(manifestData) : manifestData
+}