From a0211f5eed470ec2fd2dc51926a381e21acd49a1 Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Thu, 8 Dec 2022 09:06:35 +0530
Subject: [PATCH] fix: fetching the plugin form config for queries if
 datasource is not viewable (#18749)

fetching the plugin form config for queries if datasource is not viewable
---
 app/client/src/components/editorComponents/Button.tsx | 10 +++++++++-
 app/client/src/entities/Engine/AppEditorEngine.ts     |  8 +++-----
 app/client/src/pages/Editor/Explorer/Files/index.tsx  |  2 +-
 app/client/src/sagas/PluginSagas.ts                   |  8 ++++++++
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/client/src/components/editorComponents/Button.tsx b/app/client/src/components/editorComponents/Button.tsx
index 8273a3801b..62786b2406 100644
--- a/app/client/src/components/editorComponents/Button.tsx
+++ b/app/client/src/components/editorComponents/Button.tsx
@@ -57,7 +57,15 @@ const buttonStyles = css<Partial<ButtonProps>>`
 `;
 const StyledButton = styled((props: IButtonProps & Partial<ButtonProps>) => (
   <BlueprintButton
-    {...omit(props, ["iconAlignment", "fluid", "filled", "outline"])}
+    {...omit(props, [
+      "borderRadius",
+      "boxShadow",
+      "boxShadowColor",
+      "iconAlignment",
+      "fluid",
+      "filled",
+      "outline",
+    ])}
   />
 ))`
   ${buttonStyles}
diff --git a/app/client/src/entities/Engine/AppEditorEngine.ts b/app/client/src/entities/Engine/AppEditorEngine.ts
index 68ca3c13c8..60cbf3a1ae 100644
--- a/app/client/src/entities/Engine/AppEditorEngine.ts
+++ b/app/client/src/entities/Engine/AppEditorEngine.ts
@@ -32,7 +32,7 @@ import {
 } from "@appsmith/constants/ReduxActionConstants";
 import { addBranchParam } from "constants/routes";
 import { APP_MODE } from "entities/App";
-import { all, call, put, select } from "redux-saga/effects";
+import { call, put, select } from "redux-saga/effects";
 import { failFastApiCalls } from "sagas/InitSagas";
 import { getCurrentApplication } from "selectors/editorSelectors";
 import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
@@ -172,10 +172,8 @@ export default class AppEditorEngine extends AppEngine {
   }
 
   public *loadAppEntities(toLoadPageId: string, applicationId: string): any {
-    yield all([
-      call(this.loadPageThemesAndActions, toLoadPageId, applicationId),
-      call(this.loadPluginsAndDatasources),
-    ]);
+    yield call(this.loadPageThemesAndActions, toLoadPageId, applicationId);
+    yield call(this.loadPluginsAndDatasources);
   }
 
   public *completeChore() {
diff --git a/app/client/src/pages/Editor/Explorer/Files/index.tsx b/app/client/src/pages/Editor/Explorer/Files/index.tsx
index db24d5bf99..85e9cfb6b9 100644
--- a/app/client/src/pages/Editor/Explorer/Files/index.tsx
+++ b/app/client/src/pages/Editor/Explorer/Files/index.tsx
@@ -65,7 +65,7 @@ function Files() {
           return (
             <div
               className={`text-sm text-[${Colors.CODE_GRAY}] pl-8 bg-trueGray-50 overflow-hidden overflow-ellipsis whitespace-nowrap`}
-              key={entity.name}
+              key={entity.name || "Queries"}
             >
               {entity.name}
             </div>
diff --git a/app/client/src/sagas/PluginSagas.ts b/app/client/src/sagas/PluginSagas.ts
index 7279fb566d..0790ff70ab 100644
--- a/app/client/src/sagas/PluginSagas.ts
+++ b/app/client/src/sagas/PluginSagas.ts
@@ -8,6 +8,7 @@ import PluginsApi, { DefaultPlugin, PluginFormPayload } from "api/PluginApi";
 import { validateResponse } from "sagas/ErrorSagas";
 import { getCurrentWorkspaceId } from "@appsmith/selectors/workspaceSelectors";
 import {
+  getActions,
   getDatasources,
   getPlugin,
   getPluginForm,
@@ -36,6 +37,7 @@ import {
   FormDependencyConfigs,
   FormDatasourceButtonConfigs,
 } from "utils/DynamicBindingUtils";
+import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 
 function* fetchPluginsSaga(
   action: ReduxAction<{ workspaceId?: string } | undefined>,
@@ -86,6 +88,12 @@ function* fetchPluginFormConfigsSaga() {
       pluginIdFormsToFetch.add(graphqlPlugin.id);
     }
 
+    const actions: ActionDataState = yield select(getActions);
+    const actionPluginIds = actions.map((action) => action.config.pluginId);
+    for (const pluginId of actionPluginIds) {
+      pluginIdFormsToFetch.add(pluginId);
+    }
+
     const pluginFormData: PluginFormPayload[] = [];
     const pluginFormResponses: ApiResponse<PluginFormPayload>[] = yield all(
       [...pluginIdFormsToFetch].map((id) =>