From 49a926e08f8a0d9bc8589d56e4fc9a7d059b4a2d Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Thu, 24 Apr 2025 17:54:22 +0530
Subject: [PATCH] fix: Handling erroneous state in Entity item ADS template
 (#40363)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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"

### :mag: 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 -->
---
 .../ads/src/Templates/EditableEntityName/EditableEntityName.tsx | 2 ++
 .../Templates/EditableEntityName/EditableEntityName.types.ts    | 2 ++
 .../ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx  | 2 ++
 .../EntityExplorer/EntityListTree/EntityListTree.types.ts       | 1 +
 4 files changed, 7 insertions(+)

diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx
index 56cfb47d53..c47bf4c2d6 100644
--- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.tsx
@@ -16,6 +16,7 @@ export const isEllipsisActive = (element: HTMLElement | null) => {
 export const EditableEntityName = (props: EditableEntityNameProps) => {
   const {
     canEdit,
+    hasError,
     icon,
     inputTestId,
     isEditing,
@@ -106,6 +107,7 @@ export const EditableEntityName = (props: EditableEntityNameProps) => {
           <Styled.Text
             aria-invalid={Boolean(validationError)}
             className={clsx("t--entity-name", { editing: inEditMode })}
+            color={hasError ? "var(--ads-v2-color-fg-error)" : undefined}
             data-isediting={inEditMode}
             data-isfixedwidth={isFixedWidth}
             inputProps={inputProps}
diff --git a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts
index 3531ce8c47..6c7a0483e5 100644
--- a/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts
+++ b/app/client/packages/design-system/ads/src/Templates/EditableEntityName/EditableEntityName.types.ts
@@ -27,4 +27,6 @@ export interface EditableEntityNameProps {
   normalizeName?: boolean;
   /** Used for showing ellipsis for longer names */
   showEllipsis?: boolean;
+  /** Whether to show the entity is in error state */
+  hasError?: boolean;
 }
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx
index 2fe21fc7f5..2eef1fb8c8 100644
--- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx
@@ -30,6 +30,7 @@ export const EntityItem = (props: EntityItemProps) => {
     return (
       <EditableEntityName
         canEdit={canEdit}
+        hasError={props.hasError}
         icon={startIcon}
         isEditing={isEditing}
         isFixedWidth
@@ -50,6 +51,7 @@ export const EntityItem = (props: EntityItemProps) => {
     normalizeName,
     onEditComplete,
     onNameSave,
+    props.hasError,
     props.title,
     startIcon,
     validateName,
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.types.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.types.ts
index ba050877e2..a2f01b41b9 100644
--- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.types.ts
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.types.ts
@@ -6,6 +6,7 @@ export interface EntityListTreeItem {
   id: string;
   name: string;
   type: string;
+  hasError?: boolean;
 }
 
 export interface EntityListTreeProps {