fix merge conflicts

.env.example

@@ -56,3 +56,5 @@ APPSMITH_MAIL_SMTP_TLS_ENABLED=
 #APPSMITH_SENTRY_DSN=
 #APPSMITH_SENTRY_ENVIRONMENT=
 
+# Configure cloud services
+# APPSMITH_CLOUD_SERVICES_BASE_URL

.github/workflows/external-client-test.yml

@@ -38,7 +38,7 @@ jobs:
       - name: Set up JDK 1.11
         uses: actions/setup-java@v1
         with:
-          java-version: 1.11
+          java-version: "11.0.10"
 
       # Retrieve maven dependencies from cache. After a successful run, these dependencies are cached again
       - name: Cache maven dependencies

.github/workflows/server.yml

@@ -50,7 +50,7 @@ jobs:
       - name: Set up JDK 1.11
         uses: actions/setup-java@v1
         with:
-          java-version: 1.11
+          java-version: "11.0.10"
 
       # Retrieve maven dependencies from cache. After a successful run, these dependencies are cached again
       - name: Cache maven dependencies

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/BindApi_withPageload_Input_spec.js

@@ -1,9 +1,7 @@
 const testdata = require("../../../../fixtures/testdata.json");
 const apiwidget = require("../../../../locators/apiWidgetslocator.json");
 const commonlocators = require("../../../../locators/commonlocators.json");
-const formWidgetsPage = require("../../../../locators/FormWidgets.json");
 const dsl = require("../../../../fixtures/MultipleInput.json");
-const pages = require("../../../../locators/Pages.json");
 const widgetsPage = require("../../../../locators/Widgets.json");
 const publish = require("../../../../locators/publishWidgetspage.json");
 

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js

@@ -1,5 +1,4 @@
 const dsl = require("../../../../fixtures/ModalDsl.json");
