feat: add pipeline badges, insert buttons, collapsible catalog and RJSF form

Author: gcusnieux

gravitee-gamma/src/app/policy-studio/components/PhaseRow.tsx

@@ -1,6 +1,6 @@
 import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight, Plus, Circle } from 'lucide-react';
 import { cn } from '@baros/lib/utils';
 import type { Step, Phase, StepKey } from '../types';
 import { StepCard } from './StepCard';
@@ -13,14 +13,45 @@ interface PhaseRowProps {
   readonly selectedStepKey: StepKey | null;
   readonly onStepSelect: (key: StepKey) => void;
   readonly onStepRemove: (phase: Phase, stepIndex: number) => void;
+  readonly onInsertStep?: (phase: Phase, atIndex: number) => void;
   readonly dropState?: 'compatible' | 'incompatible' | null;
 }
 
 function Arrow() {
   return <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground/50" />;
 }
 
-export function PhaseRow({ label, phase, steps, flowIndex, selectedStepKey, onStepSelect, onStepRemove, dropState }: PhaseRowProps) {
+function EndpointBadge({ label, variant }: { label: string; variant: 'start' | 'end' }) {
+  return (
+    <div className={cn(
+      'flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium',
+      variant === 'start'
+        ? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300'
+        : 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300',
+    )}>
+      <Circle className="h-2 w-2 fill-current" />
+      {label}
+    </div>
+  );
+}
+
+function InsertButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="group/insert flex shrink-0 items-center"
+      aria-label="Insert policy here"
+    >
+      <Arrow />
+      <span className="flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/30 opacity-0 transition-opacity group-hover/insert:opacity-100 hover:border-primary hover:text-primary">
+        <Plus className="h-3 w-3" />
+      </span>
+    </button>
+  );
+}
+
+export function PhaseRow({ label, phase, steps, flowIndex, selectedStepKey, onStepSelect, onStepRemove, onInsertStep, dropState }: PhaseRowProps) {
   const droppableId = `phase-${flowIndex}-${phase}`;
   const { setNodeRef, isOver } = useDroppable({
     id: droppableId,
@@ -32,6 +63,9 @@ export function PhaseRow({ label, phase, steps, flowIndex, selectedStepKey, onSt
   const isSelected = (index: number) =>
     selectedStepKey?.phase === phase && selectedStepKey.index === index;
 
+  const startLabel = phase === 'request' ? 'Entrypoint' : 'Endpoint';
+  const endLabel = phase === 'request' ? 'Endpoint' : 'Entrypoint';
+
   return (
     <div className="flex flex-col gap-2">
       <h3 className={cn(
@@ -50,14 +84,24 @@ export function PhaseRow({ label, phase, steps, flowIndex, selectedStepKey, onSt
             !isOver && 'border-border/50 bg-muted/30',
           )}
         >
+          <EndpointBadge label={startLabel} variant="start" />
+
           {steps.length === 0 && (
-            <div className="px-4 py-2 text-xs text-muted-foreground">
-              Drop a policy here
-            </div>
+            <>
+              <Arrow />
+              <div className="px-4 py-2 text-xs text-muted-foreground">
+                Drop a policy here
+              </div>
+            </>
           )}
+
           {steps.map((step, index) => (
             <div key={step.id} className="flex items-center gap-1">
-              {index > 0 && <Arrow />}
+              {onInsertStep ? (
+                <InsertButton onClick={() => onInsertStep(phase, index)} />
+              ) : (
+                <Arrow />
+              )}
               <StepCard
                 step={step}
                 phase={phase}
@@ -69,6 +113,10 @@ export function PhaseRow({ label, phase, steps, flowIndex, selectedStepKey, onSt
               />
             </div>
           ))}
+
+          <Arrow />
+          <EndpointBadge label={endLabel} variant="end" />
+
           {isOver && dropState === 'incompatible' && (
             <div className="ml-2 text-xs text-destructive">
               Incompatible phase

gravitee-gamma/src/app/policy-studio/components/PolicyCatalog.tsx

@@ -1,10 +1,14 @@
 import { useState, useMemo } from 'react';
-import { Search } from 'lucide-react';
+import { Search, ChevronDown } from 'lucide-react';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@baros/components/ui/collapsible';
 import { ScrollArea } from '@baros/components/ui/scroll-area';
 import { Separator } from '@baros/components/ui/separator';
+import { cn } from '@baros/lib/utils';
 import type { PolicyPlugin } from '../types';
 import { PolicyCatalogItem } from './PolicyCatalogItem';
 
+const UNCATEGORIZED = 'Others';
+
 interface PolicyCatalogProps {
   readonly policies: PolicyPlugin[];
 }
@@ -20,6 +24,23 @@ export function PolicyCatalog({ policies }: PolicyCatalogProps) {
     [policies, search],
   );
 
+  const grouped = useMemo(() => {
+    const map = new Map<string, PolicyPlugin[]>();
+    for (const p of filtered) {
+      const cat = p.category || UNCATEGORIZED;
+      const list = map.get(cat);
+      if (list) list.push(p);
+      else map.set(cat, [p]);
+    }
+    return [...map.entries()].sort(([a], [b]) => {
+      if (a === UNCATEGORIZED) return 1;
+      if (b === UNCATEGORIZED) return -1;
+      return a.localeCompare(b);
+    });
+  }, [filtered]);
+
+  const isSearching = search.length > 0;
+
   return (
     <div className="flex w-64 shrink-0 flex-col border-l">
       <div className="px-3 py-2">
@@ -38,14 +59,30 @@ export function PolicyCatalog({ policies }: PolicyCatalogProps) {
         />
       </div>
       <ScrollArea className="flex-1">
-        <div className="flex flex-col gap-1 p-2">
+        <div className="flex flex-col p-2">
           {filtered.length === 0 && (
             <div className="px-2 py-8 text-center text-xs text-muted-foreground">
               No policies found
             </div>
           )}
-          {filtered.map((policy) => (
-            <PolicyCatalogItem key={policy.id} policy={policy} />
+          {grouped.map(([category, items]) => (
+            <Collapsible key={category} defaultOpen open={isSearching ? true : undefined} className="group/collapsible">
+              <CollapsibleTrigger className="flex w-full items-center gap-1 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground">
+                <ChevronDown className={cn(
+                  'h-3 w-3 transition-transform',
+                  'group-data-[state=closed]/collapsible:-rotate-90',
+                )} />
+                {category}
+                <span className="ml-auto text-[10px] font-normal">{items.length}</span>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="flex flex-col gap-1 pb-1">
+                  {items.map((policy) => (
+                    <PolicyCatalogItem key={policy.id} policy={policy} />
+                  ))}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
           ))}
         </div>
       </ScrollArea>

gravitee-gamma/src/app/policy-studio/components/StepConfigSheet.tsx

@@ -1,4 +1,7 @@
 import { useState, useEffect } from 'react';
+import Form from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
+import type { IChangeEvent } from '@rjsf/core';
 import {
   Sheet,
   SheetContent,
@@ -21,31 +24,25 @@ interface StepConfigSheetProps {
 
 export function StepConfigSheet({ open, onOpenChange, step, phase, onSave }: StepConfigSheetProps) {
   const { schema, loading, error, fetchSchema } = usePolicySchema();
-  const [configJson, setConfigJson] = useState('');
-  const [parseError, setParseError] = useState<string | null>(null);
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
 
   const stepId = step?.id ?? null;
   const stepPolicy = step?.policy ?? null;
 
   useEffect(() => {
     if (open && step && stepPolicy) {
       fetchSchema(stepPolicy);
-      setConfigJson(JSON.stringify(step.configuration ?? {}, null, 2));
-      setParseError(null);
+      setFormData(step.configuration ?? {});
     }
-    // Depend on stable values, not the step object reference
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, stepId, stepPolicy, fetchSchema]);
 
+  function handleChange(e: IChangeEvent) {
+    setFormData(e.formData);
+  }
+
   function handleSave() {
-    try {
-      const parsed = JSON.parse(configJson);
-      setParseError(null);
-      onSave(parsed);
-      onOpenChange(false);
-    } catch {
-      setParseError('Invalid JSON');
-    }
+    onSave(formData);
+    onOpenChange(false);
   }
 
   const policyName = step?.name ?? step?.policy ?? 'Unknown policy';
@@ -61,36 +58,26 @@ export function StepConfigSheet({ open, onOpenChange, step, phase, onSave }: Ste
           </SheetDescription>
         </SheetHeader>
 
-        <div className="flex-1 overflow-auto space-y-4 py-4">
+        <div className="flex-1 overflow-auto py-4">
           {loading && (
             <div className="text-sm text-muted-foreground">Loading schema...</div>
           )}
           {error && (
             <div className="text-sm text-destructive">Failed to load schema: {error.message}</div>
           )}
           {schema && !loading && (
-            <div className="space-y-3">
-              <div>
-                <h4 className="text-xs font-semibold text-muted-foreground mb-1">JSON Schema</h4>
-                <pre className="rounded-md bg-muted p-3 text-xs overflow-auto max-h-40">
-                  {JSON.stringify(schema, null, 2)}
-                </pre>
-              </div>
-              <div>
-                <h4 className="text-xs font-semibold text-muted-foreground mb-1">Configuration</h4>
-                <textarea
-                  value={configJson}
-                  onChange={(e) => {
-                    setConfigJson(e.target.value);
-                    setParseError(null);
-                  }}
-                  className="h-48 w-full rounded-md border border-input bg-background p-3 font-mono text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                  spellCheck={false}
-                />
-                {parseError && (
-                  <div className="mt-1 text-xs text-destructive">{parseError}</div>
-                )}
-              </div>
+            <div className="rjsf-sheet">
+              <Form
+                schema={schema}
+                formData={formData}
+                validator={validator}
+                onChange={handleChange}
+                liveValidate
+                showErrorList={false}
+              >
+                {/* Hide default submit button — we use our own in SheetFooter */}
+                <></>
+              </Form>
             </div>
           )}
         </div>