Use more json schema annotations in the basic form

dashboard/src/components/DeploymentForm/DeploymentFormBody/BasicDeploymentForm/TabularSchemaEditorTable/Params/ArrayParam.tsx

@@ -17,13 +17,14 @@ export interface IArrayParamProps {
   label: string;
   type: string;
   param: IBasicFormParam;
+  step: number;
   handleBasicFormParamChange: (
     param: IBasicFormParam,
   ) => (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
 }
 
 export default function ArrayParam(props: IArrayParamProps) {
-  const { id, label, type, param, handleBasicFormParamChange } = props;
+  const { id, label, type, param, step, handleBasicFormParamChange } = props;
 
   const [currentArrayItems, setCurrentArrayItems] = useState<(string | number | boolean)[]>(
     param.currentValue ? JSON.parse(param.currentValue) : [],
@@ -138,6 +139,7 @@ export default function ArrayParam(props: IArrayParamProps) {
         action="flat"
         status="primary"
         size="sm"
+        disabled={currentArrayItems.length >= param?.maxItems}
       >
         <CdsIcon shape="plus" size="sm" solid={true} />
         <span>Add</span>

dashboard/src/components/DeploymentForm/DeploymentFormBody/BasicDeploymentForm/TabularSchemaEditorTable/Params/BooleanParam.tsx

@@ -48,6 +48,7 @@ export default function BooleanParam(props: IBooleanParamProps) {
       <CdsToggle>
         <input
           required={param.required}
+          disabled={param.readOnly}
           aria-label={label}
           id={id}
           type="checkbox"

dashboard/src/components/DeploymentForm/DeploymentFormBody/BasicDeploymentForm/TabularSchemaEditorTable/Params/SliderParam.tsx

@@ -59,6 +59,7 @@ export default function SliderParam(props: ISliderParamProps) {
     <CdsRange>
       <input
         required={param.required}
+        disabled={param.readOnly}
         aria-label={label}
         id={id + "_range"}
         type="range"
@@ -77,6 +78,7 @@ export default function SliderParam(props: ISliderParamProps) {
       <CdsInput className={isModified ? "bolder" : ""}>
         <input
           required={param.required}
+          disabled={param.readOnly}
           aria-label={label}
           id={id + "_text"}
           type="number"

dashboard/src/components/DeploymentForm/DeploymentFormBody/BasicDeploymentForm/TabularSchemaEditorTable/TabularSchemaEditorTableRenderer.tsx

@@ -24,7 +24,14 @@ function renderCellWithTooltip(
   const stringValue = ["string", "number"].includes(typeof value?.[property])
     ? value?.[property] || ""
     : JSON.stringify(value?.[property]);
-
+  return renderCellWithTooltipBase(stringValue, className, trimFromBeginning, maxLength);
+}
+function renderCellWithTooltipBase(
+  stringValue: string,
+  className = "",
+  trimFromBeginning = false,
+  maxLength = MAX_LENGTH,
+) {
   if (stringValue?.length > maxLength) {
     const trimmedString = trimFromBeginning
       ? "..." + stringValue.substring(stringValue.length - maxLength, stringValue.length)
@@ -73,6 +80,7 @@ export function renderConfigKeyHeader(table: any, _saveAllChanges: any) {
 }
 
 export function renderConfigKey(value: IBasicFormParam, row: any, _saveAllChanges: any) {
+  const stringKey = value?.deprecated ? `${value?.key} (deprecated)` : value?.key;
   return (
     <div
       className="left-align self-center"
@@ -102,15 +110,17 @@ export function renderConfigKey(value: IBasicFormParam, row: any, _saveAllChange
               <></>
             )}
           </CdsButton>
-          {renderCellWithTooltip(value, "key", "breakable self-center", true, MAX_LENGTH / 1.5)}
+          {renderCellWithTooltipBase(stringKey, "breakable self-center", true, MAX_LENGTH / 1.5)}
         </div>
       </>
     </div>
   );
 }
 
 export function renderConfigType(value: IBasicFormParam) {
-  return renderCellWithTooltip(value, "type", "italics");
+  const stringType =
+    value?.type === "array" ? `${value?.type}<${value?.items?.type}>` : value?.type;
+  return renderCellWithTooltipBase(stringType, "italics");
 }
 
 export function renderConfigDescription(value: IBasicFormParam) {
@@ -181,7 +191,7 @@ export function renderConfigCurrentValuePro(
           label={param.title || param.path}
           param={param}
           handleBasicFormParamChange={handleBasicFormParamChange}
-          step={param.type === "integer" ? 1 : 0.1}
+          step={param?.multipleOf || (param.schema?.type === "number" ? 0.5 : 1)}
           unit={""}
         />
       );

dashboard/src/shared/schema.ts

@@ -34,6 +34,16 @@ export function retrieveBasicFormParams(
       const isUpgrading = deploymentEvent === "upgrade" && deployedValues;
       const isLeaf = !schemaProperty?.properties;
 
+      // get the values for the current property in the examples array
+      // for objects, we need to get the value of the property in the example array,
+      // for the rest, we can just get the value of the example array
+      let examples = schemaProperty.examples;
+      if (schemaExamples?.length > 0) {
+        examples = schemaExamples?.map((item: any) =>
+          typeof item === "object" ? item?.[propertyKey]?.toString() ?? "" : item?.toString() ?? "",
+        );
+      }
+
       const param: IBasicFormParam = {
         ...schemaProperty,
         title: schemaProperty.title || propertyKey,
@@ -50,6 +60,7 @@ export function retrieveBasicFormParams(
               `${itemPath}/`,
             )
           : undefined,
+        // get the string values of the enum array
         enum: schemaProperty?.enum?.map((item: { toString: () => any }) => item?.toString() ?? ""),
         // check if the "required" array contains the current property
         required: requiredProperties?.includes(propertyKey),

dashboard/src/shared/yamlUtils.ts

@@ -85,7 +85,15 @@ export function getPathValueInYamlNode(
   path: string,
 ) {
   const splittedPath = parsePath(path);
-  const value = values?.getIn(splittedPath);
+  let value = values?.getIn(splittedPath);
+
+  // if the value from getIn is an object, it means
+  // it is a YamlSeq or YamlMap, so we need to convert it
+  // back to a plain JS object
+  if (typeof value === "object") {
+    value = (value as any)?.toJSON();
+  }
+
   return value;
 }