-const publishPage = require("../../../../locators/publishWidgetspage.json");
 const explorer = require("../../../../locators/explorerlocators.json");
 
 describe("Modal Widget Functionality", function() {

app/client/cypress/support/commands.js

@@ -1929,7 +1929,7 @@ Cypress.Commands.add("deleteDatasource", (datasourceName) => {
 });
 
 Cypress.Commands.add("runQuery", () => {
-  cy.get(queryEditor.runQuery).click();
+  cy.get(queryEditor.runQuery).click({ force: true });
   cy.wait("@postExecute").should(
     "have.nested.property",
     "response.body.responseMeta.status",

app/client/docker/templates/nginx-app.conf.template

@@ -47,6 +47,7 @@ server {
         sub_filter __APPSMITH_INTERCOM_APP_ID__ '${APPSMITH_INTERCOM_APP_ID}';
         sub_filter __APPSMITH_MAIL_ENABLED__ '${APPSMITH_MAIL_ENABLED}';
         sub_filter __APPSMITH_DISABLE_TELEMETRY__ '${APPSMITH_DISABLE_TELEMETRY}';
+        sub_filter __APPSMITH_CLOUD_SERVICES_BASE_URL__ '${APPSMITH_CLOUD_SERVICES_BASE_URL}';
     }
 
     location /f {

app/client/public/index.html

@@ -159,6 +159,7 @@
       intercomAppID: APP_ID,
       mailEnabled: parseConfig("__APPSMITH_MAIL_ENABLED__"),
       disableTelemetry: DISABLE_TELEMETRY === "" || DISABLE_TELEMETRY,
+      cloudServicesBaseUrl: parseConfig("__APPSMITH_CLOUD_SERVICES_BASE_URL__")
     };
 
   </script>

app/client/src/actions/datasourceActions.ts

@@ -5,6 +5,7 @@ import {
 } from "constants/ReduxActionConstants";
 import { CreateDatasourceConfig } from "api/DatasourcesApi";
 import { Datasource } from "entities/Datasource";
+import { PluginType } from "entities/Action";
 
 export const createDatasourceFromForm = (payload: CreateDatasourceConfig) => {
   return {
@@ -44,12 +45,14 @@ export const updateDatasourceSuccess = (
 export const redirectAuthorizationCode = (
   pageId: string,
   datasourceId: string,
+  pluginType: PluginType,
 ) => {
   return {
     type: ReduxActionTypes.REDIRECT_AUTHORIZATION_CODE,
     payload: {
       pageId,
       datasourceId,
+      pluginType,
     },
   };
 };
@@ -105,10 +108,16 @@ export const testDatasource = (payload: Partial<Datasource>) => {
   };
 };
 
-export const deleteDatasource = (payload: Partial<Datasource>) => {
+export const deleteDatasource = (
+  payload: Partial<Datasource>,
+  onSuccess?: ReduxAction<unknown>,
+  onError?: ReduxAction<unknown>,
+): ReduxActionWithCallbacks<Partial<Datasource>, unknown, unknown> => {
   return {
     type: ReduxActionTypes.DELETE_DATASOURCE_INIT,
     payload,
+    onSuccess,
+    onError,
   };
 };
 
@@ -128,15 +137,6 @@ export const fetchDatasources = () => {
   };
 };
 
-export const selectPlugin = (pluginId: string) => {
-  return {
-    type: ReduxActionTypes.SELECT_PLUGIN,
-    payload: {
-      pluginId,
-    },
-  };
-};
-
 export const initDatasourcePane = (
   pluginType: string,
   urlId?: string,
@@ -153,8 +153,14 @@ export const storeAsDatasource = () => {
   };
 };
 
+export const getOAuthAccessToken = (datasourceId: string) => {
+  return {
+    type: ReduxActionTypes.SAAS_GET_OAUTH_ACCESS_TOKEN,
+    payload: { datasourceId },
+  };
+};
+
 export default {
   fetchDatasources,
   initDatasourcePane,
-  selectPlugin,
 };

app/client/src/actions/utilActions.ts

@@ -0,0 +1,15 @@
+import { ReduxActionTypes } from "constants/ReduxActionConstants";
+
+export const historyPush = (url: string) => ({
+  type: ReduxActionTypes.HISTORY_PUSH,
+  payload: {
+    url,
+  },
+});
+
+export const windowRedirect = (url: string) => ({
+  type: ReduxActionTypes.REDIRECT_WINDOW_LOCATION,
+  payload: {
+    url,
+  },
+});

app/client/src/api/CloudServicesApi.ts

@@ -0,0 +1,6 @@
+import { getAppsmithConfigs } from "configs";
+
+const { cloudServicesBaseUrl: BASE_URL } = getAppsmithConfigs();
+
+export const authorizeSaasWithAppsmithToken = (appsmithToken: string) =>
+  `${BASE_URL}/api/v1/integrations/oauth/authorize?appsmithToken=${appsmithToken}`;

app/client/src/api/PluginApi.ts

@@ -1,11 +1,12 @@
 import Api from "api/Api";
 import { AxiosPromise } from "axios";
 import { GenericApiResponse } from "api/ApiResponses";
+import { PluginType } from "entities/Action";
 
 export interface Plugin {
   id: string;
   name: string;
-  type: "API" | "DB";
+  type: PluginType;
   packageName: string;
   iconLocation?: string;
   uiComponent: "ApiEditorForm" | "RapidApiEditorForm" | "DbEditorForm";

app/client/src/api/SaasApi.ts

@@ -0,0 +1,25 @@
+import Api from "./Api";
+import { AxiosPromise } from "axios";
+import { GenericApiResponse } from "api/ApiResponses";
+import { Datasource } from "entities/Datasource";
+
+class SaasApi extends Api {
+  static url = "v1/saas";
+  static getAppsmithToken(
+    datasourceId: string,
+    pageId: string,
+  ): AxiosPromise<GenericApiResponse<string>> {
+    return Api.post(`${SaasApi.url}/${datasourceId}/pages/${pageId}/oauth`);
+  }
+
+  static getAccessToken(
+    datasourceId: string,
+    token: string,
+  ): AxiosPromise<GenericApiResponse<Datasource>> {
+    return Api.post(
+      `${SaasApi.url}/${datasourceId}/token?appsmithToken=${token}`,
+    );
+  }
+}
+
+export default SaasApi;

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

@@ -29,6 +29,7 @@ import { NavigationTargetType } from "sagas/ActionExecutionSagas";
 import { checkCurrentStep } from "sagas/OnboardingSagas";
 import { OnboardingStep } from "constants/OnboardingConstants";
 import { getWidgets } from "sagas/selectors";
+import { PluginType } from "entities/Action";
 import { Skin } from "constants/DefaultTheme";
 
 /* eslint-disable @typescript-eslint/ban-types */
@@ -1102,7 +1103,9 @@ function useApiOptionTree() {
   const pageId = useSelector(getCurrentPageId) || "";
 
   const actions = useSelector(getActionsForCurrentPage).filter(
-    (action) => action.config.pluginType === "API",
+    (action) =>
+      action.config.pluginType === PluginType.API ||
+      action.config.pluginType === PluginType.SAAS,
   );
   let filteredBaseOptions = baseOptions;
 
@@ -1173,7 +1176,7 @@ function useQueryOptionTree() {
   const pageId = useSelector(getCurrentPageId) || "";
 
   const queries = useSelector(getActionsForCurrentPage).filter(
-    (action) => action.config.pluginType === "DB",
+    (action) => action.config.pluginType === PluginType.DB,
   );
   const queryOptionTree = getQueryOptionsWithChildren(baseOptions, queries, {
     label: "Create Query",

app/client/src/components/editorComponents/LightningMenu/hooks.ts

@@ -1,7 +1,7 @@
 import { useSelector } from "react-redux";
 import { AppState } from "reducers";
 import { WidgetProps } from "widgets/BaseWidget";
-import { Action } from "entities/Action";
+import { Action, PluginType } from "entities/Action";
 
 export const useWidgets = () => {
   return useSelector((state: AppState) => {
@@ -22,14 +22,18 @@ export const useActions = () => {
     );
   });
   const apis: Action[] = actions
-    .filter((action) => action.config.pluginType === "API")
+    .filter((action) => action.config.pluginType === PluginType.API)
     .map((action) => action.config);
 
   const queries: Action[] = actions
-    .filter((action) => action.config.pluginType === "DB")
+    .filter((action) => action.config.pluginType === PluginType.DB)
     .map((action) => action.config);
 
-  return { apis, queries };
+  const saas: Action[] = actions
+    .filter((action) => action.config.pluginType === PluginType.SAAS)
+    .map((action) => action.config);
+
+  return { apis, queries, saas };
 };
 
 export const usePageId = () => {

app/client/src/components/editorComponents/LightningMenu/index.tsx

@@ -70,15 +70,15 @@ type LightningMenuProps = {
 
 export const LightningMenu = (props: LightningMenuProps) => {
   const widgets = useWidgets();
-  const { apis, queries } = useActions();
+  const { apis, queries, saas } = useActions();
   const pageId = usePageId();
   const dispatch = useDispatch();
 
   return (
     <CustomizedDropdown
       {...lightningMenuOptions(
         props.skin,
-        apis,
+        [...apis, ...saas],
         queries,
         widgets,
         pageId,

app/client/src/components/formControls/DynamicInputTextControl.test.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { render, screen } from "test/testUtils";
+import DynamicInputTextControl from "./DynamicInputTextControl";
+import { reduxForm } from "redux-form";
+import { mockCodemirrorRender } from "test/__mocks__/CodeMirrorEditorMock";
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/dom";
+
+const TestForm = (props: any) => <div>{props.children}</div>;
+
+const ReduxFormDecorator = reduxForm({
+  form: "TestForm",
+  initialValues: { actionConfiguration: { testPath: "My test value" } },
+})(TestForm);
+
+describe("DynamicInputTextControl", () => {
+  beforeEach(() => {
+    mockCodemirrorRender();
+  });
+  it("renders correctly", () => {
+    render(
+      <ReduxFormDecorator>
+        <DynamicInputTextControl
+          controlType="DYNAMIC_INPUT_TEXT_CONTROL"
+          actionName="Test action"
+          formName="TestForm"
+          label="Action"
+          configProperty="actionConfiguration.testPath"
+          onPropertyChange={jest.fn()}
+          id={"test"}
+          isValid={true}
+          dataType={"TABLE"}
+          placeholderText="Test placeholder"
+        />
+      </ReduxFormDecorator>,
+      {},
+    );
+
+    const input = screen.getAllByText("My test value")[0];
+    userEvent.type(input, "New text");
+    waitFor(async () => {
+      await expect(screen.getAllByText("New text")).toHaveLength(2);
+      await expect(screen.findByText("My test value")).toBeNull();
+    });
+  });
+});

app/client/src/components/formControls/DynamicInputTextControl.tsx

@@ -7,6 +7,7 @@ import { AppState } from "reducers";
 import { formValueSelector } from "redux-form";
 import { QUERY_EDITOR_FORM_NAME } from "constants/forms";
 import { connect } from "react-redux";
+import { actionPathFromName } from "components/formControls/utils";
 
 export function InputText(props: {
   label: string;
@@ -57,17 +58,10 @@ export interface DynamicInputControlProps extends ControlProps {
   actionName: string;
 }
 
-const actionPathFromName = (actionName: string, name: string): string => {
-  const ActionConfigStarts = "actionConfiguration.";
-  let path = name;
-  if (path.startsWith(ActionConfigStarts)) {
-    path = "config." + path.substr(ActionConfigStarts.length);
-  }
-  return `${actionName}.${path}`;
-};
-
-const valueSelector = formValueSelector(QUERY_EDITOR_FORM_NAME);
-const mapStateToProps = (state: AppState) => {
+const mapStateToProps = (state: AppState, props: DynamicInputControlProps) => {
+  const valueSelector = formValueSelector(
+    props.formName || QUERY_EDITOR_FORM_NAME,
+  );
   const actionName = valueSelector(state, "name");
   return {
     actionName: actionName,