From 0a1307c508a9b71ffaccc5390f8a0a1fc18ea4e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Csneha122=E2=80=9D?= <“sneha@appsmith.com”>
Date: Mon, 7 Aug 2023 17:26:02 +0530
Subject: [PATCH] fix: gsheet misleading error banner issues fixed (#25969)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR fixes following 2 issues with gsheet datasource creation:
- As soon as I click on Save and Authorise, I see error on the
datasource config page which says Datasource is not authorised
- Once the datasource is authorised and I come back to appsmith page, I
see Authentication error message banner for a split second before it
goes to correct state.

https://github.com/appsmithorg/appsmith/assets/30018882/2c8ac0e5-3818-4980-8a10-3bd87e3aed76

Fixes #25889

---------

Co-authored-by: “sneha122” <“sneha@appsmith.com”>
---
 .../Editor/SaaSEditor/DatasourceForm.tsx      | 24 +++++++++++++++++--
 app/client/src/utils/editorContextUtils.ts    | 12 ++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
index 579a1d2baf..0d8115d91a 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { get, isEqual, isNil, map, memoize, omit } from "lodash";
 import { DATASOURCE_SAAS_FORM } from "@appsmith/constants/forms";
 import type { Datasource } from "entities/Datasource";
+import { AuthenticationStatus } from "entities/Datasource";
 import { ActionType } from "entities/Datasource";
 import type { InjectedFormProps } from "redux-form";
 import {
@@ -125,6 +126,7 @@ interface StateProps extends JSONtoFormProps {
   requiredFields: Record<string, ControlProps>;
   configDetails: Record<string, string>;
   isEnabledForGSheetSchema: boolean;
+  isPluginAuthFailed: boolean;
 }
 interface DatasourceFormFunctions {
   discardTempDatasource: () => void;
@@ -483,6 +485,7 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
       isDeleting,
       isEnabledForGSheetSchema,
       isInsideReconnectModal,
+      isPluginAuthFailed,
       isPluginAuthorized,
       isSaving,
       isTesting,
@@ -575,7 +578,7 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                       {/* This adds error banner for google sheets datasource if the datasource is unauthorised */}
                       {datasource &&
                       isGoogleSheetPlugin &&
-                      !isPluginAuthorized &&
+                      isPluginAuthFailed &&
                       datasourceId !== TEMP_DATASOURCE_ID ? (
                         <AuthMessage
                           datasource={datasource}
@@ -594,7 +597,7 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
                       <ViewModeWrapper>
                         {datasource &&
                         isGoogleSheetPlugin &&
-                        !isPluginAuthorized ? (
+                        isPluginAuthFailed ? (
                           <AuthMessage
                             actionType={ActionType.AUTHORIZE}
                             datasource={datasource}
@@ -752,6 +755,22 @@ const mapStateToProps = (state: AppState, props: any) => {
         )
       : false;
 
+  // Auth could fail because of either:
+  // Failure to give permissions / Failure to select files / Failure on server
+  const isPluginAuthFailed =
+    !!plugin && !!formData
+      ? isDatasourceAuthorizedForQueryCreation(
+          formData,
+          plugin,
+          getCurrentEditingEnvID(),
+          [
+            AuthenticationStatus.FAILURE,
+            AuthenticationStatus.FAILURE_ACCESS_DENIED,
+            AuthenticationStatus.FAILURE_FILE_NOT_SELECTED,
+          ],
+        )
+      : false;
+
   return {
     datasource,
     datasourceButtonConfiguration,
@@ -788,6 +807,7 @@ const mapStateToProps = (state: AppState, props: any) => {
     showDebugger,
     scopeValue,
     isEnabledForGSheetSchema,
+    isPluginAuthFailed,
   };
 };
 
diff --git a/app/client/src/utils/editorContextUtils.ts b/app/client/src/utils/editorContextUtils.ts
index 99673f4140..d2ac009fd1 100644
--- a/app/client/src/utils/editorContextUtils.ts
+++ b/app/client/src/utils/editorContextUtils.ts
@@ -98,12 +98,14 @@ export function getPropertyControlFocusElement(
  * @param datasource Datasource
  * @param plugin Plugin
  * @param currentEnvironment string
+ * @param validStatusArr Array<AuthenticationStatus>
  * @returns boolean
  */
 export function isDatasourceAuthorizedForQueryCreation(
   datasource: Datasource,
   plugin: Plugin,
   currentEnvironment = getCurrentEnvironment(),
+  validStatusArr: Array<AuthenticationStatus> = [AuthenticationStatus.SUCCESS],
 ): boolean {
   if (!datasource || !datasource.hasOwnProperty("datasourceStorages"))
     return false;
@@ -128,12 +130,14 @@ export function isDatasourceAuthorizedForQueryCreation(
   );
 
   if (isGoogleSheetPlugin) {
+    const authStatus = get(
+      datasourceStorage,
+      "datasourceConfiguration.authentication.authenticationStatus",
+    ) as AuthenticationStatus;
     const isAuthorized =
       authType === AuthType.OAUTH2 &&
-      get(
-        datasourceStorage,
-        "datasourceConfiguration.authentication.authenticationStatus",
-      ) === AuthenticationStatus.SUCCESS;
+      !!authStatus &&
+      validStatusArr.includes(authStatus);
     return isAuthorized;
   }