From 26137b7858f738eccc891334dcce25baa035778a Mon Sep 17 00:00:00 2001
From: Ayush Pahwa <ayush@appsmith.com>
Date: Wed, 24 May 2023 16:16:14 +0700
Subject: [PATCH] fix: reconnect modal and viewmode of g sheets plugin (#23674)

Fixes a bug raised for the reconnect modal of g sheets.

#### PR fixes following issue(s)
Fixes #

#### Media

#### Type of change

- Bug fix (non-breaking change which fixes an issue)

## Testing

#### How Has This Been Tested?

- [x] Manual
- [x] Jest
- [x] Cypress

#### Test Plan

#### Issues raised during DP testing


## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---
 .../pages/Editor/DataSourceEditor/index.tsx   | 51 ++++++++++---------
 .../Editor/SaaSEditor/DatasourceForm.tsx      | 10 ++--
 .../common/datasourceAuth/AuthMessage.tsx     |  3 +-
 3 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
index 20bba563f3..9d077cf1d9 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
@@ -453,7 +453,6 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
       formConfig,
       formData,
       formName,
-      history,
       isFormDirty,
       isInsideReconnectModal,
       isSaving,
@@ -492,29 +491,6 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
         </>
       );
     }
-    // for saas form
-    if (pluginType === "SAAS") {
-      // todo check if we can remove the flag here
-      if (isInsideReconnectModal) {
-        return (
-          <DatasourceSaasForm
-            datasourceId={datasourceId}
-            hiddenHeader
-            isInsideReconnectModal={isInsideReconnectModal}
-            pageId={pageId}
-            pluginPackageName={pluginPackageName}
-          />
-        );
-      }
-      history.push(
-        saasEditorDatasourceIdURL({
-          pageId,
-          pluginPackageName,
-          datasourceId,
-        }),
-      );
-      return null;
-    }
 
     // Default to DB Editor Form
     return (
@@ -567,14 +543,17 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
       datasourceId,
       deleteTempDSFromDraft,
       formData,
+      history,
       isDeleting,
       isInsideReconnectModal,
       isNewDatasource,
       isPluginAuthorized,
       isSaving,
+      pageId,
       pluginId,
       pluginImage,
       pluginName,
+      pluginPackageName,
       pluginType,
       setDatasourceViewMode,
       showDebugger,
@@ -586,6 +565,30 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
       return <EntityNotFoundPane />;
     }
 
+    // for saas form
+    if (pluginType === "SAAS") {
+      // todo check if we can remove the flag here
+      if (isInsideReconnectModal) {
+        return (
+          <DatasourceSaasForm
+            datasourceId={datasourceId}
+            hiddenHeader
+            isInsideReconnectModal={isInsideReconnectModal}
+            pageId={pageId}
+            pluginPackageName={pluginPackageName}
+          />
+        );
+      }
+      history.push(
+        saasEditorDatasourceIdURL({
+          pageId,
+          pluginPackageName,
+          datasourceId,
+        }),
+      );
+      return null;
+    }
+
     return (
       <Form
         className="t--json-to-form-wrapper"
diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
index 06c35fbcbe..9a21e147b0 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
@@ -414,7 +414,7 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                 e.preventDefault();
               }}
             >
-              {(!viewMode || createFlow) && (
+              {(!viewMode || createFlow || isInsideReconnectModal) && (
                 <>
                   {/* This adds information banner when creating google sheets datasource,
               this info banner explains why appsmith requires permissions from users google account */}
@@ -425,9 +425,6 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                       datasource={datasource}
                       description={googleSheetsInfoMessage}
                       pageId={pageId}
-                      style={{
-                        paddingTop: "24px",
-                      }}
                     />
                   ) : null}
                   {/* This adds error banner for google sheets datasource if the datasource is unauthorised */}
@@ -440,7 +437,7 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                       description={authErrorMessage}
                       pageId={pageId}
                       style={{
-                        paddingTop: "24px",
+                        marginTop: "16px",
                       }}
                     />
                   ) : null}
@@ -450,10 +447,11 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                   {""}
                 </>
               )}
-              {viewMode && (
+              {viewMode && !isInsideReconnectModal && (
                 <ViewModeWrapper>
                   {datasource && isGoogleSheetPlugin && !isPluginAuthorized ? (
                     <AuthMessage
+                      actionType="authorize"
                       datasource={datasource}
                       description={authErrorMessage}
                       pageId={pageId}
diff --git a/app/client/src/pages/common/datasourceAuth/AuthMessage.tsx b/app/client/src/pages/common/datasourceAuth/AuthMessage.tsx
index 5b02185326..e2c45c7e66 100644
--- a/app/client/src/pages/common/datasourceAuth/AuthMessage.tsx
+++ b/app/client/src/pages/common/datasourceAuth/AuthMessage.tsx
@@ -13,16 +13,15 @@ import {
   toggleShowGlobalSearchModal,
 } from "actions/globalSearchActions";
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import { createMessage } from "design-system-old/build/constants/messages";
 import {
   GOOGLE_SHEETS_AUTHORIZE_DATASOURCE,
   GOOGLE_SHEETS_LEARN_MORE,
+  createMessage,
 } from "@appsmith/constants/messages";
 
 const StyledAuthMessage = styled.div`
   width: fit-content;
   margin-bottom: var(--ads-v2-spaces-4);
-  margin-top: var(--ads-v2-spaces-7);
 `;
 
 type AuthMessageProps = {