feat(test-cases): resolve global parameters in case flows

pricyproject · pricyproject · commit 3be4af65093d · 2026-06-01T12:45:08.000-07:00
diff --git a/frontend/src/locales/ar.ts b/frontend/src/locales/ar.ts
@@ -3161,6 +3161,9 @@ export const ar = {
   iterationPreviewHint: 'تم استبدال قيم هذا الصف في نص الخطوات أدناه.',
   iterationOutcome: 'نتيجة هذا التكرار',
   statusDerivedFromIterations: 'يتم تعيين الحالة العامة تلقائيًا من نتائج كل تكرار أعلاه.',
+  globalParamsResolvedHint: 'تم استبدال المعلمات العامة لهذا المشروع بقيمها في نص الخطوات أدناه.',
+  globalParamsReferencedHint: 'تشير هذه الحالة إلى هذه المعلمات العامة؛ ويتم استبدالها في نص الخطوات أثناء التنفيذ.',
+  globalParamsEditorHint: 'أشر إليها في نص الخطوات باستخدام ‎${name}‎. انقر على العنصر لنسخه.',
 
   // المعاملات العامة
   globalParametersDescription: 'معاملات أحادية القيمة قابلة لإعادة الاستخدام لهذا المشروع (ثوابت، عناوين، أسرار).',
diff --git a/frontend/src/locales/en.ts b/frontend/src/locales/en.ts
@@ -3259,6 +3259,9 @@ export const en = {
   iterationPreviewHint: 'Step text below has this row\'s values substituted.',
   iterationOutcome: 'Outcome for this iteration',
   statusDerivedFromIterations: 'Overall status is set automatically from the per-iteration outcomes above.',
+  globalParamsResolvedHint: 'Step text below has this project\'s global parameters resolved to their values.',
+  globalParamsReferencedHint: 'This case references these global parameters; they are resolved into step text during a run.',
+  globalParamsEditorHint: 'Reference these in step text as ${name}. Click a chip to copy it.',
 
   // Global parameters
   globalParametersDescription: 'Reusable single-value parameters for this project (constants, endpoints, secrets).',
diff --git a/frontend/src/locales/fa.ts b/frontend/src/locales/fa.ts
@@ -3130,6 +3130,9 @@ export const fa = {
   iterationPreviewHint: 'مقادیر این ردیف در متن گام‌های زیر جایگزین شده است.',
   iterationOutcome: 'نتیجه این تکرار',
   statusDerivedFromIterations: 'وضعیت کلی به‌طور خودکار از نتایج هر تکرار بالا تعیین می‌شود.',
+  globalParamsResolvedHint: 'پارامترهای سراسری این پروژه در متن مراحل زیر با مقادیرشان جایگزین شده‌اند.',
+  globalParamsReferencedHint: 'این مورد به این پارامترهای سراسری ارجاع می‌دهد؛ هنگام اجرا در متن مراحل جایگزین می‌شوند.',
+  globalParamsEditorHint: 'در متن مراحل با ‎${name}‎ به آن‌ها ارجاع دهید. برای کپی روی برچسب کلیک کنید.',
 
   // پارامترهای سراسری
   globalParametersDescription: 'پارامترهای تک‌مقداری قابل استفاده مجدد برای این پروژه (ثابت‌ها، آدرس‌ها، اسرار).',
diff --git a/frontend/src/pages/TestCaseDetail.tsx b/frontend/src/pages/TestCaseDetail.tsx
@@ -16,14 +16,16 @@ import {
   Play,
   Share2,
   Tag,
+  Wrench,
 } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Switch } from '@/components/ui/switch';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useToast } from '@/hooks/use-toast';
-import { api, customFieldsAPI, datasetsAPI, sectionsAPI, testCasesAPI, testSuitesAPI, type TestDataset } from '@/lib/api';
+import { api, customFieldsAPI, datasetsAPI, sectionsAPI, testCasesAPI, testSuitesAPI, type TestDataset, type GlobalParameter } from '@/lib/api';
+import { loadProjectParameters, paramsToMap, referencedKeys, resolveParameters } from '@/utils/parameters';
 import { CustomFieldDefinition, CustomFieldValue, Requirement, TestCase, TestSuite } from '@/types';
 
 type SectionCrumb = { id: number; name: string };
@@ -70,6 +72,7 @@ export function TestCaseDetail() {
   const navigate = useNavigate();
   const [testCase, setTestCase] = useState<TestCase | null>(null);
   const [dataset, setDataset] = useState<TestDataset | null>(null);
+  const [globalParams, setGlobalParams] = useState<GlobalParameter[]>([]);
   const [testSuite, setTestSuite] = useState<TestSuite | null>(null);
   const [section, setSection] = useState<{ name: string; path: SectionCrumb[] } | null>(null);
   const [testSteps, setTestSteps] = useState<Array<{
@@ -334,6 +337,21 @@ export function TestCaseDetail() {
     return () => { cancelled = true; };
   }, [attachedDatasetId]);
 
+  // Load the project's global parameters so we can show which ones this case
+  // references via ${name} and what they resolve to.
+  useEffect(() => {
+    const numericProjectId = Number(effectiveProjectId);
+    if (!Number.isFinite(numericProjectId)) {
+      setGlobalParams([]);
+      return;
+    }
+    let cancelled = false;
+    loadProjectParameters(numericProjectId)
+      .then((rows) => { if (!cancelled) setGlobalParams(rows); })
+      .catch(() => { if (!cancelled) setGlobalParams([]); });
+    return () => { cancelled = true; };
+  }, [effectiveProjectId]);
+
   const displaySteps = useMemo(() => {
     const parseLegacyText = (text: string | undefined | null) =>
       (parseCodeFence(text || '')?.code ?? (text || ''))
@@ -362,6 +380,24 @@ export function TestCaseDetail() {
     return parsed;
   }, [isMultistepCase, testCase, testSteps]);
 
+  // Global parameters actually referenced by this case's text, paired with the
+  // value they resolve to during a run.
+  const referencedParams = useMemo(() => {
+    if (globalParams.length === 0) return [];
+    const text = [
+      testCase?.preconditions,
+      testCase?.steps,
+      testCase?.expected_result,
+      ...displaySteps.flatMap((s) => [s.action, s.expected_result]),
+    ].filter(Boolean).join('\n');
+    const keys = new Set(referencedKeys(text));
+    return globalParams.filter((p) => keys.has(p.name));
+  }, [globalParams, testCase, displaySteps]);
+
+  // Resolve ${name} placeholders to their global-parameter values for display.
+  const globalMap = useMemo(() => paramsToMap(globalParams), [globalParams]);
+  const resolve = (text: string | null | undefined): string => resolveParameters(text, globalMap);
+
   const latestExecution = testRunHistory[0];
   const uniqueRunCount = new Set(
     testRunHistory.map((item) => item.test_run_id).filter((value) => value != null)
@@ -614,7 +650,7 @@ export function TestCaseDetail() {
               <CardContent className="pt-0">
                 <div className="rounded-2xl border border-slate-200 bg-slate-50/80 p-4 dark:border-slate-800 dark:bg-slate-950/60">
                   <p className="whitespace-pre-wrap wrap-break-word text-[15px] leading-7 text-slate-700 dark:text-slate-300">
-                    {testCase.preconditions || t('noPreconditions')}
+                    {testCase.preconditions ? resolve(testCase.preconditions) : t('noPreconditions')}
                   </p>
                 </div>
               </CardContent>
@@ -663,6 +699,42 @@ export function TestCaseDetail() {
               </Card>
             )}
 
+            {referencedParams.length > 0 && (
+              <Card className="border-slate-200 bg-white shadow-xs dark:border-slate-800 dark:bg-slate-900">
+                <CardHeader className="pb-3">
+                  <CardTitle className="flex flex-wrap items-center gap-2 text-base font-semibold text-slate-950 dark:text-white">
+                    <span className="rounded-lg bg-amber-100 p-1.5 dark:bg-amber-900/30">
+                      <Wrench className="h-4 w-4 text-amber-600 dark:text-amber-300" />
+                    </span>
+                    {t('globalParameters')}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-0 space-y-2">
+                  <p className="text-xs text-slate-500 dark:text-slate-400">{t('globalParamsReferencedHint')}</p>
+                  <div className="overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-800">
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="bg-slate-50 dark:bg-slate-950/60">
+                          <th className="px-3 py-2 text-left font-mono text-xs text-slate-700 dark:text-slate-300">{t('name')}</th>
+                          <th className="px-3 py-2 text-left text-xs text-slate-500">{t('value')}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {referencedParams.map((p) => (
+                          <tr key={p.id} className="border-t border-slate-200 dark:border-slate-800">
+                            <td className="px-3 py-2 font-mono text-xs text-slate-700 dark:text-slate-300">{`\${${p.name}}`}</td>
+                            <td className="px-3 py-2 text-slate-700 dark:text-slate-300">
+                              {p.is_encrypted ? <span className="text-slate-400">••••••</span> : p.value}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
             <Card className="border-slate-200 bg-white shadow-xs dark:border-slate-800 dark:bg-slate-900">
               <CardHeader className="pb-3">
                 <CardTitle className="flex flex-wrap items-center gap-2 text-base font-semibold text-slate-950 dark:text-white">
@@ -699,13 +771,13 @@ export function TestCaseDetail() {
                             <div>
                               <h5 className="mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t('action')}</h5>
                               <p className="whitespace-pre-wrap wrap-break-word text-sm leading-7 text-slate-600 dark:text-slate-300">
-                                {step.action || t('noStepsDefined')}
+                                {step.action ? resolve(step.action) : t('noStepsDefined')}
                               </p>
                             </div>
                             <div>
                               <h5 className="mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t('expectedResult')}</h5>
                               <p className="whitespace-pre-wrap wrap-break-word text-sm leading-7 text-slate-600 dark:text-slate-300">
-                                {step.expected_result || t('noExpectedResults')}
+                                {step.expected_result ? resolve(step.expected_result) : t('noExpectedResults')}
                               </p>
                             </div>
                           </div>
@@ -720,7 +792,7 @@ export function TestCaseDetail() {
                   )
                 ) : testCase.steps ? (
                   <div className="rounded-2xl border border-slate-200 bg-slate-50/80 p-4 dark:border-slate-800 dark:bg-slate-950/60">
-                    <StepsTextContent value={testCase.steps} />
+                    <StepsTextContent value={resolve(testCase.steps)} />
                   </div>
                 ) : (
                   <div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50/80 p-8 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-950/60">
@@ -745,7 +817,7 @@ export function TestCaseDetail() {
                   {testCase.expected_result ? (
                     <div className="rounded-2xl border border-slate-200 bg-slate-50/80 p-4 dark:border-slate-800 dark:bg-slate-950/60">
                       <p className="whitespace-pre-wrap wrap-break-word text-sm leading-7 text-slate-700 dark:text-slate-300">
-                        {testCase.expected_result}
+                        {resolve(testCase.expected_result)}
                       </p>
                     </div>
                   ) : (
diff --git a/frontend/src/pages/TestCaseEdit.tsx b/frontend/src/pages/TestCaseEdit.tsx
@@ -13,7 +13,8 @@ import { ReferenceField } from '@/components/ui/reference-field';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { ArrowLeft, Save, Trash2, Plus, AlertTriangle, RefreshCw, Loader2, Sparkles, ListChecks, Target, FileCode2, Split, ShieldAlert, Check, CopyPlus, ExternalLink, type LucideIcon } from 'lucide-react';
 import { ToastAction } from '@/components/ui/toast';
-import { aiManagerAPI, AIManagerStatus, testCasesAPI, testSuitesAPI, projectsAPI, sectionsAPI, customFieldsAPI, enumsAPI, datasetsAPI, type TestDataset } from '@/lib/api';
+import { aiManagerAPI, AIManagerStatus, testCasesAPI, testSuitesAPI, projectsAPI, sectionsAPI, customFieldsAPI, enumsAPI, datasetsAPI, type TestDataset, type GlobalParameter } from '@/lib/api';
+import { loadProjectParameters } from '@/utils/parameters';
 import { CustomFieldDefinition } from '@/types';
 import { useProjectStore } from '@/stores/projectStore';
 import { useToast } from '@/hooks/use-toast';
@@ -90,6 +91,7 @@ export function TestCaseEdit() {
   const [testTypeOptions, setTestTypeOptions] = useState<SelectOption[]>([]);
   const [testTypesLoading, setTestTypesLoading] = useState(false);
   const [datasets, setDatasets] = useState<TestDataset[]>([]);
+  const [globalParams, setGlobalParams] = useState<GlobalParameter[]>([]);
   const [aiDialogOpen, setAiDialogOpen] = useState(false);
   const [aiAssistantAction, setAiAssistantAction] = useState<AIAssistantAction>('suggest_steps');
   const [aiInstructions, setAiInstructions] = useState('');
@@ -422,6 +424,19 @@ export function TestCaseEdit() {
     return () => { cancelled = true; };
   }, [currentProjectId]);
 
+  // Global parameters this case can reference as ${name} in its step text.
+  useEffect(() => {
+    if (!currentProjectId) {
+      setGlobalParams([]);
+      return;
+    }
+    let cancelled = false;
+    loadProjectParameters(currentProjectId)
+      .then((rows) => { if (!cancelled) setGlobalParams(rows); })
+      .catch(() => { if (!cancelled) setGlobalParams([]); });
+    return () => { cancelled = true; };
+  }, [currentProjectId]);
+
   const handleInputChange = (field: string, value: string | number | null) => {
     setFormData(prev => {
       const updated = {
@@ -1277,6 +1292,26 @@ export function TestCaseEdit() {
             })()}
           </div>
 
+          {globalParams.length > 0 && (
+            <div>
+              <Label>{t('globalParameters')}</Label>
+              <p className="text-xs text-muted-foreground mt-1">{t('globalParamsEditorHint')}</p>
+              <div className="flex flex-wrap gap-1 mt-2">
+                {globalParams.map((p) => (
+                  <Badge
+                    key={p.id}
+                    variant="secondary"
+                    className="font-mono text-[10px] cursor-pointer"
+                    title={p.is_encrypted ? t('encrypted') : p.value}
+                    onClick={() => navigator.clipboard?.writeText(`\${${p.name}}`)}
+                  >
+                    {`\${${p.name}}`}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
+
           <div>
             <Label htmlFor="tags">{t('tags')}</Label>
             <Input
diff --git a/frontend/src/pages/TestCaseExecution.tsx b/frontend/src/pages/TestCaseExecution.tsx
diff --git a/frontend/src/utils/parameters.ts b/frontend/src/utils/parameters.ts
