fix: blank screen in datasource view mode (#12145)

app/client/cypress/fixtures/datasources.json

@@ -44,5 +44,6 @@
     "mockDatabaseName": "fakeapi",
     "mockDatabaseUsername": "fakeapi",
     "mockDatabasePassword": "LimitedAccess123#",
-    "readonly":"readonly"
+    "readonly":"readonly",
+    "authenticatedApiUrl": "https://fakeapi.com"
 }

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);
   });
 });

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')",

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) => {

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;
     }