fix: reverting logic into useEffect to save infinite re-render :/

Author: AbhishekA1509

src/components/ClusterNodes/ClusterManifest.tsx

@@ -40,7 +40,13 @@ export default function ClusterManifest({
                     setOriginalManifest(_manifest)
                     const trimmedManifest = YAML.stringify(getTrimmedManifestData(response.result?.manifest))
                     setDefaultManifest(trimmedManifest)
-                    setManifest(trimmedManifest)
+                    // Ideally should have been setManifest(trimmedManifest).
+                    if (hideManagedFields) {
+                        setManifest(trimmedManifest)
+                    }
+                    else {
+                        setManifest(_manifest)
+                    }
                     setLoading(false)
                     setManifestAvailable(true)
                 })
@@ -58,11 +64,14 @@ export default function ClusterManifest({
         }
     }, [terminalAccessId])
 
-    // NOTE: Check if we can replace this useEffect since manifestMode changes on events.
+    // NOTE: Need to remove this useEffect since manifestMode changes on events only.
+    // Since there can be alot of ways this useEffect interferes with other handlers, causing bugs.
+    // Plus it might be a case when this useEffect will run before we have manifest, which will cause issues.
     useEffect(() => {
         const regex = manifestCommentsRegex
         if (manifestMode === EditModeType.NON_EDIT) {
-            setManifest(defaultManifest)
+            const _manifest = hideManagedFields ? defaultManifest : originalManifest
+            setManifest(_manifest)
         } else if (manifestMode === EditModeType.APPLY) {
             const _manifestValue = manifestValue.replace(regex, 'apiVersion:')
             if (_manifestValue !== defaultManifest) {
@@ -71,38 +80,35 @@ export default function ClusterManifest({
                         setManifestData(JSON.stringify(YAML.parse(_manifestValue)))
                     } else {
                         setManifest(defaultManifestErrorText)
+                        setManifestMode(EditModeType.EDIT)
                     }
                 } catch (error) {
-                    setManifest(defaultManifestErrorText + '# ' + error + '\n#\n' + _manifestValue)
+                    // Since we check error in edit as well, we can ignore this error and somehow infinite loop is created if we setManifest here.
                     setManifestMode(EditModeType.EDIT)
                 }
             } else {
                 selectTerminalTab()
                 setManifestMode(EditModeType.NON_EDIT)
             }
         } else if (manifestMode === EditModeType.EDIT) {
-            if (errorMessage?.length) {
-                setManifest(defaultManifestErrorText + '# ' + errorMessage + '\n#\n' + manifestValue)
+            try {
+                // Parsing will remove earlier comments, which will fix internal issues of code, currently the errorMessage is not getting cleared due to line 83.
+                const parsedManifest = YAML.parse(manifestValue)
+                if (parsedManifest) {
+                    const trimmedManifest = YAML.stringify(getTrimmedManifestData(parsedManifest))
+                    const errorDetails = errorMessage?.length ? defaultManifestErrorText + '# ' + errorMessage + '\n#\n' : ''
+                    setManifest(errorDetails + trimmedManifest)
+                }
+                else {
+                    setManifest(defaultManifestErrorText)
+                }
             }
-        }
-    }, [manifestMode])
-
-    const displayManifest = (() => {
-        if (manifestMode === EditModeType.NON_EDIT) {
-            if (hideManagedFields) {
-                return defaultManifest
+            catch (error) {
+                // Should we directly use error object here?
+                setManifest(defaultManifestErrorText + '# ' + error + '\n#\n' + manifestValue)
             }
-            return originalManifest
         }
-
-        return manifestValue
-    })()
-
-    const handleEditorChange = (value: string) => {
-        if (manifestMode !== EditModeType.NON_EDIT) {
-            setManifest(value)
-        }
-    }
+    }, [manifestMode, hideManagedFields])
 
     const switchToEditMode = (): void => {
         setManifestMode(EditModeType.EDIT)
@@ -136,10 +142,10 @@ export default function ClusterManifest({
                             defaultValue={defaultManifest}
                             theme="vs-dark--dt"
                             height="100%"
-                            value={displayManifest}
+                            value={manifestValue}
                             mode={MODES.YAML}
                             noParsing
-                            onChange={handleEditorChange}
+                            onChange={setManifest}
                             readOnly={manifestMode !== EditModeType.EDIT && manifestMode !== EditModeType.REVIEW}
                             diffView={manifestMode === EditModeType.REVIEW}
                         />

src/components/ClusterNodes/ClusterTerminal.tsx

@@ -180,6 +180,7 @@ export default function ClusterTerminal({
                             }
                             const namespace = result.namespace
                             setNamespace(namespace ? { label: namespace, value: namespace } : defaultNameSpace)
+                            setHideManagedFields(true)
                             setManifestButtonState(EditModeType.NON_EDIT)
                             terminalAccessIdRef.current = result.terminalAccessId
                             socketConnecting()
@@ -338,6 +339,7 @@ export default function ClusterTerminal({
     function getNewSession() {
         if (!terminalAccessIdRef.current) return
         setSocketConnection(SocketConnectionType.CONNECTING)
+        // It might be that we dont have resourceData.
         getClusterData(
             `user/terminal/get?namespace=${selectedNamespace.value}&shellName=${
                 selectedTerminalType.value