ui: add dynamic schema for all the simple field types

papadopan · pamfilos · commit 9a502583d144 · 2021-01-25T02:13:09.000+01:00
Signed-off-by: papadopan &lt;antonios.papadopan@gmail.com&gt;
diff --git a/ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/customizeField.js b/ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/customizeField.js
@@ -123,7 +123,7 @@ class CustomizeField extends React.Component {
     });
   };
 
-  getSchemaForm = uiSchema => {
+  getSchemaForm = (uiSchema, schema) => {
     // check if there is not uiSchema
     if (!uiSchema) return;
     let type;
@@ -143,6 +143,12 @@ class CustomizeField extends React.Component {
       type = uiSchema["ui:object"];
     }
 
+    // in case we can not define the type of the element from the uiSchema,
+    // extract the type from the schema
+    if (!uiSchema["ui:widget"] && !uiSchema["ui:field"]) {
+      type = schema.type;
+    }
+
     // if there is no type then there is nothing to return
     if (!type) return;
     const objs = {
@@ -174,7 +180,7 @@ class CustomizeField extends React.Component {
     );
   };
 
-  getUISchemaForm = uiSchema => {
+  getUISchemaForm = (uiSchema, schema) => {
     // check if there is not uiSchema
     if (!uiSchema) return;
     let type;
@@ -193,6 +199,11 @@ class CustomizeField extends React.Component {
     if (uiSchema["ui:object"]) {
       type = uiSchema["ui:object"];
     }
+    // in case we can not define the type of the element from the uiSchema,
+    // fetch the schema and extract the type from there
+    if (!uiSchema["ui:widget"] && !uiSchema["ui:field"]) {
+      type = schema.type;
+    }
 
     // if there is no type then there is nothing to return
     if (!type) return;
@@ -236,7 +247,10 @@ class CustomizeField extends React.Component {
             this.setState({ showDeleteLayer: false });
           }}
         />
-        {this.getSchemaForm(this.props.uiSchema && this.props.uiSchema.toJS())}
+        {this.getSchemaForm(
+          this.props.uiSchema && this.props.uiSchema.toJS(),
+          this.props.schema && this.props.schema.toJS()
+        )}
         <Box>
           <Box colorIndex="accent-2" flex={false} pad="small">
             <Label size="medium" margin="none">
@@ -307,7 +321,8 @@ class CustomizeField extends React.Component {
               ))}
           </Box>
           {this.getUISchemaForm(
-            this.props.uiSchema && this.props.uiSchema.toJS()
+            this.props.uiSchema && this.props.uiSchema.toJS(),
+            this.props.schema && this.props.schema.toJS()
           )}
           <Box
             direction="row"
diff --git a/ui/cap-react/src/components/cms/components/SchemaWizard/SchemaPreview/SchemaTree/ArrayFieldTemplate.js b/ui/cap-react/src/components/cms/components/SchemaWizard/SchemaPreview/SchemaTree/ArrayFieldTemplate.js
@@ -24,7 +24,7 @@ const ArrayFieldTemplate = props => {
   };
 
   let __path = {
-    schema: [...props.formContext.schema, ...schemaPath, "items"],
+    schema: [...props.formContext.schema, ...schemaPath],
     uiSchema: [...props.formContext.uiSchema, ...uiSchemaPath]
   };
 
diff --git a/ui/cap-react/src/components/cms/components/SchemaWizard/SchemaPreview/SchemaTree/SchemaTreeItem.js b/ui/cap-react/src/components/cms/components/SchemaWizard/SchemaPreview/SchemaTree/SchemaTreeItem.js
@@ -13,19 +13,11 @@ class SchemaTreeItem extends React.Component {
     super(props);
   }
 
+  // selects the item for the property editor
   _onClick = () => {
-    // this.props.selectProperty(this.props.rawErrors[0]);
     this.props.selectProperty(this.props.path);
   };
 
-  _addProperty = () => {
-    this.props.addProperty(this.props.path);
-  };
-
-  _addItem = () => {
-    this.props.addItem(this.props.path);
-  };
-
   shouldBoxAcceptChildren = uiSchema => {
     return uiSchema["ui:field"] !== undefined;
   };
diff --git a/ui/cap-react/src/components/cms/components/utils/fieldTypes.js b/ui/cap-react/src/components/cms/components/utils/fieldTypes.js
@@ -595,27 +595,60 @@ const simple = {
     title: "JSON Object",
     description: "Data in JSON format, Grouped section",
     child: {},
-    default: {
-      schema: {
-        type: "object",
-        properties: {}
-      },
-      uiSchema: {
+    optionsSchema: {
+      type: "object",
+      title: "Object Widget Properties",
+      properties: {
+        title: {
+          type: "string",
+          title: "Title",
+          description:
+            "Provide the title you want to be displayed to your object"
+        },
+        description: {
+          type: "string",
+          title: "Description",
+          description:
+            "Provide the description you want to be displayed to your object"
+        }
+      }
+    },
+    optionsUiSchema: {
+      type: "object",
+      title: "Object UI Options",
+      properties: {
         "ui:options": {
-          grid: {
-            gridColumns: "1/5"
+          type: "object",
+          title: "UI Options",
+          properties: {
+            grid: {
+              type: "object",
+              title: "Grid Options",
+              properties: {
+                gridColumns: {
+                  title: "Grid Columns",
+                  type: "string"
+                }
+              }
+            }
           }
         }
       }
-    }
-  },
-  reference: {
-    title: "Reference",
-    description: "For example, an analysis can reference its author(s)",
-    child: {},
+    },
+    optionsUiSchemaUiSchema: {
+      "ui:options": {
+        grid: {
+          gridColumns: {
+            "ui:widget": "selectColumns"
+          }
+        }
+      }
+    },
+    optionsSchemaUiSchema: {},
     default: {
       schema: {
-        type: "string"
+        type: "object",
+        properties: {}
       },
       uiSchema: {
         "ui:options": {
@@ -626,10 +659,85 @@ const simple = {
       }
     }
   },
+  // reference: {
+  //   title: "Reference",
+  //   description: "For example, an analysis can reference its author(s)",
+  //   child: {},
+  //   default: {
+  //     schema: {
+  //       type: "string"
+  //     },
+  //     uiSchema: {
+  //       "ui:options": {
+  //         grid: {
+  //           gridColumns: "1/5"
+  //         }
+  //       }
+  //     }
+  //   }
+  // },
   boolean: {
     title: "Boolean",
     description: "Yes or no, 1 or 0, true or false",
     child: {},
+    optionsSchema: {
+      type: "object",
+      title: "Boolean Schema Options",
+      properties: {
+        title: {
+          type: "string",
+          title: "Provide a title for the element",
+          description: "This title will be used for the form"
+        },
+        description: {
+          type: "string",
+          title: "Provide a desctiption for the element",
+          description: "This description will be used for the form"
+        },
+        readOnly: {
+          type: "boolean",
+          title: "Do you want this field to be read only?",
+          enum: [true, false],
+          enumNames: ["ReadOnly", "Editable"]
+        }
+      }
+    },
+    optionsSchemaUiSchema: {
+      readOnly: {
+        "ui:widget": "select"
+      }
+    },
+    optionsUiSchema: {
+      type: "object",
+      title: "Switch Widget UI Options",
+      properties: {
+        "ui:options": {
+          type: "object",
+          title: "UI Options",
+          properties: {
+            grid: {
+              type: "object",
+              title: "Grid Options",
+              properties: {
+                gridColumns: {
+                  title: "Grid Columns",
+                  type: "string"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    optionsUiSchemaUiSchema: {
+      "ui:options": {
+        grid: {
+          gridColumns: {
+            "ui:widget": "selectColumns"
+          }
+        }
+      }
+    },
     default: {
       schema: {
         type: "boolean"
@@ -648,6 +756,55 @@ const simple = {
     description:
       "A list of things. List of strings, numbers, objects, references",
     child: {},
+    optionsSchema: {
+      type: "object",
+      title: "Array Schema Options",
+      properties: {
+        title: {
+          type: "string",
+          title: "Provide a title for your array",
+          description: "This is the title that will be displayed for the array"
+        },
+        description: {
+          title: "Provide a descritpion for the element",
+          type: "string",
+          description:
+            "This description will be provided for this specific element"
+        }
+      }
+    },
+    optionsSchemaUiSchema: {},
+    optionsUiSchema: {
+      type: "object",
+      title: "Array UI Options",
+      properties: {
+        "ui:options": {
+          type: "object",
+          title: "UI Options",
+          properties: {
+            grid: {
+              type: "object",
+              title: "Grid Options",
+              properties: {
+                gridColumns: {
+                  title: "Grid Columns",
+                  type: "string"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    optionsUiSchemaUiSchema: {
+      "ui:options": {
+        grid: {
+          gridColumns: {
+            "ui:widget": "selectColumns"
+          }
+        }
+      }
+    },
     default: {
       schema: {
         type: "array",
