custom_fields: add support for ui section widget

* allow to rename DiscoverFieldsSection label

Author: kpsherva

src/lib/forms/widgets/custom_fields/CustomFields.js

@@ -7,9 +7,9 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { DiscoverFieldsSection } from "./DiscoverFieldsSection";
+import { default as DiscoverFieldsSection } from "./DiscoverFieldsSection";
 import { AccordionField } from "../../AccordionField";
-import { loadWidgetsFromConfig } from "../loader";
+import { importWidget, loadWidgetsFromConfig } from "../loader";
 import { Container } from "semantic-ui-react";
 
 export class CustomFields extends Component {
@@ -27,16 +27,18 @@ export class CustomFields extends Component {
     try {
       const { sectionsConfig, discoverFieldsConfig } =
         await this.loadCustomFieldsWidgets();
-      const sections = sectionsConfig.map((sectionCfg) => {
-        const paths = includesPaths(sectionCfg.fields, fieldPathPrefix);
-        return { ...sectionCfg, paths };
-      });
+      const sections = await Promise.all(
+        sectionsConfig.map(async (sectionCfg) => {
+          const paths = includesPaths(sectionCfg.fields, fieldPathPrefix);
+          const widget = await this.loadSectionWidget(sectionCfg);
+          return { ...sectionCfg, paths, widget };
+        })
+      ).then((values) => values);
 
       const discoverFieldsSections = discoverFieldsConfig.map((sectionCfg) => {
         const paths = includesPaths(sectionCfg.fields, fieldPathPrefix);
         return { ...sectionCfg, paths };
       });
-
       this.setState({
         sections: sections,
         discoverFieldsSections: discoverFieldsSections,
@@ -46,6 +48,26 @@ export class CustomFields extends Component {
     }
   };
 
+  async loadSectionWidget(sectionCfg) {
+    const { templateLoaders, record, includesPaths, fieldPathPrefix } = this.props;
+    const paths = includesPaths(sectionCfg.fields, fieldPathPrefix);
+    if (sectionCfg.ui_widget) {
+      return await importWidget(
+        templateLoaders,
+        {
+          ...sectionCfg,
+          fieldPath: undefined,
+          record,
+          props: {
+            includesPaths: paths,
+            children: sectionCfg,
+          },
+        },
+        false
+      );
+    }
+  }
+
   async loadCustomFieldsWidgets() {
     const { config, fieldPathPrefix, templateLoaders, record } = this.props;
 
@@ -75,6 +97,7 @@ export class CustomFields extends Component {
   render() {
     const { sections, discoverFieldsSections } = this.state;
     const { templateLoaders, record } = this.props;
+
     return (
       <>
         {sections &&
@@ -84,18 +107,21 @@ export class CustomFields extends Component {
               paths,
               displaySection = true,
               section: sectionName,
+              widget,
               id: sectionId,
             } = section;
+            const active = section.active !== undefined ? section.active : true;
+            const Element = widget !== undefined ? widget : AccordionField;
             return displaySection ? (
-              <AccordionField
+              <Element
                 key={`section-${sectionName}`}
                 includesPaths={paths}
                 label={sectionName}
-                active
+                active={active}
                 id={sectionId}
               >
                 {fields}
-              </AccordionField>
+              </Element>
             ) : (
               <Container key="custom-fields-section">{fields}</Container>
             );
@@ -117,6 +143,7 @@ CustomFields.propTypes = {
     PropTypes.shape({
       section: PropTypes.string.isRequired,
       displaySection: PropTypes.bool,
+      ui_widget: PropTypes.string,
       fields: PropTypes.arrayOf(
         PropTypes.shape({
           field: PropTypes.string.isRequired,

src/lib/forms/widgets/custom_fields/DiscoverFieldsSection.js

@@ -1,13 +1,14 @@
 import _isEmpty from "lodash/isEmpty";
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import Overridable from "react-overridable";
 import { Divider } from "semantic-ui-react";
 import { AccordionField } from "../../AccordionField";
 import { FieldLabel } from "../../FieldLabel";
 import { AddDiscoverableFieldsModal } from "./AddDiscoverableFieldsModal";
 import isEmpty from "lodash/isEmpty";
 
-export class DiscoverFieldsSection extends Component {
+class DiscoverFieldsSection extends Component {
   constructor(props) {
     super(props);
     const { sections, record } = props; // sections = fields grouping, usually by domain
@@ -27,7 +28,12 @@ export class DiscoverFieldsSection extends Component {
     for (const section of sectionCfg) {
       for (const fieldCfg of section.fieldsConfig) {
         const { field, props, ui_widget, ...otherCfg } = fieldCfg;
-        cfg[field] = { ui_widget: ui_widget, section: section, ...props, ...otherCfg };
+        cfg[field] = {
+          ui_widget: ui_widget,
+          section: section,
+          ...props,
+          ...otherCfg,
+        };
       }
     }
 
@@ -92,7 +98,7 @@ export class DiscoverFieldsSection extends Component {
   };
 
   render() {
-    const { templateLoaders, record } = this.props;
+    const { templateLoaders, record, discoverSectionLabel } = this.props;
     const { sections, tempFields, recordFields } = this.state;
     const existingFields = [
       ...Object.entries(tempFields).map(([key, value]) => value.key),
@@ -104,7 +110,7 @@ export class DiscoverFieldsSection extends Component {
       <AccordionField
         key="discover-fields"
         includesPaths={tempFieldsPaths}
-        label="Domain specific fields"
+        label={discoverSectionLabel}
         active
         id="domain-specific-fields-section"
       >
@@ -144,4 +150,14 @@ DiscoverFieldsSection.propTypes = {
   templateLoaders: PropTypes.array.isRequired,
   sections: PropTypes.array.isRequired,
   record: PropTypes.object.isRequired,
+  discoverSectionLabel: PropTypes.string,
 };
+
+DiscoverFieldsSection.defaultProps = {
+  discoverSectionLabel: "Domain specific fields",
+};
+
+export default Overridable.component(
+  "ReactInvenioForms.DiscoverFieldsSection",
+  DiscoverFieldsSection
+);

src/lib/forms/widgets/custom_fields/index.js

@@ -1,2 +1,3 @@
 export { CustomFields } from "./CustomFields";
 export { SubjectAutocompleteDropdown } from "./SubjectAutocompleteDropdown";
+export { default as DiscoverFieldsSection } from "./DiscoverFieldsSection";

src/lib/forms/widgets/loader.js

@@ -9,10 +9,10 @@ import React from "react";
  */
 export async function importWidget(
   templateLoaders,
-  { ui_widget: UIWidget, fieldPath, record, props }
+  { ui_widget: UIWidget, fieldPath, record, props },
+  createElement = true
 ) {
   let component = undefined;
-
   // Try import widget from user's defined templateLoaders
   for (const loader of templateLoaders) {
     try {
@@ -33,13 +33,16 @@ export async function importWidget(
     console.error(`Failed to import default component ${UIWidget}.js`);
     throw Error("Component not found in any loader");
   }
-
-  return React.createElement(component, {
-    ...props,
-    record: record,
-    key: fieldPath,
-    fieldPath: fieldPath,
-  });
+  if (createElement) {
+    return React.createElement(component, {
+      ...props,
+      record: record,
+      key: fieldPath,
+      fieldPath: fieldPath,
+    });
+  } else {
+    return component;
+  }
 }
 
 /**