chore: Updating the copy in the action settings pane (#37260)

## Description

Updating the copy in the action settings pane

Fixes [#37258](#37258)

## Automation

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

### 🔍 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/11704084082>
> Commit: 723332f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11704084082&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 06 Nov 2024 15:09:44 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

## Release Notes

- **New Features**
- Enhanced testing coverage for promise handling in the Cypress
environment, improving validation of asynchronous operations.

- **Bug Fixes**
  - Updated labels in the settings tab of the query editor for clarity.
- Improved label consistency across various plugins and settings
configurations.

- **Documentation**
- Updated messaging in the `SettingsPopover` component for better user
guidance.

- **Chores**
- Standardized phrasing in multiple configuration files to enhance user
understanding across the application.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/Binding/Promises_1_Spec.ts

@@ -172,7 +172,7 @@ return WhatTrumpThinks.run().then((res) => { showAlert("Today's Trump quote for
     );
     agHelper.ValidateToastMessage(
       "will be executed automatically on page load",
-    ); //Validating 'Run API on Page Load' is set once api response is mapped
+    ); //Validating 'Run the API on Page Load' is set once api response is mapped
     EditorNavigation.SelectEntityByName("Button1", EntityType.Widget);
     propPane.EnterJSContext(
       "onClick",

app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug14987_spec.js

@@ -31,7 +31,7 @@ describe(
       cy.xpath(queryLocators.querySettingsTab).click();
 
       cy.get(".label-icon-wrapper")
-        .contains("Run query on page load")
+        .contains("Run the query on page load")
         .parent()
         .then(($el) => {
           cy.window().then((win) => {
@@ -45,7 +45,7 @@ describe(
         });
 
       cy.get(".label-icon-wrapper")
-        .contains("Request confirmation before running query")
+        .contains("Request confirmation before running this query")
         .parent()
         .then(($el) => {
           cy.window().then((win) => {

app/client/cypress/locators/OneClickBindingLocator.ts

@@ -1,58 +1,58 @@
 export default {
-  connectData: '[data-testId="t--one-click-binding-connect-data"]',
+  connectData: '[data-testid="t--one-click-binding-connect-data"]',
   datasourceDropdownSelector:
-    "[data-testId='t--one-click-binding-datasource-selector']",
+    "[data-testid='t--one-click-binding-datasource-selector']",
   datasourceDropdownOptionSelector: (query: string) =>
-    `[data-testId="t--one-click-binding-datasource-trigger"]:contains(${query})`,
+    `[data-testid="t--one-click-binding-datasource-trigger"]:contains(${query})`,
   dropdownOptionSelector: (query: string) =>
-    `[data-testId="t--one-click-binding-datasource-trigger"]:contains(${query})`,
+    `[data-testid="t--one-click-binding-datasource-trigger"]:contains(${query})`,
   datasourceQueryBindHeaderSelector:
-    "[data-testId='t--one-click-binding-datasource-selector--bind-to-query']",
+    "[data-testid='t--one-click-binding-datasource-selector--bind-to-query']",
   datasourceGenerateAQuerySelector:
-    "[data-testId='t--one-click-binding-datasource-selector--generate-a-query']",
+    "[data-testid='t--one-click-binding-datasource-selector--generate-a-query']",
   datasourceOtherActionsSelector:
-    "[data-testId='t--one-click-binding-datasource-selector--other-actions']",
+    "[data-testid='t--one-click-binding-datasource-selector--other-actions']",
   datasourceQuerySelector: (query?: string) =>
-    `[data-testId='t--one-click-binding-datasource-selector--query']${
+    `[data-testid='t--one-click-binding-datasource-selector--query']${
       query ? `:contains(${query})` : ""
     }`,
   datasourceSelector: (datasource?: string) =>
-    `[data-testId="t--one-click-binding-datasource-selector--datasource"]${
+    `[data-testid="t--one-click-binding-datasource-selector--datasource"]${
       datasource ? `:contains(${datasource})` : ""
     }`,
   otherActionSelector: (action?: string) =>
-    `[data-testId='t--one-click-binding-datasource-selector--other-action']${
+    `[data-testid='t--one-click-binding-datasource-selector--other-action']${
       action ? `:contains(${action})` : ""
     }`,
   tableOrSpreadsheetDropdown:
     '[data-testid="t--one-click-binding-table-selector"] .rc-select-selector',
   tableOrSpreadsheetDropdownOption: (table?: string) =>
-    `//div[@data-testId='t--one-click-binding-table-selector--table']//div[text()='${table}']`,
+    `//div[@data-testid='t--one-click-binding-table-selector--table']//div[text()='${table}']`,
   tableOrSpreadsheetSelectedOption: (table?: string) =>
     `[data-testid="t--one-click-binding-table-selector"] .rc-select-selection-item${
       table ? `:contains(${table})` : ""
     }`,
   validTableRowData:
     '.t--widget-tablewidgetv2 [role="rowgroup"] [role="button"]',
   tableError: (error: string) =>
-    `[data-testId="t--one-click-binding-table-selector--error"]:contains(${error})`,
-  dateInput: `[data-testId="datepicker-container"] input`,
+    `[data-testid="t--one-click-binding-table-selector--error"]:contains(${error})`,
+  dateInput: `[data-testid="datepicker-container"] input`,
   dayViewFromDate: ".DayPicker-Day",
-  loadMore: "[data-testId='t--one-click-binding-datasource--load-more']",
-  datasourceSearch: `[data-testId="t--one-click-binding-datasource--search"]`,
+  loadMore: "[data-testid='t--one-click-binding-datasource--load-more']",
+  datasourceSearch: `[data-testid="t--one-click-binding-datasource--search"]`,
   searchableColumn:
-    '[data-testId="t--one-click-binding-column-searchableColumn"]',
-  formType: '[data-testId="t--one-click-binding-column-formType"]',
-  defaultValues: '[data-testId="t--one-click-binding-column-defaultValues"]',
-  dataIdentifier: '[data-testId="t--one-click-binding-column-dataIdentifier"]',
-  label: '[data-testId="t--one-click-binding-column-label"]',
-  value: '[data-testId="t--one-click-binding-column-value"]',
+    '[data-testid="t--one-click-binding-column-searchableColumn"]',
+  formType: '[data-testid="t--one-click-binding-column-formType"]',
+  defaultValues: '[data-testid="t--one-click-binding-column-defaultValues"]',
+  dataIdentifier: '[data-testid="t--one-click-binding-column-dataIdentifier"]',
+  label: '[data-testid="t--one-click-binding-column-label"]',
+  value: '[data-testid="t--one-click-binding-column-value"]',
   columnDropdownOption: (column: string, value?: string) =>
-    `[data-testId='t--one-click-binding-column-${column}--column']${
+    `[data-testid='t--one-click-binding-column-${column}--column']${
       value ? `:contains(${value})` : ""
     }`,
   columnSelectedOption: (column: string, value?: string) =>
-    `[data-testId="t--one-click-binding-column-${column}"] .rc-select-selection-item${
+    `[data-testid="t--one-click-binding-column-${column}"] .rc-select-selection-item${
       value ? `:contains(${value})` : ""
     }`,
   columnSelectorModalTrigger: '[data-testid="t--edit-fields-button"]',

app/client/cypress/support/Pages/DataSources.ts

@@ -202,7 +202,7 @@ export class DataSources {
   _mandatoryMark = "//span[text()='*']";
   _deleteDSHostPort = ".t--delete-field";
   _dsTabSchema = "[data-testid='t--tab-SCHEMA_TAB']";
-  private _pageSelectionMenu = "[data-testId='t--page-selection']";
+  private _pageSelectionMenu = "[data-testid='t--page-selection']";
 
   private _pageSelectMenuItem = ".ads-v2-menu__menu-item";
 
@@ -295,7 +295,7 @@ export class DataSources {
   _imgFireStoreLogo = "//img[contains(@src, 'firestore.svg')]";
   _dsVirtuosoElement = `div .t--schema-virtuoso-container`;
   private _dsVirtuosoList = `[data-test-id="virtuoso-item-list"]`;
-  private _dsSchemaContainer = `[data-testId="datasource-schema-container"]`;
+  private _dsSchemaContainer = `[data-testid="datasource-schema-container"]`;
   private _dsVirtuosoElementTable = (targetTableName: string) =>
     `${this._dsSchemaEntityItem}[data-testid='t--entity-item-${targetTableName}']`;
   private _dsPageTabListItem = (buttonText: string) =>

app/client/cypress/support/Pages/PropertyPane.ts

@@ -92,7 +92,7 @@ export class PropertyPane {
     "div.tab-view span:contains('" + type + "')";
 
   _dropdownSelectType = ".t--open-dropdown-Select-type";
-  _selectorViewLabel = '[data-testId="selector-view-label"]';
+  _selectorViewLabel = '[data-testid="selector-view-label"]';
   _textView = ".text-view";
   _selectorView = ".selector-view";
   _dropdownOptions =

app/client/src/IDE/Components/ToolbarSettingsPopover.tsx

@@ -43,7 +43,7 @@ export const ToolbarSettingsPopover = (props: Props) => {
     <Popover onOpenChange={handleOpenChange} open={isOpen}>
       <PopoverTrigger>
         <ToggleButton
-          data-testId={props.dataTestId}
+          data-testid={props.dataTestId}
           disabled={props.disabled}
           icon="settings-2-line"
           isSelected={isOpen}

app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx

@@ -21,7 +21,7 @@ const Section: React.FC<SectionProps> = ({
     <div
       className={classNames}
       data-fullwidth={isFullWidth.toString()}
-      data-withoutPadding={withoutPadding.toString()}
+      data-withoutpadding={withoutPadding.toString()}
       {...props}
     >
       {children}

app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css

@@ -6,22 +6,22 @@
   max-width: 800px;
   justify-content: center;
 
-  &[data-withoutPadding="true"] {
+  &[data-withoutpadding="true"] {
     padding: 0;
   }
 
   /* We do not want padding above the first section */
-  &[data-withoutPadding="false"]:first-child {
+  &[data-withoutpadding="false"]:first-child {
     padding-bottom: var(--ads-v2-spaces-6);
   }
 
   /* All other sections expect first will have padding top and bottom */
-  &[data-withoutPadding="false"]:not(:first-child) {
+  &[data-withoutpadding="false"]:not(:first-child) {
     padding-block: var(--ads-v2-spaces-6);
   }
 
   /* We will also render a border below sections expect for the last section */
-  &[data-withoutPadding="false"]:not(:last-child) {
+  &[data-withoutpadding="false"]:not(:last-child) {
     border-bottom: 1px solid var(--ads-v2-color-border);
   }
 

app/client/src/PluginActionEditor/components/PluginActionResponse/components/BindDataButton.tsx

@@ -385,7 +385,7 @@ function BindDataButton(props: BindDataButtonProps) {
       </MenuTrigger>
       <MenuContent
         align={"end"}
-        data-testId={"t--widget-selection"}
+        data-testid={"t--widget-selection"}
         height={pages.length <= 4 ? "fit-content" : "186px"}
         side={"top"}
         width="235px"

app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema.tsx

@@ -134,7 +134,7 @@ const Schema = (props: Props) => {
       overflow="hidden"
     >
       <Flex
-        data-testId="datasource-schema-container"
+        data-testid="datasource-schema-container"
         flex="1"
         flexDirection="column"
         gap="spaces-3"

app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx

@@ -4,9 +4,9 @@ import ActionSettings from "pages/Editor/ActionSettings";
 import { usePluginActionContext } from "../../PluginActionContext";
 import styled from "styled-components";
 import {
-  API_EDITOR_TAB_TITLES,
   createMessage,
-  LEARN_MORE,
+  API_EDITOR_TAB_TITLES,
+  MORE_ON_QUERY_SETTINGS,
 } from "ee/constants/messages";
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -92,7 +92,7 @@ const PluginActionSettingsPopover = (props: SettingsProps) => {
             kind="secondary"
             onClick={handleLearnMoreClick}
           >
-            {createMessage(LEARN_MORE)}
+            {createMessage(MORE_ON_QUERY_SETTINGS)}
           </LearnMoreLink>
         )}
       </SettingsWrapper>

app/client/src/ce/constants/messages.ts

@@ -645,6 +645,7 @@ export const NO_JS_FUNCTION_TO_RUN = (JSObjectName: string) =>
   `${JSObjectName} has no function`;
 export const NO_JS_FUNCTION_RETURN_VALUE = (JSFunctionName: string) =>
   `${JSFunctionName} did not return any data. Did you add a return statement?`;
+export const MORE_ON_QUERY_SETTINGS = () => "More on query settings";
 
 export const REMOVE_CONFIRM_BEFORE_CALLING_HEADING = () =>
   `Remove 'Confirm before calling' `;
@@ -2517,5 +2518,5 @@ export const PREPARED_STATEMENT_WARNING = {
 
 export const JS_EDITOR_SETTINGS = {
   TITLE: () => "Settings",
-  ON_LOAD_TITLE: () => "Choose functions to run on page load",
+  ON_LOAD_TITLE: () => "Choose the functions to run on page load",
 };

app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts

@@ -10038,12 +10038,12 @@ export const defaultAppState = {
             id: 1,
             children: [
               {
-                label: "Run query on page load",
+                label: "Run the query on page load",
                 configProperty: "executeOnLoad",
                 controlType: "SWITCH",
               },
               {
-                label: "Request confirmation before running query",
+                label: "Request confirmation before running this query",
                 configProperty: "confirmBeforeExecute",
                 controlType: "SWITCH",
                 tooltipText:
@@ -10074,12 +10074,12 @@ export const defaultAppState = {
             id: 1,
             children: [
               {
-                label: "Run query on page load",
+                label: "Run the query on page load",
                 configProperty: "executeOnLoad",
                 controlType: "SWITCH",
               },
               {
-                label: "Request confirmation before running query",
+                label: "Request confirmation before running this query",
                 configProperty: "confirmBeforeExecute",
                 controlType: "SWITCH",
                 tooltipText:
@@ -10110,12 +10110,12 @@ export const defaultAppState = {
             id: 1,
             children: [
               {
-                label: "Run API on page load",
+                label: "Run the API on page load",
                 configProperty: "executeOnLoad",
                 controlType: "SWITCH",
               },
               {
-                label: "Request confirmation before running API",
+                label: "Request confirmation before running this API",
                 configProperty: "confirmBeforeExecute",
                 controlType: "SWITCH",
                 tooltipText:
@@ -10176,12 +10176,12 @@ export const defaultAppState = {
             id: 1,
             children: [
               {
-                label: "Run API on page load",
+                label: "Run the API on page load",
                 configProperty: "executeOnLoad",
                 controlType: "SWITCH",
               },
               {
-                label: "Request confirmation before running API",
+                label: "Request confirmation before running this API",
                 configProperty: "confirmBeforeExecute",
                 controlType: "SWITCH",
                 tooltipText:

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/DropdownOption.tsx

@@ -59,7 +59,7 @@ export function LoadMoreOptions(props: LoadmoreProps) {
     return (
       <MenuItem>
         <div
-          data-testId="t--one-click-binding-datasource--load-more"
+          data-testid="t--one-click-binding-datasource--load-more"
           onMouseDown={(e) => {
             e?.stopPropagation();
           }}

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/index.tsx

@@ -100,7 +100,7 @@ function DatasourceDropdown() {
   const onChange = useCallback((value: string) => setSearchText(value), []);
 
   return (
-    <SelectWrapper data-testId="t--one-click-binding-datasource-selector">
+    <SelectWrapper data-testid="t--one-click-binding-datasource-selector">
       <Menu
         onOpenChange={(open: boolean) => {
           setOpen(open);
@@ -110,7 +110,7 @@ function DatasourceDropdown() {
       >
         <MenuTrigger>
           <StyledDropdownTrigger
-            data-testId="t--one-click-binding-datasource-trigger"
+            data-testid="t--one-click-binding-datasource-trigger"
             isDisabled={disabled}
             isValid={!error}
           >
@@ -131,7 +131,7 @@ function DatasourceDropdown() {
             <StyledInputContainer>
               <SearchInput
                 autoFocus
-                data-testId="t--one-click-binding-datasource--search"
+                data-testid="t--one-click-binding-datasource--search"
                 onChange={onChange}
                 size="md"
                 // @ts-expect-error Fix this the next time the file is edited
@@ -141,7 +141,7 @@ function DatasourceDropdown() {
             </StyledInputContainer>
 
             {!!connectToOptions.length && (
-              <StyledMenuGroupName data-testId="t--one-click-binding-datasource-selector--bind-to-query">
+              <StyledMenuGroupName data-testid="t--one-click-binding-datasource-selector--bind-to-query">
                 <Text kind="heading-xs">{constants?.connectToText}</Text>
               </StyledMenuGroupName>
             )}
@@ -156,7 +156,7 @@ function DatasourceDropdown() {
               .map((option) => {
                 return (
                   <MenuItem
-                    data-testId="t--one-click-binding-datasource-selector--query"
+                    data-testid="t--one-click-binding-datasource-selector--query"
                     key={option?.id}
                     onSelect={() => {
                       option?.onSelect(option?.value, option);
@@ -202,7 +202,7 @@ function DatasourceDropdown() {
               .map((option) => {
                 return (
                   <MenuItem
-                    data-testId="t--one-click-binding-datasource-selector--datasource"
+                    data-testid="t--one-click-binding-datasource-selector--datasource"
                     key={option.id}
                     onSelect={() => {
                       option?.onSelect?.(option.value || "", option);
@@ -248,7 +248,7 @@ function DatasourceDropdown() {
             {otherOptions.map((option: DropdownOptionType) => {
               return (
                 <MenuItem
-                  data-testId="t--one-click-binding-datasource-selector--other-action"
+                  data-testid="t--one-click-binding-datasource-selector--other-action"
                   key={option.id}
                   onSelect={() => {
                     option.onSelect?.(option.value || "", option);

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/TableOrSpreadsheetDropdown/index.tsx

@@ -58,7 +58,7 @@ function TableOrSpreadsheetDropdown() {
           {options.map((option) => {
             return (
               <Option
-                data-testId="t--one-click-binding-table-selector--table"
+                data-testid="t--one-click-binding-table-selector--table"
                 key={option.id}
                 value={option.value}
               >
@@ -67,7 +67,7 @@ function TableOrSpreadsheetDropdown() {
             );
           })}
         </Select>
-        <ErrorMessage data-testId="t--one-click-binding-table-selector--error">
+        <ErrorMessage data-testid="t--one-click-binding-table-selector--error">
           {error}
         </ErrorMessage>
       </SelectWrapper>

app/client/src/components/editorComponents/WidgetQueryGeneratorForm/ConnectData/index.tsx

@@ -9,7 +9,7 @@ export function ConnectData({ btnText }: { btnText: string }) {
   if (show) {
     return (
       <StyledButton
-        data-testId="t--one-click-binding-connect-data"
+        data-testid="t--one-click-binding-connect-data"
         isDisabled={disabled}
         isLoading={isLoading}
         onClick={onClick}