cern-sis · pamfilos · Jun 24, 2024 · May 28, 2024
diff --git a/src/admin/utils/fieldTypes.jsx b/src/admin/utils/fieldTypes.jsx
@@ -54,7 +54,6 @@ export const common = {
             type: "boolean",
           },
         },
-
         dependencies: {
           showAsModal: {
             oneOf: [
@@ -89,6 +88,11 @@ export const common = {
           },
         },
       },
+      "ui:label": {
+        title: "Show label",
+        type: "boolean",
+        default: true,
+      },
     },
   },
   optionsUiSchemaUiSchema: {
@@ -109,6 +113,9 @@ export const common = {
       },
       "ui:order": ["showAsModal", "modal", "*"],
     },
+    "ui:label": {
+      "ui:widget": "switch",
+    },
   },
 };
 
@@ -168,6 +175,7 @@ const collections = {
             },
           },
         },
+        "ui:label": common.optionsUiSchema.properties["ui:label"],
       },
     },
     optionsUiSchemaUiSchema: {
@@ -215,6 +223,7 @@ const collections = {
             },
           },
         },
+        "ui:label": common.optionsUiSchema.properties["ui:label"],
       },
     },
     optionsUiSchemaUiSchema: {
@@ -239,6 +248,7 @@ const collections = {
           "ui:field": "codeEditor",
         },
       },
+      "ui:label": common.optionsUiSchemaUiSchema["ui:label"],
     },
 
     default: {
@@ -364,7 +374,6 @@ const simple = {
     optionsSchemaUiSchema: {
       readOnly: extra.optionsSchemaUiSchema.readOnly,
       isRequired: extra.optionsSchemaUiSchema.isRequired,
-
       pattern: {
         "ui:placeholder": "^.*$",
       },
@@ -397,6 +406,7 @@ const simple = {
             },
           },
         },
+        "ui:label": common.optionsUiSchema.properties["ui:label"],
       },
     },
     optionsUiSchemaUiSchema: {
@@ -410,6 +420,7 @@ const simple = {
           },
         },
       },
+      "ui:label": common.optionsUiSchemaUiSchema["ui:label"],
     },
     default: {
       schema: {
@@ -471,6 +482,7 @@ const simple = {
             },
           },
         },
+        "ui:label": common.optionsUiSchema.properties["ui:label"],
       },
     },
     optionsUiSchemaUiSchema: {
@@ -662,6 +674,7 @@ const simple = {
             },
           },
         },
+        "ui:label": common.optionsUiSchema.properties["ui:label"],
       },
     },
     optionsUiSchemaUiSchema: {
@@ -942,6 +955,7 @@ const advanced = {
             },
           },
         },
