From f6787db0d286a3117e4e13889f8b8203768fa0e5 Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Fri, 8 Nov 2024 19:22:42 +0530
Subject: [PATCH] chore: Updating the UI for save and edit datasource button in
 API editor (#37302)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Updating the UI for save and edit datasource button in API editor

Fixes [#37286](https://github.com/appsmithorg/appsmith/issues/37286)

## Automation

/ok-to-test tags="@tag.Sanity, @tag.Datasource"

### :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/11741487860>
> Commit: 555d2c24c14716efbe919f0b46bb5b3a80e9d366
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11741487860&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Datasource`
> Spec:
> <hr>Fri, 08 Nov 2024 13:49:22 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**
- Enhanced tooltip functionality for the datasource management button,
providing contextual information for saving and editing actions.
- Introduced specific tooltips for editing and saving datasources,
improving user understanding.

- **Bug Fixes**
- Corrected a typographical error in the function name responsible for
rendering nested components, enhancing clarity in the rendering process.

- **Documentation**
- Improved clarity of messages related to datasource actions, specifying
"Save URL" for saving actions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/StoreAsDatasource.tsx          | 35 ++++++++++++-------
 .../components/UQIEditor/FormRender.tsx       |  4 +--
 app/client/src/ce/constants/messages.ts       |  4 ++-
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/StoreAsDatasource.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/StoreAsDatasource.tsx
index b605ca26eb38..f85ef45ca3b3 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/StoreAsDatasource.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/StoreAsDatasource.tsx
@@ -11,9 +11,11 @@ import { getCurrentBasePageId } from "selectors/editorSelectors";
 import {
   createMessage,
   EDIT_DATASOURCE,
+  EDIT_DATASOURCE_TOOLTIP,
   SAVE_DATASOURCE,
+  SAVE_DATASOURCE_TOOLTIP,
 } from "ee/constants/messages";
-import { Button } from "@appsmith/ads";
+import { Button, Tooltip } from "@appsmith/ads";
 
 interface storeDataSourceProps {
   datasourceId?: string;
@@ -58,19 +60,26 @@ function StoreAsDatasource(props: storeDataSourceProps) {
   };
 
   return (
-    <Button
-      className="t--store-as-datasource"
-      data-testid="t--store-as-datasource"
-      isDisabled={!props.enable}
-      kind="secondary"
-      onClick={saveOrEditDatasource}
-      size="md"
-      startIcon={props.shouldSave ? "database-2-line" : "pencil-line"}
+    <Tooltip
+      content={
+        props.shouldSave
+          ? createMessage(SAVE_DATASOURCE_TOOLTIP)
+          : createMessage(EDIT_DATASOURCE_TOOLTIP)
+      }
     >
-      {props.shouldSave
-        ? createMessage(SAVE_DATASOURCE)
-        : createMessage(EDIT_DATASOURCE)}
-    </Button>
+      <Button
+        className="t--store-as-datasource"
+        data-testid="t--store-as-datasource"
+        isDisabled={!props.enable}
+        kind="secondary"
+        onClick={saveOrEditDatasource}
+        size="md"
+      >
+        {props.shouldSave
+          ? createMessage(SAVE_DATASOURCE)
+          : createMessage(EDIT_DATASOURCE)}
+      </Button>
+    </Tooltip>
   );
 }
 
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx
index 1274424a8927..faaa00bb1cb1 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx
@@ -170,7 +170,7 @@ const FormRender = (props: Props) => {
     if (section.hasOwnProperty("controlType")) {
       // If component is type section, render it's children
       if (Object.hasOwn(section, "children")) {
-        return rederNodeWithChildren(section, formName);
+        return renderNodeWithChildren(section, formName);
       }
 
       try {
@@ -201,7 +201,7 @@ const FormRender = (props: Props) => {
   };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const rederNodeWithChildren = (section: any, formName: string) => {
+  const renderNodeWithChildren = (section: any, formName: string) => {
     if (!Object.hasOwn(section, "children")) return;
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index 50f34544a629..cf5f33719e5c 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -366,7 +366,9 @@ export const DATASOURCE_UPDATE = (dsName: string) =>
 export const DATASOURCE_VALID = (dsName: string) =>
   `${dsName} datasource is valid`;
 export const EDIT_DATASOURCE = () => "Edit";
-export const SAVE_DATASOURCE = () => "Save";
+export const SAVE_DATASOURCE = () => "Save URL";
+export const EDIT_DATASOURCE_TOOLTIP = () => "Edit datasource";
+export const SAVE_DATASOURCE_TOOLTIP = () => "Save URL as a datasource";
 export const SAVE_DATASOURCE_MESSAGE = () =>
   "Save the URL as a datasource to access authentication settings";
 export const EDIT_DATASOURCE_MESSAGE = () =>