Enhance Validations and add Code-Highlighter

workspaces/dcm/.changeset/form-validation-enhancements.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dcm': patch
+---
+
+Catalog Item: validate duplicate paths, block adding empty field rows, live-validate JSON in schema modal, surface invalid default_value / validation_schema inline. Policy: add structural Rego validation (package declaration + selected_provider reference) and monospace font to the code editor. Catalog Instance: enforce required/min/max constraints from validation_schema on user-value fields and enable submit-button gating.

workspaces/dcm/plugins/dcm/package.json

@@ -43,6 +43,7 @@
     "@material-ui/lab": "4.0.0-alpha.61",
     "@red-hat-developer-hub/backstage-plugin-dcm-common": "workspace:^",
     "js-yaml": "^4.1.1",
+    "react-syntax-highlighter": "^15.4.5",
     "react-use": "^17.2.4",
     "yup": "^1.7.1"
   },
@@ -60,6 +61,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/js-yaml": "^4.0.9",
+    "@types/react-syntax-highlighter": "^15",
     "msw": "^1.0.0",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",

workspaces/dcm/plugins/dcm/src/pages/catalog-item-instances/CatalogItemInstancesTabContent.tsx

@@ -292,7 +292,7 @@ export function CatalogItemInstancesTabContent() {
             onCancel={crud.handleCloseCreate}
             submitLabel="Create"
             submitting={crud.createSubmitting}
-            disabled={false}
+            disabled={!isInstanceFormValid(crud.createForm)}
           />
         }
       >

workspaces/dcm/plugins/dcm/src/pages/catalog-item-instances/components/InstanceFormFields.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
   Box,
   Divider,
@@ -43,6 +43,7 @@ import {
   buildUserValueRows,
   InstanceForm,
   validateInstanceForm,
+  validateUserValues,
 } from '../instanceFormTypes';
 import type { UserValueRow } from '../instanceFormTypes';
 
