updating the UI for save and edit datasource button

Zeral-Zhang · Nov 8, 2024 · 555d2c2 · 555d2c2
1 parent da6d497
commit 555d2c2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/.../components/PluginActionForm/components/CommonEditorForm/components/StoreAsDatasource.tsx b/.../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/...nt/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx b/...nt/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
@@ -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 = () =>