Feat/add query flow (#1146)

* Add datasource connected page

* Default to show connected screen in datasource editor

* Update UI

* Fixes

- Change text from connected to saved
- Show key with empty values if there are no values
- After creating a new datasource go to edit mode

* Stop calling test on save

* Fix tests

* Fix test

* Dummy commit

* Always be in view mode unless clicked on edit mode

* Fixes

- Update datasource connected page for rest api datasource
- Fix empty array values not resetting

* Fix create new api crashing

- While creating new datasource show form in edit mode

* Fix tests

app/client/cypress/integration/Smoke_TestSuite/Binding/Widget_loading_spec.js

@@ -58,7 +58,6 @@ describe("Binding the multiple widgets and validating default data", function()
     );
   });
 
-
   it("Input widget test with default value update with query data", function() {
     cy.SearchEntityandOpen("Input1");
     cy.get(widgetsPage.defaultInput).type(testdata.defaultInputQuery);

app/client/cypress/integration/Smoke_TestSuite/Datasources/MongoDatasource_spec.js

@@ -1,5 +1,4 @@
 const datasource = require("../../../locators/DatasourcesEditor.json");
-let pageid;
 
 describe("Create, test, save then delete a mongo datasource", function() {
   it("Create, test, save then delete a mongo datasource", function() {

app/client/cypress/integration/Smoke_TestSuite/Datasources/PostgresDatasource_spec.js

@@ -1,11 +1,38 @@
 const datasource = require("../../../locators/DatasourcesEditor.json");
+const queryEditor = require("../../../locators/QueryEditor.json");
 
-describe("Create, test, save then delete a postgres datasource", function() {
+let datasourceName;
+
+describe("Postgres datasource test cases", function() {
   it("Create, test, save then delete a postgres datasource", function() {
     cy.NavigateToDatasourceEditor();
     cy.get(datasource.PostgreSQL).click();
     cy.getPluginFormsAndCreateDatasource();
     cy.fillPostgresDatasourceForm();
-    cy.testSaveDeleteDatasource();
+    cy.get("@createDatasource").then(httpResponse => {
+      datasourceName = httpResponse.response.body.data.name;
+    });
+    cy.testSaveDatasource();
+  });
+
+  it("Create a new query from the datasource editor", function() {
+    cy.saveDatasource();
+    cy.get(datasource.createQuerty).click();
+    cy.wait("@createNewApi").should(
+      "have.nested.property",
+      "response.body.responseMeta.status",
+      201,
+    );
+
+    cy.get(queryEditor.deleteQuery).click();
+    cy.wait("@deleteAction").should(
+      "have.nested.property",
+      "response.body.responseMeta.status",
+      200,
+    );
+
+    cy.GlobalSearchEntity(`${datasourceName}`);
+    cy.get(`.t--entity-name:contains(${datasourceName})`).click();
+    cy.deleteDataSource();
   });
 });

app/client/cypress/integration/Smoke_TestSuite/DisplayWidgets/Table_spec.js

@@ -224,7 +224,6 @@ describe("Table Widget Functionality", function() {
       cy.get(publish.canvas)
         .first()
         .click();
-
     });
   });
 

app/client/cypress/integration/Smoke_TestSuite/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js

@@ -86,6 +86,7 @@ describe("Entity explorer tests related to copy query", function() {
       cy.log("sliced id :" + updatedName);
       cy.EditEntityNameByDoubleClick(datasourceName, updatedName);
       cy.SearchEntityandOpen(updatedName);
+      cy.get(datasource.editDatasource).click();
       cy.testSaveDatasource();
       cy.hoverAndClick();
       cy.get(apiwidget.delete).click({ force: true });

app/client/cypress/integration/Smoke_TestSuite/ExplorerTests/Entity_Explorer_Datasource_Structure_spec.js

@@ -50,6 +50,7 @@ describe("Entity explorer datasource structure", function() {
       "response.body.responseMeta.status",
       200,
     );
+
     cy.deletePostgresDatasource(datasourceName);
   });
 

app/client/cypress/integration/Smoke_TestSuite/QueryPane/MongoDatasource_spec.js

@@ -44,6 +44,8 @@ describe("Create a query with a mongo datasource, run, save and then delete the
 
       cy.get(`.t--entity-name:contains(${datasourceName})`).click();
     });
+
+    cy.get(datasource.editDatasource).click();
     cy.get(".t--delete-datasource").click();
     cy.wait("@deleteDatasource").should(
       "have.nested.property",

app/client/cypress/integration/Smoke_TestSuite/QueryPane/PostgreDatasource_spec.js

@@ -50,6 +50,7 @@ describe("Create a query with a postgres datasource, run, save and then delete t
   it("Deletes a datasource", () => {
     cy.NavigateToDatasourceEditor();
     cy.get(`.t--entity-name:contains(${datasourceName})`).click();
+    cy.get(datasource.editDatasource).click();
 
     cy.get(".t--delete-datasource").click();
     cy.wait("@deleteDatasource").should(

app/client/cypress/locators/DatasourcesEditor.json

@@ -14,5 +14,7 @@
   "sectionAuthentication": "[data-cy=section-Authentication]",
   "sectionSSL": "[data-cy=section-SSL\\ \\(optional\\)]",
   "addDatasourceEntity": ".plugins .t--entity-add-btn",
-  "PostgresEntity": ".t--entity-name:contains(PostgreSQL)"
+  "PostgresEntity": ".t--entity-name:contains(PostgreSQL)",
+  "createQuerty": ".t--create-query",
+  "editDatasource": ".t--edit-datasource"
 }

app/client/cypress/support/commands.js

@@ -1315,6 +1315,8 @@ Cypress.Commands.add("testSaveDeleteDatasource", () => {
     200,
   );
 
+  cy.get(datasourceEditor.editDatasource).click();
+
   cy.get(".t--delete-datasource").click();
   cy.wait("@deleteDatasource").should(
     "have.nested.property",
@@ -1360,6 +1362,7 @@ Cypress.Commands.add("saveDatasource", () => {
 
 Cypress.Commands.add("testSaveDatasource", () => {
   cy.saveDatasource();
+  cy.get(datasourceEditor.editDatasource).click();
   cy.testDatasource();
 });
 
@@ -1420,7 +1423,7 @@ Cypress.Commands.add("createPostgresDatasource", () => {
 Cypress.Commands.add("deletePostgresDatasource", datasourceName => {
   cy.NavigateToDatasourceEditor();
   cy.get(`.t--entity-name:contains(${datasourceName})`).click();
-
+  cy.get(datasourceEditor.editDatasource).click();
   cy.get(".t--delete-datasource").click();
   cy.wait("@deleteDatasource").should(
     "have.nested.property",

app/client/src/actions/datasourceActions.ts

@@ -80,6 +80,16 @@ export const deleteDatasource = (payload: Partial<Datasource>) => {
   };
 };
 
+export const setDatsourceEditorMode = (payload: {
+  id: string;
+  viewMode: boolean;
+}) => {
+  return {
+    type: ReduxActionTypes.SET_DATASOURCE_EDITOR_MODE,
+    payload,
+  };
+};
+
 export const fetchDatasources = () => {
   return {
     type: ReduxActionTypes.FETCH_DATASOURCES_INIT,

app/client/src/api/DatasourcesApi.ts

@@ -2,6 +2,7 @@ import API from "./Api";
 import { GenericApiResponse } from "./ApiResponses";
 import { AxiosPromise } from "axios";
 import { DEFAULT_TEST_DATA_SOURCE_TIMEOUT_MS } from "constants/ApiConstants";
+import { Property } from "entities/Action";
 
 interface DatasourceAuthentication {
   authType?: string;
@@ -45,7 +46,7 @@ export interface Datasource {
     url: string;
     authentication?: DatasourceAuthentication;
     properties?: Record<string, string>;
-    headers?: Record<string, string>;
+    headers?: Property[];
     databaseName?: string;
   };
   invalids?: string[];

app/client/src/constants/ReduxActionConstants.tsx

@@ -63,6 +63,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   UPDATE_ACTION_INIT: "UPDATE_ACTION_INIT",
   UPDATE_ACTION_SUCCESS: "UPDATE_ACTION_SUCCESS",
   DELETE_ACTION_INIT: "DELETE_ACTION_INIT",
+  SET_DATASOURCE_EDITOR_MODE: "SET_DATASOURCE_EDITOR_MODE",
   DELETE_ACTION_SUCCESS: "DELETE_ACTION_SUCCESS",
   SHOW_RUN_ACTION_CONFIRM_MODAL: "SHOW_RUN_ACTION_CONFIRM_MODAL",
   CANCEL_RUN_ACTION_CONFIRM_MODAL: "CANCEL_RUN_ACTION_CONFIRM_MODAL",