fix: edit datasource for External saas plugins (#38672)

appsmithorg · Jan 20, 2025 · 7a7ceed · 7a7ceed
1 parent 185fefc
commit 7a7ceed
Show file tree

Hide file tree

Showing 18 changed files with 397 additions and 310 deletions.
diff --git a/app/client/src/ce/components/EnvConfigSection/index.tsx b/app/client/src/ce/components/EnvConfigSection/index.tsx
@@ -1,5 +1,6 @@
+import React from "react";
 import type { Datasource } from "entities/Datasource";
-import { renderDatasourceSection } from "pages/Editor/DataSourceEditor/DatasourceSection";
+import DatasourceFormRenderer from "pages/Editor/DataSourceEditor/DatasourceFormRenderer";
 
 export interface Props {
   currentEnv: string;
@@ -16,5 +17,12 @@ export function EnvConfigSection({
   datasource,
   viewMode,
 }: Props) {
-  return renderDatasourceSection(config, currentEnv, datasource, viewMode);
+  return (
+    <DatasourceFormRenderer
+      currentEnvironment={currentEnv}
+      datasource={datasource}
+      section={config}
+      viewMode={viewMode}
+    />
+  );
 }
diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx
@@ -857,6 +857,8 @@ const DatasourceEditorActionTypes = {
   CREATE_DATASOURCE_INIT: "CREATE_DATASOURCE_INIT",
   CREATE_DATASOURCE_SUCCESS: "CREATE_DATASOURCE_SUCCESS",
   CREATE_DATASOURCE_FROM_FORM_INIT: "CREATE_DATASOURCE_FROM_FORM_INIT",
+  CREATE_DATASOURCE_FROM_FORM_TOGGLE_LOADING:
+    "CREATE_DATASOURCE_FROM_FORM_TOGGLE_LOADING",
   CREATE_TEMP_DATASOURCE_FROM_FORM_SUCCESS:
     "CREATE_TEMP_DATASOURCE_FROM_FORM_SUCCESS",
   UPDATE_DATASOURCE_INIT: "UPDATE_DATASOURCE_INIT",

diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
@@ -2017,6 +2017,7 @@ export const RECONNECT_BUTTON_TEXT = () => "Reconnect";
 export const SAVE_BUTTON_TEXT = () => "Save";
 export const TEST_BUTTON_TEXT = () => "Test configuration";
 export const SAVE_AND_AUTHORIZE_BUTTON_TEXT = () => "Save & Authorize";
+export const CONNECT_DATASOURCE_BUTTON_TEXT = () => "Connect Datasource";
 export const SAVE_AND_RE_AUTHORIZE_BUTTON_TEXT = () => "Save & Re-Authorize";
 export const DISCARD_POPUP_DONT_SAVE_BUTTON_TEXT = () => "Don't save";
 export const GSHEET_AUTHORISED_FILE_IDS_KEY = () => "userAuthorizedSheetIds";

diff --git a/app/client/src/ce/pages/Editor/DataSourceEditor/ExternalSaasConnection.tsx b/app/client/src/ce/pages/Editor/DataSourceEditor/ExternalSaasConnection.tsx
@@ -0,0 +1,3 @@
+export default function ExternalSaasConnection() {
+  return null;
+}
diff --git a/...client/src/constants/AppsmithActionConstants/formConfig/ApiDatasourceFormsButtonConfig.ts b/...client/src/constants/AppsmithActionConstants/formConfig/ApiDatasourceFormsButtonConfig.ts
@@ -4,5 +4,5 @@ export default {
   SAAS: ["CANCEL", "SAVE_AND_AUTHORIZE"],
   REMOTE: ["CANCEL", "SAVE"],
   AI: ["TEST", "CANCEL", "SAVE"],
-  EXTERNAL_SAAS: ["CANCEL", "SAVE_AND_AUTHORIZE"],
+  EXTERNAL_SAAS: ["CANCEL", "CONNECT_DATASOURCE"],
 };
diff --git a/app/client/src/ee/pages/Editor/DataSourceEditor/ExternalSaasConnection.tsx b/app/client/src/ee/pages/Editor/DataSourceEditor/ExternalSaasConnection.tsx
@@ -0,0 +1,3 @@
+export * from "ce/pages/Editor/DataSourceEditor/ExternalSaasConnection";
+import { default as CE_ExternalSaasConnection } from "ce/pages/Editor/DataSourceEditor/ExternalSaasConnection";
+export default CE_ExternalSaasConnection;
diff --git a/app/client/src/entities/Datasource/index.ts b/app/client/src/entities/Datasource/index.ts
@@ -211,6 +211,7 @@ export interface ExternalSaasDSAuthentication extends DatasourceAuthentication {
   integrationId: string;
   credentialId: string;
   integrationType: string;
+  providerData?: { key: string; value: string | boolean | number }[];
 }
 
 export enum AuthenticationType {

diff --git a/app/client/src/entities/Plugin/index.ts b/app/client/src/entities/Plugin/index.ts
@@ -81,6 +81,7 @@ export interface Plugin {
   generateCRUDPageComponent?: string;
   // We need to know if the plugin requires a datasource (Eg Workflows plugin does not require a datasource to create queries)
   requiresDatasource: boolean;
+  pluginName?: string;
 }
 
 export interface DefaultPlugin {

diff --git a/app/client/src/index.css b/app/client/src/index.css
@@ -190,6 +190,7 @@ div.bp3-popover-arrow {
   background-color: var(--ads-v2-color-bg) !important;
   border-radius: var(--ads-v2-border-radius) !important;
 }
+
 .bp3-overlay-backdrop {
   background-color: rgba(16, 22, 26, 0.7) !important;
 }
@@ -220,6 +221,7 @@ div.bp3-popover-arrow {
 .error-menuitem {
   color: var(--ads-v2-color-fg-error) !important;
 }
+
 .error-menuitem > .ads-v2-menu__menu-item-children {
   color: var(--ads-v2-color-fg-error) !important;
 }
@@ -228,9 +230,11 @@ div.bp3-popover-arrow {
 .error-menuitem:focus-visible {
   background-color: var(--ads-v2-color-red-50) !important;
 }
+
 .error-menuitem:active:not([data-disabled]) {
   background-color: var(--ads-v2-color-red-100) !important;
 }
+
 .menuitem-nohover:hover {
   background-color: transparent !important;
   cursor: default !important;

diff --git a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
@@ -17,6 +17,7 @@ import { TEMP_DATASOURCE_ID } from "constants/Datasource";
 import { DocsLink, openDoc } from "../../../constants/DocumentationLinks";
 import { Callout } from "@appsmith/ads";
 import store from "store";
+import ExternalSaasConnection from "ee/pages/Editor/DataSourceEditor/ExternalSaasConnection";
 
 const { cloudHosting } = getAppsmithConfigs();
 
@@ -69,6 +70,10 @@ class DatasourceDBEditor extends JSONtoForm<Props> {
       return null;
     }
 
+    if (this.props.pluginType === PluginType.EXTERNAL_SAAS) {
+      return <ExternalSaasConnection />;
+    }
+
     return this.renderDataSourceConfigForm(formConfig);
   }