+        "ui:label": common.optionsUiSchema.properties["ui:label"],
       },
     },
     optionsUiSchemaUiSchema: {
@@ -1044,7 +1058,7 @@ const advanced = {
     child: {},
     optionsSchema: {
       type: "object",
-      title: "ID Fetcher Field Schema",
+      title: "ID Fetcher Schema",
       properties: {
         ...common.optionsSchema,
         readOnly: extra.optionsSchema.readOnly,
@@ -1213,6 +1227,7 @@ const advanced = {
             },
           },
         },
+        "ui:label": common.optionsUiSchema.properties["ui:label"],
       },
     },
     optionsUiSchemaUiSchema: {

diff --git a/src/forms/templates/ArrayFieldTemplates/ArrayFieldTemplateItem.jsx b/src/forms/templates/ArrayFieldTemplates/ArrayFieldTemplateItem.jsx
@@ -5,7 +5,6 @@ import ArrayUtils from "./ArrayUtils";
 const ArrayFieldTemplateItem = ({
   children,
   disabled,
-  formContext,
   hasMoveDown,
   hasMoveUp,
   hasRemove,
@@ -14,12 +13,11 @@ const ArrayFieldTemplateItem = ({
   onDropIndexClick,
   onReorderClick,
   readonly,
+  uiSchema,
 }) => {
-  const { toolbarAlign = "top" } = formContext;
-
   return (
     <Row
-      align={toolbarAlign}
+      align={uiSchema && uiSchema["ui:label"] === false ? "top" : "middle"}
       key={`array-item-${index}`}
       style={{ margin: "10px 0px" }}
       className="arrayFieldRow"

diff --git a/src/forms/templates/ArrayFieldTemplates/NormalArrayFieldTemplate.jsx b/src/forms/templates/ArrayFieldTemplates/NormalArrayFieldTemplate.jsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import classNames from "classnames";
 
 import Button from "antd/lib/button";
 import { Row, Col, Modal, Space, Tag, Checkbox, Table, theme } from "antd";
@@ -30,7 +29,6 @@ const NormalArrayFieldTemplate = ({
   items,
   options,
   onAddClick,
-  prefixCls,
   readonly,
   required,
   schema,
@@ -39,7 +37,7 @@ const NormalArrayFieldTemplate = ({
   formData,
 }) => {
   const { useToken } = theme;
-  const { labelAlign = "right", rowGutter = 24 } = formContext;
+  const { rowGutter = 24 } = formContext;
 
   const [latexData, setLatexData] = useState(null);
   const [showModal, setShowModal] = useState(false);
@@ -51,11 +49,6 @@ const NormalArrayFieldTemplate = ({
   );
   const [copy, setCopy] = useState(false);
   const [importModal, setImportModal] = useState(false);
-  const labelClsBasic = `${prefixCls}-item-label`;
-  const labelColClassName = classNames(
-    labelClsBasic,
-    labelAlign === "left" && `${labelClsBasic}-left`,
-  );
   const { token } = useToken();
 
   let uiImport = null;
@@ -150,11 +143,7 @@ const NormalArrayFieldTemplate = ({
   }, [emailModal]);
 
   return (
-    <fieldset
-      style={{ marginLeft: "12px", marginRight: "12px" }}
-      className={className}
-      id={idSchema.$id}
-    >
+    <fieldset className={className} id={idSchema.$id}>
       {uiLatex && (
         <Modal
           destroyOnClose
@@ -256,35 +245,31 @@ const NormalArrayFieldTemplate = ({
         </Modal>
       )}
       <Row gutter={rowGutter}>
-        <div style={{ marginBottom: "8px", width: "100%" }}>
-          {title && (
-            <Col
-              className={labelColClassName}
-              span={24}
-              style={{ padding: "0" }}
-            >
-              <TitleField
-                id={`${idSchema.$id}__title`}
-                key={`array-field-title-${idSchema.$id}`}
-                required={required}
-                title={uiSchema["ui:title"] || title}
-                uiImport={uiImport}
-                uiLatex={uiLatex}
-                uiEmail={uiEmail}
-                readonly={readonly}
-                enableLatex={() => _enableLatex()}
-                enableImport={() => setImportModal(true)}
-                enableEmail={() => setEmailModal(true)}
-              />
-            </Col>
-          )}
-          <FieldHeader
-            description={uiSchema["ui:description"] || schema.description}
-            uiSchema={uiSchema}
-            key={`array-field-header-${idSchema.$id}`}
-            idSchema={idSchema}
-          />
-        </div>
+        {uiSchema["ui:label"] != false && (
+          <div style={{ marginBottom: "8px", width: "100%" }}>
+            <FieldHeader
+              titleField={
+                <TitleField
+                  id={`${idSchema.$id}__title`}
+                  key={`array-field-title-${idSchema.$id}`}
+                  required={required}
+                  title={uiSchema["ui:title"] || title}
+                  uiImport={uiImport}
+                  uiLatex={uiLatex}
+                  uiEmail={uiEmail}
+                  readonly={readonly}
+                  enableLatex={() => _enableLatex()}
+                  enableImport={() => setImportModal(true)}
+                  enableEmail={() => setEmailModal(true)}
+                />
+              }
+              description={uiSchema["ui:description"] || schema.description}
+              uiSchema={uiSchema}
+              key={`array-field-header-${idSchema.$id}`}
+              idSchema={idSchema}
+            />
+          </div>
+        )}
         <Col span={24} style={{ marginTop: "5px" }} className="nestedObject">
           <Row>
             {items && (

diff --git a/src/forms/templates/Field/FieldHeader.jsx b/src/forms/templates/Field/FieldHeader.jsx
@@ -3,9 +3,17 @@ import { Space, Typography } from "antd";
 import Markdown from "../../../partials/Markdown";
 import TitleField from "../../fields/internal/TitleField";
 
-const FieldHeader = ({ label, description, uiSchema, isObject, idSchema }) => {
+const FieldHeader = ({
+  label,
+  description,
+  uiSchema,
+  isObject,
+  idSchema,
+  titleField,
+}) => {
   return (
     <Space direction="vertical" size={0}>
+      {titleField && titleField}
       {uiSchema["ui:title"] !== false && label && (
         <TitleField
           title={label}
@@ -16,8 +24,8 @@ const FieldHeader = ({ label, description, uiSchema, isObject, idSchema }) => {
           id={`${idSchema.$id}-title`}
         />
       )}
-      <Typography.Text type="secondary" id={`${idSchema.$id}-description`}>
-        {description && (
+      {description && (
+        <Typography.Text type="secondary" id={`${idSchema.$id}-description`}>
           <Markdown
             text={description}
             style={{
@@ -28,8 +36,8 @@ const FieldHeader = ({ label, description, uiSchema, isObject, idSchema }) => {
               uiSchema["ui:options"].descriptionIsMarkdown
             }
           />
-        )}
-      </Typography.Text>
+        </Typography.Text>
+      )}
     </Space>
   );
 };
@@ -41,6 +49,7 @@ FieldHeader.propTypes = {
   description: PropTypes.node,
   isObject: PropTypes.bool,
   idSchema: PropTypes.object,
+  titleField: PropTypes.element,
 };
 
 export default FieldHeader;
diff --git a/src/forms/templates/Field/FieldTemplate.jsx b/src/forms/templates/Field/FieldTemplate.jsx
@@ -98,9 +98,11 @@ const FieldTemplate = ({
           hasFeedback={schema.type !== "array" && schema.type !== "object"}
           help={(!!rawHelp && help) || (!!rawErrors && renderFieldErrors())}
           htmlFor={id}
+          // displayLabel is always false for custom fields, so we need the or condition
           label={
             !shouldShowAsModal &&
-            (displayLabel || uiSchema["ui:field"]) &&
+            (displayLabel ||
+              (uiSchema["ui:field"] && uiSchema["ui:label"] != false)) &&
             label && (
               <FieldHeader
                 label={label}