forms: add error count label in accordion and add FeedbackLabel

Co-authored-by: Carlin MacKenzie <[email protected]>
Co-authored-by: Fatimah Zulfiqar <[email protected]>

Author: carlinmack

src/lib/elements/accessibility/InvenioPopup.js

@@ -10,15 +10,24 @@ import { Popup } from "semantic-ui-react";
 
 export class InvenioPopup extends Component {
   render() {
-    const { popupId, size, trigger, content, position, inverted, ariaLabel } =
-      this.props;
+    const {
+      popupId,
+      size,
+      trigger,
+      content,
+      position,
+      inverted,
+      ariaLabel,
+      hoverable,
+    } = this.props;
 
     return (
       <Popup
         id={popupId}
         size={size}
         position={position}
         inverted={inverted}
+        hoverable={hoverable}
         on={["hover", "focus"]}
         trigger={React.cloneElement(trigger, {
           "role": "button",
@@ -41,6 +50,7 @@ InvenioPopup.propTypes = {
   content: PropTypes.string.isRequired,
   popupId: PropTypes.string.isRequired,
   inverted: PropTypes.bool,
+  hoverable: PropTypes.bool,
   position: PropTypes.string,
   size: PropTypes.string,
 };
@@ -49,4 +59,5 @@ InvenioPopup.defaultProps = {
   inverted: false,
   position: "top left",
   size: "small",
+  hoverable: true,
 };

src/lib/forms/AccordionField.js

@@ -1,57 +1,86 @@
 // This file is part of React-Invenio-Forms
 // Copyright (C) 2020 CERN.
 // Copyright (C) 2020 Northwestern University.
-//
 // React-Invenio-Forms is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
 import React, { Component, useState } from "react";
 import PropTypes from "prop-types";
 import { Field, FastField } from "formik";
-import { Accordion, Container, Icon } from "semantic-ui-react";
+import { Accordion, Container, Icon, Label } from "semantic-ui-react";
 import _omit from "lodash/omit";
-import _get from "lodash/get";
+import { flattenAndCategorizeErrors } from "../utils";
 
 export class AccordionField extends Component {
-  hasError(errors, initialValues = undefined, values = undefined) {
-    const { includesPaths } = this.props;
-    for (const errorPath in errors) {
-      for (const subPath in errors[errorPath]) {
-        const path = `${errorPath}.${subPath}`;
-        if (
-          _get(initialValues, path, "") === _get(values, path, "") &&
-          includesPaths.includes(`${errorPath}.${subPath}`)
-        )
-          return true;
+  // Checks if there are any errors that match the given paths.
+
+  hasError(errors, includesPaths) {
+    return Object.keys(errors).some((errorPath) =>
+      includesPaths.some((path) => errorPath.startsWith(path))
+    );
+  }
+
+  // Generates a summary of errors categorized by severity.
+  getErrorSummary = (errors, includePaths, severityChecks) => {
+    const count = {};
+
+    // Count generic errors
+    for (const path in errors.flattenedErrors) {
+      if (includePaths.some((includePath) => path.startsWith(includePath))) {
+        count["error"] = (count["error"] || 0) + 1;
       }
     }
-    return false;
-  }
+
+    // Count severity-based errors
+    for (const key in errors.severityChecks) {
+      const severity = errors.severityChecks[key]?.severity;
+      const path = key;
+
+      if (
+        severity &&
+        includePaths.some((includePath) => path.startsWith(includePath))
+      ) {
+        count[severity] = (count[severity] || 0) + 1;
+      }
+    }
+
+    // Format output to display labels
+    // e.g., { error: "1 Error", warning: "2 Warnings" }
+    const formattedCount = {};
+    for (const [severity, num] of Object.entries(count)) {
+      const label =
+        severityChecks?.[severity]?.label ||
+        severity.charAt(0).toUpperCase() + severity.slice(1);
+      formattedCount[severity] = `${num} ${label}${num === 1 ? "" : "s"}`;
+    }
+
+    return formattedCount;
+  };
 
   renderAccordion = (props) => {
     const {
-      form: { errors, status, initialErrors, initialValues, values },
+      form: { errors, initialErrors },
     } = props;
+    const { includesPaths, label, children, active, severityChecks } = this.props;
+
+    const uiProps = _omit(this.props, ["optimized", "includesPaths"]);
+
+    // Merge initial and current errors for accurate validation
+    const persistentErrors = { ...initialErrors, ...errors };
+    const categorizedErrors = flattenAndCategorizeErrors(persistentErrors);
+
+    // Determine if the accordion should show an "error" state
+    const errorClass = this.hasError(categorizedErrors.flattenedErrors, includesPaths)
+      ? "error"
+      : "";
+
+    // Generate summary of errors for display
+    const errorSummary = this.getErrorSummary(
+      categorizedErrors,
+      includesPaths,
+      severityChecks
+    );
 
-    // eslint-disable-next-line no-unused-vars
-    const { label, children, active, ...ui } = this.props;
-    const uiProps = _omit({ ...ui }, ["optimized", "includesPaths"]);
-    const hasError = status
-      ? this.hasError(status)
-      : this.hasError(errors) || this.hasError(initialErrors, initialValues, values);
-    const panels = [
-      {
-        key: `panel-${label}`,
-        title: {
-          content: label,
-        },
-        content: {
-          content: <Container>{children}</Container>,
-        },
-      },
-    ];
-
-    const errorClass = hasError ? "error secondary" : "";
     const [activeIndex, setActiveIndex] = useState(active ? 0 : -1);
 
     const handleTitleClick = (e, { index }) => {
@@ -61,37 +90,47 @@ export class AccordionField extends Component {
     return (
       <Accordion
         inverted
-        className={`invenio-accordion-field ${errorClass}`}
+        className={`invenio-accordion-field ${errorClass} secondary`}
         {...uiProps}
       >
-        {panels.map((panel, index) => (
-          <React.Fragment key={panel.key}>
-            <Accordion.Title
-              active={activeIndex === index}
-              index={index}
-              onClick={handleTitleClick}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  handleTitleClick(e, { index });
-                }
-              }}
-              tabIndex={0}
+        {/* Accordion Title with Error Summary */}
+        <Accordion.Title
+          active={activeIndex === 0}
+          index={0}
+          onClick={handleTitleClick}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleTitleClick(e, { index: 0 });
+            }
+          }}
+          tabIndex={0}
+        >
+          {label}
+          {/* Display error labels */}
+          {Object.entries(errorSummary).map(([severity, text]) => (
+            <Label
+              key={severity}
+              size="tiny"
+              circular
+              className={`accordion-label ${severity}`}
             >
-              {panel.title.content}
-              <Icon name="angle right" />
-            </Accordion.Title>
-            <Accordion.Content active={activeIndex === index}>
-              {panel.content.content}
-            </Accordion.Content>
-          </React.Fragment>
-        ))}
+              {text}
+            </Label>
+          ))}
+          {/* Toggle Icon */}
+          <Icon name={activeIndex === 0 ? "angle down" : "angle right"} />
+        </Accordion.Title>
+
+        {/* Accordion Content */}
+        <Accordion.Content active={activeIndex === 0}>
+          <Container>{children}</Container>
+        </Accordion.Content>
       </Accordion>
     );
   };
 
   render() {
     const { optimized } = this.props;
-
     const FormikField = optimized ? FastField : Field;
     return <FormikField name="" component={this.renderAccordion} />;
   }
@@ -104,6 +143,7 @@ AccordionField.propTypes = {
   optimized: PropTypes.bool,
   children: PropTypes.node,
   ui: PropTypes.object,
+  severityChecks: PropTypes.object,
 };
 
 AccordionField.defaultProps = {
@@ -113,4 +153,5 @@ AccordionField.defaultProps = {
   optimized: false,
   children: null,
   ui: null,
+  severityChecks: null,
 };

src/lib/forms/FeedbackLabel.js

@@ -0,0 +1,64 @@
+import React, { Component } from "react";
+import { Label, Icon } from "semantic-ui-react";
+import { flattenAndCategorizeErrors } from "../utils";
+import { InvenioPopup } from "../elements/accessibility";
+import PropTypes from "prop-types";
+
+export class FeedbackLabel extends Component {
+  constructor(props) {
+    super(props);
+
+    const { errorMessage } = props;
+    const { flattenedErrors = {}, severityChecks = {} } =
+      flattenAndCategorizeErrors(errorMessage);
+
+    // Get the first error and severity data, defaulting to empty values if not present
+    const errorText = Object.values(flattenedErrors)[0] || "";
+    const severityData = Object.values(severityChecks)[0] || {};
+
+    // Destructure severityData, ensuring default values for missing keys
+    const severityLevel = severityData?.severity || "";
+    const severityMessage = severityData?.message || "";
+    const severityDescription = severityData?.description || "";
+
+    this.state = {
+      errorText,
+      severityInfo: { severityLevel, severityMessage, severityDescription },
+      prompt: !severityLevel && !!errorText,
+    };
+  }
+
+  render() {
+    const { errorText, severityInfo, prompt } = this.state;
+
+    // Return null if neither errorText nor severityMessage exists
+    if (!errorText && !severityInfo.severityMessage) {
+      return null;
+    }
+    const hasSeverity =
+      severityInfo.severityMessage && severityInfo.severityDescription;
+    return (
+      <Label pointing="left" className={severityInfo.severityLevel} prompt={prompt}>
+        {/* Display severity message with a popup if it exists */}
+        {hasSeverity && (
+          <InvenioPopup
+            trigger={<Icon name="info circle" />}
+            content={severityInfo.severityDescription}
+            position="top center"
+            hoverable
+          />
+        )}
+        {/* Display either the error text or the severity message */}
+        {errorText || severityInfo.severityMessage}
+      </Label>
+    );
+  }
+}
+
+FeedbackLabel.propTypes = {
+  errorMessage: PropTypes.object,
+};
+
+FeedbackLabel.defaultProps = {
+  errorMessage: undefined,
+};

src/lib/forms/index.js

@@ -15,6 +15,7 @@ export { BaseForm } from "./BaseForm";
 export { BooleanField } from "./BooleanField";
 export { ErrorLabel } from "./ErrorLabel";
 export { FieldLabel } from "./FieldLabel";
+export { FeedbackLabel } from "./FeedbackLabel";
 export { GroupField } from "./GroupField";
 export { SelectField } from "./SelectField";
 export { RemoteSelectField } from "./RemoteSelectField";

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

@@ -84,13 +84,15 @@ export class CustomFields extends Component {
               paths,
               displaySection = true,
               section: sectionName,
+              id: sectionId,
             } = section;
             return displaySection ? (
               <AccordionField
                 key={`section-${sectionName}`}
                 includesPaths={paths}
                 label={sectionName}
                 active
+                id={sectionId}
               >
                 {fields}
               </AccordionField>

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

@@ -98,9 +98,16 @@ export class DiscoverFieldsSection extends Component {
       ...Object.entries(tempFields).map(([key, value]) => value.key),
       ...recordFields,
     ];
+    const tempFieldsPaths = tempFields.map((item) => item.key);
 
     return (
-      <AccordionField key="discover-fields" label="Domain specific fields" active>
+      <AccordionField
+        key="discover-fields"
+        includesPaths={tempFieldsPaths}
+        label="Domain specific fields"
+        active
+        id="domain-specific-fields-section"
+      >
         {sections.map(({ fields, paths, ...sectionConfig }) => {
           const recordCustomFields = this.getFieldsWithValues(fields);
           if (_isEmpty(recordCustomFields)) {