fix: Added back the pencil icon for editable text component (#35855)

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

### 🔍 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 2af307f5ed)

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