ssa/configucci
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: #1
This commit was merged in pull request #1.
This commit is contained in:
ssa
2026-02-18 22:44:41 +03:00
parent 8f0112526f 18193b71c1
commit 22a03735d6
19 changed files with 827 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

140
e2e/environment.spec.ts Normal file
View File

@@ -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');
});
});

64
package-lock.json generated
View File

@@ -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",

4
package.json
View File

@@ -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",

14
playwright.config.ts Normal file
View File

@@ -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',
},
});

90
src/App.tsx
View File

@@ -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> {
// Create a promise that resolves after 1 second
// Simulate async save with 1 second delay
return await new Promise<number>((resolve) => {
setTimeout(() => {
let idx = this.envs.findIndex(x => x.id === env.id);
if (idx > -1) {
this.envs[idx] = env;
console.log("UPDATED envs", this.envs);
}
resolve(idx); // Resolve the promise after updating
console.log("Saved env:", env.name);
resolve(0);
}, 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);
setConfig(AppState.Instance.config);
}} />
setEnvs(x.envs);
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>)
:

39
src/builders/ConfigBuilder.ts Normal file
View File

@@ -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`;
}
}

8
src/builders/EnvBuilder.ts
View File

@@ -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()

7
src/builders/index.ts
View File

@@ -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 };

38
src/componets/FileChooser.tsx
View File

@@ -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 }) {
export function FileChooser(props: { onSelected: (x: Config) => void, config?: Config }) {
async function handleFile(x: React.ChangeEvent<HTMLInputElement>) {
let file = x.target.files![0];
@@ -18,15 +18,47 @@ export function FileChooser(props: { onSelected: (x: Config) => void }) {
function handleNew(){
let cfg = new Config();
cfg.addEnvs([new Env(0,"DEFAULT", [])]);
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">

142
src/componets/content/ConfigTemplate.tsx Normal file
View File

@@ -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>
);
}

2
src/componets/content/Content.css
View File

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

39
src/componets/content/Content.tsx
View File

@@ -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 }) {
const [selectTab, setSelect] = useState(ContentType.Env);
function ContentTabs(props: { onSelected: (id: ContentType) => void, selectedTab: ContentType, hasValidationWarnings: boolean }) {
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);

73
src/componets/env/Environment.tsx vendored
View File

@@ -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 }) {
const [currEnv, setCurrEnv] = useState(props.envs[0]);
export function Environment(props: { envs: Env[], onChanged: (env: Env) => void, onSelected: (envId: number) => void, onAdd: (env: Env) => number, onRemove: (envId: number) => void }) {
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);
if (idx > -1) {
props.envs[idx] = env;
props.onChanged(props.envs[idx]);
setCurrEnv(env);
props.onChanged(env);
setCurrEnvId(env.id);
}
}
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`}

84
src/models/Config.tsx
View File

@@ -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;
}
}

11
src/test/ConfigBuilder.test.ts Normal file
View File

@@ -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$/);
});
});
});

111
src/test/Environment.test.tsx Normal file
View File

@@ -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');
});
});
});

4
test-results/.last-run.json Normal file
View File

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

3
vitest.config.ts
View File

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