UX: add section feedback banners

Author: carlinmack

src/lib/forms/AccordionField.js

@@ -11,6 +11,10 @@ import { Field, FastField } from "formik";
 import { Accordion, Container, Icon } from "semantic-ui-react";
 import _omit from "lodash/omit";
 import _get from "lodash/get";
+import Overridable from "react-overridable";
+import {
+    FormSectionFeedback,
+} from "@js/invenio_rdm_records";
 
 export class AccordionField extends Component {
   hasError(errors, initialValues = undefined, values = undefined) {
@@ -33,6 +37,8 @@ export class AccordionField extends Component {
       form: { errors, status, initialErrors, initialValues, values },
     } = props;
 
+    const { includesPaths } = this.props;
+
     // eslint-disable-next-line no-unused-vars
     const { label, children, active, ...ui } = this.props;
     const uiProps = _omit({ ...ui }, ["optimized", "includesPaths"]);
@@ -80,6 +86,12 @@ export class AccordionField extends Component {
               {panel.title.content}
               <Icon name="angle down" />
             </Accordion.Title>
+            <Overridable
+              id="InvenioAppRdm.AccordionField.FormFeedback.container"
+              fieldPath="message"
+            >
+              <FormSectionFeedback fieldPath="message" includesPaths={includesPaths} />
+            </Overridable>
             <Accordion.Content active={activeIndex === index}>
               {panel.content.content}
             </Accordion.Content>