diff --git a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
index a65240f1ce..1fbfa1d61b 100644
--- a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
+++ b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { datasourceService, authenticationService, pluginsService, globalDatasourceService } from '@/_services';
+import { datasourceService, pluginsService, globalDatasourceService } from '@/_services';
 import cx from 'classnames';
 import { Modal, Button, Tab, Row, Col, ListGroup } from 'react-bootstrap';
 import { toast } from 'react-hot-toast';
@@ -175,7 +175,13 @@ class DataSourceManagerComponent extends React.Component {
       if (selectedDataSource.id) {
         this.setState({ isSaving: true });
         service
-          .save(selectedDataSource.id, name, parsedOptions, appId, currentEnvironment)
+          .save({
+            id: selectedDataSource.id,
+            name,
+            options: parsedOptions,
+            app_id: appId,
+            environment_id: currentEnvironment,
+          })
           .then(() => {
             this.setState({ isSaving: false });
             this.hideModal();
@@ -194,7 +200,15 @@ class DataSourceManagerComponent extends React.Component {
       } else {
         this.setState({ isSaving: true });
         service
-          .create(pluginId, name, kind, parsedOptions, appId, appVersionId, scope)
+          .create({
+            plugin_id: pluginId,
+            name,
+            kind,
+            options: parsedOptions,
+            app_id: appId,
+            app_version_id: appVersionId,
+            scope,
+          })
           .then((data) => {
             this.setState({ isSaving: false });
             this.hideModal();
diff --git a/frontend/src/_services/datasource.service.js b/frontend/src/_services/datasource.service.js
index 3d1a9af07a..b6c6743d1d 100644
--- a/frontend/src/_services/datasource.service.js
+++ b/frontend/src/_services/datasource.service.js
@@ -17,7 +17,7 @@ function getAll(appVersionId) {
   return fetch(`${config.apiUrl}/data_sources?` + searchParams, requestOptions).then(handleResponse);
 }
 
-function create(plugin_id, name, kind, options, app_id, app_version_id) {
+function create({ plugin_id, name, kind, options, app_id, app_version_id }) {
   const body = {
     plugin_id,
     name,
@@ -31,7 +31,7 @@ function create(plugin_id, name, kind, options, app_id, app_version_id) {
   return fetch(`${config.apiUrl}/data_sources`, requestOptions).then(handleResponse);
 }
 
-function save(id, name, options, app_id) {
+function save({ id, name, options, app_id }) {
   const body = {
     name,
     options,
diff --git a/frontend/src/_services/globalDatasource.service.js b/frontend/src/_services/globalDatasource.service.js
index eb0f32bf02..9a4573bdd2 100644
--- a/frontend/src/_services/globalDatasource.service.js
+++ b/frontend/src/_services/globalDatasource.service.js
@@ -14,7 +14,7 @@ function getAll() {
   return fetch(`${config.apiUrl}/v2/data_sources`, requestOptions).then(handleResponse);
 }
 
-function create(plugin_id, name, kind, options, app_id, app_version_id, scope) {
+function create({ plugin_id, name, kind, options, scope }) {
   const body = {
     plugin_id,
     name,
@@ -27,7 +27,7 @@ function create(plugin_id, name, kind, options, app_id, app_version_id, scope) {
   return fetch(`${config.apiUrl}/v2/data_sources`, requestOptions).then(handleResponse);
 }
 
-function save(id, name, options, appId, environment_id) {
+function save({ id, name, options, environment_id }) {
   const body = {
     name,
     options,