fix: ConfigTemplate infinite re-render loop and add E2E test

src/componets/content/ConfigTemplate.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Highlight from 'react-highlight';
 import 'highlight.js/styles/far.css';
 import { Config } from "../../models/Config";
@@ -14,10 +14,12 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
   const [originalContent, setOriginalContent] = useState(props.config.template.content);
   const [jsonError, setJsonError] = useState<string | null>(null);
 
-  // Sync draft when config changes (in view mode)
-  if (mode === 'view') {
-    setDraftContent(props.config.template.content);
-  }
+  // Sync draft when config changes (only in view mode)
+  useEffect(() => {
+    if (mode === 'view') {
+      setDraftContent(props.config.template.content);
+    }
+  }, [props.config.template.content, mode]);
 
   function handleEdit() {
     setOriginalContent(props.config.template.content);

src/componets/content/Content.tsx

@@ -12,7 +12,7 @@ export function Content(props: { config: Config, env: Env, onTemplateSaved: (new
 
     return (
         <>
-            <ContentTabs onSelected={(id) => setTab(id)} />
+            <ContentTabs onSelected={(id) => setTab(id)} selectedTab={selectTab} />
             <div className="">
                 {selectTab == ContentType.Env ? (<ContentParams env={props.env} />) : ""}
                 {selectTab == ContentType.Json ? (<ConfigTemplate config={props.config} onSaved={props.onTemplateSaved} />) : ""}
@@ -30,16 +30,13 @@ enum ContentType {
     Test = 3
 }
 
-function ContentTabs(props: { onSelected: (id: ContentType) => void }) {
-    const [selectTab, setSelect] = useState(ContentType.Env);
-
+function ContentTabs(props: { onSelected: (id: ContentType) => void, selectedTab: ContentType }) {
     function clickHandler(type: ContentType) {
-        setSelect(type);
         props.onSelected(type);
     }
 
     function isActive(type: ContentType): string {
-        return type == selectTab ? " active" : " ";
+        return type == props.selectedTab ? " active" : " ";
     }
 
     return (