fix: Handling erroneous state in Entity item ADS template (#40363)
## Description Handling erroneous state in Entity item ADS template Fixes [#40362](https://github.com/appsmithorg/appsmith/issues/40362) ## Automation /ok-to-test tags="@tag.IDE" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/14639928664> > Commit: c9b2437308f4108108ff362f0e8b51220d2dbc17 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14639928664&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.IDE` > Spec: > <hr>Thu, 24 Apr 2025 11:32:13 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Entity names now visually indicate errors by displaying in a distinct color when an error state is present. - **Style** - Enhanced visual feedback for entities with errors, improving clarity when issues occur. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
b2d8900746
commit
49a926e08f
|
|
@ -16,6 +16,7 @@ export const isEllipsisActive = (element: HTMLElement | null) => {
|
||||||
export const EditableEntityName = (props: EditableEntityNameProps) => {
|
export const EditableEntityName = (props: EditableEntityNameProps) => {
|
||||||
const {
|
const {
|
||||||
canEdit,
|
canEdit,
|
||||||
|
hasError,
|
||||||
icon,
|
icon,
|
||||||
inputTestId,
|
inputTestId,
|
||||||
isEditing,
|
isEditing,
|
||||||
|
|
@ -106,6 +107,7 @@ export const EditableEntityName = (props: EditableEntityNameProps) => {
|
||||||
<Styled.Text
|
<Styled.Text
|
||||||
aria-invalid={Boolean(validationError)}
|
aria-invalid={Boolean(validationError)}
|
||||||
className={clsx("t--entity-name", { editing: inEditMode })}
|
className={clsx("t--entity-name", { editing: inEditMode })}
|
||||||
|
color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
|
||||||
data-isediting={inEditMode}
|
data-isediting={inEditMode}
|
||||||
data-isfixedwidth={isFixedWidth}
|
data-isfixedwidth={isFixedWidth}
|
||||||
inputProps={inputProps}
|
inputProps={inputProps}
|
||||||
|
|
|
||||||
|
|
@ -27,4 +27,6 @@ export interface EditableEntityNameProps {
|
||||||
normalizeName?: boolean;
|
normalizeName?: boolean;
|
||||||
/** Used for showing ellipsis for longer names */
|
/** Used for showing ellipsis for longer names */
|
||||||
showEllipsis?: boolean;
|
showEllipsis?: boolean;
|
||||||
|
/** Whether to show the entity is in error state */
|
||||||
|
hasError?: boolean;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@ export const EntityItem = (props: EntityItemProps) => {
|
||||||
return (
|
return (
|
||||||
<EditableEntityName
|
<EditableEntityName
|
||||||
canEdit={canEdit}
|
canEdit={canEdit}
|
||||||
|
hasError={props.hasError}
|
||||||
icon={startIcon}
|
icon={startIcon}
|
||||||
isEditing={isEditing}
|
isEditing={isEditing}
|
||||||
isFixedWidth
|
isFixedWidth
|
||||||
|
|
@ -50,6 +51,7 @@ export const EntityItem = (props: EntityItemProps) => {
|
||||||
normalizeName,
|
normalizeName,
|
||||||
onEditComplete,
|
onEditComplete,
|
||||||
onNameSave,
|
onNameSave,
|
||||||
|
props.hasError,
|
||||||
props.title,
|
props.title,
|
||||||
startIcon,
|
startIcon,
|
||||||
validateName,
|
validateName,
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ export interface EntityListTreeItem {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
type: string;
|
type: string;
|
||||||
|
hasError?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface EntityListTreeProps {
|
export interface EntityListTreeProps {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user