From 27d7925e9170268f2b1b06dcf449eff374ef27e1 Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:54:23 +0530
Subject: [PATCH] fix: Added back the pencil icon for editable text component
 (#35855)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Editable text in application name and workspace name was removed by some
of recent ads migrations. This PR adds those icons back.

Fixes #35853

## Automation

/ok-to-test tags="@tag.All"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!CAUTION]
> 🔴 🔴 🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10553233212>
> Commit: 8a2adfe508d4288055ede408e3a841f68b986af7
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10553233212&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.All
> Spec:
> The following are new failures, please fix them before merging the PR:
<ol>
>
<li>cypress/e2e/Regression/ClientSide/Git/GitDiscardChange/DiscardChanges_spec.js
>
<li>cypress/e2e/Regression/ClientSide/Git/GitSync/SwitchBranches_spec.js
>
<li>cypress/e2e/Regression/ClientSide/Git/GitWithAutoLayout/conversion_of_git_connected_apps_spec.js
>
<li>cypress/e2e/Regression/ClientSide/Git/GitWithJSLibrary/GitwithCustomJSLibrary_spec.js
>
<li>cypress/e2e/Regression/ClientSide/MobileResponsiveTests/ConversionFlow_Corner_Cases_spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Mon, 26 Aug 2024 04:55:56 UTC
<!-- end of auto-generated comment: Cypress test results  -->

## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced the Editable Text component with dynamic icon display
reflecting editing and saving states.
- Introduced visual feedback through icons like "pencil-line,"
"success," and "error," improving user interaction.
- **Bug Fixes**
- Resolved issues with visual feedback during the editing process when
saving states were displayed.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

(cherry picked from commit 2af307f5ede7a4cd786310149110889072299a8e)
---
 .../src/EditableTextSubComponent/index.tsx    | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/client/packages/design-system/ads-old/src/EditableTextSubComponent/index.tsx b/app/client/packages/design-system/ads-old/src/EditableTextSubComponent/index.tsx
index 7dc18944b1..93cd4b8a51 100644
--- a/app/client/packages/design-system/ads-old/src/EditableTextSubComponent/index.tsx
+++ b/app/client/packages/design-system/ads-old/src/EditableTextSubComponent/index.tsx
@@ -5,7 +5,7 @@ import {
 } from "@blueprintjs/core";
 import styled from "styled-components";
 import type { noop } from "lodash";
-import { Spinner } from "@appsmith/ads";
+import { Icon, Spinner } from "@appsmith/ads";
 import { Text, TextType } from "../index";
 import type { CommonComponentProps } from "../types/common";
 
@@ -217,6 +217,17 @@ export const EditableTextSubComponent = React.forwardRef(
       [inputValidation, onTextChanged],
     );
 
+    const iconName =
+      !isEditing &&
+      savingState === SavingState.NOT_STARTED &&
+      !props.hideEditIcon
+        ? "pencil-line"
+        : !isEditing && savingState === SavingState.SUCCESS
+          ? "success"
+          : savingState === SavingState.ERROR || (isEditing && !!isInvalid)
+            ? "error"
+            : undefined;
+
     return (
       <>
         <TextContainer
@@ -240,7 +251,11 @@ export const EditableTextSubComponent = React.forwardRef(
             value={value}
           />
 
-          {savingState === SavingState.STARTED ? <Spinner size="md" /> : null}
+          {savingState === SavingState.STARTED ? (
+            <Spinner size="md" />
+          ) : value && !props.hideEditIcon && iconName ? (
+            <Icon name={iconName} size="md" />
+          ) : null}
         </TextContainer>
         {isEditing && !!isInvalid ? (
           <Text className="error-message" type={TextType.P2}>