From 48685a850d0fa2aa0c246e2ec3f0e290573f129c Mon Sep 17 00:00:00 2001
From: Daniel <dodanieloluwadare@gmail.com>
Date: Wed, 23 Mar 2022 13:30:38 +0100
Subject: [PATCH] fix: blank screen in datasource view mode (#12145)

---
 app/client/cypress/fixtures/datasources.json                 | 3 ++-
 .../Datasources/AuthenticatedApiDatasource_spec.js           | 5 +++++
 app/client/cypress/locators/DatasourcesEditor.json           | 2 +-
 app/client/cypress/support/commands.js                       | 5 +++++
 app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx      | 5 +++--
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/client/cypress/fixtures/datasources.json b/app/client/cypress/fixtures/datasources.json
index cd7de82f95..8c92bd6cbe 100644
--- a/app/client/cypress/fixtures/datasources.json
+++ b/app/client/cypress/fixtures/datasources.json
@@ -44,5 +44,6 @@
     "mockDatabaseName": "fakeapi",
     "mockDatabaseUsername": "fakeapi",
     "mockDatabasePassword": "LimitedAccess123#",
-    "readonly":"readonly"
+    "readonly":"readonly",
+    "authenticatedApiUrl": "https://fakeapi.com"
 }
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/AuthenticatedApiDatasource_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/AuthenticatedApiDatasource_spec.js
index 4656a7682b..9dfcaa9bc0 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/AuthenticatedApiDatasource_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/AuthenticatedApiDatasource_spec.js
@@ -1,4 +1,5 @@
 const apiwidget = require("../../../../locators/apiWidgetslocator.json");
+const datasourceFormData = require("../../../../fixtures/datasources.json");
 
 describe("Authenticated API Datasource", function() {
   it("Can create New Authentication API datasource", function() {
@@ -9,5 +10,9 @@ describe("Authenticated API Datasource", function() {
       "response.body.responseMeta.status",
       201,
     );
+    cy.fillAuthenticatedAPIForm();
+    cy.saveDatasource();
+    const URL = datasourceFormData["authenticatedApiUrl"];
+    cy.contains(URL);
   });
 });
diff --git a/app/client/cypress/locators/DatasourcesEditor.json b/app/client/cypress/locators/DatasourcesEditor.json
index f16ca6f5b3..359fd3988f 100644
--- a/app/client/cypress/locators/DatasourcesEditor.json
+++ b/app/client/cypress/locators/DatasourcesEditor.json
@@ -6,7 +6,7 @@
   "username": "input[name='datasourceConfiguration.authentication.username']",
   "password": "input[name='datasourceConfiguration.authentication.password']",
   "authenticationAuthtype": "[data-cy=datasourceConfiguration\\.authentication\\.authType]",
-  "url": "input[name='datasourceConfiguration.url']",
+  "url": "input[name='url']",
   "MongoDB": ".t--plugin-name:contains('MongoDB')",
   "RESTAPI": ".t--plugin-name:contains('REST API')",
   "PostgreSQL": ".t--plugin-name:contains('PostgreSQL')",
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 84d03bf579..f6e86fdc80 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -2323,6 +2323,11 @@ Cypress.Commands.add(
   },
 );
 
+Cypress.Commands.add("fillAuthenticatedAPIForm", () => {
+  const URL = datasourceFormData["authenticatedApiUrl"];
+  cy.get(datasourceEditor.url).type(URL);
+});
+
 Cypress.Commands.add(
   "fillPostgresDatasourceForm",
   (shouldAddTrailingSpaces = false) => {
diff --git a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
index 1945a3cba8..37abb809fa 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
@@ -89,11 +89,12 @@ class DatasourceDBEditor extends JSONtoForm<Props> {
   };
 
   render() {
-    const { formConfig } = this.props;
+    const { formConfig, viewMode } = this.props;
 
     // make sure this redux form has been initialized before rendering anything.
     // the initialized prop below comes from redux-form.
-    if (!this.props.initialized) {
+    // The viewMode condition is added to allow the conditons only run on the editMode
+    if (!this.props.initialized && !viewMode) {
       return null;
     }