-
Notifications
You must be signed in to change notification settings - Fork 30
Accordion: add error labels in title & add FeedbackLabel #276
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 6 commits
4dc2757
99c86ba
8524ed7
2a28285
eff2aa1
99a48c0
f78461c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
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 { | ||
render() { | ||
const { errorMessage } = this.props; | ||
if (!errorMessage) return null; | ||
|
||
const { flattenedErrors, severityChecks } = | ||
flattenAndCategorizeErrors(errorMessage); | ||
|
||
let errorText = ""; | ||
let severityLevel = ""; | ||
let severityMessage = ""; | ||
|
||
0einstein0 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
if (flattenedErrors) { | ||
const errorKey = Object.keys(flattenedErrors)[0]; | ||
errorText = flattenedErrors[errorKey]; | ||
} | ||
|
||
if (severityChecks) { | ||
const severityKey = Object.keys(severityChecks)[0]; | ||
const severityData = severityChecks[severityKey]; | ||
if (severityData) { | ||
severityLevel = severityData.severity; | ||
severityMessage = severityData.message; | ||
} | ||
} | ||
|
||
if (errorMessage.message && errorMessage.severity) { | ||
severityLevel = errorMessage.severity; | ||
severityMessage = errorMessage.message; | ||
} | ||
|
||
const prompt = !severityLevel && !!errorText; | ||
|
||
return ( | ||
<Label pointing="left" className={severityLevel} prompt={prompt}> | ||
{severityMessage && ( | ||
<InvenioPopup | ||
trigger={<Icon name="info circle" />} | ||
content={ | ||
<a target="_blank" href="_"> | ||
{severityMessage} | ||
</a> | ||
} | ||
position="top center" | ||
hoverable | ||
/> | ||
)} | ||
{errorText || severityMessage} | ||
</Label> | ||
); | ||
} | ||
} | ||
|
||
FeedbackLabel.propTypes = { | ||
errorMessage: PropTypes.array, | ||
}; | ||
|
||
FeedbackLabel.defaultProps = { | ||
errorMessage: undefined, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
// This file is part of React-Invenio-Forms | ||
// Copyright (C) 2025 CERN. | ||
// | ||
// 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. | ||
|
||
export function flattenAndCategorizeErrors(obj, prefix = "") { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what is prefix? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the prefix param is used to track the hierarchy of keys when recursively flattening nested objects |
||
let flattenedErrors = {}; // To store flattened errors | ||
let severityChecks = {}; // To store severity-based errors | ||
|
||
for (let key in obj) { | ||
0einstein0 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
let newKey = prefix ? `${prefix}.${key}` : key; | ||
let value = obj[key]; | ||
|
||
if (value && typeof value === "object") { | ||
if ("message" in value && "severity" in value) { | ||
0einstein0 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
severityChecks[newKey] = value; | ||
} else if (Array.isArray(value)) { | ||
value.forEach((item, index) => { | ||
let arrayKey = `${newKey}[${index}]`; | ||
|
||
// Fix: If item is a string, store it directly instead of iterating over characters | ||
if (typeof item === "string") { | ||
flattenedErrors[arrayKey] = item; | ||
} else { | ||
let nested = flattenAndCategorizeErrors(item, arrayKey); | ||
Object.assign(flattenedErrors, nested.flattenedErrors); | ||
Object.assign(severityChecks, nested.severityChecks); | ||
} | ||
}); | ||
} else { | ||
let nested = flattenAndCategorizeErrors(value, newKey); | ||
Object.assign(flattenedErrors, nested.flattenedErrors); | ||
Object.assign(severityChecks, nested.severityChecks); | ||
} | ||
} else { | ||
flattenedErrors[newKey] = value; | ||
} | ||
} | ||
|
||
return { flattenedErrors, severityChecks }; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Put a deprecation warning on flattenedErrors i.e. old error format |
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
export { humanReadableBytes } from "./humanReadableBytes"; | ||
export { dropdownOptionsGenerator } from "./dropdownOptionsGenerator"; | ||
export { flattenAndCategorizeErrors } from "./flattenAndCategorizeErrors"; |
Uh oh!
There was an error while loading. Please reload this page.