Merge branch 'release' of https://github.com/appsmithorg/appsmith int…

…o chore/update-execution-states

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_types_validation_spec.ts

@@ -43,17 +43,16 @@ describe(
       // Click unix cell edit
       table.ClickOnEditIcon(row, column);
 
-      // Click on specific date within
+      // Click on a specific date within the view port of the date picker
+      // Date picker opens in september 2024 due to the Table data set
       agHelper.GetNClick(
-        `${table._dateInputPopover} [aria-label='${table.getFormattedTomorrowDates().verboseFormat}']`,
+        `${table._dateInputPopover} [aria-label='Thu Sep 26 2024']`,
       );
 
-      // Check that date is set in column
+      // Check that the date is set in column
       table
         .ReadTableRowColumnData(row, column, "v2")
-        .then((val) =>
-          expect(val).to.equal(table.getFormattedTomorrowDates().isoFormat),
-        );
+        .then((val) => expect(val).to.equal("2024-09-26"));
     };
 
     it("1. should allow inline editing of Unix Timestamp in seconds (unix/s)", () => {

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

@@ -854,38 +854,4 @@ export class Table {
     this.agHelper.GetHoverNClick(selector, 1, true);
     verify && cy.get(selector).eq(1).should("be.disabled");
   }
-
-  /**
-   * Helper function to get formatted date strings for tomorrow's date.
-   *
-   * @returns {Object} An object containing:
-   *  - verbose format (e.g., "Sat Sep 21 2024")
-   *  - ISO date format (e.g., "2024-09-21")
-   */
-  public getFormattedTomorrowDates() {
-    // Create a new Date object for today
-    const tomorrow = new Date();
-
-    // Set the date to tomorrow by adding 1 to today's date
-    tomorrow.setDate(tomorrow.getDate() + 1);
-
-    // Format tomorrow's date in verbose form (e.g., "Sat Sep 21 2024")
-    const verboseFormat = tomorrow
-      .toLocaleDateString("en-US", {
-        weekday: "short",
-        year: "numeric",
-        month: "short",
-        day: "2-digit",
-      })
-      .replace(/,/g, ""); // Remove commas from the formatted string
-
-    // Format tomorrow's date in ISO form (e.g., "2024-09-21")
-    const isoFormat = tomorrow.toISOString().split("T")[0]; // Extract the date part only
-
-    // Return both formatted date strings as an object
-    return {
-      verboseFormat,
-      isoFormat,
-    };
-  }
 }

app/client/packages/rts/package.json

@@ -15,6 +15,9 @@
     "start": "./start-server.sh"
   },
   "dependencies": {
+    "@opentelemetry/instrumentation-http": "^0.53.0",
+    "@opentelemetry/sdk-trace-node": "^1.26.0",
+    "@opentelemetry/semantic-conventions": "^1.27.0",
     "@shared/ast": "workspace:^",
     "axios": "^1.7.4",
     "express": "^4.20.0",

app/client/packages/rts/src/instrumentation.ts

@@ -0,0 +1,51 @@
+import {
+  BatchSpanProcessor,
+  NodeTracerProvider,
+} from "@opentelemetry/sdk-trace-node";
+import { Resource } from "@opentelemetry/resources";
+import {
+  ATTR_DEPLOYMENT_NAME,
+  ATTR_SERVICE_INSTANCE_ID,
+} from "@opentelemetry/semantic-conventions/incubating";
+import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
+import { diag, DiagConsoleLogger, DiagLogLevel } from "@opentelemetry/api";
+import { registerInstrumentations } from "@opentelemetry/instrumentation";
+import { HttpInstrumentation } from "@opentelemetry/instrumentation-http";
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
+
+const provider = new NodeTracerProvider({
+  resource: new Resource({
+    [ATTR_DEPLOYMENT_NAME]: `${process.env.APPSMITH_DEPLOYMENT_NAME || "self-hosted"}`,
+    [ATTR_SERVICE_INSTANCE_ID]: `${process.env.HOSTNAME || "appsmith-0"}`,
+    [ATTR_SERVICE_NAME]: "rts",
+  }),
+});
+
+const nrTracesExporter = new OTLPTraceExporter({
+  url: `${process.env.APPSMITH_NEW_RELIC_OTEL_EXPORTER_OTLP_ENDPOINT}/v1/traces`,
+  headers: {
+    "api-key": `${process.env.APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY}`,
+  },
+});
+
+registerInstrumentations({
+  instrumentations: [new HttpInstrumentation()],
+});
+
+const batchSpanProcessor = new BatchSpanProcessor(
+  nrTracesExporter,
+  //Optional BatchSpanProcessor Configurations
+  {
+    // The maximum queue size. After the size is reached spans are dropped.
+    maxQueueSize: 100,
+    // The maximum batch size of every export. It must be smaller or equal to maxQueueSize.
+    maxExportBatchSize: 50,
+    // The interval between two consecutive exports
+    scheduledDelayMillis: 500,
+    // How long the export can run before it is cancelled
+    exportTimeoutMillis: 30000,
+  },
+);
+
+provider.addSpanProcessor(batchSpanProcessor);
+provider.register();

app/client/packages/rts/src/server.ts

@@ -1,3 +1,4 @@
+import "./instrumentation";
 import http from "http";
 import express from "express";
 import { Server } from "socket.io";

app/client/src/PluginActionEditor/components/PluginActionForm/components/APIEditorForm.tsx

@@ -10,13 +10,17 @@ import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import Pagination from "pages/Editor/APIEditor/Pagination";
 import { reduxForm } from "redux-form";
-import { useHandleRunClick } from "PluginActionEditor/hooks";
+import {
+  useHandleRunClick,
+  useAnalyticsOnRunClick,
+} from "PluginActionEditor/hooks";
 
 const FORM_NAME = API_EDITOR_FORM_NAME;
 
 const APIEditorForm = () => {
   const { action } = usePluginActionContext();
   const { handleRunClick } = useHandleRunClick();
+  const { callRunActionAnalytics } = useAnalyticsOnRunClick();
   const theme = EditorTheme.LIGHT;
 
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
@@ -25,6 +29,11 @@ const APIEditorForm = () => {
     action.userPermissions,
   );
 
+  const onTestClick = () => {
+    callRunActionAnalytics();
+    handleRunClick();
+  };
+
   return (
     <CommonEditorForm
       action={action}
@@ -40,7 +49,7 @@ const APIEditorForm = () => {
       paginationUiComponent={
         <Pagination
           actionName={action.name}
-          onTestClick={handleRunClick}
+          onTestClick={onTestClick}
           paginationType={action.actionConfiguration.paginationType}
           theme={theme}
         />

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx

@@ -1,107 +1,87 @@
-import React, { useCallback, useRef } from "react";
+import React from "react";
 import styled from "styled-components";
-import QueryEditor from "pages/Editor/APIEditor/GraphQL/QueryEditor";
-import VariableEditor from "pages/Editor/APIEditor/GraphQL/VariableEditor";
-import useHorizontalResize from "utils/hooks/useHorizontalResize";
-import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
-import classNames from "classnames";
-import { tailwindLayers } from "constants/Layers";
-
-const ResizableDiv = styled.div`
-  display: flex;
-  height: 100%;
-  flex-shrink: 0;
-`;
+import {
+  CodeEditorBorder,
+  EditorModes,
+  EditorSize,
+  EditorTheme,
+  TabBehaviour,
+} from "components/editorComponents/CodeEditor/EditorConfig";
+import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
+import { Section, Zone } from "pages/Editor/ActionForm";
+import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
+import FormLabel from "components/editorComponents/FormLabel";
 
 const PostBodyContainer = styled.div`
-  display: flex;
-  height: 100%;
-  overflow: hidden;
   &&&& .CodeMirror {
-    height: 100%;
-    border-top: 1px solid var(--ads-v2-color-border);
-    border-bottom: 1px solid var(--ads-v2-color-border);
-    border-radius: 0;
-    padding: 0;
-  }
-  & .CodeMirror-scroll {
-    margin: 0px;
-    padding: 0px;
-    overflow: auto !important;
+    height: auto;
+    min-height: 250px;
   }
 `;
 
-const ResizerHandler = styled.div<{ resizing: boolean }>`
-  width: 6px;
-  height: 100%;
-  margin-left: 2px;
-  border-right: 1px solid var(--ads-v2-color-border);
-  background: ${(props) =>
-    props.resizing ? "var(--ads-v2-color-border)" : "transparent"};
-  &:hover {
-    background: var(--ads-v2-color-border);
-    border-color: transparent;
+const StyledFormLabel = styled(FormLabel)`
+  && {
+    margin-bottom: var(--ads-v2-spaces-2);
+    padding: 0;
   }
 `;
 
-const DEFAULT_GRAPHQL_VARIABLE_WIDTH = 300;
-
 interface Props {
   actionName: string;
 }
 
+const EXPECTED_VARIABLE = {
+  type: "object",
+  example:
+    '{\n  "name":"{{ inputName.property }}",\n  "preference":"{{ dropdownName.property }}"\n}',
+  autocompleteDataType: AutocompleteDataType.OBJECT,
+};
+
 function PostBodyData(props: Props) {
   const { actionName } = props;
   const theme = EditorTheme.LIGHT;
-  const resizeableRef = useRef<HTMLDivElement>(null);
-  const [variableEditorWidth, setVariableEditorWidth] = React.useState(
-    DEFAULT_GRAPHQL_VARIABLE_WIDTH,
-  );
-  /**
-   * Variable Editor's resizeable handler for the changing of width
-   */
-  const onVariableEditorWidthChange = useCallback((newWidth) => {
-    setVariableEditorWidth(newWidth);
-  }, []);
-
-  const { onMouseDown, onMouseUp, onTouchStart, resizing } =
-    useHorizontalResize(
-      resizeableRef,
-      onVariableEditorWidthChange,
-      undefined,
-      true,
-    );
 
   return (
     <PostBodyContainer>
-      <QueryEditor
-        dataTreePath={`${actionName}.config.body`}
-        height="100%"
-        name="actionConfiguration.body"
-        theme={theme}
-      />
-      <div
-        className={`w-2 h-full -ml-2 group  cursor-ew-resize ${tailwindLayers.resizer}`}
-        onMouseDown={onMouseDown}
-        onTouchEnd={onMouseUp}
-        onTouchStart={onTouchStart}
-      >
-        <ResizerHandler
-          className={classNames({
-            "transform transition": true,
-          })}
-          resizing={resizing}
-        />
-      </div>
-      <ResizableDiv
-        ref={resizeableRef}
-        style={{
-          width: `${variableEditorWidth}px`,
-          paddingRight: "2px",
-        }}
-      >
-        <VariableEditor actionName={actionName} theme={theme} />
-      </ResizableDiv>
+      <Section isFullWidth>
+        <Zone layout="single_column">
+          <div className="t--graphql-query-editor">
+            <StyledFormLabel>Query</StyledFormLabel>
+            <DynamicTextField
+              border={CodeEditorBorder.ALL_SIDE}
+              dataTreePath={`${actionName}.config.body`}
+              evaluatedPopUpLabel={"Query"}
+              mode={EditorModes.GRAPHQL_WITH_BINDING}
+              name="actionConfiguration.body"
+              placeholder={`{{\n\t{name: inputName.property, preference: dropdownName.property}\n}}`}
+              showLineNumbers
+              size={EditorSize.EXTENDED}
+              tabBehaviour={TabBehaviour.INDENT}
+              theme={theme}
+            />
+          </div>
+        </Zone>
+        <Zone layout="single_column">
+          <div className="t--graphql-variable-editor">
+            <StyledFormLabel>Query variables</StyledFormLabel>
+            <DynamicTextField
+              border={CodeEditorBorder.ALL_SIDE}
+              dataTreePath={`${props.actionName}.config.pluginSpecifiedTemplates[1].value`}
+              evaluatedPopUpLabel={"Query variables"}
+              expected={EXPECTED_VARIABLE}
+              height="100%"
+              mode={EditorModes.JSON_WITH_BINDING}
+              name="actionConfiguration.pluginSpecifiedTemplates[1].value"
+              placeholder={`${EXPECTED_VARIABLE.example}\n\n\\\\Take widget inputs using {{ }}`}
+              showLightningMenu={false}
+              showLineNumbers
+              size={EditorSize.EXTENDED}
+              tabBehaviour={TabBehaviour.INDENT}
+              theme={theme}
+            />
+          </div>
+        </Zone>
+      </Section>
     </PostBodyContainer>
   );
 }

app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx

@@ -1,9 +1,13 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { IDEToolbar } from "IDE";
 import { Button, Menu, MenuContent, MenuTrigger, Tooltip } from "@appsmith/ads";
 import { modText } from "utils/helpers";
 import { usePluginActionContext } from "../PluginActionContext";
-import { useBlockExecution, useHandleRunClick } from "PluginActionEditor/hooks";
+import {
+  useBlockExecution,
+  useHandleRunClick,
+  useAnalyticsOnRunClick,
+} from "PluginActionEditor/hooks";
 import { useToggle } from "@mantine/hooks";
 import { useSelector } from "react-redux";
 import { isActionRunning } from "PluginActionEditor/store";
@@ -17,13 +21,15 @@ interface PluginActionToolbarProps {
 const PluginActionToolbar = (props: PluginActionToolbarProps) => {
   const { action } = usePluginActionContext();
   const { handleRunClick } = useHandleRunClick();
+  const { callRunActionAnalytics } = useAnalyticsOnRunClick();
   const [isMenuOpen, toggleMenuOpen] = useToggle([false, true]);
   const blockExecution = useBlockExecution();
   const isRunning = useSelector(isActionRunning(action.id));
 
-  const onRunClick = () => {
+  const onRunClick = useCallback(() => {
+    callRunActionAnalytics();
     handleRunClick();
-  };
+  }, [callRunActionAnalytics, handleRunClick]);
 
   return (
     <IDEToolbar>

app/client/src/PluginActionEditor/hooks/index.ts

@@ -2,3 +2,4 @@ export { useActionSettingsConfig } from "ee/PluginActionEditor/hooks/useActionSe
 export { useHandleDeleteClick } from "ee/PluginActionEditor/hooks/useHandleDeleteClick";
 export { useHandleRunClick } from "ee/PluginActionEditor/hooks/useHandleRunClick";
 export { useBlockExecution } from "ee/PluginActionEditor/hooks/useBlockExecution";
+export { useAnalyticsOnRunClick } from "ee/PluginActionEditor/hooks/useAnalyticsOnRunClick";