feat: form - updates option to hide fields, widgets

fix #137

Signed-off-by: Pamfilos Fokianos <pamfilosf@gmail.com>

Author: pamfilos

src/admin/utils/fieldTypes.jsx

@@ -64,6 +64,12 @@ export const common = {
             title: "Collapsible",
             type: "boolean",
           },
+          hidden: {
+            type: "boolean",
+            title: "Hidden",
+            tooltip:
+              "When enabled, this field will not be visible in the form, but data can exist and be validated",
+          },
         },
         // Using dependencies here instead of if-then-else simplifies reusing the common properties
         dependencies: {
@@ -126,7 +132,10 @@ export const common = {
       collapsible: {
         "ui:widget": "switch",
       },
-      "ui:order": ["showAsModal", "modal", "collapsible", "*"],
+      hidden: {
+        "ui:widget": "switch",
+      },
+      "ui:order": ["showAsModal", "modal", "hidden", "collapsible", "*"],
       "ui:padding": 0,
       "ui:label": false,
     },
@@ -174,9 +183,7 @@ const collections = {
         ...common.optionsSchema,
       },
     },
-    optionsSchemaUiSchema: {
-      ...common.optionsSchemaUiSchema,
-    },
+    optionsSchemaUiSchema: common.optionsSchemaUiSchema,
     optionsUiSchema: {
       type: "object",
       title: "UI Schema",
@@ -188,11 +195,6 @@ const collections = {
             common.optionsUiSchema.properties["ui:options"].dependencies,
           properties: {
             ...common.optionsUiSchema.properties["ui:options"].properties,
-            hidden: {
-              type: "boolean",
-              title: "Do you want this field to be hidden?",
-              description: "If yes, this field will not be visible in the form",
-            },
           },
         },
         "ui:label": common.optionsUiSchema.properties["ui:label"],

src/forms/templates/Field/FieldTemplate.jsx

@@ -43,6 +43,7 @@ const FieldTemplate = ({
   } = formContext;
 
   const { token } = theme.useToken();
+  const { ["ui:options"]: uiOptions = {} } = uiSchema;
 
   if (hidden) {
     return <div className="field-hidden">{children}</div>;
@@ -53,8 +54,6 @@ const FieldTemplate = ({
       <div key={`field-${id}-error-${error}`}>{error}</div>
     ));
 
-  const { ["ui:options"]: uiOptions = {} } = uiSchema;
-
   const shouldShowAsModal = uiOptions?.showAsModal === true;
   const collapsible = uiOptions?.collapsible === true;
 
@@ -124,6 +123,7 @@ const FieldTemplate = ({
             label &&
             FieldHeaderWithProps
           }
+          hidden={hidden || uiOptions?.hidden}
           labelCol={labelCol}
           required={required}
           style={{ ...wrapperStyle, ...stylePatches(id, patches, token) }}

src/forms/templates/utils/index.js

@@ -1,9 +1,10 @@
 const _checkIfHidden = (name, uiSchema) => {
   return (
-    uiSchema &&
-    uiSchema[name] &&
-    uiSchema[name]["ui:options"] &&
-    uiSchema[name]["ui:options"].hidden
+    (uiSchema &&
+      uiSchema[name] &&
+      uiSchema[name]["ui:options"] &&
+      uiSchema[name]["ui:options"].hidden) ||
+    (uiSchema && uiSchema["ui:options"] && uiSchema["ui:options"].hidden)
   );
 };
 
@@ -20,7 +21,9 @@ export const _filterTabs = (tabs, options, properties) => {
     return options.tabs;
   }
   return properties.filter(
-    (item) => !_checkIfHidden(item.name) && item.name !== "analysis_reuse_mode",
+    (item) =>
+      !_checkIfHidden(item.name, item?.content?.props?.uiSchema) &&
+      item.name !== "analysis_reuse_mode",
   );
 };