@@ -59,6 +60,7 @@ export type InstanceFormFieldsProps = Readonly<{
 
 function fieldHelperText(row: UserValueRow): string {
   const parts: string[] = [`path: ${row.path}`];
+  if (row.required) parts.push('required');
   if (row.schemaType) parts.push(`type: ${row.schemaType}`);
   if (row.schemaMin !== undefined) parts.push(`min: ${row.schemaMin}`);
   if (row.schemaMax !== undefined) parts.push(`max: ${row.schemaMax}`);
@@ -74,6 +76,13 @@ export function InstanceFormFields({
 }: InstanceFormFieldsProps) {
   const classes = useStyles();
   const errors = useMemo(() => validateInstanceForm(form), [form]);
+  const userValueErrors = useMemo(
+    () => validateUserValues(form.user_values),
+    [form.user_values],
+  );
+  const [userValuesTouched, setUserValuesTouched] = useState<
+    Record<number, boolean>
+  >({});
   const selectedItem = catalogItems.find(ci => ci.uid === form.catalog_item_id);
 
   const handleCatalogItemChange = (id: string) => {
@@ -84,6 +93,7 @@ export function InstanceFormFields({
       user_values: buildUserValueRows(item),
     }));
     setTouched(prev => ({ ...prev, catalog_item_id: true }));
+    setUserValuesTouched({});
   };
 
   const setUserValue = (index: number, value: string) =>
@@ -93,6 +103,9 @@ export function InstanceFormFields({
       return { ...prev, user_values: updated };
     });
 
+  const touchUserValue = (index: number) =>
+    setUserValuesTouched(prev => ({ ...prev, [index]: true }));
+
   return (
     <Box display="flex" flexDirection="column" gridGap={16}>
       <TextField
@@ -189,7 +202,12 @@ export function InstanceFormFields({
             </Typography>
           </Typography>
           {form.user_values.map((row, i) => {
-            const helperText = fieldHelperText(row);
+            const isTouched = Boolean(userValuesTouched[i]);
+            const fieldError = isTouched ? userValueErrors[i] : undefined;
+            const label = row.required
+              ? `${row.displayName} *`
+              : row.displayName;
+            const helperText = fieldError ?? fieldHelperText(row);
 
             /* Enum field → Select */
             if (row.enumValues && row.enumValues.length > 0) {
@@ -199,12 +217,17 @@ export function InstanceFormFields({
                   variant="outlined"
                   size="small"
                   fullWidth
+                  error={Boolean(fieldError)}
                 >
-                  <InputLabel shrink>{row.displayName}</InputLabel>
+                  <InputLabel shrink>{label}</InputLabel>
                   <Select
                     value={row.value}
-                    onChange={e => setUserValue(i, e.target.value as string)}
-                    input={<OutlinedInput notched label={row.displayName} />}
+                    onChange={e => {
+                      setUserValue(i, e.target.value as string);
+                      touchUserValue(i);
+                    }}
+                    onBlur={() => touchUserValue(i)}
+                    input={<OutlinedInput notched label={label} />}
                   >
                     {row.enumValues.map(v => (
                       <MenuItem key={v} value={v}>
@@ -222,10 +245,12 @@ export function InstanceFormFields({
               return (
                 <TextField
                   key={row.path}
-                  label={row.displayName}
+                  label={label}
                   helperText={helperText}
+                  error={Boolean(fieldError)}
                   value={row.value}
                   onChange={e => setUserValue(i, e.target.value)}
+                  onBlur={() => touchUserValue(i)}
                   fullWidth
                   variant="outlined"
                   size="small"
@@ -243,10 +268,12 @@ export function InstanceFormFields({
             return (
               <TextField
                 key={row.path}
-                label={row.displayName}
+                label={label}
                 helperText={helperText}
+                error={Boolean(fieldError)}
                 value={row.value}
                 onChange={e => setUserValue(i, e.target.value)}
+                onBlur={() => touchUserValue(i)}
                 fullWidth
                 variant="outlined"
                 size="small"

workspaces/dcm/plugins/dcm/src/pages/catalog-item-instances/instanceFormTypes.ts

@@ -22,6 +22,7 @@ import type {
   UserValue,
 } from '@red-hat-developer-hub/backstage-plugin-dcm-common';
 import { createYupValidator } from '../../utils/createYupValidator';
+import { pickNumericBound } from '../../utils/schemaUtils';
 
 /** One user-supplied field value, with string value for form binding. */
 export type UserValueRow = {
@@ -40,6 +41,8 @@ export type UserValueRow = {
   schemaMin?: number;
   /** Inclusive upper bound (from validation_schema.maximum). */
   schemaMax?: number;
+  /** Whether the field must be filled (from validation_schema.required). */
+  required?: boolean;
 };
 
 export type InstanceForm = {
@@ -66,12 +69,14 @@ const instanceSchema = yup.object({
     ),
 });
 
-export const { validate: validateInstanceForm, isValid: isInstanceFormValid } =
-  createYupValidator<InstanceForm>(instanceSchema, f => ({
-    display_name: f.display_name,
-    catalog_item_id: f.catalog_item_id,
-    api_version: f.api_version,
-  }));
+export const {
+  validate: validateInstanceForm,
+  isValid: isInstanceScalarValid,
+} = createYupValidator<InstanceForm>(instanceSchema, f => ({
+  display_name: f.display_name,
+  catalog_item_id: f.catalog_item_id,
+  api_version: f.api_version,
+}));
 
 export function emptyInstanceForm(): InstanceForm {
   return {
@@ -97,19 +102,68 @@ function defaultToString(val: unknown): string {
 /** Extract typed schema metadata from a {@link FieldConfiguration}. */
 function extractSchemaInfo(
   field: FieldConfiguration,
-): Pick<UserValueRow, 'schemaType' | 'enumValues' | 'schemaMin' | 'schemaMax'> {
+): Pick<
+  UserValueRow,
+  'schemaType' | 'enumValues' | 'schemaMin' | 'schemaMax' | 'required'
+> {
   const schema = field.validation_schema ?? {};
   const schemaType = typeof schema.type === 'string' ? schema.type : undefined;
   const enumValues =
     Array.isArray(schema.enum) &&
     schema.enum.every(v => typeof v === 'string' || typeof v === 'number')
       ? (schema.enum as (string | number)[]).map(String)
       : undefined;
-  const schemaMin =
-    typeof schema.minimum === 'number' ? schema.minimum : undefined;
-  const schemaMax =
-    typeof schema.maximum === 'number' ? schema.maximum : undefined;
-  return { schemaType, enumValues, schemaMin, schemaMax };
+  const schemaMin = pickNumericBound(schema, 'minimum', 'min');
+  const schemaMax = pickNumericBound(schema, 'maximum', 'max');
+  const required = schema.required === true;
+  return { schemaType, enumValues, schemaMin, schemaMax, required };
+}
+
+/**
+ * Validates user-value rows against their schema constraints.
+ * Returns a record keyed by row index; only rows with errors are included.
+ */
+export function validateUserValues(
+  rows: UserValueRow[],
+): Record<number, string> {
+  const errors: Record<number, string> = {};
+
+  rows.forEach((row, i) => {
+    const v = row.value.trim();
+
+    if (row.required && v === '') {
+      errors[i] = 'This field is required';
+      return;
+    }
+
+    if (
+      v !== '' &&
+      (row.schemaType === 'integer' || row.schemaType === 'number')
+    ) {
+      const n = Number(v);
+      if (Number.isNaN(n)) {
+        errors[i] = 'Must be a valid number';
+        return;
+      }
+      if (row.schemaMin !== undefined && n < row.schemaMin) {
+        errors[i] = `Must be at least ${row.schemaMin}`;
+        return;
+      }
+      if (row.schemaMax !== undefined && n > row.schemaMax) {
+        errors[i] = `Must be at most ${row.schemaMax}`;
+        return;
+      }
+    }
+  });
+
+  return errors;
+}
+
+export function isInstanceFormValid(f: InstanceForm): boolean {
+  return (
+    isInstanceScalarValid(f) &&
+    Object.keys(validateUserValues(f.user_values)).length === 0
+  );
 }
 
 /** Build UserValueRows from the selected catalog item's editable fields. */

workspaces/dcm/plugins/dcm/src/pages/catalog-items/CatalogItemsTabContent.tsx

@@ -248,7 +248,7 @@ export function CatalogItemsTabContent() {
     <Drawer
       anchor="right"
       open={open}
-      onClose={submitting ? undefined : onClose}
+      onClose={submitting || Boolean(error) ? undefined : onClose}
     >
       <Box className={classes.drawer}>
         <Box className={classes.drawerHeader}>

workspaces/dcm/plugins/dcm/src/pages/catalog-items/catalogItemFormTypes.ts

@@ -20,6 +20,7 @@
   FieldConfiguration,
 } from '@red-hat-developer-hub/backstage-plugin-dcm-common';
 import { createYupValidator } from '../../utils/createYupValidator';
+import { pickNumericBound } from '../../utils/schemaUtils';
 
 export type FieldRow = {
   /** Stable client-side identifier used as React list key. Never sent to the API. */
@@ -71,8 +72,110 @@
   return f.fields.some(row => row.path.trim() !== '');
 }
 
+/** Per-row validation errors for a {@link FieldRow}. */
+export type FieldRowErrors = {
+  path?: string;
+  default_value?: string;
+  validation_schema?: string;
+};
+
+/** Returns true if a string looks like intended JSON (and should therefore be valid JSON). */
+function looksLikeJson(s: string): boolean {
+  return s.startsWith('{') || s.startsWith('[') || s.startsWith('"');
+}
+
+/**
+ * Validates all field rows for:
+ * - Duplicate paths (only non-empty paths are checked)
+ * - `default_value` that looks like JSON but fails to parse
+ * - `validation_schema` that is non-empty but not a valid JSON object
+ *
+ * Returns a record keyed by row index; only rows with errors are included.
+ */
+
+export function validateFieldRows(
+  fields: FieldRow[],
+): Record<number, FieldRowErrors> {
+  const result: Record<number, FieldRowErrors> = {};
+  const seenPaths = new Map<string, number>();
+
+  fields.forEach((row, i) => {
+    const rowErrors: FieldRowErrors = {};
+    const trimmedPath = row.path.trim();
+
+    if (trimmedPath !== '') {
+      if (seenPaths.has(trimmedPath)) {
+        rowErrors.path = 'Duplicate path — paths must be unique';
+      } else {
+        seenPaths.set(trimmedPath, i);
+      }
+    }
+
+    const defaultTrimmed = row.default_value.trim();
+    if (defaultTrimmed && looksLikeJson(defaultTrimmed)) {
+      try {
+        JSON.parse(defaultTrimmed);
+      } catch {
+        rowErrors.default_value =
+          'Invalid JSON — fix the syntax or use a plain string value';
+      }
+    }
+
+    const schemaTrimmed = row.validation_schema.trim();
+    let schemaMin: number | undefined;
+    let schemaMax: number | undefined;
+    if (schemaTrimmed) {
+      try {
+        const parsed = JSON.parse(schemaTrimmed);
+        if (
+          typeof parsed !== 'object' ||
+          parsed === null ||
+          Array.isArray(parsed)
+        ) {
+          rowErrors.validation_schema =
+            'Must be a JSON object — e.g. {"type":"integer"}';
+        } else {
+          schemaMin = pickNumericBound(parsed, 'minimum', 'min');
+          schemaMax = pickNumericBound(parsed, 'maximum', 'max');
+          if (
+            schemaMin !== undefined &&
+            schemaMax !== undefined &&
+            schemaMin > schemaMax
+          ) {
+            rowErrors.validation_schema = `minimum (${schemaMin}) must not exceed maximum (${schemaMax})`;
+          }
+        }
+      } catch {
+        rowErrors.validation_schema = 'Invalid JSON syntax';
+      }
+    }
+
+    const defaultNum = Number(defaultTrimmed);
+    if (
+      !rowErrors.default_value &&
+      !rowErrors.validation_schema &&
+      defaultTrimmed &&
+      Number.isFinite(defaultNum)
+    ) {
+      if (schemaMin !== undefined && defaultNum < schemaMin) {
+        rowErrors.default_value = `Default value (${defaultNum}) is below the schema minimum (${schemaMin})`;
+      } else if (schemaMax !== undefined && defaultNum > schemaMax) {
+        rowErrors.default_value = `Default value (${defaultNum}) exceeds the schema maximum (${schemaMax})`;
+      }
+    }
+
+    if (Object.keys(rowErrors).length > 0) {
+      result[i] = rowErrors;
+    }
+  });
+
+  return result;
+}
+
 export function isCatalogItemFormValid(f: CatalogItemForm): boolean {
-  return Object.keys(validateScalar(f)).length === 0 && hasValidFields(f);
+  if (Object.keys(validateScalar(f)).length !== 0) return false;
+  if (!hasValidFields(f)) return false;
+  return Object.keys(validateFieldRows(f.fields)).length === 0;
 }
 
 export function emptyFieldRow(): FieldRow {