From 85db5cc96561d1aa9a9603d3044a4ae7462f0b95 Mon Sep 17 00:00:00 2001
From: Sangeeth Sivan <74818788+berzerkeer@users.noreply.github.com>
Date: Fri, 2 Dec 2022 18:05:18 +0530
Subject: [PATCH] fix: update permission driven ctas to handle auto save update
 changes (#18609)

---
 .../SaveOrDiscardDatasourceModal.tsx          | 22 +++++++++++++++++--
 .../pages/Editor/DataSourceEditor/index.tsx   |  2 ++
 .../Editor/SaaSEditor/DatasourceForm.tsx      |  2 ++
 .../src/pages/common/datasourceAuth/index.tsx | 10 ++++++---
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/client/src/pages/Editor/DataSourceEditor/SaveOrDiscardDatasourceModal.tsx b/app/client/src/pages/Editor/DataSourceEditor/SaveOrDiscardDatasourceModal.tsx
index a4a2714ee0..bd8d05fdb9 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/SaveOrDiscardDatasourceModal.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/SaveOrDiscardDatasourceModal.tsx
@@ -10,16 +10,33 @@ import {
   DialogComponent as Dialog,
   Size,
 } from "design-system";
+import { TEMP_DATASOURCE_ID } from "constants/Datasource";
+import { hasManageDatasourcePermission } from "@appsmith/utils/permissionHelpers";
 
 interface SaveOrDiscardModalProps {
   isOpen: boolean;
   onDiscard(): void;
   onSave?(): void;
   onClose(): void;
+  datasourceId: string;
+  datasourcePermissions: string[];
 }
 
 function SaveOrDiscardDatasourceModal(props: SaveOrDiscardModalProps) {
-  const { isOpen, onClose, onDiscard, onSave } = props;
+  const {
+    datasourceId,
+    datasourcePermissions,
+    isOpen,
+    onClose,
+    onDiscard,
+    onSave,
+  } = props;
+
+  const createMode = datasourceId === TEMP_DATASOURCE_ID;
+  const canManageDatasources = hasManageDatasourcePermission(
+    datasourcePermissions,
+  );
+  const disableSaveButton = !createMode && !canManageDatasources;
 
   return (
     <Dialog
@@ -43,7 +60,8 @@ function SaveOrDiscardDatasourceModal(props: SaveOrDiscardModalProps) {
           />
           <Button
             category={Category.primary}
-            onClick={onSave}
+            disabled={disableSaveButton}
+            onClick={!disableSaveButton && onSave}
             size={Size.medium}
             text="SAVE"
           />
diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
index 1849ba4ac6..1ba8718761 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
@@ -420,6 +420,8 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
   renderSaveDisacardModal() {
     return (
       <SaveOrDiscardDatasourceModal
+        datasourceId={this.props.datasourceId}
+        datasourcePermissions={this.props.datasource?.userPermissions || []}
         isOpen={this.state.showDialog}
         onClose={this.closeDialog}
         onDiscard={this.onDiscard}
diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
index b28102da84..3962c0607e 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
@@ -318,6 +318,8 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
           )}
         </form>
         <SaveOrDiscardDatasourceModal
+          datasourceId={datasourceId}
+          datasourcePermissions={datasource?.userPermissions || []}
           isOpen={this.state.showDialog}
           onClose={this.closeDialog}
           onDiscard={this.onDiscard}
diff --git a/app/client/src/pages/common/datasourceAuth/index.tsx b/app/client/src/pages/common/datasourceAuth/index.tsx
index 7a75676845..488ec9efdd 100644
--- a/app/client/src/pages/common/datasourceAuth/index.tsx
+++ b/app/client/src/pages/common/datasourceAuth/index.tsx
@@ -264,13 +264,15 @@ function DatasourceAuth({
     }
   };
 
+  const createMode = datasourceId === TEMP_DATASOURCE_ID;
+
   const datasourceButtonsComponentMap = (buttonType: string): JSX.Element => {
     return {
       [DatasourceButtonType.DELETE]: (
         <ActionButton
           category={Category.primary}
           className="t--delete-datasource"
-          disabled={!canDeleteDatasource || datasourceId === TEMP_DATASOURCE_ID}
+          disabled={createMode || !canDeleteDatasource}
           key={buttonType}
           loading={isDeleting}
           onClick={() => {
@@ -303,7 +305,9 @@ function DatasourceAuth({
         <ActionButton
           category={Category.primary}
           className="t--save-datasource"
-          disabled={isInvalid || !isFormDirty || !canManageDatasource}
+          disabled={
+            isInvalid || !isFormDirty || (!createMode && !canManageDatasource)
+          }
           filled
           key={buttonType}
           loading={isSaving}
@@ -318,7 +322,7 @@ function DatasourceAuth({
         <StyledButton
           category={Category.primary}
           className="t--save-datasource"
-          disabled={isInvalid || !canManageDatasource}
+          disabled={isInvalid || (!createMode && !canManageDatasource)}
           filled
           fluidWidth
           isLoading={isSaving}