Merge pull request #13725 from appsmithorg/Fix/Hover-state-of-renaming-titles

fix: Hover state of renaming titles

app/client/src/components/editorComponents/ActionNameEditor.tsx

@@ -117,6 +117,7 @@ function ActionNameEditor(props: ActionNameEditorProps) {
               onTextChanged={handleNameChange}
               placeholder={createMessage(ACTION_NAME_PLACEHOLDER, "Api")}
               type="text"
+              underline
               updating={saveStatus.isSaving}
               valueTransform={removeSpecialChars}
             />

app/client/src/components/editorComponents/EditableText.tsx

@@ -33,6 +33,7 @@ type EditableTextProps = {
   beforeUnmount?: (value?: string) => void;
   errorTooltipClass?: string;
   maxLength?: number;
+  underline?: boolean;
 };
 
 const EditableTextWrapper = styled.div<{
@@ -71,7 +72,11 @@ const EditableTextWrapper = styled.div<{
 
 // using the !important keyword here is mandatory because a style is being applied to that element using the style attribute
 // which has higher specificity than other css selectors. It seems the overriding style is being applied by the package itself.
-const TextContainer = styled.div<{ isValid: boolean; minimal: boolean }>`
+const TextContainer = styled.div<{
+  isValid: boolean;
+  minimal: boolean;
+  underline?: boolean;
+}>`
   display: flex;
   &&&& .${Classes.EDITABLE_TEXT} {
     & .${Classes.EDITABLE_TEXT_CONTENT} {
@@ -80,7 +85,16 @@ const TextContainer = styled.div<{ isValid: boolean; minimal: boolean }>`
       }
     }
   }
-
+  &&& .${Classes.EDITABLE_TEXT_CONTENT}:hover {
+    ${(props) =>
+      props.underline
+        ? `
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        width: fit-content;
+      `
+        : null}
+  }
   & span.bp3-editable-text-content {
     height: auto !important;
   }
@@ -186,7 +200,11 @@ export function EditableText(props: EditableTextProps) {
         isOpen={!!error}
         message={errorMessage as string}
       >
-        <TextContainer isValid={!error} minimal={!!minimal}>
+        <TextContainer
+          isValid={!error}
+          minimal={!!minimal}
+          underline={props.underline}
+        >
           <BlueprintEditableText
             className={className}
             disabled={!isEditing}

app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx

@@ -109,6 +109,7 @@ function FormTitle(props: FormTitleProps) {
         onTextChanged={handleDatasourceNameChange}
         placeholder="Datasource Name"
         type="text"
+        underline
         updating={saveStatus.isSaving}
       />
       {saveStatus.isSaving && <Spinner size={16} />}