Merge pull request 'ai' (#1) from ai into main

Reviewed-on: #1

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+playwright-report

e2e/environment.spec.ts

@@ -0,0 +1,140 @@
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+
+test.describe('Environment Management', () => {
+  test('should not allow removing DEFAULT environment', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    const removeButton = page.locator('button.btn-danger[title="Remove environment"]');
+    await expect(removeButton).toBeDisabled();
+  });
+
+  test('should remove non-DEFAULT environment', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    page.once('dialog', async dialog => { await dialog.accept('toRemove'); });
+    await page.click('button.btn-success[title="Add environment"]');
+    await page.waitForTimeout(500);
+    await expect(page.locator('#environments option')).toHaveCount(2);
+    page.once('dialog', async dialog => { await dialog.accept(); });
+    await page.click('button.btn-danger[title="Remove environment"]');
+    await page.waitForTimeout(300);
+    await expect(page.locator('#environments option')).toHaveCount(1);
+  });
+
+  test('should create new environment and switch without errors', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    page.once('dialog', async dialog => { await dialog.accept('env1'); });
+    await page.click('button.btn-success[title="Add environment"]');
+    await page.waitForTimeout(500);
+    await expect(page.locator('#environments option')).toHaveCount(2);
+    await page.locator('#environments').selectOption({ index: 0 });
+    await page.waitForTimeout(300);
+    await page.locator('#environments').selectOption('env1');
+    await page.waitForTimeout(300);
+    await expect(page.locator('#environments')).toBeVisible();
+  });
+
+  test('should create multiple environments and switch between them', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    page.once('dialog', async dialog => { await dialog.accept('env1'); });
+    await page.click('button.btn-success[title="Add environment"]');
+    await page.waitForTimeout(500);
+    page.once('dialog', async dialog => { await dialog.accept('env2'); });
+    await page.click('button.btn-success[title="Add environment"]');
+    await page.waitForTimeout(500);
+    await expect(page.locator('#environments option')).toHaveCount(3);
+    await page.locator('#environments').selectOption({ index: 0 });
+    await page.waitForTimeout(200);
+    await page.locator('#environments').selectOption('env1');
+    await page.waitForTimeout(200);
+    await page.locator('#environments').selectOption('env2');
+    await page.waitForTimeout(200);
+    await expect(page.locator('#environments')).toBeVisible();
+  });
+
+  test('should add params and edit template manually', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    const nameInput = page.locator('input[placeholder="name"]').first();
+    const valueInput = page.locator('input[placeholder="value"]').first();
+    const addButton = page.locator('button.btn-success').first();
+    await nameInput.fill('host');
+    await valueInput.fill('localhost:8080');
+    await addButton.click();
+    await page.waitForTimeout(500);
+    await nameInput.fill('port');
+    await valueInput.fill('9090');
+    await addButton.click();
+    await page.waitForTimeout(500);
+    await page.click('a:has-text("Content Template")');
+    await page.waitForTimeout(500);
+    await expect(page.locator('button:has-text("Edit")')).toBeVisible();
+    await page.click('button:has-text("Edit")');
+    await page.waitForTimeout(500);
+    const textarea = page.locator('textarea');
+    await expect(textarea).toBeVisible();
+    await textarea.fill('{\n    "!!! host": "@host@",\n    "!!! port": "@port@",\n    "!!! custom": "@custom@"\n}');
+    await page.waitForTimeout(300);
+    await page.click('button:has-text("Save")');
+    await page.waitForTimeout(500);
+    await expect(page.locator('button:has-text("Edit")')).toBeVisible();
+    const pageContent = await page.content();
+    expect(pageContent).toContain('!!! custom');
+  });
+
+  test('should not duplicate params when placeholder already exists', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    const nameInput = page.locator('input[placeholder="name"]').first();
+    const valueInput = page.locator('input[placeholder="value"]').first();
+    const addButton = page.locator('button.btn-success').first();
+    await nameInput.fill('host');
+    await valueInput.fill('localhost:8080');
+    await addButton.click();
+    await page.waitForTimeout(500);
+    await page.click('a:has-text("Content Template")');
+    await page.waitForTimeout(500);
+    await page.click('button:has-text("Edit")');
+    await page.waitForTimeout(300);
+    const textarea = page.locator('textarea');
+    await textarea.fill('{\n    "!!! host": "@host@",\n    "apiUrl": "http://@host@/api"\n}');
+    await page.waitForTimeout(300);
+    await page.click('button:has-text("Save")');
+    await page.waitForTimeout(500);
+    await page.click('a:has-text("Env")');
+    await page.waitForTimeout(300);
+    await nameInput.fill('host');
+    await valueInput.fill('updated-host:9090');
+    await addButton.click();
+    await page.waitForTimeout(500);
+    await page.click('a:has-text("Content Template")');
+    await page.waitForTimeout(500);
+    const templateContent = await page.locator('.config-template-editor').textContent();
+    const hostKeyCount = (templateContent.match(/!!! host/g) || []).length;
+    expect(hostKeyCount).toBe(1);
+    const hostPlaceholderCount = (templateContent.match(/@host@/g) || []).length;
+    expect(hostPlaceholderCount).toBe(2);
+  });
+
+  test('should download config file with correct filename', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+    await page.waitForTimeout(500);
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      page.click('button:has-text("Download")')
+    ]);
+    const filename = download.suggestedFilename();
+    expect(filename).toMatch(/^config_\d{2}-\d{2}-\d{2}-\d{4}\.json\.xml$/);
+    // Save and read the file to verify content
+    await download.saveAs('temp-config.xml');
+    const contentStr = fs.readFileSync('temp-config.xml', 'utf8');
+    expect(contentStr).toContain('engine');
+    expect(contentStr).toContain('DEFAULT');
+    expect(contentStr).toContain('template');
+    fs.unlinkSync('temp-config.xml');
+  });
+});

