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:
Ankita Kinger 2025-04-24 17:54:22 +05:30 committed by GitHub
parent b2d8900746
commit 49a926e08f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 7 additions and 0 deletions

View File

@ -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}

View File

@ -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;
} }

View File

@ -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,

View File

@ -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 {