package-lock.json

@@ -15,6 +15,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
+        "@playwright/test": "^1.58.2",
         "@types/react": "^18.3.18",
         "@types/react-dom": "^18.3.5",
         "@types/react-highlight": "^0.12.8",
@@ -1228,6 +1229,22 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -3383,6 +3400,53 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",

package.json

@@ -8,7 +8,8 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "bootstrap": "^5.3.3",
@@ -18,6 +19,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@playwright/test": "^1.58.2",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/react-highlight": "^0.12.8",

playwright.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+  },
+});

src/App.tsx

@@ -11,44 +11,92 @@ import logo from './assets/cgg.png'
 class AppState {
   private constructor(
     public config: Config = new Config(),
-    public envs: Env[] = [
-    ],
   ) { }
 
   static readonly Instance = new AppState();
 
   public loadConfig(cfg: Config) {
-    this.envs = [...cfg.envs];
     this.config = cfg;
   }
 
   public async saveEnv(env: Env): Promise<number> {
-
+    // Simulate async save with 1 second delay
-    // Create a promise that resolves after 1 second
     return await new Promise<number>((resolve) => {
       setTimeout(() => {
-        let idx = this.envs.findIndex(x => x.id === env.id);
+        console.log("Saved env:", env.name);
-        if (idx > -1) {
+        resolve(0);
-          this.envs[idx] = env;
-          console.log("UPDATED envs", this.envs);
-        }
-        resolve(idx); // Resolve the promise after updating
       }, 1000);
     });
   }
 }
 
 function App() {
-  const [envs, setEnvs] = useState(AppState.Instance.envs);
+  const [config, setConfig] = useState(() => AppState.Instance.config);
+  const [envs, setEnvs] = useState(() => AppState.Instance.config.envs);
   const [selectedEnv, setSelectedEnv] = useState(0);
-  const [config, setConfig] = useState(AppState.Instance.config);
+
+  // Ensure selectedEnv is always valid
+  const validSelectedEnv = Math.min(selectedEnv, Math.max(0, envs.length - 1));
+  const currentEnv = envs[validSelectedEnv];
 
   async function handleEnvChanged(env: Env) {
-    let idx = await AppState.Instance.saveEnv(env);
+    // Optimistic update - update React state immediately
+    setEnvs(prevEnvs => {
+      const newEnvs = [...prevEnvs];
+      const idx = newEnvs.findIndex(x => x.id === env.id);
       if (idx > -1) {
-      setEnvs([...AppState.Instance.envs]);
+        newEnvs[idx] = env;
+      }
+      return newEnvs;
+    });
+
+    // Also update config.envs and template to keep them in sync
+    setConfig(prevConfig => {
+      const newConfig = new Config();
+      newConfig.envs = prevConfig.envs.map(e => e.id === env.id ? env : e);
+      // Update template JSON with params from this environment
+      newConfig.template = prevConfig.template;
+      newConfig.updateTemplateFromEnv(env);
+      return newConfig;
+    });
+
+    // Fire off async save in background (no need to wait)
+    AppState.Instance.saveEnv(env);
+  }
+
+  function handleEnvSelected(idx: number) {
     setSelectedEnv(idx);
   }
+
+  function handleEnvAdded(env: Env): number {
+    const newIdx = envs.length;
+    setEnvs(prevEnvs => [...prevEnvs, env]);
+    setConfig(prevConfig => {
+      const newConfig = new Config();
+      newConfig.envs = [...prevConfig.envs, env];
+      newConfig.template = prevConfig.template;
+      return newConfig;
+    });
+    return newIdx;
+  }
+
+  function handleEnvRemoved(envId: number) {
+    setEnvs(prevEnvs => prevEnvs.filter(e => e.id !== envId));
+    setConfig(prevConfig => {
+      const newConfig = new Config();
+      newConfig.envs = prevConfig.envs.filter(e => e.id !== envId);
+      newConfig.template = prevConfig.template;
+      return newConfig;
+    });
+  }
+
+  function handleTemplateSaved(newContent: string) {
+    setConfig(prevConfig => {
+      const newConfig = new Config();
+      newConfig.envs = prevConfig.envs;
+      newConfig.addTemplate(newContent);
+      return newConfig;
+    });
   }
 
   return (
@@ -57,9 +105,9 @@ function App() {
         <div className="row mb-2">
           <FileChooser onSelected={x => {
             AppState.Instance.loadConfig(x);
-            setEnvs(AppState.Instance.envs);
+            setEnvs(x.envs);
-            setConfig(AppState.Instance.config);
+            setConfig(x);
-          }} />
+          }} config={config} />
         </div>
         {envs.length > 0 ?
           (<div className="row">
@@ -67,10 +115,12 @@ function App() {
               <Environment
                 envs={envs}
                 onChanged={async (e) => await handleEnvChanged(e)}
-                onSelected={x => setSelectedEnv(x)} />
+                onSelected={handleEnvSelected}
+                onAdd={handleEnvAdded}
+                onRemove={handleEnvRemoved} />
             </section>
             <section id="content" className="col-8 col-xl-7 border-start ms-1">
-              <Content env={envs[selectedEnv]} config={config} />
+              <Content env={currentEnv} config={config} onTemplateSaved={handleTemplateSaved} />
             </section>
           </div>)
           :

src/builders/ConfigBuilder.ts

@@ -0,0 +1,39 @@
+import { Config } from "../models/Config";
+import { EnvBuilder } from "./EnvBuilder";
+
+export class ConfigBuilder {
+  /**
+   * Builds a full XML config file with all environments and template.
+   */
+  public static buildFullXml(config: Config): string {
+    const lines: string[] = [];
+    lines.push("<engine>");
+
+    // Add all environments
+    for (const env of config.envs) {
+      const envXml = new EnvBuilder().buildEnv(env);
+      lines.push(envXml);
+    }
+
+    // Add template
+    lines.push("    <template>");
+    lines.push(config.template.content);
+    lines.push("    </template>");
+
+    lines.push("</engine>");
+    return lines.join("\r\n");
+  }
+
+  /**
+   * Generates filename with timestamp: config_yy-dd-MM-HHmm.json.xml
+   */
+  public static generateFilename(): string {
+    const now = new Date();
+    const yy = now.getFullYear().toString().slice(-2);
+    const dd = String(now.getDate()).padStart(2, '0');
+    const MM = String(now.getMonth() + 1).padStart(2, '0');
+    const HH = String(now.getHours()).padStart(2, '0');
+    const mm = String(now.getMinutes()).padStart(2, '0');
+    return `config_${yy}-${dd}-${MM}-${HH}${mm}.json.xml`;
+  }
+}

src/builders/EnvBuilder.ts

@@ -16,6 +16,14 @@ export class EnvBuilder implements IBuilder<Env> {
         this._src = v;
     }
 
+    /**
+     * Builds XML for a single environment (static method for direct use)
+     */
+    public buildEnv(env: Env): string {
+        this.src = env;
+        return this.build();
+    }
+
     build(): string {
         return this
             .open()

src/builders/index.ts

@@ -1,9 +1,6 @@
 import { Env } from "../models/Env";
 import { EnvBuilder } from "./EnvBuilder";
-
+import { ConfigBuilder } from "./ConfigBuilder";
-
-
-
 
 export interface IBuilder<T> {
     get src(): T;
@@ -24,3 +21,5 @@ export class Builder {
     }
 }
 
+export { ConfigBuilder };
+

src/componets/FileChooser.tsx

@@ -1,9 +1,9 @@
 import { Env } from "../models/Env";
 import { ConfigReader } from "../models/ConfigReader";
 import { Config } from "../models/Config";
+import { ConfigBuilder } from "../builders/ConfigBuilder";
 
-
+export function FileChooser(props: { onSelected: (x: Config) => void, config?: Config }) {
-export function FileChooser(props: { onSelected: (x: Config) => void }) {
   async function handleFile(x: React.ChangeEvent<HTMLInputElement>) {
     let file = x.target.files![0];
 
@@ -19,14 +19,46 @@ export function FileChooser(props: { onSelected: (x: Config) => void }) {
   function handleNew(){
     let cfg = new Config();
     cfg.addEnvs([new Env(0, "DEFAULT", [])]);
+    cfg.addTemplate("{}");
     props.onSelected(cfg);
   }
 
+  function handleDownload() {
+    if (!props.config) {
+      alert("No configuration loaded");
+      return;
+    }
+
+    const xmlContent = ConfigBuilder.buildFullXml(props.config);
+    const filename = ConfigBuilder.generateFilename();
+    
+    // Create blob and download
+    const blob = new Blob([xmlContent], { type: "text/xml" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+
   return (
     <>
       <div className="col-2">
         <button className="btn btn-primary" onClick={handleNew} >Create new</button>
       </div>
+      <div className="col-auto">
+        <button 
+          className="btn btn-success" 
+          onClick={handleDownload}
+          disabled={!props.config}
+          title="Download full config template"
+        >
+          ⬇ Download
+        </button>
+      </div>
       <div className="col-1">or</div>
 
       <div className="col">

src/componets/content/ConfigTemplate.tsx

@@ -0,0 +1,142 @@
+import { useState, useEffect } from "react";
+import Highlight from 'react-highlight';
+import 'highlight.js/styles/far.css';
+import { Config } from "../../models/Config";
+
+interface ConfigTemplateProps {
+  config: Config;
+  onSaved: (newContent: string) => void;
+}
+
+export function ConfigTemplate(props: ConfigTemplateProps) {
+  const [mode, setMode] = useState<'view' | 'edit'>('view');
+  const [draftContent, setDraftContent] = useState(props.config.template.content);
+  const [originalContent, setOriginalContent] = useState(props.config.template.content);
+  const [jsonError, setJsonError] = useState<string | null>(null);
+
+  // 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);
+    setDraftContent(props.config.template.content);
+    setJsonError(null);
+    setMode('edit');
+  }
+
+  function handleRevert() {
+    setDraftContent(originalContent);
+    setJsonError(null);
+    setMode('view');
+  }
+
+  function handleSave() {
+    // Validate JSON before saving
+    try {
+      JSON.parse(draftContent);
+      setJsonError(null);
+      props.onSaved(draftContent);
+      setMode('view');
+    } catch (e) {
+      setJsonError((e as Error).message);
+    }
+  }
+
+  function handleDraftChange(value: string) {
+    setDraftContent(value);
+    // Validate JSON on every change
+    try {
+      if (value.trim()) {
+        // Replace @placeholders@ with valid JSON values for validation
+        const sanitizedValue = value.replace(/"@?(\w+)@?"/g, '"__PLACEHOLDER__"');
+        JSON.parse(sanitizedValue);
+        setJsonError(null);
+      } else {
+        setJsonError(null);
+      }
+    } catch (e) {
+      setJsonError((e as Error).message);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const textarea = e.currentTarget;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const value = textarea.value;
+      
+      // Insert 2 spaces at cursor position
+      const newValue = value.substring(0, start) + '  ' + value.substring(end);
+      handleDraftChange(newValue);
+      
+      // Move cursor after the inserted spaces
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      }, 0);
+    }
+  }
+
+  const isValidJson = jsonError === null;
+
+  return (
+    <div className="config-template-editor">
+      {mode === 'view' ? (
+        <>
+          <div className="mb-2">
+            <button className="btn btn-primary btn-sm" onClick={handleEdit}>
+              ✎ Edit
+            </button>
+          </div>
+          <Highlight className="language-json">
+            {props.config.template.content || "{}"}
+          </Highlight>
+        </>
+      ) : (
+        <>
+          <div className="mb-2 d-flex gap-2 align-items-center">
+            <button 
+              className="btn btn-success btn-sm" 
+              onClick={handleSave}
+              disabled={!isValidJson}
+            >
+              ✓ Save
+            </button>
+            <button 
+              className="btn btn-secondary btn-sm" 
+              onClick={handleRevert}
+            >
+              × Revert
+            </button>
+            <span className={`ms-2 ${isValidJson ? 'text-success' : 'text-danger'}`}>
+              {isValidJson ? 'Valid JSON' : 'Invalid JSON'}
+            </span>
+          </div>
+          {jsonError && (
+            <div className="alert alert-danger py-1 px-2 mb-2" style={{ fontSize: '0.875rem' }}>
+              {jsonError}
+            </div>
+          )}
+          <textarea
+            className={`form-control font-monospace ${isValidJson ? 'border-success' : 'border-danger'}`}
+            value={draftContent}
+            onChange={(e) => handleDraftChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            rows={20}
+            style={{
+              fontFamily: 'monospace',
+              whiteSpace: 'pre',
+              overflowX: 'auto'
+            }}
+            spellCheck={false}
+          />
+        </>
+      )}
+    </div>
+  );
+}

src/componets/content/Content.css

@@ -1,4 +1,4 @@
 .highlihgt-scrolled {
     overflow-x: auto;
-    max-width: 90%;
+/    max-width: 90%;
 }

src/componets/content/Content.tsx

@@ -4,17 +4,22 @@ import Highlight from 'react-highlight'
 import 'highlight.js/styles/far.css'
 import { Builder } from "../../builders";
 import { Config } from "../../models/Config";
+import { ConfigTemplate } from "./ConfigTemplate";
 
 
-export function Content(props: { config: Config, env: Env }) {
+export function Content(props: { config: Config, env: Env, onTemplateSaved: (newContent: string) => void }) {
     const [selectTab, setTab] = useState(ContentType.Env);
 
+    // Validate placeholders for warning badge
+    const missingPlaceholders = props.config.validatePlaceholders();
+    const hasValidationWarnings = missingPlaceholders.length > 0;
+
     return (
         <>
-            <ContentTabs onSelected={(id) => setTab(id)} />
+            <ContentTabs onSelected={(id) => setTab(id)} selectedTab={selectTab} hasValidationWarnings={hasValidationWarnings} />
             <div className="">
                 {selectTab == ContentType.Env ? (<ContentParams env={props.env} />) : ""}
-                {selectTab == ContentType.Json ? (<ContentTemplate env={props.env} config={props.config} />) : ""}
+                {selectTab == ContentType.Json ? (<ConfigTemplate config={props.config} onSaved={props.onTemplateSaved} />) : ""}
                 {selectTab == ContentType.Raw ? (<ContentRaw config={props.config} env={props.env} />) : ""}
                 {selectTab == ContentType.Test ? (<ContentTest config={props.config} env={props.env} />) : ""}
             </div>
@@ -29,16 +34,13 @@ enum ContentType {
     Test = 3
 }
 
-function ContentTabs(props: { onSelected: (id: ContentType) => void }) {
+function ContentTabs(props: { onSelected: (id: ContentType) => void, selectedTab: ContentType, hasValidationWarnings: boolean }) {
-    const [selectTab, setSelect] = useState(ContentType.Env);
-
     function clickHandler(type: ContentType) {
-        setSelect(type);
         props.onSelected(type);
     }
 
     function isActive(type: ContentType): string {
-        return type == selectTab ? " active" : " ";
+        return type == props.selectedTab ? " active" : " ";
     }
 
     return (
@@ -47,7 +49,12 @@ function ContentTabs(props: { onSelected: (id: ContentType) => void }) {
                 <a className={"nav-link" + isActive(ContentType.Env)} aria-current="page" href="#" onClick={() => clickHandler(ContentType.Env)}>Env</a>
             </li>
             <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Json)} href="#" onClick={() => clickHandler(ContentType.Json)} >Content Template</a>
+                <a className={"nav-link" + isActive(ContentType.Json)} href="#" onClick={() => clickHandler(ContentType.Json)} >
+                    Content Template
+                    {props.hasValidationWarnings && (
+                        <span className="badge bg-warning text-dark ms-1">!</span>
+                    )}
+                </a>
             </li>
             <li className="nav-item">
                 <a className={"nav-link" + isActive(ContentType.Raw)} href="#" onClick={() => clickHandler(ContentType.Raw)}>Raw template</a>
@@ -129,7 +136,7 @@ function fillTemplate(config: Config, env: Env): string {
     let filledTemplate = config.template.content;
     const placeholderRegex = /@(\w+)@/g;
 
-    filledTemplate = filledTemplate.replace(placeholderRegex, (match, paramName) => {
+    filledTemplate = filledTemplate.replace(placeholderRegex, (_, paramName) => {
         if (paramName === Config.ENV_NAME_PARAM) {
             return env.name ?? "--NO-VALUE--";
         }
@@ -139,18 +146,6 @@ function fillTemplate(config: Config, env: Env): string {
     return filledTemplate;
 }
 
-function ContentTemplate(props: { config: Config, env: Env }) {
-    
-    let text = props.config.getTemplateAsJson() ?? "{//no content. at all. tottaly empty!!!\n}";
-    return (
-        <>
-            <Highlight className="language-json" >
-                {text ?? ""}
-            </Highlight>
-        </>
-    )
-}
-
 function ContentParams(props: { env: Env }) {
     const bldr = Builder.getEnv(props.env);
 

src/componets/env/Environment.tsx

@@ -1,10 +1,19 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { AddEvent, AppEvent, DelEvent, Env, UpdateEvent } from "../../models/Env";
 import { EnvParam } from "../../models/EnvParam";
 import { EnvironmentParam } from "./EnvironmentParam";
 
-export function Environment(props: { envs: Env[], onChanged: (env: Env) => void, onSelected: (envId: number) => void }) {
+export function Environment(props: { envs: Env[], onChanged: (env: Env) => void, onSelected: (envId: number) => void, onAdd: (env: Env) => number, onRemove: (envId: number) => void }) {
-    const [currEnv, setCurrEnv] = useState(props.envs[0]);
+    const [currEnvId, setCurrEnvId] = useState(props.envs[0]?.id);
+    
+    // Sync currEnvId when props.envs changes
+    useEffect(() => {
+        if (!props.envs.find(e => e.id === currEnvId)) {
+            setCurrEnvId(props.envs[0]?.id);
+        }
+    }, [props.envs, currEnvId]);
+    
+    const currEnv = props.envs.find(e => e.id === currEnvId) ?? props.envs[0];
 
     function handleParamChanged(e: AppEvent<EnvParam>) {
         let isChanged = false;
@@ -26,13 +35,48 @@ export function Environment(props: { envs: Env[], onChanged: (env: Env) => void,
         }
 
         if (isChanged) {
-            let idx = props.envs.findIndex(x => x.id === env.id);
+            props.onChanged(env);
-            if (idx > -1) {
+            setCurrEnvId(env.id);
-                props.envs[idx] = env;
-                props.onChanged(props.envs[idx]);
-                setCurrEnv(env);
         }
     }
+
+    function handleAddEnv() {
+        const name = prompt("Enter new environment name:");
+        if (!name || name.trim() === "") return;
+
+        // Calculate next integer ID based on max existing ID
+        const maxId = props.envs.reduce((max, e) => Math.max(max, e.id ?? 0), -1);
+        const newId = maxId + 1;
+
+        const newEnv = new Env(
+            newId,
+            name.trim(),
+            [...currEnv.params]
+        );
+        // Parent synchronously adds the env and returns the index
+        const newIdx = props.onAdd(newEnv);
+        setCurrEnvId(newEnv.id);
+        props.onSelected(newIdx);
+    }
+
+    function handleRemoveEnv() {
+        if (currEnv.isDefault()) {
+            alert("Cannot remove DEFAULT environment");
+            return;
+        }
+        if (!confirm(`Remove environment "${currEnv.name}"?`)) return;
+
+        const idx = props.envs.findIndex(x => x.id === currEnv.id);
+        if (idx > -1 && currEnv.id !== undefined) {
+            // Let parent handle the removal
+            props.onRemove(currEnv.id);
+            const newIdx = Math.max(0, idx - 1);
+            const newEnv = props.envs[newIdx];
+            if (newEnv?.id !== undefined) {
+                setCurrEnvId(newEnv.id);
+            }
+            props.onSelected(newIdx);
+        }
     }
 
     const selectOptions = props.envs.map((x) => <option key={x.id} value={x.id} >{x.name}</option>);
@@ -44,20 +88,29 @@ export function Environment(props: { envs: Env[], onChanged: (env: Env) => void,
 
     return (
         <>
-            <div className="row">
+            <div className="row g-0">
+                <div className="col">
                     <select
                         id="environments"
                         name="environments"
                         aria-label="Environments"
                         className="form-select"
+                        value={currEnvId}
                         onChange={x => {
                             let id = Number.parseInt(x.target.value);
-                        setCurrEnv(props.envs[id]);
+                            setCurrEnvId(id);
                             props.onSelected(id);
                         }}>
                         {selectOptions}
                     </select>
                 </div>
+                <div className="col-auto ms-2">
+                    <button className="btn btn-success" onClick={handleAddEnv} title="Add environment">✚</button>
+                </div>
+                <div className="col-auto ms-2">
+                    <button className="btn btn-danger" onClick={handleRemoveEnv} title="Remove environment" disabled={currEnv.isDefault()}>−</button>
+                </div>
+            </div>
             <div className="row">Params</div>
             {paramCtrls}
             <EnvironmentParam key={`${currEnv.id}-new`}

src/models/Config.tsx

@@ -60,6 +60,45 @@ export class Config {
     }
   }
 
+  /**
+   * Updates the template JSON by adding/updating params from the given environment.
+   * Params are added as "!!! paramName": "@paramName@" placeholder pairs.
+   * If a param's @placeholder@ already exists in template, it won't be added.
+   * Existing template content is preserved.
+   */
+  updateTemplateFromEnv(env: Env) {
+    let templateObj: Record<string, any> = {};
+
+    // Try to parse existing template as JSON
+    try {
+      if (this.template.content.trim()) {
+        templateObj = JSON.parse(this.template.content);
+      }
+    } catch (e) {
+      // If parsing fails, start with empty object
+      console.warn("Template is not valid JSON, starting fresh");
+    }
+
+    // Add/update params from the environment as placeholders
+    for (const param of env.params) {
+      if (param.name && param.name.trim() !== "") {
+        const placeholderValue = `@${param.name}@`;
+        
+        // Check if this placeholder already exists anywhere in the template
+        const placeholderAlreadyExists = this.template.content.includes(placeholderValue);
+        
+        if (!placeholderAlreadyExists) {
+          const placeholderKey = `!!! ${param.name}`;
+          templateObj[placeholderKey] = placeholderValue;
+        }
+      }
+    }
+
+    // Convert back to formatted JSON string
+    const newTemplateContent = JSON.stringify(templateObj, null, 4);
+    this.template = new ConfigTemplate(newTemplateContent);
+  }
+
   validateParams(): string[] {
     const envKeys = this.envs.map(env => env.params.map(param => param.name)).flat();
     const missingParams = this.template.Params.filter(param => param != Config.ENV_NAME_PARAM && !envKeys.includes(param));
@@ -70,5 +109,50 @@ export class Config {
 
     return missingParams;
   }
+
+  /**
+   * Validates that all @placeholders@ in template have corresponding params.
+   * Checks DEFAULT env first, then all custom envs.
+   * Returns array of placeholder names that are not defined.
+   */
+  validatePlaceholders(): string[] {
+    const defaultEnv = this.envs.find(e => e.name === "DEFAULT");
+    const customEnvs = this.envs.filter(e => e.name !== "DEFAULT");
+    
+    // Collect all param names from DEFAULT
+    const defaultParamNames = new Set(
+      defaultEnv?.params.map(p => p.name).filter(n => n && n.trim() !== "") || []
+    );
+    
+    // Collect all param names from all custom envs
+    const customParamNames = new Set(
+      customEnvs.flatMap(e => e.params.map(p => p.name).filter(n => n && n.trim() !== ""))
+    );
+    
+    // Extract all @placeholders@ from template
+    const placeholderRegex = /@(\w+)@/g;
+    const placeholdersInTemplate = new Set<string>();
+    let match;
+    while ((match = placeholderRegex.exec(this.template.content)) !== null) {
+      placeholdersInTemplate.add(match[1]);
+    }
+    
+    // Find placeholders that don't have matching params
+    const missingParams: string[] = [];
+    for (const placeholder of placeholdersInTemplate) {
+      if (placeholder === Config.ENV_NAME_PARAM) continue; // Skip built-in
+      
+      // Check if exists in DEFAULT or in ANY custom env
+      const inDefault = defaultParamNames.has(placeholder);
+      const inCustom = customParamNames.has(placeholder);
+      
+      // Valid if: in DEFAULT, or in at least one custom env
+      if (!inDefault && !inCustom) {
+        missingParams.push(placeholder);
+      }
+    }
+    
+    return missingParams;
+  }
 }
 

src/test/ConfigBuilder.test.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { ConfigBuilder } from '../builders/ConfigBuilder';
+
+describe('ConfigBuilder', () => {
+  describe('generateFilename', () => {
+    it('should generate filename with correct format', () => {
+      const filename = ConfigBuilder.generateFilename();
+      expect(filename).toMatch(/^config_\d{2}-\d{2}-\d{2}-\d{4}\.json\.xml$/);
+    });
+  });
+});

src/test/Environment.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { Env } from '../models/Env';
+import { EnvParam } from '../models/EnvParam';
+
+describe('Environment Management', () => {
+    let envs: Env[];
+
+    beforeEach(() => {
+        envs = [
+            new Env(0, 'DEFAULT', [
+                new EnvParam(1, 'host', 'http://localhost'),
+                new EnvParam(2, 'port', '8080')
+            ]),
+            new Env(1, 'env1', [
+                new EnvParam(3, 'port', '9090')
+            ])
+        ];
+    });
+
+    describe('add environment', () => {
+        it('should create new environment with copied params from current', () => {
+            const currentEnv = envs[1]; // env1 with port=9090
+            const newEnvName = 'env2';
+
+            // Simulate copying params from current env
+            const newEnv = new Env(
+                Math.random() * 10000,
+                newEnvName,
+                [...currentEnv.params]
+            );
+            envs.push(newEnv);
+
+            expect(envs).toHaveLength(3);
+            expect(envs[2].name).toBe('env2');
+            expect(envs[2].params).toHaveLength(1);
+            expect(envs[2].params[0].name).toBe('port');
+            expect(envs[2].params[0].value).toBe('9090');
+        });
+
+        it('should create new environment with empty params from DEFAULT', () => {
+            const currentEnv = envs[0]; // DEFAULT
+            const newEnv = new Env(
+                Math.random() * 10000,
+                'newEnv',
+                [...currentEnv.params]
+            );
+            envs.push(newEnv);
+
+            expect(envs).toHaveLength(3);
+            expect(newEnv.params).toHaveLength(2);
+            expect(newEnv.params.map(p => p.name)).toContain('host');
+            expect(newEnv.params.map(p => p.name)).toContain('port');
+        });
+    });
+
+    describe('remove environment', () => {
+        it('should not allow removing DEFAULT environment', () => {
+            const defaultEnv = envs.find(e => e.name === 'DEFAULT');
+            expect(defaultEnv?.isDefault()).toBe(true);
+            
+            // In the component, this is blocked by check: if (currEnv.isDefault())
+            // Simulating the protection
+            const canRemove = !defaultEnv?.isDefault();
+            expect(canRemove).toBe(false);
+        });
+
+        it('should remove non-DEFAULT environment', () => {
+            const envToRemove = envs[1]; // env1
+            const idx = envs.findIndex(x => x.id === envToRemove.id);
+            
+            expect(idx).toBe(1);
+            expect(envs).toHaveLength(2);
+
+            // Simulate removal
+            envs.splice(idx, 1);
+
+            expect(envs).toHaveLength(1);
+            expect(envs.find(e => e.id === envToRemove.id)).toBeUndefined();
+        });
+
+        it('should select previous environment after removal', () => {
+            const idxToRemove = 1; // removing env1
+            envs.splice(idxToRemove, 1);
+
+            // After removal, should select max(0, idx-1) = max(0, 0) = 0
+            const newSelectedIdx = Math.max(0, idxToRemove - 1);
+            expect(newSelectedIdx).toBe(0);
+            expect(envs[newSelectedIdx].name).toBe('DEFAULT');
+        });
+    });
+
+    describe('environment selection', () => {
+        it('should find current env by ID from props', () => {
+            const selectedId = 1;
+            const currEnv = envs.find(e => e.id === selectedId) ?? envs[0];
+
+            expect(currEnv).toBeDefined();
+            expect(currEnv.id).toBe(1);
+            expect(currEnv.name).toBe('env1');
+        });
+
+        it('should fallback to first env if ID not found', () => {
+            const selectedId = 999; // non-existent
+            const currEnv = envs.find(e => e.id === selectedId) ?? envs[0];
+
+            expect(currEnv).toBeDefined();
+            expect(currEnv.id).toBe(0);
+            expect(currEnv.name).toBe('DEFAULT');
+        });
+    });
+});

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

vitest.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
   plugins: [react()],
   test: {
     globals: true,
-    environment: "jsdom"
+    environment: "jsdom",
+    exclude: ['**/e2e/**', '**/node_modules/**']
   }
 })